@import url('https://fonts.cdnfonts.com/css/ford-antenna');

@font-face {
    font-family: 'Ford Antenna Medium';
    src: url('fonts/FordAntenna-Medium.otf') format('woff');
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

@font-face {
    font-family: 'Ford Antenna Regular';
    src: url('fonts/FordAntenna-Regular.otf') format('woff');
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

@font-face {
    font-family: 'Ford Antenna Light';
    src: url('fonts/FordAntenna-Light.otf') format('woff');
    font-style: normal;
    font-weight: 300;
}

@font-face {
    font-family: 'Ford Antenna Cond';
    src: url('fonts/FordAntennaCondensed-Med.otf') format('woff');
    font-style: normal;
    font-weight: 500;
}

/* Toda la web */
:root {
    /* Colores */
    /* Links */
    --links: rgba(66, 98, 255, 1);

    /* Header - footer */
    --header-footer: rgba(0, 20, 46, 1);

    /* Botones e íconos */
    --buttons-icons: rgba(2, 4, 24, 1);

    /* Color primario */
    --color-primary: rgba(0, 54, 78, 1);

    /* Fuentes */
    --fonts-icons: rgba(253, 253, 253, 1);
    --font-black: rgba(15, 18, 52, 1);
    --place-holder: rgba(150, 150, 150, 1);

    /* Input vacío */
    --empty-input: rgba(230, 230, 230, 1);

    /* Error */
    --error: rgba(185, 0, 0, 1);

    /* Bgd formulario contacto */
    --bgrd-contactform: rgba(233, 233, 233, 1);

    /* Background blanco web */
    --bgrd-whiteweb: rgba(247, 247, 247, 1);

    /* Modal glass stroke - gradiente */
    --glass-stroke: rgba(119, 119, 119, 0.6);

    /* Modal glass - solid */
    --glass-modal: rgba(255, 255, 255, 0.2);

    /* Header glass - solid */
    --glass-header: rgba(255, 255, 255, 0.1);

    /* Fuentes */
    /* Título 1 */
    --titulo1-fuente: 'Ford Antenna Medium';
    --titulo1-size: 32px;
    --titulo1-style: normal;
    --titulo1-weight: 500;
    --titulo1-lineheight: normal;

    /* Título 2 */
    --titulo2-fuente: 'Ford Antenna Medium';
    --titulo2-size: 40px;
    --titulo2-style: normal;
    --titulo2-weight: 500;
    --titulo2-lineheight: normal;

    /* Subtítulo 1 */
    --subtitulo1-fuente: 'Ford Antenna Light';
    --subtitulo1-size: 26px;
    --subtitulo1-style: normal;
    --subtitulo1-weight: 300;
    --subtitulo1-lineheight: normal;

    /* Subtítulo 2 */
    --subtitulo2-fuente: 'Ford Antenna Light';
    --subtitulo2-size: 18px;
    --subtitulo2-style: normal;
    --subtitulo2-weight: 300;
    --subtitulo2-lineheight: 160%;

    /* Texto */
    --texto-fuente: 'Ford Antenna Light';
    --texto-size: 16px;
    --texto-style: normal;
    --texto-weight: 300;
    --texto-lineheight: 160%;

    /* Placeholder */
    --placeholder-fuente: 'Open Sans', sans-serif;
    --placeholder-size: 16px;
    --placeholder-style: normal;
    --placeholder-weight: 600;
    --placeholder-lineheight: normal;


    /* Labels */
    --label-fuente: 'Ford Antenna Regular';
    --label-size: 14px;
    --label-style: normal;
    --label-weight: 400;
    --label-lineheight: normal;

    /* Input */
    --input-fuente: 'Open Sans', sans-serif;
    --input-size: 16px;
    --input-style: normal;
    --input-weight: 400;
    --input-lineheight: normal;
    --input-padding: 8px 16px;
    --input-minheight: 24px;
    --activo-boxshadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.25);

    /* Botones */
    --boton-family: 'Ford Antenna Cond';
    --boton-size: 16px;
    --boton-style: normal;
    --boton-weight: 500;
    --boton-lineheight: normal;
    --activo-opacity: 100%;
    --inactivo-opacity: 70%;
    --boton-padding: 8px 24px;
    --boton-radius: 5px;
    --boton-minwidth: 100px;
}

body {
    color: var(--font-black);
    font: var(--texto-style) var(--texto-weight) var(--texto-size) / var(--texto-lineheight) var(--texto-fuente);
    overflow-x: hidden;
    margin: 0;
    padding: 0;
    background-color: var(--bgrd-whiteweb);
}

/* Globales */

.parrafo-block {
    display: inline;
}

.container_pinasco {
    width: 90% !important;
    margin: 0 auto;
}

.wspContainer {
    display: flex;
    position: fixed;
    right: 25px;
    bottom: 10%;
    align-items: center;
    z-index: 1000;
    cursor: pointer;
}

.site-header {
    top: 0;
    height: 100px;
    width: 100%;
    z-index: 1000;
    padding: 2% 0;

    display: flex;
    justify-content: center;
    align-items: center;

    background-color: var(--glass-header);
    backdrop-filter: blur(2px);
    position: fixed;
    transition: background-color 0.5s ease;
}

.site-header.scrolled {
    background-color: var(--header-footer);
}

#intro {
    top: 0;
    width: 100%;
    height: auto;
    overflow: hidden;
    background-image: url("../images/intromb.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    position: relative;
}

nav {
    height: 56px;
    margin: 118px auto 0;

    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;

    border-radius: 40px;
    background: #00364E;

    position: relative;
    z-index: 20;
}

span#mbnavarrow {
    display: block;
    padding-top: 1%;
    cursor: pointer;
}

