:root {
  --papel: #F2EBDD; --ficha: #FFF9EF; --tinta: #202B35; --tinta-2: #655F57;
  --petroleo: #285B66; --linea: rgba(32, 43, 53, .12);
}
@media (prefers-color-scheme: dark) {
  :root { --papel: #171D23; --ficha: #242D35; --tinta: #F4EBDD; --tinta-2: #B8B1A6;
          --petroleo: #8ABCC3; --linea: rgba(244, 235, 221, .12); }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--papel); color: var(--tinta);
       font: 17px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
main { max-width: 680px; margin: 0 auto; padding: 48px 16px 64px; }
h1, h2, h3 { font-family: "New York", Georgia, "Times New Roman", serif; line-height: 1.2; }
h1 { font-size: 40px; margin: 0 0 4px; }
h2 { font-size: 24px; margin: 40px 0 8px; }
h3 { font-size: 18px; margin: 24px 0 4px; }
.sello { display: inline-block; font: 700 12px/1 Georgia, serif; letter-spacing: .12em;
         text-transform: uppercase; color: var(--petroleo); border: 2px solid var(--petroleo);
         border-radius: 3px; padding: 6px 10px; transform: rotate(-3deg); margin-bottom: 16px; }
.ficha { background: var(--ficha); border: 1px solid var(--linea); border-radius: 12px;
         padding: 8px 24px 16px; margin-top: 24px; }
.secundario { color: var(--tinta-2); }
a { color: var(--petroleo); }
nav { display: flex; gap: 16px; margin-top: 8px; font-size: 15px; }
footer { margin-top: 48px; font-size: 14px; color: var(--tinta-2); }