@import url(./fonts.css);
/*  Root */
:root {
    --negro: #000000;
    --txt-blanco: #fff;
    --txt-azul-principal: #00205B;
    --txt-azul-secundario: #008fd9;
    --txt-gris: #4D4D4D;
    --txt-gris-secundario: #A2A2A2;
    --txt-gris-titulo: #B3B3B3;
    --txt-gris-obscuro: #242424;
    --fondo-blanco: #fff;
    --fondo-azul-principal: #00205B;
    --fondo-azul-secundario: #0C45A8;
    --fondo-gris: #F4F4F4;
    --txt-58: 58px;
    --txt-48: 48px;
    --txt-34: 34px;
    --txt-30: 30px;
    --txt-28: 28px;
    --txt-25: 25px;
    --txt-22: 22px;
    --txt-20: 20px;
    --txt-18: 18px;
    --txt-16: 16px;
    --txt-14: 14px;
    --txt-13: 13px;
    --txt-12: 12px;
    --roboto-black: "roboto-black";
    --roboto-bold:'roboto-bold';
    --roboto-italic: 'roboto-italic';
    --roboto-light: 'roboto-light';
    --roboto-medium: 'roboto-medium';
    --roboto-regular: 'roboto-regular';
    --roboto-thin: 'roboto-thin'
}
/* Generales */
body,
html {
    background-color: var(--fondo-blanco) !important;
    font-family: var(--roboto-regular)!important;
    overflow-x: hidden;
    font-size: 1rem;
}
p {
    padding: 0px;
    color: var(--txt-gris);
    font-size: var(--txt-16);
    margin: 0px !important;
    font-weight: 200;
}
ul {
    list-style: none;
    margin: 0px;
    padding: 0px;
    margin-bottom: 0px !important;
}
.color-gris {
    color: var(--txt-gris-titulo)!important;
}
.color-blanco {
    color: var(--txt-blanco);
}
.color-azul-secundario {
    color: var(--txt-azul-secundario);
}
.color-azul-primario {
    color: var(--txt-azul-principal);
}
.cursiva {
    font-style: italic;
}
.text-align-justify {
    text-align: justify;
}
.text-align-centter {
    text-align: center;
}
.btn-azul {
    background-color: var(--fondo-azul-secundario);
    border: none;
    border-radius: 4px;
    height: 50px;
    color: var(--txt-blanco);
    width: 300px;
    text-align: center;
    text-transform: uppercase;
    font-size: var(--txt-14);
    font-weight: 200;
    margin-top: 30px;
}
.btn-blanco {
    background-color: transparent;
    border: solid 2px var(--fondo-blanco);
    border-radius: 5px;
    height: 50px;
    color: var(--txt-blanco);
    width: 300px;
    text-align: center;
    text-transform: uppercase;
    font-size: var(--txt-14);
    font-weight: 200;
    margin-top: 30px;
}
.btn-azul-transparente {
    background-color: transparent;
    border: solid 2px var(--fondo-azul-secundario);
    border-radius: 5px;
    height: 50px;
    color: var(--txt-azul-secundario);
    width: 300px;
    text-align: center;
    text-transform: uppercase;
    font-size: var(--txt-14);
    font-weight: 200;
    margin-top: 30px;
}
form[name="newsletterForm"] .btn-azul.disabled {
    opacity: .7;
    cursor: not-allowed;
}
.txt-verde {
    color: #058E00 !important;
}
.txt-azul-principal {
    color: var(--txt-azul-principal) !important;
}
.txt-azul-secundario {
    color: var(--txt-azul-secundario) !important;
}
.txt-rojo {
    color: #FF004D !important;
}
.strong {
   font-family: var(--roboto-medium); 
}
/*  Menu */
.menu {
    width: 100%;
    position: fixed;
    top: 0px;
    z-index: 998;
    background-color: var(--fondo-azul-principal);
    box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.45);
    -webkit-box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.45);
    -moz-box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.45);
    transition: all 1s;
}
.menu .logo {
    height: 36px;
    margin-right: 15px;
}
/*Barra de contacto*/
.contenedor {
    max-width: 1920px;
    margin: 0 auto;
    padding: 0 15px;
}
.boton-contacto {
    margin: 0px 0px 0px 16px;
    color: var(--txt-blanco);
    padding-top: 3px;
    display: list-item;
    font-size: var(--txt-13);
    font-weight: 400;
}
.boton-contacto a {
    text-decoration: none;
    color: var(--txt-blanco);
    display: flex;
}
.boton-contacto a:hover {
    color: #337fff;
}
.contacto-menu img {
    filter: invert(100%) sepia(0%) saturate(7500%) hue-rotate(249deg) brightness(105%) contrast(105%);
}