ul#mbnavul {
    visibility: hidden;
    margin: 0 auto;
    padding: 24px;
    width: 90%;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;

    border-radius: 0px 0px 15px 15px;
    box-shadow: -1px 4px 8px 1px rgba(255, 255, 255, 0.30);
    background-color: var(--color-primary);

    list-style-type: none;
    color: var(--fonts-icons);
    font-family: 'Ford Antenna Medium';
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;

    position: relative;
    z-index: 20;
}

.navwrap {
    width: 100%;
    height: 100%;

    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;

    padding-right: 5%;
}

.nav-button {
    border-radius: 40px;
    background: var(--bgrd-whiteweb);
    color: var(--font-black);
    font-family: 'Ford Antenna Cond';
    padding: 10px 16px;
    border: none;
    height: 100%;
    width: 50%;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    white-space: nowrap;
}

.nav_desktop {
    display: none;
}

nav li {
    color: var(--fonts-icons);
    font: var(--subtitulo2-style) var(--subtitulo2-weight) var(--subtitulo2-size) / var(--subtitulo2-lineheight) 'Ford Antenna Medium';
}

.soyPresionable {
    cursor: pointer;
}

.soyPresionable:hover {
    text-shadow: 2px grey;
}

.textointro {
    margin: 35px auto 40px;
    display: flex;
    text-align: left;
    width: 100%;

    position: relative;
    z-index: 20;
}

.mbintrotexto {
    width: 451px;
}

#h1-overlap {
    word-wrap: break-word;
    text-align: left;
    margin-bottom: 16px;
    color: var(--fonts-icons);
    font: var(--titulo2-style) var(--titulo2-weight) 32px / var(--titulo2-lineheight) var(--titulo2-fuente);
}

#p-overlap,
.parrafo-header {
    word-wrap: break-word;
    font-size: 20px;
    font-style: normal;
    font-weight: 300;
    line-height: 160%;
    color: var(--fonts-icons);
    margin: 0;
    font: var(--texto-style) var(--texto-weight) 20px / var(--texto-lineheight) var(--texto-fuente);
}

/* Galería */
#galeria {
    padding: 2% 0;
    text-align: center;
}

.h2-galeria {
    margin: 60px auto 8px;
    font: var(--titulo1-style) var(--titulo1-weight) var(--titulo1-size) / var(--titulo1-lineheight) var(--titulo1-fuente);
}

.h3-galeria {
    margin: 0 auto;
    font: var(--subtitulo1-style) var(--subtitulo1-weight) var(--subtitulo1-size) / var(--subtitulo1-lineheight) var(--subtitulo1-fuente);
}

.p-galeria {
    margin: 24px auto;
    font: var(--texto-style) var(--texto-weight) var(--texto-size) / var(--texto-lineheight) var(--texto-fuente);
}

.btn-galeria {
    width: auto;
    height: 48px;
    margin: 0 auto 40px;
    padding: 9px 24px;
    min-width: var(--boton-minwidth);
    font: var(--boton-style) var(--boton-weight) var(--boton-size) var(--boton-lineheight) var(--boton-family);
    color: var(--fonts-icons);
    border-radius: var(--boton-radius);
    border: 0px;
    background-color: var(--buttons-icons);
    text-align: center;
    cursor: pointer;
}

