/* CitroenType - ExtraLight */
@font-face {
    font-family: 'CitroenType';
    src: url('../fonts/CitroenType-ExtraLight.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
}
@font-face {
    font-family: 'CitroenType';
    src: url('../fonts/CitroenType-ExtraLightItalic.ttf') format('truetype');
    font-weight: 200;
    font-style: italic;
}

/* CitroenType - Light */
@font-face {
    font-family: 'CitroenType';
    src: url('../fonts/CitroenType-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}
@font-face {
    font-family: 'CitroenType';
    src: url('../fonts/CitroenType-LightItalic.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
}

/* CitroenType - Regular */
@font-face {
    font-family: 'CitroenType';
    src: url('../fonts/CitroenType-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'CitroenType';
    src: url('../fonts/CitroenType-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
}

/* CitroenType - Medium */
@font-face {
    font-family: 'CitroenType';
    src: url('../fonts/CitroenType-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: 'CitroenType';
    src: url('../fonts/CitroenType-MediumItalic.ttf') format('truetype');
    font-weight: 500;
    font-style: italic;
}

/* CitroenType - Bold */
@font-face {
    font-family: 'CitroenType';
    src: url('../fonts/CitroenType-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: 'CitroenType';
    src: url('../fonts/CitroenType-BoldItalic.ttf') format('truetype');
    font-weight: 700;
    font-style: italic;
}

/* CitroenType - Black */
@font-face {
    font-family: 'CitroenType';
    src: url('../fonts/CitroenType-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
}
@font-face {
    font-family: 'CitroenType';
    src: url('../fonts/CitroenType-BlackItalic.ttf') format('truetype');
    font-weight: 900;
    font-style: italic;
}

html {
    font-size: 22px; /* 1rem = 22px */
}

:root {
    --font-small: 0.91rem;    /* 30px → 20px escalado */
    --font-medium: 1rem;      /* 33px → 22px base */
    --font-large: 1.364rem;   /* 45px → 30px escalado */
    --font-xlarge: 1.515rem;  /* 50px → 33.33px escalado */
}


/* Ejemplos de aplicación */
h1 { font-weight: 900; }     /* Black */
h2 { font-weight: 700; }     /* Bold */
p  { font-weight: 400; }     /* Regular */
p.light {font-weight: 300;}
p.italic { font-style: italic; }
a { color: inherit; font-weight: 400;}


.small-text {font-size: var(--font-small);}
.medium-text {font-size: var(--font-medium);}
.large-text {font-size: var(--font-large);}
.xlarge-text {font-size: var(--font-xlarge);}
.font-medium{font-weight: 500;}

body {
    min-height: 100vh;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: url(../img/bg.jpg);
    background-size: cover;
    color: #fff;
    font-family: 'CitroenType', sans-serif;
    font-size: var(--font-medium);
}

/* Contenedor principal centrado */
.landing-container {
    text-align: center;
}

/* Logo */
.landing-logo {
    width: 40%;
    max-width: 330px;
}

/* Bloques de texto transparentes */
.text-block {
    padding: 1.5rem 2rem;
}

/* Botón ejemplo */
.btn-primary-custom {
    background-color: #ff7e5f;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 50px;
    color: #fff;
    font-weight: bold;
}

.btn-primary-custom:hover {
    background-color: #feb47b;
    color: #fff;
}

/* Opcional: ajustar tamaño de los textos en móviles */
@media (max-width: 576px) {

    html {font-size: 16px !important;}

}