:root {
    --navy: #0b2545;
    --sun: #ffd23f;
    --ink: #0b2545;
    --muted: #4f6379;
    --paper: #eaf0f7;
    --card: #fff;
    --line: #d3deea;
    --accent: #2563eb;
    --accent-ink: #fff;
    --ok: #12805c;
    --bad: #c62828;
    --r: 12px;
    --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --serif: ui-serif, Georgia, "Times New Roman", serif
}

@media (prefers-color-scheme:dark) {
    :root {
        --ink: #e8eef7;
        --muted: #9db0c5;
        --paper: #08131f;
        --card: #102235;
        --line: #23374d;
        --accent: #5b9bff;
        --accent-ink: #06182e;
        --ok: #3ddc97;
        --bad: #ff8a80
    }
}

*,
*::before,
*::after {
    box-sizing: border-box
}

[hidden] {
    display: none !important
}

html {
    scroll-behavior: smooth
}

body {
    margin: 0;
    font: 1rem/1.6 var(--font);
    color: var(--ink);
    background: var(--paper)
}

.wrap {
    width: min(100% - 2rem, 46rem);
    margin-inline: auto
}

.sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0)
}

.skip {
    position: absolute;
    left: -999px
}

.skip:focus {
    left: 1rem;
    top: 1rem;
    background: var(--sun);
    color: var(--navy);
    padding: .5rem 1rem;
    z-index: 9
}

:focus-visible {
    outline: 3px solid var(--sun);
    outline-offset: 2px
}

.quiz :focus-visible,
.info :focus-visible {
    outline-color: var(--accent)
}

/* Cabecera + hero: banda azul marino con patrón de burbujas de hoja de respuestas */
.site-header,
.hero {
    background-color: var(--navy);
    color: #fff
}

.hero {
    background-image: radial-gradient(circle, rgba(255, 255, 255, .14) 0 5px, transparent 6px);
    background-size: 34px 34px;
    padding-block: 1.5rem 5rem
}

.bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding-block: .9rem
}

.brand {
    display: flex;
    align-items: center;
    gap: .55rem;
    font: 700 1.3rem var(--serif);
    color: #fff;
    text-decoration: none
}

.dot {
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 50%;
    border: 3px solid var(--sun);
    background: radial-gradient(var(--sun) 45%, transparent 50%)
}

nav a {
    color: #c5d3e6;
    text-decoration: none;
    margin-left: 1.25rem;
    font-size: .95rem
}

nav a:hover {
    color: var(--sun)
}

.hero .wrap {
    padding-top: clamp(1.5rem, 5vw, 3rem)
}

h1 {
    font: 700 clamp(2rem, 7vw, 3.4rem)/1.1 var(--serif);
    margin: 0 0 1rem;
    max-width: 18ch;
    color: #fff
}

.lead {
    color: #c5d3e6;
    font-size: 1.15rem;
    margin: 0 0 1.25rem;
    max-width: 46ch
}

.perks {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    list-style: none;
    margin: 0;
    padding: 0
}

.perks li {
    padding: .3rem .8rem;
    border-radius: 99px;
    background: rgba(255, 210, 63, .16);
    color: var(--sun);
    font-size: .9rem;
    font-weight: 600
}

.perks li::before {
    content: "✓ "
}

h2 {
    font: 700 1.5rem/1.25 var(--serif);
    margin: 0 0 .75rem
}

h3 {
    font: 600 1.25rem/1.4 var(--serif);
    margin: .5rem 0 1rem
}

/* Tarjeta del test, superpuesta a la banda */
.quiz {
    position: relative;
    margin: -3.5rem auto 1.5rem;
    background: var(--card);
    border: 1px solid var(--line);
    border-top: 5px solid var(--sun);
    border-radius: var(--r);
    padding: clamp(1.1rem, 4vw, 2rem);
    box-shadow: 0 12px 32px rgba(11, 37, 69, .18)
}

.ads-on .quiz {
    margin-top: 1.5rem
}

.label {
    display: block;
    font-weight: 700;
    margin: 1.25rem 0 .5rem
}

.label:first-child {
    margin-top: 0
}

.chips {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem
}

.chip {
    font: inherit;
    padding: .55rem 1rem;
    border: 2px solid var(--line);
    border-radius: 99px;
    background: transparent;
    color: var(--ink);
    cursor: pointer;
    transition: border-color .15s
}

.chip:hover {
    border-color: var(--accent)
}