.barra-menu .boton-menu {
    color: var(--txt-azul-principal);
    padding: 0px 1.5rem;
    display: list-item;
    font-size: var(--txt-14);
    font-weight: 400;
    border-right: 1px solid #fff;
    font-family: var(--roboto-regular);
    margin-bottom: 10px;
    cursor: pointer;
}
.barra-menu .boton-menu:first-of-type {
    padding-left: 0px;
}
.barra-menu .boton-menu:last-of-type {
    border-right: 0px;
}
.barra-menu .boton-menu a,
.barra-menu .boton-menu .btn-menu {
    text-decoration: none;
    color: #ffffff;
    display: flex;
}
.barra-menu .txt-btn-modelos {
    padding-right: 5px;
    width: 100%;
}
 .boton-menu .ico-menu {
    display: block;
    filter: invert(100%) sepia(0%) saturate(7500%) hue-rotate(249deg) brightness(105%) contrast(105%)
}
.barra-menu .boton-menu a:hover,
.barra-menu .boton-menu .btn-menu:hover {
    color: #337fff;
}
.barra-menu .boton-menu a:hover .ico-menu,
.barra-menu .boton-menu .btn-menu:hover .ico-menu  {
    filter: invert(43%) sepia(89%) saturate(3143%) hue-rotate(205deg) brightness(101%) contrast(101%);
}
.barra-menu .boton-menu-secundario {
    margin: 0px 0px 0px 15px;
    color: var(--txt-azul-secundario);
    padding-top: 3px;
    display: list-item;
    font-size: var(--txt-16);
    font-weight: 400;
}
.barra-menu .boton-menu-secundario a:hover {
    color: var(--txt-azul-principal);
}
.barra-contacto {
    max-width: 1400px;
    margin: 0 auto;
}
.barra-menu .contenedor {
    max-width: 1400px!important;
}
/*Barra de menú em mobile*/
.menu .barra-menu-mobile {
    padding-top: 10px;
    overflow: hidden;
    display: none;
    padding-left: 15px;
}
.menu .barra-menu-mobile .contenedor {
    max-width: 1920px;
    margin: 0 auto;
    padding: 0 15px;
}
.barra-menu-mobile .boton-menu-mobile {
    color: var(--txt-azul-principal);
    font-size: var(--txt-16);
    font-weight: 400;
    cursor: pointer;
}
/*Desplegable Modelos*/
.cont-desplegable-modelos {
    display: none;
    border-bottom: 2px solid #cacbcc;
    position: fixed;
    width: 100%;
    left: 0;
    padding-top: 8px;
}
.cont-desplegable-modelos.active-models {
    display: flex;
}
.cont-desplegable-modelos .container {
    padding-top: 10px;
    background-color: #fff;
    width: 100%;
    max-width: inherit;
}
.cont-desplegable-modelos .lista-modelos {
    max-width: 1400px;
    margin: 0 auto;
}
.cont-desplegable-modelos .boton-modelos {
    text-align: center;
    width: 130px;
    border: 1px solid var(--fondo-blanco);
    border-radius: 0px;
    opacity: 0.6;
    transition: all 0.5s;
    cursor: pointer;
}
.cont-desplegable-modelos .boton-modelos:hover {
    border-radius: 3px;
    opacity: 1;
}
.cont-desplegable-modelos .boton-modelos:hover p {
    color: var(--brand-secondary);
}
.cont-desplegable-modelos .boton-modelos p {
    color: #5f5f5f;
    text-transform: uppercase;
    text-align: center;
    font-size: var(--txt-13);
    font-weight: 700;
}
.cont-menu .accordion {
    min-height: 235px;
    overflow-y: hidden;
    height: calc(100%);
    width: 60%;
}
.cont-desplegable-modelos a {
    text-decoration: none !important;
}
.boton-modelos img {
    height: 53px;
}
.boton-modelos p {
    padding: 10px 0px;
}
.accordion::-webkit-scrollbar {
    width: 5px;
    -webkit-appearance: none;
}
.btn-modelos {
    position: relative;
}
/* Track */
.accordion::-webkit-scrollbar-track {
    background-color: #373D44;
}
/* Handle */
.accordion::-webkit-scrollbar-thumb {
    background: var(--fondo-naranja);
    border-radius: 10px;
}
/* Handle on hover */
.accordion::-webkit-scrollbar-thumb:hover {
    background: var(--fondo-naranja);
}
/* Footer */
/*Barra accesos rápidos*/
.footer {
    background-color: var(--fondo-azul-principal);
}
.footer .barra-accesos {
    padding-top: 60px;
}
.footer .sociales-footer {
    transition: all 0.5s ease;
}
.footer .sociales-footer:hover {
    text-decoration: none;
    color: inherit
}
.footer .barra-accesos .borde {
    /* border-right: 1px solid var(--txt-gris-titulo); */
    padding-right: 150px;
}
.footer .barra-accesos h4 {
    color: #ffff;
    font-size: var(--txt-18);
    margin-bottom: 20px;
}
.footer .barra-accesos li {
    color: var(--txt-gris);
    font-weight: 200;
    font-size: var(--txt-12);
    margin-top: 10px;
}
.footer .barra-accesos a {
    color: #ffffff;
}
.footer .barra-accesos a:hover {
    color: var(--txt-azul-secundario);
}
/*Barra de contaco*/
.footer .barra-legales {
    background-color: #031741;
    height: 40px;
}
.footer .barra-legales .contenedor {
    display: flex!important;
    justify-content: center!important;
    max-width: 1920px;
    margin: 0 auto;
    padding: 0 15px;
    padding-top: 10px;
}
.footer .barra-legales li {
    color: #fff;
    font-weight: 200;
    margin-right: 5px;
    font-size: 13px;
}
.footer .barra-legales a {
    color: var(--txt-azul-principal);
}
.inimacion {
    transition: transform 0.5s ease;
}
.sociales a {
    padding-right: 12px;
}
.cont-contactanos {
    display: flex;
    margin-top: -25px;
    justify-content: center;
}
.cont-img-contacto {
    margin-right: 10px;
}
.cont-telefono {
    line-height: 22px;
}
.cont-telefono > div:nth-child(1) {
    color: #fff;
    font-size: 14px;
    font-family: var(--roboto-light);
}
.cont-telefono .cont-numer-italika {
    color: #008fd9;
    font-size: 24px;
    font-family: var(--roboto-medium);
    display: flex;
}
.cont-numer-italika .txt-numer-italika {
    display: block;
    padding-left: 8px;
}
.cont-numer-italika .numer-italika {
    display: none;
    padding-left: 8px;
}
.cont-numer-italika:hover .txt-numer-italika {
    display: none;
}
.cont-numer-italika:hover .numer-italika {
    display: block;
}