div#imggaleria {
    margin: 0 auto;
    width: 100%;
    height: 967px;
    background-image: url("../images/galeriamb.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* Sucursales */

#sucursales {
    text-align: center;
    height: fit-content;

    background-image: url(../images/bgsucursales.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.h2-sucursales {
    padding: 40px 0;
    margin: 0;
    font: var(--titulo1-style) var(--titulo1-weight) var(--titulo1-size) / var(--titulo1-lineheight) var(--titulo1-fuente);
}

.info-sucursales {
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: flex-start;
    gap: 24px;
}

.map {
    width: 60%;
    height: 472px;
    border-radius: 10px;
}

div#map {
    z-index: 1;
    width: 100%;
    margin-bottom: 24px;
}

.acordeones {
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.acordeon {
    border-radius: 5px;
    background-color: var(--fonts-icons);
    box-shadow: 4px 4px 2px rgba(0, 0, 0, 0.10);
    margin-bottom: 10px;
    width: 100%;
    margin: 0 auto;
}

.titulo-acordeon {
    background-color: var(--color-primary);
    color: var(--fonts-icons);
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    border-radius: 5px;
    padding: 3% 5%;

    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;

    cursor: pointer;
}

.titulo-acordeon h3 {
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    margin: 0;
}

.titulo-acordeon img {
    width: 32px;
    height: auto;
    transition: transform 0.3s ease-in-out;
}

.contenido-acordeon {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-in-out;
}

.acordeon.open .contenido-acordeon {
    max-height: 1000px;
    display: flex;
    flex-direction: column;
    justify-items: center;
    justify-content: flex-start;
    align-items: stretch;
    align-content: center;
    padding: 16px 24px 0;
}

.acordeon.activo .contenido-acordeon {
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.dato-acordeon {
    display: flex;
    flex-direction: row;
    justify-items: flex-start;
    gap: 8px;
    align-items: center;
}

.dato-acordeon p {
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-align: left;
}

.iconacordeon {
    width: 25px;
    height: auto;
}


.telephone {
    color: var(--links);
    text-decoration: none;
}

.mapa {
    width: 100%;
    height: auto;
}

/* Formulario */

#formulario {
    text-align: center;
    padding: 5% 0;
    background-color: var(--bgrd-contactform);
}

.h1-formulario {
    font: var(--titulo2-style) var(--titulo2-weight) var(--titulo2-size) / var(--titulo2-lineheight) var(--titulo2-fuente);
    margin: 52px auto 8px;
    width: 100%;
}

.h2-formulario {
    font: var(--subtitulo2-style) var(--subtitulo2-weight) var(--subtitulo2-size) / var(--subtitulo2-lineheight) var(--subtitulo2-fuente);
    margin: 0 auto 18px;
}

.form {
    margin: 0 auto;
    width: 100%;
}

.form-grid {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 16px;
}

.form-row {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 16px;
}

.input-label {
    flex: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
}

.input-label label {
    font: var(--label-style) var(--label-weight) var(--label-size) / var(--label-lineheight) var(--label-fuente);
    color: var(--font-black);
}

.input {
    width: 100%;
    height: 50px;
    padding: 8px 16px;
    background-color: var(--bgrd-whiteweb);
    border: none;
    font: var(--input-style) var(--input-weight) var(--input-size) / var(--input-lineheight) var(--input-fuente);
    color: var(--font-black);
}

.input-label input::placeholder {
    padding: var(--input-padding);
    font: var(--placeholder-style) var(--placeholder-weight) var(--placeholder-size) / var(--placeholder-lineheight) var(--placeholder-fuente);
    color: var(--place-holder);
}

.input.input-error,
textarea.input-error,
.inputmodal.input-error {
    border: 1px solid var(--error) !important;
    outline: none !important;
    background-color: var(--bgrd-whiteweb) !important;
}

small {
    font-family: 'Ford Antenna Regular';
    font-size: 10px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    color: var(--error);
}

.selectinput {
    width: 100%;
    height: 50px;
    background-color: var(--bgrd-whiteweb);
    border: none;
    padding: var(--input-padding);
    font: var(--input-style) var(--input-weight) var(--input-size) / var(--input-lineheight) var(--input-fuente);
    color: var(--font-black);
}

.selectinput option {
    appearance: none;
    height: 42px;
    font:
        var(--input-style) var(--input-weight) var(--input-size) / var(--input-lineheight) var(--input-fuente);
    color: var(--font-black);
    background-color: var(--fonts-icons);
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    border-radius: 0px 0px 4px 4px;
    border: none;
    padding: 40px;
}

.selectinput option:hover {
    background: rgba(4, 5, 20, 0.20);
}

.selectinput * {
    background-color: var(--fonts-icons);
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    border-radius: 0px 0px 4px 4px;
    border: none;
}

.message {
    margin: 16px auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
}

.message label {
    font: var(--label-style) var(--label-weight) var(--label-size) / var(--label-lineheight) var(--label-fuente);
}

.message textarea {
    width: 100%;
    height: 114px;

    background-color: var(--bgrd-whiteweb);
    border: none;

    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 8px 16px;

    font: var(--input-style) var(--input-weight) var(--input-size) / var(--input-lineheight) var(--input-fuente);
    color: var(--font-black);
}

.checkboxContainer {
    margin: 32px auto;
    width: 100%;
}

.checkbox-label {
    margin: 12px auto;

    display: flex;
    flex-direction: row;
    justify-content: left;
    align-items: center;
    gap: 8px;
}

.checkbox-label input {
    width: 20px;
    height: 20px;
}

.checkbox-label label {
    color: var(--font-black);
    font: var(--label-style) var(--label-weight) var(--label-size) / var(--label-lineheight) var(--label-fuente);

}

.TyC {
    color: var(--links);
    font:
        var(--input-style) var(--input-weight) var(--input-size) / var(--input-lineheight) var(--input-fuente);
    text-decoration-line: underline;

    cursor: pointer;
}

.submit {
    width: 100%;
    height: 50px;

    border-radius: var(--boton-radius);
    background: var(--buttons-icons);
    opacity: var(--inactivo-opacity);

    padding: var(--boton-padding);
    font: var(--boton-style) var(--boton-weight) var(--boton-size) var(--boton-lineheight) var(--boton-family);
    color: var(--fonts-icons);

    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-bottom: 47px;
}

.submit.active {
    background: var(--buttons-icons);
    opacity: var(--activo-opacity);
    cursor: pointer;
}

/* Autoscroll */
.autoscroll {
    width: 56px;
    height: 56px;
    display: flex;
    justify-content: center;
    align-content: center;
    position: absolute;
    z-index: 1000;
    top: -29%;
    right: 70px;
    cursor: pointer;


    border-radius: 5px 5px 0px 0px;
    background: var(--buttons-icons);
    box-shadow: 0px 0px 6px 6px rgba(0, 0, 0, 0.25);
}

/* FOOTER */
footer {
    background-color: var(--header-footer);
    color: var(--fonts-icons);
    height: 5%;
    padding: 32px 0;
    position: relative;
}

.footerrow {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
}

.footercol {
    display: flex;
    flex-direction: column;
    justify-content: left;
    align-items: flex-start;
    align-content: flex-start;
}

.footer-pinasco {
    width: auto;
    height: 49px;
}

footer p {
    font-family: 'Ford Antenna Light';
    font-size: 12px;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
}

.footer-logo {
    width: 140px;
    height: 70px;
}

.redes {
    display: flex;
    flex-direction: row;
    justify-content: left;
    align-items: flex-start;
    gap: 15px;
    width: 100%;
}

/* Fondo al 30% de los modales */
#modalbackground {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(2, 4, 24);
    opacity: 30%;
    z-index: 999;
}

/* MODAL PRIVACIDAD */
/* El modal ppiamente dicho */
.modalPrivacidad {
    display: none;
    /* Escondido por default */
    position: fixed;
    /* Que quede en el lugar */
    z-index: 1000;
    /* Arriba de todo */
    left: 10%;
    top: 5%;
    width: 80%;
    /* Full width */
    height: 550px;
    /* Full height */
    overflow: auto;
    /* Scrolling */
    border-radius: 20px;
    background: var(--color-primary);
}

/* Saco el scrollbar para ser fiel al diseño */
.modalPrivacidad::-webkit-scrollbar {
    width: 0;
    height: 0;
}


/* Contenido del modal (span con cerrar, logo pinasco y párrafo*/
.modal-content {
    margin: 5% auto;
    padding: 20px;
    width: 80%;
    color: var(--fonts-icons);
}

.modal-content p {
    font-family: 'Ford Antenna Light';
    font-size: 16px;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
}

.img-modalpinasco {
    display: block;
    margin: 0 auto;
    width: 159px;
    height: 69px;
}

/* Botón cerrar */
.close-priv {
    color: var(--fonts-icons);
    float: right;
    width: 32px;
    height: 32px;
}

.close-priv:hover,
.close-priv:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

/* Modal cotizarPrivacidad */
/* Botón cerrar */
.closeprivcotizar {
    color: var(--fonts-icons);
    float: right;
    width: 32px;
    height: 32px;
}

.closeprivcotizar:hover,
.closeprivcotizar:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

/* MODAL COTIZAR */
/* El modal ppiamente dicho */
.modalnav {
    display: none;
    /* Escondido por default */
    position: fixed;
    /* Que quede en el lugar */
    z-index: 1000;
    /* Arriba de todo */
    left: 5%;
    top: 0;
    width: 90%;
    height: 100%;
    /* Full height */
    overflow: auto;
    /* Scrolling */
    border-radius: 10px;
    background: var(--bgrd-whiteweb);
}

/* Saco el scrollbar para ser fiel al diseño */
.modalnav::-webkit-scrollbar {
    width: 0;
    height: 0;
}

/* Header del modal (h1, h2 y close button) */
.modal-header {
    width: 100%;
    margin: 0 auto;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    background-color: var(--color-primary);
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}

/* Botón cerrar */
.close-cotizar {
    color: var(--fonts-icons);
    float: right;
    width: 32px;
    height: 32px;
    margin: 24px 32px 0 0;
}

.close-cotizar:hover,
.close-cotizar:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

/* Div = h1 + h2 */
.titulos-header {
    width: 85%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* H1 modal Cotizar */
.h1-modal {
    text-align: center;
    color: var(--fonts-icons);
    font: var(--titulo1-style) var(--titulo1-weight) var(--titulo1-size) / var(--titulo1-lineheight) var(--titulo1-fuente);
    margin: 24px auto;
}

/* H2 modal Cotizar */
.h2-modal {
    text-align: center;
    color: var(--fonts-icons);
    font: var(--subtitulo2-style) var(--subtitulo2-weight) var(--subtitulo2-size) / var(--subtitulo2-lineheight) var(--subtitulo2-fuente);
    margin: 0 auto 34px;
}

/* Contenido del modal (imagen, formulario y aclaración)*/
.modalcontent {
    width: 90%;
    margin: 0 auto;
    color: var(--bgrd-whiteweb);
}

.modalcontent img {
    display: none;
}

.h3-modal {
    color: var(--font-black);
    font-family: 'Ford Antenna Light';
    font-size: 20px;
    font-style: normal;
    font-weight: 300;
    line-height: normal;

    text-align: left;
    margin-bottom: 0;

    display: none;
}

.modalcontent-derecha .divider {
    display: none;
}

/* Imagen modal Cotizar */
.imgmodal {
    width: 25%;
    height: auto;
}

.divider {
    background-color: rgba(199, 199, 199, 1);
    height: 1px;
    width: 100%;
    margin: 2% auto;
}

/* Formulario modal Cotizar */
.modalcontent-derecha {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
}

form#formmodal {
    width: 100%;
    margin: 33px auto 40px;
}

.inputmodal {
    width: 100%;
    height: 50px;
    padding: var(--input-padding);

    background-color: var(--empty-input);
    border: none;

    font: var(--input-style) var(--input-weight) var(--input-size) / var(--input-lineheight) var(--input-fuente);
    color: var(--font-black);
}

.radio-legend-flex {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin: 16px 0 24px;
}

.radio-legend-flex input {
    width: 24px;
    height: 24px;
}

.radio-container {
    margin-top: 24px;
}

.radio-container legend {
    color: var(--font-black);
    font: var(--label-style) var(--label-weight) var(--label-size) / var(--label-lineheight) var(--label-fuente);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.radio-container label {
    color: var(--font-black);
    font: var(--label-style) var(--label-weight) var(--label-size) / var(--label-lineheight) var(--label-fuente);
    margin-left: 8px;
    margin-right: 24px;
}

.checkboxContainer {
    margin: 40px auto;
}

.modalsubmit {
    width: 100%;
    height: 50px;
    padding: var(--boton-padding);
    margin-top: 40px;
    border-radius: var(--boton-radius);
    background: var(--buttons-icons);
    /* inactivo */
    opacity: var(--inactivo-opacity);
    color: var(--fonts-icons);
    font: var(--boton-style) var(--boton-weight) var(--boton-size) / var(--boton-lineheight) var(--boton-family);
}

.modalsubmit {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 9px;
}

.modalsubmit.active {
    background-color: var(--buttons-icons);
    opacity: var(--activo-opacity);
    cursor: pointer;
}

/* Aclaración campos obligatorios */
.aclaracionObligatorios,
.aclaracionObligatorios2 {
    color: var(--font-black);
    font-family: 'Ford Antenna Cond';
    font-size: 14px;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
    text-align: center;
}

.aclaracionObligatorios2 {
    display: none;
}

.aclaracionObligatoriosmb {
    display: none;
}

/* MODAL TEST DRIVE */
.closetestdrive {
    color: var(--fonts-icons);
    float: right;
    width: 32px;
    height: 32px;
    margin: 2%;
}

.closetestdrive:hover,
.closetestdrive:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

form#formTD {
    margin: 33px auto;
    width: 100%;
}

.selectmodal {
    width: 100%;
    height: fit-content;
    margin: auto;
}

.selectmodal label {
    font:
        var(--label-style) var(--label-weight) var(--label-size) / var(--label-lineheight) var(--label-fuente);
    color: var(--font-black)
}

.selectinputmodal {
    width: 100%;
    min-height: var(--input-minheight);
    height: 50px;

    background-color: var(--empty-input);
    border: none;
    font: var(--input-style) var(--input-weight) var(--input-size) / var(--input-lineheight) var(--input-fuente);
    color: var(--font-black);

    padding: var(--input-padding);
}

.selectinputmodal option {
    height: 42px;
    font:
        var(--input-style) var(--input-weight) var(--input-size) / var(--input-lineheight) var(--input-fuente);
    color: var(--font-black);
    background-color: var(--fonts-icons);
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    border-radius: 0px 0px 4px 4px;
    border: none;
    padding: 40px;
}

.selectinputmodal * {
    background-color: var(--fonts-icons);
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    border-radius: 0px 0px 4px 4px;
    border: none;
}

/* MODAL EVENTOS */
.closeeventos {
    color: var(--fonts-icons);
    float: right;
    width: 32px;
    height: 32px;
    margin: 2%;
}

.closeeventos:hover,
.closeeventos:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

form#formeventos {
    margin: 33px auto;
    width: 100%;
}

