@font-face {
    font-family: 'MbCorpoSText-Bold';
    src: url('/fonts/MBCorpoSText-Bold.woff') format('woff'),
        url('/fonts/MBCorpoSText-Bold.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'MBCorpoSTitle-Regular';
    src: url('/fonts/MBCorpoSTitle-Regular.woff') format('woff'),
        url('/fonts/MBCorpoSTitle-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* Fuentes importadas*/
@font-face {
    font-display: swap;
    font-family: "MBCorpo Title";
    font-style: normal;
    font-weight: 400;
    src: url(https://assets.oneweb.mercedes-benz.com/plugin/workbench/fonts/2.1.0/WOFF2/MBCorpoATitleCond-Regular-Web.woff2) format("woff2")
}

@font-face {
    font-display: swap;
    font-family: "MBCorpo Text";
    font-style: normal;
    font-weight: 400;
    src: url(https://assets.oneweb.mercedes-benz.com/plugin/workbench/fonts/2.1.0/WOFF2/MBCorpoSText-Regular-Web.woff2) format("woff2")
}

@font-face {
    font-display: swap;
    font-family: "MBCorpo Text Bold";
    font-style: normal;
    font-weight: 700;
    src: url(https://assets.oneweb.mercedes-benz.com/plugin/workbench/fonts/2.1.0/WOFF2/MBCorpoSText-Bold-Web.woff2) format("woff2")
}

@font-face {
    font-family: 'MBCorpoSTitle-Regular-Web';
    src: url('/fonts/MBCorpoSTitle-Regular-Web.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

html {
  scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: 'MBCorpoSTitle-Regular', Arial, sans-serif;
    font-size: 18px;
    overflow-x: hidden;
    background-color: #ffffff;
}

h1, h2, h3 {
    font-family: 'MBCorpo Title', Arial, sans-serif;
}

/************************** Inicio Encabezado */

.baner-header {
    background-image: url('/images/cabecera-mercedes-nuevo-cla.png');
    background-size: cover;
    background-position: center;
    height: 700px;
    background-color: rgba(0, 0, 0, 0.3); /* negro al 20% */
    background-blend-mode: multiply;       /* mezcla imagen + color */
}

/* Para móviles */
@media (max-width: 768px) {
    .baner-header {
        background-position: 10% center;
        background-size: cover;
        height: 90dvh;
    }
}

.header .logo-container {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #000000;
}

/************************** Fin Encabezado */





/************************** INICIO FORMULARIO DE REGISTRO ******************/
.registration-form {
    display: block;
    position: relative;
    text-align: left;
    background-color: black;
    color: white;
}

.registration-form label {
    display: block;
    margin-bottom: 5px;
    padding: 5px;
}

.registration-form input,
.registration-form textarea,
.registration-form select {
    width: 100%;
    height: 42px;
    padding: 10px 20px;
    margin-bottom: 10px;
    border: none;
    border-radius: 3px;
    background-color: rgba(98, 98, 98, 0.3);
    color: white;
}

.registration-form select option {
    background-color: rgba(98, 98, 98, 0.3);
    color: black;
}

.registration-form input:focus,
.registration-form textarea:focus,
.registration-form select:focus {
    outline: none;
    background-color: rgba(207, 207, 207, 0.2);
    border: none;
    box-shadow: 0 0 1px rgba(164, 164, 164, 0.528);
    color: white;
}

.registration-form input::placeholder {
    color: rgb(255, 255, 255);
}

/* Ajustes para el tamaño del checkbox */
.checkbox-large {
    margin-right: 9px;
    width: 24px !important;
    height: 24px !important;
    cursor: pointer;
}

/* Aseguramos que el input de tipo "date" ocupe el 100% en todos los dispositivos */
.registration-form input[type="date"] {
    width: 100%;
    height: 42px;
    padding: 10px 20px;
    border-radius: 3px;
    background-color: rgba(98, 98, 98, 0.3);
    color: white;
    box-sizing: border-box;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.registration-form input[type="date"]:focus {
    outline: none;
    background-color: rgba(207, 207, 207, 0.2);
    box-shadow: 0 0 1px rgba(164, 164, 164, 0.528);
}

/* Estilos para cambiar el icono del calendario en navegadores basados en WebKit */
.registration-form input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(1); /* Cambia el color del ícono a blanco */
}

/* Ajustes para el texto del label */
.label-large {
    font-size: 16px;
    cursor: pointer;
}
/************************** FIN FORMULARIO DE REGISTRO *********************/