@font-face {
    font-family: 'Metropolitan Parliament';
    src: url('/wp-content/uploads/puv-fonts-web/metropolitan-regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Metropolitan Parliament';
    src: url('/wp-content/uploads/puv-fonts-web/metropolitan-semibold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Metropolitan Parliament';
    src: url('/wp-content/uploads/puv-fonts-web/metropolitan-bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Velocia';
    src: url('/wp-content/uploads/puv-fonts-web/velocia-regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Velocia';
    src: url('/wp-content/uploads/puv-fonts-web/velocia-bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    --puv-blue: #003B73;
    --puv-navy: #071B33;
    --puv-yellow: #F6C343;
    --puv-red: #C62828;

    --puv-white: #F7F7F4;
    --puv-grey: #E7E9ED;
    --puv-text: #171A1F;
    --puv-muted: #5E6670;

    --puv-font-display: 'Metropolitan Parliament', Georgia, serif;
    --puv-font-ui: 'Velocia', Inter, Arial, sans-serif;

    --puv-content-width: 1240px;
    --puv-radius: 10px;
    --puv-radius-lg: 18px;

    --puv-space-xs: 8px;
    --puv-space-sm: 16px;
    --puv-space-md: 32px;
    --puv-space-lg: 64px;
    --puv-space-xl: 96px;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    color: var(--puv-text);
    background: var(--puv-white);
    font-family: var(--puv-font-ui);
    font-size: 16px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin-top: 0;
    color: var(--puv-navy);
    font-family: var(--puv-font-display);
    line-height: 1.08;
    letter-spacing: -0.02em;
}

h1 {
    font-size: clamp(2.8rem, 7vw, 6rem);
    font-weight: 700;
}

h2 {
    font-size: clamp(2rem, 4vw, 3.75rem);
    font-weight: 700;
}

h3 {
    font-size: clamp(1.5rem, 2.5vw, 2.4rem);
    font-weight: 600;
}

p {
    margin-top: 0;
}

a {
    color: var(--puv-blue);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

a:hover {
    color: var(--puv-red);
}

button,
input,
textarea,
select,
.elementor-button {
    font-family: var(--puv-font-ui);
}

.elementor-button {
    border-radius: var(--puv-radius);
    font-weight: 700;
    letter-spacing: .01em;
}

::selection {
    background: var(--puv-yellow);
    color: var(--puv-navy);
}

/* Utilidades que usaremos al construir con Elementor */

.puv-display {
    font-family: var(--puv-font-display);
}

.puv-ui {
    font-family: var(--puv-font-ui);
}

.puv-bg-navy {
    background: var(--puv-navy);
    color: var(--puv-white);
}

.puv-bg-blue {
    background: var(--puv-blue);
    color: #fff;
}

.puv-accent-yellow {
    color: var(--puv-yellow);
}

.puv-accent-red {
    color: var(--puv-red);
}

.puv-kicker {
    font-family: var(--puv-font-ui);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
}