/* estilos del sitio web */

/*fuentes y fuentes CDN
100 Thin
200 Extra Light
300 Light
400 Normal
500 Medium
600 Semi Bold
700 Bold
800 Heavy, Black, Extra-bold
900 Ultra Bold */
@font-face { font-family: 'SFLight'; src: url('../fonts/SFtext/SF-Pro-Text-Light.otf'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'SFRegular'; src: url('../fonts/SFtext/SF-Pro-Text-Regular.otf'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'SFMedium'; src: url('../fonts/SFtext/SF-Pro-Text-Medium.otf'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'SFSemibold'; src: url('../fonts/SFtext/SF-Pro-Text-Semibold.otf'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'SFBold'; src: url('../fonts/SFtext/SF-Pro-Text-Bold.otf'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'SFHeavy'; src: url('../fonts/SFtext/SF-Pro-Text-Heavy.otf'); font-weight: normal; font-style: normal; }

:root{
    --sf300:'SFLight';
    --sf400:'SFRegular';
    --sf500:'SFMedium';
    --sf600:'SFSemibold';
    --sf700:'SFBold';
    --sf800:'SFHeavy';
    --negro: #000000;
    --blanco: #ffffff;
}

/*estilos generales*/
html, body{opacity:0}
html{position:relative; min-height:100%; padding-bottom: 0px; }
body{padding-top:0px; outline: none;}
body a { color: inherit; }
body a:link,a:visited,a:hover,a:active{ text-decoration:none; color: inherit; }
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; -moz-appearance:none;}
.required{border:1px solid red !important;}
.row{margin-left:0px; margin-right:0px}
.row-no-padding [class*="col-"] { padding-left: 0 !important; padding-right: 0 !important;  }
:focus { outline: none; }
.centrar{display: flex; justify-content: center; align-items: center;}
.centrar-lg {display: flex; justify-content: center; align-items: center;}
.error{border:1px solid #E37979 !important;}
.bg{-webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-position: center; background-repeat: no-repeat; }
.bg-100{-webkit-background-size: contain; -moz-background-size: contain; -o-background-size: contain; background-size: contain; background-position: center; background-repeat: no-repeat;  }
.contenedor-principal{ width:100%; max-width: 2600px; margin: 0 auto;}
.contenedor{ width:80%; max-width: 1920px; margin: 0 auto; }
.dflex { display: flex; }
.clear { clear: both; }
.rl{position: relative;}
.line:before{content: ''; width: 100%; height: 2px; background-color: transparent; border-bottom: 1px solid #D5D5D5; position: absolute; bottom: 0; left: 0}
.textfield { display: block; width: 100%; padding: 8px 12px; background-color: transparent; background-image: none; font-family: var(--sf500); font-size: 17px; color: #f0f0f0; border: 1px #cccccc solid; }
.textfield.select { height: 40px; border-radius: none; ; -webkit-border-radius: none ; -moz-border-radius: none ; -ms-border-radius: none ; -o-border-radius: none ; }
.textfield::placeholder { color: #f0f0f0; }
.grupo { margin-bottom: 20px; }
.grupo.boton { margin-bottom: 30px; text-align: right; }
.seccion1 .swiper-button-prev { background-image: url(../img/formas/prev.svg)!important; width: 12px!important; height: 20px!important; top: initial!important; bottom: 70px!important; right: 102px!important; left: auto!important; background-repeat: no-repeat!important; background-position: center!important; background-size: cover!important; z-index: 1!important; }
.seccion1 .swiper-button-next { background-image: url(../img/formas/next.svg)!important; width: 12px!important; height: 20px!important; top: initial!important; bottom: 70px!important; right: 70px!important; left: auto!important; background-repeat: no-repeat!important; background-position: center!important; background-size: cover!important; z-index: 1!important; }
.seccion3 .swiper-button-prev { background-image: url(../img/formas/prev2.svg)!important; width: 12px!important; height: 20px!important; top: 25px!important; bottom: initial!important; right: 102px!important; left: auto!important; background-repeat: no-repeat!important; background-position: center!important; background-size: cover!important; z-index: 1!important; }
.seccion3 .swiper-button-next { background-image: url(../img/formas/next2.svg)!important; width: 12px!important; height: 20px!important; top: 25px!important; bottom: initial!important; right: 70px!important; left: auto!important; background-repeat: no-repeat!important; background-position: center!important; background-size: cover!important; z-index: 1!important; }
@media screen and (max-width: 1399px) { 
    .contenedor{ width:90%; }
}
@media screen and (max-width: 1199px) { 
    .centrar-lg { display: inherit; }
    .centrar-md { display: flex; justify-content: center; align-items: center;}
}
@media screen and (max-width: 991px) { 
    .centrar-md { display: inherit; }
    .centrar-sm { display: flex; justify-content: center; align-items: center;}
    .dflex { display: initial; }
}
@media screen and (max-width: 767px) { 
    .centrar-sm { display: inherit; }
    .centrar-xs {display: flex; justify-content: center; align-items: center;}
    .seccion1 .swiper-button-next { right: 40px!important; }
} 

header { width:100%; max-width: 1920px; text-align: center; margin: 0 auto; position: absolute; left: 0; top: 30px; z-index: 502; }
.inicio .seccion1 { position: relative; }
.inicio .seccion1 > span.arrow { cursor: pointer; position: absolute; bottom: 90px; left: 0; right: 0; margin: auto; z-index: 2; text-align: center; }
.inicio .seccion1 > span.link { cursor: pointer; position: absolute; width: max-content; bottom: 40px; left: 0; right: 0; margin: auto; z-index: 2; font-family: var(--sf500); font-size: 14px; letter-spacing: 1.6px; text-align: center; color: #ffffff; }
.inicio .seccion1 > span.link::before { content: ""; position: absolute; width: 100%; height: 2px; bottom: -10px; left: 0; background-color: var(--blanco); visibility: hidden; transform: scaleX(0); -webkit-transform: scaleX(0); -moz-transform: scaleX(0); -ms-transform: scaleX(0); -o-transform: scaleX(0); transition: all 0.3s ease-in-out 0s; -webkit-transition: all 0.3s ease-in-out 0s; -moz-transition: all 0.3s ease-in-out 0s; -ms-transition: all 0.3s ease-in-out 0s; -o-transition: all 0.3s ease-in-out 0s; }
.inicio .seccion1 > span.link:hover::before,
.inicio .seccion1 > span.link.active::before { visibility: visible; transform: scaleX(1); -webkit-transform: scaleX(1); -moz-transform: scaleX(1); -ms-transform: scaleX(1); -o-transform: scaleX(1); }
.inicio .seccion1 .swiper-slide { width: 100%; height: 80vh; min-height: 800px; }
.inicio .seccion2 .dflex .uno { width: 65%; height: 700px; padding: 90px 100px 0 100px; background-color: var(--negro); }
.inicio .seccion2 .dflex .uno .marmoles { width: 296px; height: 184px; background-image: url(../img/logos/logo1.png); background-size: contain; background-repeat: no-repeat; background-position: center; }
.inicio .seccion2 .dflex .uno .texto { width: 456px; margin-top: 60px; font-family: var(--sf600); font-size: 20px; line-height: 1.3; color: #ffffff; }
.inicio .seccion2 .dflex .dos { position: relative; width: 35%; background-image: url(../img/fondoimagen.jpg); }
.inicio .seccion2 .dflex .dos::after { content: ''; width: 700px; height: 595px; background-image: url(../img/imagen.jpg); background-size: cover; background-repeat: no-repeat; background-position: center; position: absolute; top: 60px; right: 80px; z-index: 1; }
.inicio .seccion3 { padding-top: 120px; padding-bottom: 100px; }
.inicio .seccion3.v2 { padding-top: 0;  }
.inicio .seccion3 .dflex { padding-top: 30px; padding-bottom: 80px; padding-right: 30px; align-items: center; justify-content: space-between; }
.inicio .seccion3 .titulo { font-family: var(--sf800); font-size: 48px; line-height: 0.54; color: #000000; }
.inicio .seccion3.v2 .titulo { margin-bottom: 50px; }
.inicio .seccion3 .subtitulo { font-family: var(--sf600); font-size: 18px; line-height: 1.44; color: #000000; }
.inicio .seccion3 .subtitulo span { font-size: 28px; }
.inicio .seccion3 .subtitulo span { font-size: 28px; }
.inicio .seccion3 .galeria .swiper-container { padding: 60px 30px 60px 60px; }
.inicio .seccion3 .galeria .portada { position: relative; height: 345px; box-shadow: 0px 2px 20px 10px rgba(0, 0, 0, 0.20); }
.inicio .seccion3 .galeria .nombre { text-transform: uppercase; height: 60px; display: flex; align-items: center; justify-content: center; background-color: var(--negro); font-family: var(--sf600); font-size: 20px; line-height: 1.3; text-align: center; color: #ffffff; }
.inicio .seccion3 .galeria [data-marca='1']::after { content: url("../img/formas/1.svg"); position: absolute; top: -25px; left: -50px; z-index: -1; }
.inicio .seccion3 .galeria [data-marca='2']::after { content: url("../img/formas/2.svg"); position: absolute; top: -25px; left: -50px; z-index: -1; }
.inicio .seccion3 .galeria [data-marca='3']::after { content: url("../img/formas/3.svg"); position: absolute; top: -25px; left: -50px; z-index: -1; }
.inicio .seccion3 .galeria [data-marca='4']::after { content: url("../img/formas/4.svg"); position: absolute; top: -25px; left: -50px; z-index: -1; }
.inicio .seccion3 .galeria [data-marca='5']::after { content: url("../img/formas/5.svg"); position: absolute; top: -25px; left: -50px; z-index: -1; }
.inicio .seccion3 .galeria [data-marca='6']::after { content: url("../img/formas/6.svg"); position: absolute; top: -25px; left: -50px; z-index: -1; }
.inicio .seccion3 .galeria [data-marca='7']::after { content: url("../img/formas/7.svg"); position: absolute; top: -25px; left: -50px; z-index: -1; }
.inicio .seccion3 .galeria [data-marca='8']::after { content: url("../img/formas/8.svg"); position: absolute; top: -25px; left: -50px; z-index: -1; }
.inicio .seccion3 .galeria [data-marca='9']::after { content: url("../img/formas/9.svg"); position: absolute; top: -25px; left: -50px; z-index: -1; }
.inicio .seccion3 .galeria [data-marca='10']::after { content: url("../img/formas/10.svg"); position: absolute; top: -25px; left: -50px; z-index: -1; }
.inicio .seccion3 .galeria [data-marca='11']::after { content: url("../img/formas/11.svg"); position: absolute; top: -25px; left: -50px; z-index: -1; }
.inicio .seccion3 .galeria [data-marca='12']::after { content: url("../img/formas/12.svg"); position: absolute; top: -25px; left: -50px; z-index: -1; }
.inicio .seccion3 .galeria [data-marca='13']::after { content: url("../img/formas/13.svg"); position: absolute; top: -25px; left: -50px; z-index: -1; }
.inicio .seccion3 .galeria [data-marca='14']::after { content: url("../img/formas/14.svg"); position: absolute; top: -25px; left: -50px; z-index: -1; }
.inicio .seccion3 .galeria [data-marca='15']::after { content: url("../img/formas/15.svg"); position: absolute; top: -25px; left: -50px; z-index: -1; }
.inicio .seccion3 .galeria [data-marca='16']::after { content: url("../img/formas/16.svg"); position: absolute; top: -25px; left: -50px; z-index: -1; }
.inicio .seccion3 .galeria [data-marca='17']::after { content: url("../img/formas/17.svg"); position: absolute; top: -25px; left: -50px; z-index: -1; }
.inicio .seccion4 .contacto { padding: 60px 100px; background-image: url(../img/fondo-contacto.png); background-color: var(--negro); }
.inicio .seccion4 .contacto .titulo { margin-bottom: 16px; font-family: var(--sf700); font-size: 26px; color: #f0f0f0; }
.inicio .seccion4 .contacto ul { margin-bottom: 40px; padding: 0; list-style: none; }
.inicio .seccion4 .contacto ul > li { font-family: var(--sf700); font-size: 18px; color: #f0f0f0; }
.inicio .seccion4 .mapa { background-image: url(../img/mapa.png); }
@media screen and (max-width: 1399px) { 
    .inicio .seccion2 .dflex .uno { padding: 90px 30px 0 30px; }
    .inicio .seccion3 .galeria .portada { height: 300px; }
    .inicio .seccion4 .contacto { padding: 60px 30px; }
    .inicio .seccion2 .dflex .dos::after { width: 550px; }
}
@media screen and (max-width: 1199px) { 
    .inicio .seccion3 .galeria .portada { height: 240px; }
    .inicio .seccion2 .dflex .uno .texto { width: 400px; }
    .inicio .seccion2 .dflex .dos::after { right: 10%; }
}
@media screen and (max-width: 1099px) { 
    .inicio .seccion2 .dflex .dos::after { width: 500px; }
}
@media screen and (max-width: 991px) { 
    .inicio .seccion2 .dflex .uno { width: 100%; }
    .inicio .seccion2 .dflex .dos { width: 100%; }
    .inicio .seccion2 .dflex .uno .marmoles { margin: auto; }
    .inicio .seccion2 .dflex .uno .texto { width: auto; text-align: center; font-size: 18px; }
    .inicio .seccion2 .dflex .dos { height: 400px; }
    .inicio .seccion2 .dflex .dos::after { width: 90%; height: 500px; top: -140px; right: 0; left: 0; margin: auto; }
    .inicio .seccion3 { padding-top: 90px; padding-bottom: 60px; }
    .inicio .seccion3 .titulo { font-size: 40px; line-height: 1; }
    .inicio .seccion3 .subtitulo { font-size: 16px; }
    .inicio .seccion3 .subtitulo span { font-size: 24px; }
    .inicio .seccion3 .galeria .nombre { height: 50px; font-size: 16px; }
    .inicio .seccion3 .galeria .portada { height: 160px; }
    .inicio .seccion3 .subtitulo { margin-top: 20px; }
    .inicio .seccion4 .mapa { height: 500px; }
}
@media screen and (max-width: 767px) { 
    .inicio .seccion2 .dflex .uno .marmoles { width: 100%; height: 140px; }
    .inicio .seccion2 .dflex .uno { padding: 60px 10px 60px 10px; height: auto; }
    .inicio .seccion2 .dflex .dos::after { width: 90%; height: 90%; top: 20px; }
    .inicio .seccion2 .dflex .dos { height: 300px; }
    .inicio .seccion3 { padding-top: 60px; padding-bottom: 60px; }
    .inicio .seccion3 .titulo { font-size: 40px; line-height: 1; }
    .inicio .seccion4 .contacto { padding: 40px 10px; }
    .inicio .seccion4 .mapa { height: 400px; }
    .inicio .seccion3 .galeria [class*="col-"] { margin-bottom: 30px; }
} 
@media screen and (max-width: 400px) { 
    .inicio .seccion3 .galeria .portada { height: 120px; }
    .inicio .seccion3 .galeria .nombre { height: 45px; font-size: 15px; }
} 

.boton{ font-family: var(--sf500); font-size: 17px; text-align: center; color: #f0f0f0;;  padding: 10px 15px; border: none; background: none; }
.boton.draw{ position: relative; font-family: var(--bold); background-color: transparent; border: solid 1px var(--blanco);  }
button::before, button::after { box-sizing: inherit; content: ''; position: absolute; width: 100%; height: 100%; }
.draw { transition: color 0.25s; }
.draw::before, .draw::after { border: 2px solid transparent; width: 0; height: 0; }
.draw::before { top: 0; left: 0; }
.draw::after { bottom: 0; right: 0; }
.draw:hover { color: var(--azul); }
.draw:hover::before, .draw:hover::after { width: 100%; height: 100%; }
.draw:hover::before { border-top-color: var(--blanco); border-right-color: var(--blanco); transition: width 0.25s ease-out, height 0.25s ease-out 0.25s; }
.draw:hover::after { border-bottom-color: var(--blanco); border-left-color: var(--blanco); transition: border-color 0s ease-out 0.5s, width 0.25s ease-out 0.5s, height 0.25s ease-out 0.75s; }
.meet:hover { color: var(--blanco); }
.meet::after { top: 0; left: 0; }
.meet:hover::before { border-top-color: var(--blanco); border-right-color: var(--blanco); }
.meet:hover::after { border-bottom-color: var(--blanco); border-left-color: var(--blanco); transition: height 0.25s ease-out, width 0.25s ease-out 0.25s; }