/**************************************/
/* Desarrollado: Ing Alfredo Marcano  */
/* Diseño: Ing Alfredo Marcano        */
/* Version: 1.0                       */
/**************************************/

@import url('icons.css');
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@300&display=swap');

/* import fuentes */

@font-face {
    font-family: 'arquitect';
    src: url(../font/arquitecta/ArquitectaLight.otf);
}

@font-face {
    font-family: 'Square';
    src: url(../font/Typo_Square/Typo_Square_Bold.otf);
}

@font-face {
    font-family: 'Puente';
    src: url(../font/puente/Puente_Bueno.ttf);
}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* font-family: 'arquitect'; */
    text-decoration: none;
    list-style: none;
}

:root{
    --bg-blue-template: #0071b1;
    --bg-grey-template: #c1c1c1;
    --bg-white-template: #ffffff;
    --bg-black-template: #000000;
    --bg-white-template-opac-20: #ffffff4a;
    --bg-white-template-opac-40: #ffffffc4;
    --bg-white-template-opac-80: #ffffffe8;
    --bg-blue-template-opac-80: #0071b1a8;
    --font-text-general: 18px;
    --font-text-p: 1.8rem;
    --font-text-nav: 16px;
    --font-text-btn: 15px;
    --font-text-title: 3.5rem;
}

.width-80{ margin: 0 auto; width: 80%; }
.width-85{ margin: 0 auto; width: 85%; }
.width-90{ margin: 0 auto; width: 90%; }
.width-95{ margin: 0 auto; width: 95%; }

.border-blue{ position: absolute; content: ''; width: 300px; height: 300px;background-color: transparent;border: 10px solid;border-image: linear-gradient(90deg,transparent 0 40%, var(--bg-blue-template) 50% 100%)1;border-radius: 10px;z-index: 0;}
.border-blue-corto{ position: absolute; content: ''; width: 150px; height: 300px;background-color: transparent;border: 10px solid;border-image: linear-gradient(to right,transparent 0 1%, var(--bg-blue-template) 1% 0%)1;border-radius: 10px;z-index: 0;}
.border-grey{ position: absolute; content: ''; width: 300px; height: 300px;background-color: transparent;border: 10px solid;border-image: linear-gradient(90deg,transparent 0 40%, var(--bg-grey-template) 50% 100%)1;border-radius: 10px;z-index: 0;}
.border-grey-corto{ position: absolute; content: ''; width: 150px; height: 300px;background-color: transparent;border: 10px solid;border-image: linear-gradient(to right,transparent 0 1%, var(--bg-grey-template) 1% 0%)1;border-radius: 10px;z-index: 0;}

/****** Seccion superior franga azul *******/
.seg-top{background-color: var(--bg-blue-template);padding: 0.75rem 0;}
    .seg-top .width-90{display: flex;justify-content: space-between;align-items: center;}
        .seg-date{color: var(--bg-white-template);font-size: 14px; font-family: 'Square';}
        .seg-redes{display: flex;list-style: none;gap: 10px;}

/****** Seccion superior navegador ************/
.seg-nav{background-color: var(--bg-white-template);box-shadow: 2px 2px 3px 1px var(--bg-grey-template);position: relative;z-index: 2;}
    .seg-nav .width-90{display: flex;justify-content: space-between;align-items: center;}
        .seg-logo{width: 120px;height: 70px;}
        .seg-naveg{display: flex;justify-content: space-between;gap: 10px;font-size: var(--font-text-nav);color: var(--bg-white-template); font-family: 'Square';}

