:root {
    color-scheme: light dark;
    --acento: #5E42E3;
}

body {
    margin: 0;
    font: 17px/1.55 -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
}

main {
    max-width: 680px;
    margin: 0 auto;
    padding: 32px 20px 64px;
}

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

h1 {
    line-height: 1.2;
}

h2 {
    margin-top: 2em;
}

.fecha {
    opacity: 0.6;
}

.hero {
    text-align: center;
}

.icono {
    border-radius: 22.37%;
    box-shadow: 0 8px 24px rgb(0 0 0 / 0.18);
}

.lema {
    font-size: 1.4em;
    font-weight: 600;
    color: var(--acento);
}

.funciones li {
    margin-bottom: 0.6em;
}

footer {
    margin-top: 3em;
    opacity: 0.8;
}

@media (prefers-color-scheme: dark) {
    :root {
        --acento: #9C8BF5;
    }
}