/* Tipografías */

@font-face {
    font-family: 'Roboto Condensed';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/RobotoCondensed-VariableFont_wght.woff2') format('woff2');
}

@font-face {
    font-family: 'Akhand Soft';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/AkhandSoft-Bold.woff2') format('woff2');
}


/* Reset */

* {
    margin: 0;
    padding: 0;
}

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

body {
    min-height: 100dvh;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    text-wrap: balance;
}

p {
    text-wrap: pretty;
}

a {
    color: inherit;
}

input,
textarea,
select,
button {
    appearance: none;           
    font-family: inherit;
    font-weight: inherit;
    font-size: inherit;
    color: inherit;
    border: inherit;
    border-radius: inherit;
    background-color: inherit;
}

button {
    cursor: pointer;
}

img,
video,
svg {
    max-width: 100%;
    height: auto;
}


/* HTML */

body {
    padding: var(--layout-sizer);
    margin-inline: auto;
    align-content: center;
    max-width: 24rem;
    font-family: 'Roboto Condensed', serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
    font-size: 1rem;
    color: var(--black);
    background-color: var(--white);
}


/* Helpers */

.sr-only {
    position: absolute;
    margin: -1px;
    width: 1px;
    height: 1px;
    white-space: nowrap;
    border-width: 0;
    clip: rect(0, 0, 0, 0);
}

.margin-block {
    margin-block: var(--layout-sizer);
}

.margin-block-larger {
    margin-block: var(--layout-sizer-larger);
}

.unstyle-list {
    list-style: none;
}


/* Fieldset */

.fieldset {
    padding: var(--layout-sizer-larger);
    border: 1px solid hsl(var(--white-h), var(--white-s), 90%);
    border-radius: .5rem;

    legend {
        float: left;
        width: 100%;
        margin: 0 0 var(--layout-sizer-larger) 0;
        padding: 0;
        text-align: center;
        font-family: 'Akhand Soft', sans-serif;
        font-weight: 700;
        font-size: 2rem;
        color: hsl(var(--black-h), var(--black-s), 40%);

        & + * {
            clear: left;
        }
    }
}


/* Botones */

.button {
    padding: .5em .75em;
    text-decoration: none;
    text-align: center;
    font-size: 1rem;
    color: var(--white);
    border-width: 1px;
    border-style: solid;
    border-color: hsl(var(--black-h), var(--black-s), 40%);
    border-radius: .25em;
    background-color: hsl(var(--black-h), var(--black-s), 40%);
    transition: color .25s, border-color .25s, background-color .25s;

    &:hover,
    &:active {
        border-color: var(--primary);
        background-color: var(--primary);
    }

    &.button--outline {
        color: hsl(var(--black-h), var(--black-s), 40%);
        background-color: transparent;

        &:hover,
        &:active {
            color: var(--primary);
        }
    }

    &.button--full-width {
        flex-grow: 1;
    }
}


/* Rejillas personalizadas */

.custom-grid {
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: repeat(10, 1fr);
    gap: var(--layout-sizer);

    & > * {
        grid-column: var(--position);
    }
}


/* Acciones */