:root {
    color-scheme: only light;
    --fondo: #f7f9fd;
    --superficie: #fff;
    --tinta: #162136;
    --texto-secundario: #53617a;
    --borde: #dce4f0;
    --acento: #244dc7;
    --acento-hover: #1d3faa;
    --acento-suave: #edf2ff;
    --fuente-mono: ui-monospace, "SFMono-Regular", Consolas, monospace;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    line-height: 1.5;
    background: var(--fondo);
    color: var(--tinta);
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }

.marco {
    width: min(68rem, calc(100% - clamp(2rem, 8vw, 6rem)));
    margin-inline: auto;
}

.barra { border-bottom: 1px solid var(--borde); background: var(--superficie); }
.marca {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem clamp(0.75rem, 2.5vw, 1.5rem);
    padding-block: 0.8rem;
}

.marca-uat, .marca-facultad {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.marca img { display: block; height: auto; }
.escudo-uat { width: clamp(2.45rem, 5vw, 3.5rem); }
.logotipo-uat { width: clamp(4.55rem, 8.5vw, 6.25rem); }

.marca-facultad {
    border-inline-start: 1px solid var(--borde);
    padding-inline-start: clamp(0.65rem, 2.5vw, 1.5rem);
    font-size: clamp(0.75rem, 1.3vw, 0.9rem);
    font-weight: 650;
    line-height: 1.2;
}

.marca-facultad img { width: clamp(1.65rem, 4vw, 2.25rem); }
.marca-facultad span { max-width: 16ch; }

@media (max-width: 360px) {
    .marca-facultad { border-inline-start: 0; padding-inline-start: 0; }
}

.titulo-pagina {
    margin: 0;
    font-size: clamp(2.35rem, 5.4vw, 4.25rem);
    font-weight: 650;
    line-height: 1.04;
    letter-spacing: -0.055em;
    text-wrap: balance;
}

.descripcion-pagina {
    max-width: 36ch;
    margin: 1.1rem 0 0;
    color: var(--texto-secundario);
    font-size: clamp(1rem, 1.6vw, 1.125rem);
}

.reloj-ronda {
    display: grid;
    width: fit-content;
    gap: 0.15rem;
    margin-block: 0.6rem;
    padding: 0.6rem 1rem;
    border: 1px solid var(--borde);
    border-radius: 12px;
    background: var(--acento-suave);
    color: var(--acento);
    text-align: center;
}

.reloj-ronda span { font-size: 0.86rem; font-weight: 650; }
.reloj-ronda strong { font-size: clamp(2rem, 6vw, 3rem); font-variant-numeric: tabular-nums; line-height: 1.05; }

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