@font-face { font-family: Figtree; src: url(/fonts/Figtree_400Regular.ttf); font-weight: 400; font-display: swap; }
@font-face { font-family: Figtree; src: url(/fonts/Figtree_700Bold.ttf); font-weight: 700; font-display: swap; }
@font-face { font-family: Figtree; src: url(/fonts/Figtree_800ExtraBold.ttf); font-weight: 800; font-display: swap; }
:root { --verde: #176B63; --verde-profundo: #124B48; --creme: #F5EDE1; --superficie: #FFFBF5; --borda: #E2D6C4; --texto-suave: #486661; }
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--creme); color: var(--verde-profundo); font-family: Figtree, system-ui, sans-serif; }
main { max-width: 520px; margin: 0 auto; padding: 40px 16px 56px; display: flex; flex-direction: column; gap: 20px; }
.logo { display: block; height: 72px; margin: 0 auto 8px; }
h1 { font-weight: 800; font-size: 28px; line-height: 1.2; margin: 0; text-align: center; }
p { font-size: 17px; line-height: 1.5; margin: 0; color: var(--texto-suave); }
.center { text-align: center; }
.card { background: var(--superficie); border: 1px solid var(--borda); border-radius: 16px; padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.code { font-family: ui-monospace, Menlo, monospace; font-size: 15px; word-break: break-all; color: var(--verde-profundo); background: var(--creme); border-radius: 10px; padding: 12px; }
.btn { display: block; text-align: center; text-decoration: none; font-weight: 700; font-size: 17px; border-radius: 14px; padding: 15px 16px; min-height: 48px; border: 2px solid var(--verde); cursor: pointer; font-family: inherit; }
.btn-primary { background: var(--verde); color: #fff; }
.btn-secondary { background: var(--superficie); color: var(--verde); }
.btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }
.small { font-size: 14px; }