/* MODAL SUBMIT - Formulario de contacto respondido correctamente */


/* Bloque completo del modal */

/* NUEVO MODAL */
.modal_padre {
    height: 100vh;
    background-color: #0000009e;
    width: 100%;
    position: fixed;
    top: 0;
    z-index: 1000;
    overflow: hidden;
    display: grid;
    place-items: center;
}

.modal_hijo {
    width: 90%;

    border-radius: 10px;
    color: var(--fonts-icons);
    text-align: center;

    height: auto;
    background: var(--color-primary);
    z-index: 100;
    overflow: auto;
    position: relative;
}

.modal_padre .modal_hijo .modal_header {
    margin-top: 60px;
    width: 100%;
}

.modal_padre .modal_hijo .modal_body {
    margin: 40px auto;
}

.modal_padre .modal_hijo .modal_footer {
    width: 100%;
    display: grid;
    place-items: center;
}

.modal_padre .modal_hijo .modal_footer .btn_modal {
    color: var(--fonts-icons);
    margin-bottom: 40px;
    padding: var(--boton-padding);
    border-radius: var(--boton-radius);
    border: 2px solid #FDFDFD;
    background-color: transparent;
    font: var(--boton-style) var(--boton-weight) var(--boton-size) / var(--boton-lineheight) var(--boton-family);
    cursor: pointer;
}

