@import url('https://fonts.googleapis.com/css2?family=Anton&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

:root {
    --main-color: #f39200;
    --black-color: #000000;
    --black2-color: #363636;
    --white-color: #ffffff;

    --hex-main-color: invert(13%) sepia(53%) saturate(6182%) hue-rotate(348deg) brightness(110%) contrast(111%);
    --hex-black-color: invert(0%) sepia(8%) saturate(7476%) hue-rotate(163deg) brightness(97%) contrast(98%);
    --hex-white-color: invert(100%) sepia(0%) saturate(7414%) hue-rotate(93deg) brightness(118%) contrast(118%);

    --title-font: "Anton", sans-serif;
    --content-font: "Inter", sans-serif;

}

body { margin: 0px; padding: 0px; font-family: var(--content-font); background-color: var(--black-color); }
body.disabled{ overflow: hidden; color: var(--white-color); }

a { text-decoration: none; }

/* Espaciados */
.pb-sm { padding-bottom: 24px; }

/* LISTAS */
/* ------ */

ul{ margin: 0px; padding: 0px; }
li{ padding: 0px; margin: 0px; list-style: none; font-family: var(--content-font); text-decoration: none; }
li a { text-decoration: none; color: var(--white-color); }
li a:hover, li a:active { color: var(--main-color); }


/* BTNs */

.btn { border-radius: 0px; font-family: var(--title-font); }
.btn-primary{ background-color: var(--main-color); border-color: var(--main-color); letter-spacing: 2px; }
.btn-primary:hover { background-color: var(--black-color); border-color: var(--black-color); }
.btn-primary img { filter: var(--hex-white-color); }


/* MENÚ MÓVIL */
/* ---------- */

#menu_mobile{ position: fixed; width: 100vw; max-width: 560px; right: -100vw; height: 100vh; top: 0px; background-color: var(--black-color); transition: all .5s ease; z-index: 99; overflow: hidden; border-width: 0px; border-left-width: 20px; /*border-color: var(--main-color); border-style: solid;*/ }

#menu_mobile.opened{ right: 0px; }

.close{ position: absolute; z-index: 100; top: 60px; right: 20px; cursor: pointer; }

#menu_mobile .close img{ filter: var(--hex-white-color); width: 80px; }

#menu_mobile .menu_list{ padding-top: 180px; text-align: center; font-size: 2rem; }

    @media(max-width: 991px) AND (orientation: portrait){
        #menu_mobile { }
    }

    @media(max-height: 767px) AND (orientation: landscape){
        #menu_mobile { max-width: 100vw; }
        #menu_mobile .menu_list { padding-top: 60px; font-size: 2rem; left: 50%; }
        #menu_mobile .menu_list li { display: inline; margin: 10px; }
        #menu_mobile .close { top: 10px; right: 20px; }
        #menu_mobile .close img{ width: 40px; }
    }


/* HEADER LOGO, MENU, CALL TO ACTION */
/* --------------------------------- */

#header{ transition: all .3s ease; position: absolute; width: 100vw; z-index: 10; top: 60px; border-width: 0px; }

#header #logo { }

#header #logo img { width: 100%; max-width: 180px; object-fit: contain; }

#header.sticky { position: fixed; top: 0px; background-color: var(--black-color); padding: 20px 0px; border-bottom-width: 0px; border-color: var(--white-color); border-style: solid; }

#header.sticky #logo img { max-width: 80px; }

#header #menu { text-align: center; overflow-x: scroll; }

#header #menu ul { overflow-x: hidden; white-space: nowrap; width: 100%; }

#header #menu li { display: inline; margin: 5px 20px; font-size: 1.2rem; }

#header #call-action { text-align: right; }

#header #call-action .btn-primary{ font-size: 1.2rem; }

#header #mob-menu { display: none; text-align: right; cursor: pointer; }
#header #mob-menu img { filter: var(--hex-white-color); width: 100%; max-width: 80px; }

    @media (max-width: 1499px){
        #header #menu li { font-size: 1rem; margin: 5px; }
    }

    @media (max-width: 1199px){
        #header #menu { display: none; }
        #header #call-action { display: none; }
        #header #mob-menu { display: inline; }
    }

    @media (max-width: 767px){
        #header #logo img { max-width: 120px; }
        #header #mob-menu img { max-width: 60px; }

        #header.sticky {  }
        #header.sticky #logo img { max-width: 50px; }
        #header.sticky #mob-menu img { max-width: 40px; }
    }


/* VIDEO CABECERA PANTALLA COMPLETA */
/* -------------------------------- */

#head_video { width: 100vw; height: 100vh; background-color: var(--black2-color); position: relative; overflow: hidden; }

#head_video video{ position: absolute; top: 50%; left: 50%; min-width: 100%; min-height: 100%; opacity: .8; transform: translate(-50%, -50%); z-index: 1; }

#head_video .video_text{ position: absolute; bottom: 70px; z-index: 2; width: 100vw; color: var(--white-color); font-size: 1.5rem; line-height: 110%; }

#head_video .video_text h1 { color: var(--white-color); font-family: var(--title-font); font-size: 7rem; line-height: 100%; margin: 0px; padding: 0px;}

.video_text .row-1{ border-width: 0px; border-bottom-width: 2px; border-color: var(--white-color); border-style: solid; padding-bottom: 20px; }

.video_text .row-2{ padding-top: 20px; }

.video_text .video_links { text-align: right; }

.video_text .video_links .btn-rounded { background-color: var(--main-color); padding: 10px; overflow: hidden; border-radius: 50%; margin: 5px 10px; height: 60px; aspect-ratio: 1/1; transition: all .3s ease; }

.video_text .video_links .btn-rounded img { margin-top: 5px; height: 30px; object-fit: contain; filter: var(--hex-white-color); }

.video_text .video_links .btn-rounded:hover { transform: scale(1.2); }

    @media(max-width: 1280px){
        #head_video .video_text{ font-size: 1.2rem; }
        #head_video .video_text h1 { font-size: 5rem; }
    }

    @media(max-width: 991px){
        #head_video .video_text{ bottom: 80px; }
        #head_video .video_text h1 { margin-bottom: 20px; font-size: 3rem; }
        .video_text .video_links { text-align: left; margin-top: 20px; }
    }

    @media(max-width: 991px) AND (orientation: portrait){
        #head_video { height: 105vh;}
    }

    @media(max-height: 767px) AND (orientation: landscape){
        #head_video { height: 200vh;}
    }


/* Estilos comunes secciones */
.section-content{ padding: 120px 0px; }
.section-content .title{ font-size: 5.5rem ; font-family: var(--title-font); color: var(--white-color); line-height: 100%; margin-bottom: 30px; }

.section-content .subtitle{ font-size: 3rem ; font-family: var(--title-font); color: var(--white-color); line-height: 100%; margin-bottom: 30px; }

.section-content.back-color-light-1 { background-color: var(--black2-color); }

.centered { text-align: center; }


.section-content .text { font-size: 1.5rem; color: var(--white-color); text-align: justify; }

.section-content .text.top-md { padding-top: 60px; }

section.back-color-1 { background-color: var(--black2-color); }

.centered { text-align: center; }
.section-content .text.centered { text-align: center; }

.right { text-align: right; }

    @media(max-width: 1199px){
        .right.lg-left{ text-align: left; }
    }

    @media(max-width: 991px){
        .section-content{ padding: 50px 0px; }
        .section-content .title { font-size: 3rem; line-height: 110%; }
        .section-content .subtitle{ font-size: 2rem; line-height: 110%;}
        .section-content .text { font-size: 1.2rem; line-height: 120%; text-align: left; }
        .right.md-left{ text-align: left; }
    }


.section-content .col-services-2 { padding-top: 80px; }

    @media(max-width: 1199px){
    .section-content .col-services-2 { padding-top: 0px; }
    }

.box-info { width: 100%; background-color: var(--main-color); /*aspect-ratio: 1/1;*/ margin-bottom: 24px; padding: 40px; cursor: pointer; transition: all .3s ease;
}

.box-info:hover { transform: scale(1.03); }

.box-info .title h2 { font-size: 2rem; text-transform: uppercase; }
.box-info .text { font-size: 1.2rem; text-align: left; }


#home-services { background-position: bottom right; background-repeat: no-repeat; background-size: cover; padding-top: 250px; }

    @media(max-width: 1199px){
        #home-services {
            padding-top: 120px;
        }
    }