/******** Seccion del caraousel **************/
.seg-header{background: var(--bg-grey-template);padding: 0rem 0 10px;}
    .header-pac{position: relative;height: 90vh;width: 100%;}
        .seg-cuadre-one, .seg-cuadre-one::before, .seg-cuadre-one::after, .seg-cuadre-two, .seg-cuadre-two::before, .seg-cuadre-two::after{content: '';position: absolute;width: 160px;height: 160px;display: block;z-index: 1;}
        .seg-cuadre-one::before, .seg-cuadre-two::before{ background:url('../imagenes/header/cuadre-skyblue.svg') no-repeat; }
        .seg-cuadre-one, .seg-cuadre-two{ background:url('../imagenes/header/cuadre-blue.svg') no-repeat; }
        .seg-cuadre-one::after, .seg-cuadre-two::after{ background:url('../imagenes/header/cuadre-white.svg') no-repeat; }
        .seg-cuadre-one::before{ top: 50%; left: 60%; animation: 12s cuadreOneBef infinite}
			@keyframes cuadreOneBef{ 0%{ left:60%; } 50%{ left:70% } 100%{ left:60% } }
        .seg-cuadre-one{ top: 2%; left: 25%; animation: 12s cuadreOne infinite forwards}
			@keyframes cuadreOne{ 0%{ top:2%; } 50%{ top:3% } 100%{ top:2% } }
        .seg-cuadre-one::after{ top: 20%; left: -60%; animation: 12s cuadreOneAft infinite }
			@keyframes cuadreOneAft{ 0%{ top:20%; } 50%{ top:30% } 100%{ top:20% } }
        .seg-cuadre-two::before{bottom: -110%; left: 11%; animation: 12s cuadreTwoBef infinite;}
			@keyframes cuadreTwoBef{ 0%{ bottom:-110%; } 50%{ bottom:-113% } 100%{ bottom:-110% } }
		.seg-cuadre-two{ bottom: 30%; left: 0%; animation: 12s cuadreTwo infinite}
			@keyframes cuadreTwo{ 0%{ left:0%; } 50%{ left:1% } 100%{ left:0% } }
        .seg-cuadre-two::after{ bottom: -45%; left: 36%; animation: 12s cuadreTwoAft infinite}
			@keyframes cuadreTwoAft{ 0%{ bottom:-45%; } 50%{ bottom:-47% } 100%{ bottom:-45% } }
        .seg-text{position: absolute;width: 35%;min-height: 40%;bottom: 50%;right: 0;transform: translate(0%, 40%);padding: 2.5rem 2rem 2rem;background-color: var(--bg-blue-template-opac-80);border-radius: 50px 0px 0px 50px;border-top: 1.2rem solid var(--bg-white-template-opac-80);border-bottom: 1.2rem solid var(--bg-white-template-opac-80);border-left: 1.2rem solid var(--bg-white-template-opac-80);display: flex;flex-direction: column;justify-content: space-between;} 
            .seg-text span{display: block;margin: 0 auto;font-size: var(--font-text-title);color: var(--bg-white-template); font-family: 'Puente';}
            .seg-text p{color: var(--bg-white-template);margin: 1rem 0 ;line-height: 1.8rem;font-size: var(--font-text-p); font-family: 'arquitect'; }
            .seg-text a{padding: 0.5rem 1.75rem;background: var(--bg-black-template);color: var(--bg-white-template);font-size: var(--font-text-btn);border-radius: 12px;display: block;margin: 0 auto;width: max-content; font-family: 'Square'; }   
    .header-carousel .owl-dots{background-color: var(--bg-white-template-opac-40);position: absolute;bottom: 5%;left: 50%;transform: translate(-50%, -5%);width: 100px;display: flex;gap: 10px 20px;padding: 8px 12px;width: max-content;border-radius: 6px;}
    .header-carousel .owl-dots .owl-dot.active{background-color: var(--bg-blue-template);}
    .header-carousel .owl-dots .owl-dot{width: 20px;height: 20px;background-color: var(--bg-blue-template-opac-80);border-radius: 2px;}

/******* Seccion One ********/