.modal_hijo.modal_hijo_error {
    height: 280px !important;
}

.modal_padre .modal_hijo.modal_hijo_error .modal_header {
    margin-top: 0;
    width: 100%;
    text-align: right;
}

.modal_padre .modal_hijo .modal_header img{
    padding: 20px;
    cursor: pointer;
}

.submitresponse {
    display: none;
    /* Escondido por default */
    position: fixed;
    /* Que quede en el lugar */
    z-index: 1000;
    /* Por sobre todo */
    width: 90%;
    /* Full width */
    height: fit-content;
    /* Full height */
    border-radius: 10px;
    color: var(--fonts-icons);
    text-align: center;
    /* Efecto glass */
    /*     background: var(--glass-modal);
    
    backdrop-filter: blur(30px); */
    background: var(--color-primary);
    /* border: 2px solid #C7C7C7; */

    top: 15%;
    left: 5%;
}

/* Contenido del modal (span con cerrar, imagen ok y texto) */
.submitresponsecontent {
    color: var(--fonts-icons);
    margin: auto;
    padding: 10%;
    text-align: center;
}

.submitresponsecontent button {
    color: var(--fonts-icons);
    padding: var(--boton-padding);
    border-radius: var(--boton-radius);
    border: 2px solid #FDFDFD;
    background-color: transparent;
    font: var(--boton-style) var(--boton-weight) var(--boton-size) / var(--boton-lineheight) var(--boton-family);
    cursor: pointer;
}

