/* Paleta de cores */
:root {
    --color-negro: #1d1d1b;
    --color-azul: #3488a3;
    --color-fondo: #efeee9;
    --color-azul-claro: #6fafc2;
}

/* Tipografías */

@font-face {
    font-family: 'EBGaramond';
    src: url('../fonts/EBGaramond-VariableFont_wght.woff2') format('woff2');
    font-weight: 100 700;  /* rango de peso soportado */
    font-style: normal;
}

@font-face {
    font-family: 'EBGaramond';
    src: url('../fonts/EBGaramond-Italic-VariableFont_wght.woff2') format('woff2');
    font-weight: 100 700;
    font-style: italic;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter-VariableFont_opsz\,wght.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
}

body {
    text-align: center;
    margin: 0;
    padding: 0;
    background-color: var(--color-fondo);
}

body::before {
    content: '';
    position: absolute;

    transform: translate(-50%, -20%);

    width: clamp(500px, 80vw, 1000px);
    height: clamp(500px, 80vw, 1000px);

    background-image: url('../images/xesta-gravado.svg');
    background-repeat: no-repeat;
    background-size: contain;

    opacity: 0.8;

    pointer-events: none;
    z-index: 0;
}

main, header {
    position: relative;
    z-index: 1;
}

main {
    width: 50%;
    margin: 0 auto;
    padding: 20px;
    text-align: center;
}

header {
    padding: 20px 0;
}

.logo {
    pointer-events: none;
    max-width: 35%;
}

.logo-pequeno {
    padding: 50px;
    pointer-events: none;
    max-width: 8%;
}

section {
    padding: 20px 20px;
}

h2 {
    font-family: 'Inter', serif;
    text-transform: uppercase;
    font-size: 300%;
    font-style: normal;
    font-weight: 900;

    color: var(--color-azul);
}

p {
    font-family: 'EBGaramond', serif;
    font-size: 200%;
    font-style: normal;

    color: var(--color-negro);
}

a {
    font-family: 'EBGaramond', serif;
    font-weight: 900;
    font-size: 200%;
    display: inline-block;
    margin-top: 10px;
    color: var(--color-azul-claro);
    text-decoration: none;
    text-decoration:underline;
}