/* Estilos generales */

/* ---------- Generales ---------- */

[hidden] {
    display: none !important;
}

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

html,
body {
    margin: 0;
}

body {
    background-color: var(--fondo);
    background-image:
        linear-gradient(var(--cuadricula) 1px, transparent 1px),
        linear-gradient(90deg, var(--cuadricula) 1px, transparent 1px);
    background-size: 36px 36px;
    color: var(--tinta);
    font-family: var(--letra);
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    transition: background-color 0.3s, color 0.3s;
}

a {
    color: inherit;
}

button,
input,
textarea {
    font: inherit;
    color: inherit;
}

button {
    cursor: pointer;
}

p,
h1,
h2,
h3 {
    margin: 0;
}

img {
    display: block;
    max-width: 100%;
}

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

/* ---------- Clases de ayuda ---------- */

.mono {
    font-family: var(--letra-codigo);
}

.serif {
    font-family: var(--letra-titulos);
    font-weight: 400;
}

.suave {
    color: var(--texto-suave);
}

.pequeno {
    font-size: 12px;
}

.etiqueta {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ---------- Fondos de color suave ---------- */

.color-terracota {
    background: var(--terracota-claro);
}

.color-mostaza {
    background: var(--mostaza-claro);
}

.color-melocoton {
    background: var(--melocoton-claro);
}

.color-lavanda {
    background: var(--lavanda-claro);
}

.color-tinta {
    background: var(--tinta);
    color: var(--ventana);
}

/* ---------- Cursor que parpadea ---------- */

.cursor {
    display: inline-block;
    width: 3px;
    height: 0.8em;
    margin-left: 6px;
    vertical-align: -0.05em;
    background: var(--mostaza);
    animation: parpadear 1.1s steps(1) infinite;
}

@keyframes parpadear {
    50% { opacity: 0; }
}