/* Botón cerrar */
.closebtnsubmit {
    color: var(--fonts-icons);
    float: right;
    width: 32px;
    height: 32px;
    margin: 15px 15px 0 0;
}

.closebtnsubmit:hover,
.closebtnsubmit:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

/* MODAL SUBMIT ERROR - Error en el formulario de contacto */
/* Contenido del modal (span con cerrar, imagen X y texto) */
.imgsubmiterror {
    width: 200px;
    height: auto;
}

/* Botón cerrar */
.closebtnerror {
    color: var(--fonts-icons);
    float: right;
    width: 32px;
    height: 32px;
    margin: 15px 15px 0 0;
}

.closebtnerror:hover,
.closebtnerror:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

/* MODAL Solcitud de cotización recibida correctamente */
/* Contenido del modal (texto y botón de cerrar) */
.submitresponsecontent {
    color: var(--fonts-icons);
    margin: auto;
    text-align: center;
}

.h2submitcontent {
    font-family: 'Ford Antenna Medium';
    font-size: 28px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.psubmitcontent {
    text-align: center;
    font-family: 'Ford Antenna Light';
    font-size: 18px;
    font-style: normal;
    font-weight: 300;
    line-height: 160%;
}

.closesubmitcontent {
    display: flex;
    width: auto;
    justify-content: center;
    align-items: center;
    margin: auto;

    min-width: var(--boton-minwidth);
    padding: var(--boton-padding);
    font:
        var(--boton-style) var(--boton-weight) var(--boton-size) var(--boton-lineheight) var(--boton-family);
    color: var(--fonts-icons);
    border-radius: var(--boton-radius);
    border: 2px solid var(--fonts-icons);
    background-color: transparent;
}

#mensajeerrortdrive,
#mensajeerroreventos,
#mensajeerrorcotiza,
#mensajeerrorcontacto {
    color: var(--error);
    font-weight: bold;
    margin-bottom: 0;
    text-align: center;
}

.displayNone {
    display: none;
}

.input-fill {
    background-color: transparent !important;
    box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.25) !important;
    outline: none !important;
}


@media screen and (min-width: 1px) {
    .nav-button {
        width: 72%;
    }
}

@media screen and (min-width: 427px) {
    .nav-button {
        width: 50%;
    }
}