.seg-1{position: relative;margin-top: 2rem;background: url('../imagenes/bag-seg-1.jpg') no-repeat;background-size: 100% 100%;height: 100vh;}

    .border-one{ top: 1%; right: 0px; transform: scale(-1); }
    .border-two{ top: 20%; left: -150px; border-image: linear-gradient(-4deg,transparent 0 40%, var(--bg-grey-template) 50% 100%)1;}

    .segGrid { display: grid;grid-template-columns: 0.8fr 0.3fr 1.2fr;grid-template-rows: repeat(3, 1fr);grid-gap: 10px;height: 100vh;width: 100%;}
        .div1 {grid-area: 1 / 1 / 2 / 3; display: flex;align-items: center;flex-direction: column;justify-content: center; z-index: 1;}
        .div1 h1 {font-size: var(--font-text-title); display: block;margin: 0 auto 1rem; text-align: center; font-family: 'Puente';}
            .div1 p{margin-top: 1rem;
                line-height: 2rem;
                font-size: var(--font-text-p);
                font-family: 'arquitect';
                background: #fffffff7;
                padding: 1rem 1.5rem;
                border-radius: 6px;}
        
        .div2 {grid-area: 1 / 3 / 3 / 4;}
            svg.radial-progress{height:auto;width:100%;padding:0;transform:rotate(-90deg);width:100%;background:linear-gradient(260deg,var(--bg-blue-template), var(--bg-grey-template));border-radius:50%;}
            section.svg-container{width:50%;display:flex;align-items:center;justify-content:space-evenly;height:100%; padding: 0rem; margin: 0 auto;}
            section.svg-container svg.radial-progress:nth-child(even) {margin: 0 15px;}
            svg.radial-progress circle{fill:transparent;stroke:#fff;}
            svg.radial-progress circle.bar-static{stroke:#fafafa!important;}
            svg.radial-progress circle.bar--animated{stroke-dasharray:219.91148575129;stroke:#ffffff;stroke-dashoffset:219.91148575129;stroke-width:4px;stroke-linecap:round;}
            svg.radial-progress text{fill:#fafafa;font-family:Roboto;font-size:16px;font-weight:700;text-anchor:middle;text-shadow:0 0 5px #0000007a; font-family: 'arquitect';}
        
        .div3 { grid-area: 2 / 1 / 4 / 2; border-radius: 12px 12px 0px 0px;}
            .seg1-static{display: flex;flex-direction: column;align-items: center;justify-content: space-evenly;height: 100%;}
            .seg1-static li{ width: 100%; display: flex; justify-content: space-evenly; align-items: center;}
            .seg1-static li h1{ font-size: 4.5rem; color: var(--bg-white-template); font-family: 'arquitect';}
            .seg1-static li h6{ font-size: 1.5rem; color: var(--bg-white-template-opac-40); padding:0 2rem; font-family: 'arquitect';}
            .seg1-static{display: flex;align-items: center;}

        .div4 { grid-area: 3 / 2 / 4 / 4; display: flex;align-items: center; }

            .seg1-img{border-radius: 10px;border: 5px solid var(--bg-grey-template);width: 100%;height: 100%; border: 6px solid var(--bg-blue-template);}
            .seg1-img img{ border-radius: 4px; }
            .seg1-carousel .owl-dots{background-color: var(--bg-blue-template);position: absolute;bottom: -20%;left: 50%;transform: translate(-50%, -0%);width: 100px;display: flex;gap: 10px 20px;padding: 8px 12px;width: max-content;border-radius: 6px;}
            .seg1-carousel .owl-dots .owl-dot.active{background-color: var(--bg-white-template);}
            .seg1-carousel .owl-dots .owl-dot{width: 20px;height: 20px;background-color: var(--bg-white-template-opac-80);border-radius: 2px;}

        .div5 { grid-area: 2 / 2 / 3 / 3;}

/* Secction 2 */
    .seg-2{position: relative;margin: 0;padding: 6rem 0 2rem;background: url('../imagenes/bag-seg-2.jpg') no-repeat;background-size: 100% 100%;min-height: 100vh;}
    .seg-2-context{display: flex;flex-direction: column;justify-content: space-evenly;height: 100%;}
    .seg2-tit{display: flex; justify-content: flex-end; font-size: 2.5rem; padding: 2.5rem 0; font-family: 'Puente';}
    .seg2-content{ background: linear-gradient(to left, #f3f3f3bf, transparent); padding: 4rem 0; font-family: 'arquitect';}
    .seg2-content p{ font-size: var(--font-text-p); font-weight: 500; line-height: 2rem;}

    .seg2-img{border-radius: 10px;width: 100%;height: 100%; padding: 6px;}
    .seg2-img img{ padding: 6px; border-radius: 4px; box-shadow: inset 0px 0px 0px 6px var(--bg-blue-template), 0px 0px 0px 6px var(--bg-white-template)}

    .seg2-carousel .owl-nav{ position: absolute;top: 50%;left: 0;width: 100%;display: flex;justify-content: space-between; transform: translate(0%, -50%);}
    .seg2-carousel .owl-nav button.owl-next, .seg2-carousel .owl-nav button.owl-prev{ background-color: var(--bg-white-template-opac-20) !important; color: var(--bg-blue-template) !important; font-size: 4rem !important;}
    
/* Secction 3 */
.seg-3{position: relative;padding: 1rem 0;background: url('../imagenes/bag-seg-3.jpg') no-repeat;background-size: 100% 100%;min-height: 70vh;}
.seg3-flex{display: flex;}
.seg3-carousel{ width: 100%; position: relative;}
    .seg3-carousel li:nth-child(1){ position: absolute; content: ''; top: 0;left: 10%;}
    .seg3-carousel li:nth-child(2){ position: absolute; content: ''; top: 20%;left: 50%;}
    .seg3-carousel li:nth-child(3){ position: absolute; content: ''; top: 40%;left: 10%;}
    .seg3-carousel li:nth-child(4){ position: absolute; content: ''; top: 60%;left: 50%;}
.seg3-carousel li{ display: flex;}
.seg3-carousel li img{ width: 360px; height: 260px; border-radius: 12px; border: 8px solid white; transition: 0.5s;}
    .seg3-carousel li:nth-child(2) img, .seg3-carousel li:nth-child(4) img{ 
        box-shadow: 3px 6px 11px 0px #207798ba;
    }
    .seg3-carousel li:nth-child(1) img, .seg3-carousel li:nth-child(3) img{ 
        box-shadow: -3px -6px 11px 0px #207798ba;
    }
.seg3-carousel li img:hover{
    border-color: var(--bg-blue-template);
    transform: scale(1.02, 1.02);
    transition: 0.1s ease-in;
    z-index: 1;
}

.seg3-text{ width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: space-between; gap: 2rem;}
.seg3-text h1{font-size: 2.5rem; margin: 0 auto; font-family: 'Puente';}
.seg3-text p{font-size: var(--font-text-p); line-height: 2rem; font-family: 'arquitect';}
.seg3-text a{font-size: 1.6rem; background-color: var(--bg-blue-template); color: var(--bg-white-template); padding: 0.7rem 1.2rem; border-radius: 6px; margin: 0 auto; font-family: 'Square';}

/* Secction 4 */
.seg-4{position: relative;padding: 2rem 0 6rem;background: url('../imagenes/bag-seg-4.jpg') no-repeat;background-size: 100% 100%;height: 100%;}
.seg4-tit{font-size: var(--font-text-title); display: block;margin: 0 auto 2rem; color: var(--bg-black-template); font-family: 'Puente';}
.seg4-grid{columns: 4 360px;column-gap: 2em;}
.seg4-grid li{ margin-bottom: 2rem; transition: all 0.5s; position: relative;}
.seg4-grid li span{ position: absolute; bottom: 0px; padding: 10px; background: white; border-radius: 0px 0px 10px 10px; opacity: 0;}
.seg4-grid li:hover{
    transform: scale(1.02, 1.02);
    transition: 0.5s;
    box-shadow: 0px 0px 0px 6px var(--bg-blue-template);
    border-radius: 8px;
}
.seg4-grid li:hover span{ opacity: 1; transition: 0.6s; font-family: 'arquitect';}
.seg4-grid li img{ max-width: 100%; margin-bottom: 1em; display: block; outline: double var(--bg-grey-template); outline-offset: -10px; box-shadow: 0px 0px 6px 1px var(--bg-grey-template); border-radius: 8px;}

/* Section 5 */
.seg-5{position: relative;padding: 10rem 3rem;background: var(--bg-blue-template);height: 100%;}
.seg5-tit{ font-size: var(--font-text-title); display: block;margin: 0 auto 1rem; text-align: center; color: var(--bg-white-template); font-family: 'Puente';}
.seg5-cont{ line-height: 2.5rem; font-size: var(--font-text-p); font-family: 'arquitect';}

/* Section 6 */
.seg-6{background: url('../imagenes/contact/fondo.png') no-repeat; background-size: 100%; height: 100%; padding: 2rem 0 4rem; gap: 20px;}
    .seg6-flex{display: flex; justify-content: space-between;}
    .seg6-fig{width: 100%;}
    .seg6-fig iframe{border-radius: 8px; box-shadow: 0px 0px 9px -1px  var(--bg-grey-template); outline: 1px solid var(--bg-grey-template); outline-offset: -10px;}
    .seg6-form{ width: 100%;}
    .seg6-form h1{ font-size: var(--font-text-title); width: 100%; margin: 10px auto; font-family: 'Puente';}
    input[type="text"], textarea{width: 100%; margin-bottom: 1rem; padding: 0.75rem; border-radius: 4px; border: 1px solid var(--bg-grey-template); resize: none; font-size: 16px;}
    .seg6-form a{ background: var(--bg-blue-template);color: var(--bg-white-template);padding: 0.75rem 1.25rem;border-radius: 6px;margin: 5px auto;display: block;width: max-content; font-family: 'Square';}

/* Footer */
footer{background-color: var(--bg-blue-template); height: 100%;}
    .foot-flex{display: flex;justify-content: space-between;align-items: center;}
    .foot-logo{ width: 280px; height: 120px; background-color: var(--bg-white-template); padding: 0.5rem 5rem 0.5rem 2rem; margin: -2rem 0 -0.5rem; box-shadow: 0px 0px 3px 0px var(--bg-grey-template); border-radius: 0 12px 12px 0;}
    .foot-logo img{ width: 100%; height: 100%;}
    .foot-nav{ display: flex; gap: 20px; color: var(--bg-white-template); font-size: var(--font-text-nav); font-family: 'Square';}
    .foot-redes{display: flex;list-style: none;gap: 10px;}

/* Pie de Pagina*/
.pie-pag ul{display: flex;justify-content: space-between;padding: 1em 0rem; font-family: 'arquitect';}

/* Media Query */
@media screen and (max-width:650px){
    :root{
        --font-text-title:25px;
        --font-text-btn:12px;
    }

    .seg-cuadre-one, .seg-cuadre-one::before, .seg-cuadre-one::after, .seg-cuadre-two, .seg-cuadre-two::before, .seg-cuadre-two::after{width: 60px;height: 60px;}
    .owl-carousel .owl-item img{height: 100vh; object-fit: cover;}
    .seg-text{width: 75%; padding: 1rem; border-top: 0.8rem solid var(--bg-white-template-opac-80);border-bottom: 0.8rem solid var(--bg-white-template-opac-80);border-left: 0.8rem solid var(--bg-white-template-opac-80); bottom: 45%;}
    .seg-text p{ font-size: 12px; line-height: 1rem; margin: 0.5rem;}
    
    .seg3-flex{flex-direction: column; height: 100%;}
    
    .seg4-grid{columns: 2;}
    
    .seg-5{padding: 2rem 1rem;}
    
    .seg6-flex{flex-direction: column;}
        .seg6-flex iframe{width: 100%;}
    
    .foot-flex{flex-direction: column;}
    .foot-logo{ margin: -3rem 0 1rem; height: 100%; padding: 1rem; border-radius: 12px;} 
    .foot-nav{padding: 0.75rem 1rem;}
    .foot-redes{padding: 0.75rem 1rem 1.5rem;}
}