.chip[aria-pressed=true] {
    border-color: var(--navy);
    background: var(--navy);
    color: #fff
}

@media (prefers-color-scheme:dark) {
    .chip[aria-pressed=true] {
        background: var(--accent);
        border-color: var(--accent);
        color: var(--accent-ink)
    }
}

select,
input[type=number] {
    font: inherit;
    padding: .55rem .75rem;
    border: 2px solid var(--line);
    border-radius: var(--r);
    background: var(--card);
    color: var(--ink);
    min-width: 8rem
}

.hint {
    margin-left: .75rem;
    color: var(--muted);
    font-size: .9rem
}

.quick {
    margin-top: .6rem
}

.quick .chip {
    padding: .25rem .75rem;
    font-size: .9rem
}

.btn {
    font: 700 1rem var(--font);
    margin-top: 1.5rem;
    display: block;
    padding: .85rem 1.75rem;
    border: 0;
    border-radius: var(--r);
    background: var(--accent);
    color: var(--accent-ink);
    cursor: pointer;
    box-shadow: 0 3px 0 rgba(0, 0, 0, .2)
}

.btn:hover {
    filter: brightness(1.1)
}

.btn:active {
    transform: translateY(2px);
    box-shadow: none
}

.opts {
    border: 0;
    padding: 0;
    margin: 0
}

.opts legend {
    padding: 0
}

.opts label {
    display: flex;
    gap: .55rem;
    align-items: center;
    margin: .35rem 0;
    cursor: pointer
}

input[type=radio] {
    accent-color: var(--accent);
    width: 1.1rem;
    height: 1.1rem
}

.q {
    border: 2px solid var(--line);
    border-radius: var(--r);
    padding: 1rem;
    margin-bottom: 1rem
}

.q h3 {
    margin: 0 0 .9rem;
    font-size: 1.1rem
}

.q .num {
    color: var(--accent)
}

.q.ok {
    border-color: var(--ok)
}

.q.bad {
    border-color: var(--bad)
}

.q.part {
    border-color: #d19a00
}

.q.none {
    border-color: var(--muted)
}

.q.ok .feedback strong {
    color: var(--ok)
}

.q.bad .feedback strong {
    color: var(--bad)
}

.q.part .feedback strong {
    color: #d19a00
}

.q .feedback {
    min-height: 0
}

.opt.sel {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 12%, transparent)
}

.opt.sel::before {
    background: var(--accent);
    color: var(--accent-ink)
}

.multi .opt::before {
    border-radius: 6px
}

.multi .opt.sel::before {
    content: "✓"
}

.multi-hint {
    margin: -.4rem 0 .8rem;
    color: var(--muted);
    font-size: .9rem
}

.opt.picked {
    font-weight: 600
}

.opt.picked::after {
    content: "Tu respuesta";
    margin-left: auto;
    padding-left: .5rem;
    font-size: .72rem;
    font-weight: 600;
    color: var(--muted);
    white-space: nowrap
}

.q>.btn {
    margin-top: .9rem;
    padding: .6rem 1.2rem
}

.pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    flex-wrap: wrap
}

.pager span {
    color: var(--muted);
    font-size: .9rem;
    text-align: center
}

.btn.ghost {
    background: transparent;
    color: var(--accent);
    border: 2px solid var(--accent);
    box-shadow: none;
    padding: .55rem 1rem;
    margin-top: 0
}

.btn:disabled {
    opacity: .4;
    cursor: not-allowed
}

.actions {
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
    margin-top: 1.25rem
}

.actions .btn {
    margin-top: 0
}

.summary {
    text-align: center;
    padding: 1rem;
    border-radius: var(--r);
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    margin-bottom: 1.25rem
}

.summary:focus {
    outline: none
}

.summary p {
    margin: 0
}

.score small {
    font-size: 1.25rem;
    color: var(--muted)
}

.progress {
    margin-bottom: 1rem
}

.progress {
    display: flex;
    align-items: center;
    gap: .75rem;
    color: var(--muted);
    font-size: .9rem;
    font-weight: 600
}

.track {
    flex: 1;
    height: 8px;
    background: var(--line);
    border-radius: 4px;
    overflow: hidden
}

.track i {
    display: block;
    height: 100%;
    width: 0;
    background: var(--accent);
    border-radius: 4px;
    transition: width .3s
}

.options {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .65rem;
    counter-reset: o
}