/* RESPONSIVE MOBILE */
@media screen and (min-width: 768px) {
    .wpplogo {
        height: 45px;
        width: auto;
    }

    /* Intro Mobile */
    #intro {
        padding: 1% 0%;
        background-image: url("../images/introtb.png");
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        height: 937px;
    }

    nav {
        width: 100%;
        margin: 170px auto 0;

        border-radius: 30px;
        background: #00364E;
    }

    span#mbnavarrow {
        display: block;
    }

    .navwrap {
        width: 100%;
        height: 100%;
    }

    ul#mbnavul {
        display: flex;
        justify-content: flex-end;
        align-items: flex-end;
        width: 45%;
        margin-left: 50%;
    }

    .nav-button {
        width: 33%;
    }

    .textointro {
        margin: 251px auto 0;
        align-items: center;
    }

    .mbintrotexto {
        width: 523px;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: flex-start;
    }

    .parrafo-block {
        display: block;
    }

    /* Galería Mobile */
    .h2-galeria {
        font-size: 32px;
    }

    .h3-galeria {
        font-size: 26px;
    }

    .p-galeria {
        font-size: 16px;
    }

    .btn-galeria {
        padding: 8px 16px;
        height: 40px;
        margin: 35px auto 60px;
        font-size: 16px;
        text-align: center;

        cursor: pointer;
    }

    div#imggaleria {
        width: 100%;
        background-image: url("../images/galeriatb.png");
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        height: 1039px;
    }


    /* Sucursales Mobile */
    #sucursales {
        margin: 0;
        background-image: url(../images/bgsucursalesmb.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        padding-bottom: 60px;
    }

    .h2-sucursales {
        font-size: 24px;
    }

    .info-sucursales {
        position: relative;
        width: 100%;
        display: block;
    }

    .map {
        width: 100%;
        height: 411px;
        border-radius: 0;
    }

    div#map {
        z-index: 1;
        height: 512px;
    }

    .acordeones {
        width: 100%;
        display: block;
        position: absolute;
        z-index: 30;
        padding: 6px 20px;
    }

    .acordeon {
        margin: 0;
        margin-bottom: 5%;
        max-width: 406px;
    }

    .contenido-acordeon {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.5s ease-in-out;
        padding: 0;
    }

    .acordeon.open .contenido-acordeon {
        max-height: 299px;
        width: fit-content;
        max-width: 300px;
        padding: 0 3%;

    }


    /* Formulario */
    #formulario {
        padding: 70px 0 108px;
    }

    .h1-formulario {
        font-size: 32px;
    }

    .h2-formulario {
        font-size: 18px;
        margin-bottom: 40px;
    }

    .form-row {
        flex-direction: row;
        justify-content: space-between;
        width: 100%;
    }

    .input-label {
        width: 100%;
        gap: 8px;
    }

    .input-label label {
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
    }

    .message {
        margin: 0;
    }

    .checkboxContainer {
        margin: 0;
    }

    .checkbox-label {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        align-content: flex-start;
        width: 100%;
        margin-bottom: 24px;
    }

    .checkbox-label label {
        max-width: 90%;
        font-size: 14px;
        text-align: left;
    }

    .submit {
        margin-top: 40px;
    }

    /* Autoscroll */
    .autoscroll {
        width: 56px;
        height: 56px;
        z-index: 999;
        top: -26%;
        right: 5%;
    }

    /* FOOTER */
    footer {
        background-color: var(--header-footer);
        color: var(--fonts-icons);
        padding: 40px 0;
    }

    /* MODAL FORMULARIO COTIZAR */
    .modalcontent img {
        display: block;
        width: auto;
        height: 257px;
        margin: 64px auto 40px;
    }

    .h3-modal {
        display: block;
        margin: 0 auto;
        font-size: 20px;
        font-style: normal;
        font-weight: 300;
        line-height: normal;
    }

    .modalcontent-derecha .divider {
        display: block;
        height: 2px;
        background-color: #C7C7C7;
    }

    .modalsubmit {
        width: 122px;
    }

    .aclaracionObligatorios2 {
        display: block;
    }

    .aclaracionObligatorios {
        display: none;
    }

    /* MODAL TEST DRIVE */
    /* Botón cerrar */
    .closetestdrive {
        width: 24px;
        height: 24px;
    }

    .closetestdrive:active {
        color: var(--font-black);
        text-decoration: none;
        cursor: pointer;
    }

    /* MODAL EVENTOS */
    /* Botón cerrar */
    .closeeventos {
        width: 24px;
        height: 24px;
    }

    .closeeventos:active {
        color: var(--font-black);
        text-decoration: none;
        cursor: pointer;
    }

    /* MODAL PRIVACIDAD */
    .modalPrivacidad {
        left: 5%;
        top: 5%;
        width: 90%;
        height: 90%;
    }

    .modal-content p {
        font-size: 12px;
    }

    /* MODAL SUBMIT - Formulario de contacto respondido correctamente */
    /* Bloque completo del modal */
    .submitresponse {
        width: 90%;
        margin: 0 auto;
    }

    /* Contenido del modal (span con cerrar, imagen ok y texto) */
    .submitresponsecontent {
        padding: 10% 1%;
        text-align: center;
        align-content: center;
    }

    .submitresponsecontent h1 {
        font-family: 'Ford Antenna Medium';
        font-size: 24px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
    }

    .submitresponsecontent p {
        font-family: 'Open Sans', sans-serif;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 160%;
    }

    /* Botón cerrar */
    .closebtnsubmit {
        color: var(--fonts-icons);
        float: right;
        width: 32px;
        height: 32px;
    }

    .closebtnsubmit:hover,
    .closebtnsubmit:focus {
        color: black;
        text-decoration: none;
        cursor: pointer;
    }

    /* MODAL SUBMIT ERROR - Error en el formulario de contacto */
    .imgsubmiterror {
        display: none;
    }

    /* Botón cerrar */
    .closebtnerror {
        color: var(--fonts-icons);
        float: right;
        width: 32px;
        height: 32px;
    }

    .closebtnerror:hover,
    .closebtnerror:focus {
        color: black;
        text-decoration: none;
        cursor: pointer;
    }

    /* MODAL Solcitud de cotización recibida correctamente */
    .h2submitcontent {
        font-family: 'Ford Antenna Medium';
        font-size: 28px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
    }

    .psubmitcontent {
        text-align: center;
        font-family: 'Ford Antenna Light';
        font-size: 18px;
        font-style: normal;
        font-weight: 300;
        line-height: 160%;
    }

    .closesubmitcontent {
        display: flex;
        width: auto;
        justify-content: center;
        align-items: center;
        margin: auto;

        min-width: var(--boton-minwidth);
        padding: var(--boton-padding);
        font:
            var(--boton-style) var(--boton-weight) var(--boton-size) var(--boton-lineheight) var(--boton-family);
        color: var(--fonts-icons);
        border-radius: var(--boton-radius);
        border: 2px solid var(--fonts-icons);
        background-color: transparent;
    }
}


