:root { color-scheme: light dark; --tinta: #1c2430; --suave: #5a6675; --fondo: #fbfaf7; --acento: #0d6b4f; --borde: #cfd6dc; }
@media (prefers-color-scheme: dark) { :root { --tinta: #e8ecef; --suave: #a6b0ba; --fondo: #14181d; --acento: #4cc49d; --borde: #38424c; } }
* { box-sizing: border-box; }
body { margin: 0; padding: 2rem 1rem; background: var(--fondo); color: var(--tinta); font: 17px/1.6 system-ui, sans-serif; }
main, footer { max-width: 44rem; margin: auto; }
h1 { font-size: 2rem; line-height: 1.2; margin: 0 0 .5rem; }
h2 { font-size: 1.15rem; margin: 1.75rem 0 .25rem; }
.lema, .plan, footer { color: var(--suave); }
.zona { display: grid; gap: .25rem; place-items: center; text-align: center; margin: 1.5rem 0 1rem; padding: 3rem 1rem; border: 2px dashed var(--borde); border-radius: 12px; cursor: pointer; }
.zona.activa, .zona:hover { border-color: var(--acento); }
.zona input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.zona:focus-within { outline: 2px solid var(--acento); outline-offset: 2px; }
.boton, button { display: inline-block; padding: .6rem 1rem; border: 0; border-radius: 8px; background: var(--acento); color: var(--fondo); font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; }
#form-licencia { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
#licencia { flex: 1 1 14rem; padding: .55rem; border: 1px solid var(--borde); border-radius: 8px; background: transparent; color: inherit; font: inherit; }
.ejemplos button { padding: .25rem .6rem; font-size: .9em; }
#errores { color: #b3361e; overflow-wrap: anywhere; }
footer { margin-top: 2.5rem; font-size: .9rem; }
a { color: var(--acento); }