.opt {
    width: 100%;
    display: flex;
    gap: .8rem;
    align-items: flex-start;
    text-align: left;
    font: inherit;
    padding: .8rem;
    border: 2px solid var(--line);
    border-radius: var(--r);
    background: transparent;
    color: var(--ink);
    cursor: pointer;
    transition: border-color .15s, background .15s
}

.opt::before {
    counter-increment: o;
    content: counter(o, upper-alpha);
    flex: none;
    width: 1.8rem;
    height: 1.8rem;
    border: 2px solid var(--accent);
    color: var(--accent);
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: .8rem;
    font-weight: 800
}

.opt:hover:not(:disabled) {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 8%, transparent)
}

.opt:disabled {
    cursor: default
}

.opt.ok {
    border-color: var(--ok);
    background: color-mix(in srgb, var(--ok) 14%, transparent)
}

.opt.ok::before {
    background: var(--ok);
    border-color: var(--ok);
    color: #fff
}

.opt.bad {
    border-color: var(--bad);
    background: color-mix(in srgb, var(--bad) 12%, transparent)
}

.opt.bad::before {
    background: var(--bad);
    border-color: var(--bad);
    color: #fff
}

.feedback {
    min-height: 1.5rem;
    margin-top: 1rem;
    color: var(--muted)
}

.feedback strong {
    color: var(--ink)
}

.score {
    font: 700 3.5rem/1 var(--serif);
    margin: 0 0 .5rem;
    color: var(--accent)
}

.review {
    padding-left: 1.2rem
}

.review li {
    margin-bottom: .7rem
}

.info {
    padding-block: 1.5rem
}

.info p {
    max-width: 62ch;
    color: var(--muted)
}

.info h2 {
    border-left: 5px solid var(--sun);
    padding-left: .75rem
}

details {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: .8rem 1rem;
    margin-bottom: .6rem
}

summary {
    cursor: pointer;
    font-weight: 700
}

sup,
sub {
    line-height: 0
}

.q h3,
.opt {
    overflow-wrap: anywhere
}

.opt .katex,
.q h3 .katex {
    font-size: 1.1em
}

.katex-display {
    margin: .6rem 0;
    overflow-x: auto;
    overflow-y: hidden
}

code {
    background: var(--line);
    padding: .1em .35em;
    border-radius: 4px
}

.ad-slot {
    display: none;
    width: min(100% - 2rem, 46rem);
    margin: 1.5rem auto
}

.ads-on .ad-slot {
    display: block;
    min-height: 100px
}

.site-footer {
    background: var(--navy);
    color: #c5d3e6;
    margin-top: 2.5rem;
    padding-block: 1.75rem;
    font-size: .9rem
}

@media (max-width:480px) {
    .pager span {
        order: -1;
        width: 100%
    }

    .pager .btn {
        flex: 1
    }

    nav a:nth-child(2) {
        display: none
    }

    .hero {
        padding-bottom: 4.5rem
    }
}

@media (prefers-reduced-motion:reduce) {
    * {
        transition: none !important;
        scroll-behavior: auto !important
    }
}
/* Preguntas de respuesta escrita */
.ans-label {
    display: block;
    font-weight: 700;
    margin-bottom: .4rem
}

.ans {
    width: 100%;
    font: inherit;
    padding: .65rem .8rem;
    border: 2px solid var(--line);
    border-radius: var(--r);
    background: var(--card);
    color: var(--ink)
}

.ans:disabled {
    opacity: 1;
    -webkit-text-fill-color: var(--ink)
}

.q.ok .ans {
    border-color: var(--ok)
}

.q.bad .ans {
    border-color: var(--bad)
}

.q.part .ans {
    border-color: #d19a00
}

.sol {
    font-weight: 700;
    color: var(--ok)
}

/* Bloques de código dentro de una pregunta */
.code {
    margin: .7rem 0 0;
    padding: .75rem .9rem;
    background: var(--line);
    border-radius: 8px;
    overflow-x: auto;
    font: 400 .88rem/1.5 ui-monospace, Menlo, Consolas, monospace;
    white-space: pre
}

/* Imagen dentro de una pregunta */
.qimg {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 0 1rem;
    border: 1px solid var(--line);
    border-radius: 8px
}

/* Contenido de una opción: texto y fórmulas fluyen en línea dentro de un único bloque */
.otxt {
    flex: 1;
    min-width: 0;
    text-align: justify;
}