/* RESPONSIVE DESKTOP */
@media screen and (min-width: 1170px) {
    .wpplogo {
        height: 45px;
        width: auto;
    }

    /* Intro Tablet  */
    #intro {
        background-image: url("../images/intro.png");
        height: auto;
    }

    .nav-ul {
        display: none;
    }

    nav {
        margin: 113px auto 97px;
    }

    .nav-button {
        padding: 14px 24px;
    }

    .navwrap {
        width: 100%;
        height: 100%;
    }

    .nav_desktop {
        display: flex;
        list-style: none;
        width: 100%;
        justify-content: end;
        gap: 50px;
        margin-right: 56px;
        font-family: 'Ford Antenna Medium' !important;
        font-size: 20px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
    }

    span#mbnavarrow {
        display: none;
    }

    .nav-button {
        height: 56px;
        width: fit-content;
        font-size: 20px;
    }

    #mbnavul {
        margin: 0 auto;
        padding: 5% 5% 5% 10%;
        width: 70%;
        min-width: fit-content;
        max-width: 600px;

        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-start;
        gap: 16px;

        border-radius: 0px 0px 15px 15px;
        box-shadow: -1px 4px 8px 1px rgba(255, 255, 255, 0.30);
        background-color: var(--color-primary);

        list-style-type: none;
        color: var(--fonts-icons);
        font-family: 'Ford Antenna Medium';
        font-size: 18px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
    }

    ul#mbnavul {
        display: none;
    }

    .textointro {
        display: block;
        margin: 97px 0 117px;
    }

    .notformb {
        display: none;
    }

    h1#h1-overlap {
        font-size: 40px;
        width: 639px;
    }

    p#p-overlap {
        font-size: 24px;
        width: 519px;
    }


    /* Galería desktop */

    #galeria {
        padding: 0;
    }

    .h2-galeria {
        margin: 85px auto 8px;
    }


    .p-galeria {
        margin: 24px auto 40px;
    }

    .btn-galeria {
        margin: 0px auto 67px auto;
        font-size: 16px;
        text-align: center;

        cursor: pointer;
    }

    div#imggaleria {
        width: 100%;
        height: 379px;
        background-image: url("../images/galeria.png");
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }


    /* Sucursales Desktop */
    #sucursales {
        background-image: url(../images/bgsucursales.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
    }

    .info-sucursales {
        display: flex;
        flex-direction: row;
        justify-content: center;
        gap: 33px;
        width: 100%;
        position: unset;
    }

    .map {
        width: 70%;
        height: 472px;
        border-radius: 0;
    }

    div#map {
        height: 472px;
        position: relative;
        z-index: 1;
    }

    .acordeones {
        position: unset;
        padding: 0;
        margin: 0;
        width: 40%;
    }

    .contenido-acordeon {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.5s ease-in-out;
        padding: 0;
    }

    .acordeon.open .contenido-acordeon {
        width: fit-content;
        max-width: 284px;
        padding: 0 3%;
    }


    /* Formulario */

    .form {
        width: 66%;
    }

    .submit {
        margin: 0;
    }

    /* Autoscroll */
    .autoscroll {
        width: 56px;
        height: 56px;
        z-index: 999;
        top: -25%;
        right: 4%;
    }

    /* FOOTER */
    footer {
        padding: 40px 0;
    }

    .footer-logo {
        width: 112px;
        height: 56px;
    }

    /* MODAL SUBMIT ERROR - Error en el formulario de contacto */
    /* Botón cerrar */
    .closebtnerror {
        color: var(--fonts-icons);
        float: right;
        width: 32px;
        height: 32px;
    }

    .closebtnerror:hover,
    .closebtnerror:focus {
        color: black;
        text-decoration: none;
        cursor: pointer;
    }

    /* MODAL Solcitud de cotización recibida correctamente */

    .submitresponse {
        width: 50%;
        height: 384px;
        right: 5%;
        top: 25%;
    }

    .modal_hijo {
        width: 50%;
    }

    .h2submitcontent {
        font-family: 'Ford Antenna Medium';
        font-size: 28px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
    }

    .psubmitcontent {
        text-align: center;
        font-family: 'Ford Antenna Light';
        font-size: 18px;
        font-style: normal;
        font-weight: 300;
        line-height: 160%;
    }

    .closesubmitcontent {
        display: flex;
        width: auto;
        justify-content: center;
        align-items: center;
        margin: auto;

        min-width: var(--boton-minwidth);
        padding: var(--boton-padding);
        font:
            var(--boton-style) var(--boton-weight) var(--boton-size) var(--boton-lineheight) var(--boton-family);
        color: var(--fonts-icons);
        border-radius: var(--boton-radius);
        border: 2px solid var(--fonts-icons);
        background-color: transparent;
    }

    .modalcontent {
        display: flex;
        flex-direction: row;
        gap: 48px;
        margin-top: 84px;
    }

    .modalcontent .h3-modal {
        text-align: left;
        margin: 0;
    }

    .modalcontent img {
        margin-top: 50px;
    }
}