:root { --cafe: #3b2418; --crema: #f6ecdc; --oro: #d6a448; --tinta: #2a1d16; --suave: #fbf6ee; --linea: #e4d6bf;
  --bien: #2f7d4f; --mal: #b3402a; }
* { box-sizing: border-box; }
body { margin: 0; font-family: 'Segoe UI', system-ui, -apple-system, Arial, sans-serif; color: var(--tinta);
  background: var(--suave); line-height: 1.5; }
a { color: var(--cafe); }
header { background: var(--cafe); color: var(--crema); padding: 14px 16px; }
header .in, main, footer .in { max-width: 860px; margin: 0 auto; }
header .in { display: flex; align-items: center; gap: 12px; }
header img { width: 48px; height: 48px; border-radius: 8px; }
header a { color: var(--crema); text-decoration: none; font-family: Georgia, serif; font-size: 1.5rem; font-weight: 700; }
header span { color: var(--oro); font-size: .78rem; letter-spacing: .18em; display: block; }
main { padding: 24px 16px 40px; }
.hero { text-align: center; padding: 28px 0 8px; }
.hero h1 { font-family: Georgia, serif; font-size: 2.1rem; margin: 0 0 8px; color: var(--cafe); }
.hero p { font-size: 1.08rem; margin: 0 auto 18px; max-width: 620px; }
.boton { display: inline-block; background: var(--oro); color: var(--cafe); font-weight: 700; padding: 11px 20px;
  border-radius: 999px; text-decoration: none; margin: 4px; }
.boton.claro { background: transparent; border: 2px solid var(--cafe); }
.rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin: 18px 0; }
.tarjeta { background: #fff; border: 1px solid var(--linea); border-radius: 14px; padding: 16px; }
.tarjeta h3 { margin: 0 0 6px; font-family: Georgia, serif; color: var(--cafe); }
.tarjeta p { margin: 0 0 12px; font-size: .95rem; }
h2 { font-family: Georgia, serif; color: var(--cafe); margin-top: 34px; }
.q { background: #fff; border: 1px solid var(--linea); border-radius: 14px; padding: 14px 16px; margin: 0 0 14px; }
.q p { margin: 0 0 8px; font-weight: 600; overflow-wrap: anywhere; }
.q label { display: block; padding: 7px 10px; border-radius: 8px; cursor: pointer; }
.q label:hover { background: var(--suave); }
.q input { margin-right: 8px; }
.q .sol { display: none; margin-top: 8px; font-size: .92rem; border-left: 4px solid var(--oro); padding: 6px 10px;
  background: var(--suave); }
.corregido .q .sol { display: block; }
.corregido label.bien { background: #e3f3e8; color: var(--bien); font-weight: 600; }
.corregido label.mal { background: #f8e3de; color: var(--mal); }
#nota { font-size: 1.2rem; font-weight: 700; text-align: center; margin: 18px 0; min-height: 1.5em; }
.aviso { font-size: .85rem; color: #6b5a4c; }
footer { background: var(--cafe); color: var(--crema); padding: 18px 16px; font-size: .88rem; }
footer a { color: var(--oro); }
@media (max-width: 520px) { .hero h1 { font-size: 1.6rem; } }