@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400;1,9..144,500&family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
    --negro: #050303;
    --grafito: #171513;
    --blanco: #ffffff;
    --hueso: #efece6;
    --hueso-2: #e4e0d7;
    --niebla: #8f8b83;
    --linea-clara: rgba(255, 255, 255, 0.14);
    --linea-oscura: rgba(5, 3, 3, 0.14);

    --serif: 'Fraunces', 'Georgia', serif;
    --sans: 'Manrope', sans-serif;

    --radio: 2px;
    --contenedor: 1280px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

body {
    font-family: var(--sans);
    background-color: var(--blanco);
    color: var(--negro);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

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

button {
    font-family: inherit;
    background: none;
    border: none;
    cursor: pointer;
}

a {
    color: inherit;
}

input,
select,
textarea {
    font-family: inherit;
    font-size: 16px;
}

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

.contenedor {
    width: 100%;
    max-width: var(--contenedor);
    margin: 0 auto;
    padding: 0 48px;
}

.solo-lectura {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
}

.italica-firma {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
}

@media (max-width: 720px) {
    .contenedor {
        padding: 0 22px;
    }
}