/* Estilos existentes para desktop */
.slide-1 {
    position: relative;
    height: 100vh;
}

.video-background {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: 0;
    object-fit: cover;
    background: #000;
}

.cont-slide {
    position: relative;
    z-index: 1;
}

/* Nuevos estilos para mobile */
@media screen and (max-width: 992px) {
    .slide-1 {
        height: auto;
        display: flex;
        flex-direction: column;
    }
    .video-background {
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        width: 100%;
        height: auto;
        min-height: auto;
        aspect-ratio: 16/9;
    }
    .slide-1 .container {
        height: 20vh !important;
        padding: 0px 20px;
        margin-top: 9vh;
    }
    .slide-1 .cont-slide {
        margin-top: 0px;
        padding: 0;
    }
    .slide-1 .titulo {
        color: var(--txt-azul-principal) !important;
        background: none !important;
        padding: 0 !important;
    }
    .slide-1 .descripcion {
        color: var(--txt-gris) !important;
        background: none !important;
        padding: 0 !important;
    }
    .sound-control {
        display: none;
    }
    .slide-1 .btn-azul {
        margin-top: 20px;
    }
}
.slide-2 {
    background-image: url(/assets/images/home/slides/2.png);
}
.slide-3 {
    background-image: url(/assets/images/home/slides/3.png);
}
.slide-4 {
    background-image: url(/assets/images/home/slides/4.png);
}
.slide-5 {
    background-image: url(/assets/images/home/slides/5.png)
}
.slide-6 {
    background-image: url(/assets/images/home/slides/6.png)
}
.slide-7 {
    background-image: url(/assets/images/home/slides/7.png)
}
/* Responsive */
@media screen and (max-width:1400px) {
    .footer .barra-accesos .borde {
        padding-right: 70px;
    }
}
@media screen and (max-width:1280px) {
    .barra-menu .boton-menu {
        font-size: var(--txt-14);
        position: relative;
    }
    .barra-menu .boton-menu-secundario {
        font-size: var(--txt-14);
    }
    .barra-contacto .boton-contacto {
        font-size: var(--txt-14);
    }
    .footer .barra-legales li {
        font-size: var(--txt-13);
    }
}
@media screen and (max-width:1400px) {
    .cont-desplegable-modelos .container {
        min-width: inherit!important;
        max-width: inherit!important;
    }
}
@media screen and (max-width:1200px) {
    .boton-contacto a .txt-contacto {
        display: none;
    }
}
@media screen and (max-width:1120px) {
    .barra-menu .boton-menu {
        font-size: var(--txt-12);
    }
    .barra-menu .boton-menu-secundario {
        font-size: var(--txt-12);
    }
    .barra-contacto .boton-contacto {
        font-size: var(--txt-12);
    }
    .menu .logo {
        width: 108.8px;
        height: 22.4px;
        margin-right: 0px;
    }
}
@media screen and (max-width: 992px) {
    .menu .barra-menu-mobile {
        display: block;
    }
    .barra-menu-mobile .boton-menu {
        width: 20px;
        margin: 15px;
        cursor: pointer;
    }
    .barra-menu-mobile .boton-menu img {
        width: 100%
    }
    .menu > div:nth-child(1) {
        display: flex;
        flex-direction: row-reverse;
        justify-content: space-between;
        align-items: center;
    }
    .barra-contacto {
        max-width: inherit;
        margin: inherit;
    }.barra-menu-mobile {
        padding-top: 0px!important;
    }
    .barra-menu {
        display: block;
    }
    .barra-menu .contenedor {
        max-width: 400px!important;
        width: 100%;
        height: 100%;
        background-color: #ffffff;
        left: 0;
        margin: inherit!important;
        flex-direction: column;
        justify-content: flex-start!important;
        padding: 15px 0px 0px 0px;
        overflow: auto;
    }
    .barra-menu .contenedor .d-flex {
        display: flex;
        flex-direction: column;
    }
    .barra-menu .boton-menu {
        padding: 0px!important;
        font-size: 14px!important;
        border-bottom: 1px solid #d5d5d5;
        margin-bottom: 0px;
    }
    .barra-menu .boton-menu a,
    .barra-menu .boton-menu .btn-menu {
        color: #3f3f40;
        display: flex;
        width: 100%;
        padding: 16px;
        justify-content: space-between;
        font-size: 1rem;
    }
    .cont-desplegable-modelos .container {
        margin-top: 0px;
        padding-top: 0px;
    }
    .cont-desplegable-modelos .lista-modelos a {
        padding: 0px;
        margin-left: 10px;
    }
    .cont-desplegable-modelos .lista-modelos img {
        display: none;
    }
    .cont-desplegable-modelos .boton-modelos p {
        text-align: left;
        text-transform: initial;
        font-size: 14px;
        color: #3f3f40;
    }
    .cont-desplegable-modelos {
        display: block;
        position: relative;
        max-height: 0;
        overflow: hidden;
        transition: 0.5s;
        overflow-y: auto;
        border-bottom: 0px;
    }
    .cont-desplegable-modelos.active-models {
        position: relative;
        max-height: 600px;
    }
    .barra-menu .boton-menu .btn-modelos .ico-menu {
        filter: invert(30%) sepia(0%) saturate(53%) hue-rotate(269deg) brightness(99%) contrast(95%);
        width: 12px;
        transform: rotate(0deg);
        transition: 0.25s transform ease;
    }
    .barra-menu .boton-menu .btn-modelos.active .ico-menu {
        transform: rotate(180deg);
        filter: invert(43%) sepia(89%) saturate(3143%) hue-rotate(205deg) brightness(101%) contrast(101%);
    }
    .cont-desplegable-modelos .boton-modelos {
        width: 100%;
    }
    .barra-menu .boton-menu .btn-modelos.active {
        color: #337fff;
    }
    .contacto-menu {
        margin-top: 22px;
    }
    .contacto-menu li {
        padding: 8px 0px;
    }
    .boton-contacto a:hover {
        color: var(--txt-azul-principal);
    }
    .contacto-menu .txt-contacto {
        display: block!important;
        color: var(--txt-azul-principal);
        font-family: var(--roboto-light);
    }
    .contacto-menu img {
        filter: invert(15%) sepia(68%) saturate(1468%) hue-rotate(196deg) brightness(89%) contrast(117%);
    }
    .slide {
        margin-top: 53px;
    }
    .cont-desplegable-modelos .boton-modelos:hover p {
        color: #337fff;
    }
    .footer .barra-accesos .borde {
        padding-right: 30px;
        margin-right: 40px;
    }
    .footer .barra-legales {
        height: auto;
        padding: 0px 0px 20px 0px;
    }
    .footer .barra-legales ul {
        margin: 10px 0px;
        flex-wrap: wrap;
        justify-content: center;
        width: 100%;
    }
    .footer .barra-legales li {
        margin-top: 10px;
        text-align: center;
    }
    .cont-contactanos {
        margin-top: 18px;
        justify-content: flex-start;
        margin-left: 15px;
    }
    .cont-telefono > div:nth-child(1) {
        color: #00205B;
    }
}
@media screen and (max-width: 768px) {
    .footer .barra-accesos {
        padding-top: 60px;
        padding-bottom: 0px;
        text-align: center;
    }
    .footer .barra-accesos .borde {
        width: 100%;
        border-right: none;
        padding: 0px 0px 20px 0px;
        margin-bottom: 20px;
        border-bottom: 1px solid var(--fondo-azul-principal);
    }
    .footer .barra-accesos h4 {
        margin-bottom: 8px;
    }
    .footer .barra-accesos .sociales,
    .footer .barra-accesos .recomendados,
    .footer .barra-accesos .se-parte {
        padding-bottom: 32px;
    }
}
@media screen and (max-width: 580px) {
    .container {
        width: 100% !important;
    }
    .container .row {
        margin: 0px !important;
    }
    .barra-contacto .boton-contacto {
        font-size: 10px;
        padding-left: 0px;
        margin: 0px;
    }
    .barra-contacto .boton-contacto img {
        margin-right: 2px !important;
    }
    .barra-contacto ul {
        width: 100%;
        justify-content: space-between;
    }
}