@import url('https://fonts.googleapis.com/css2?family=Inria+Sans:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&family=Tilt+Warp&display=swap');
*{
    border: 0;
    margin: 0;
    padding: 0;
    font-family: "Inria Sans", serif;
    scroll-behavior: smooth;
}
/*Elementos Generales*/
.f{
    display: flex;
}
.cl{
    flex-direction: column;
}
.rw{
    flex-direction: row;
}
.cc{
    justify-content: center;
    align-items: center;
}
.jc{
    justify-content: center;
}
.sa{
    justify-content: space-around;
}
.sb{
    justify-content: space-between;
}
.jcfe{
    justify-content: flex-end;
}
.jcfs{
    justify-content: flex-start;
}
.ai{
    align-items: center;
}
.aife{
    align-items: flex-end;
}
.aifs{
    align-items: flex-start;
}
 .lk{
    color: black;
    text-decoration: none;
}
/*Plantilla General*/
.pg{
    width: 100;
    height: auto;
    background-color: #4e4e4e;
}
/*Modal Producto*/
.art-md{
    position: fixed;
    width: 100%;
    height: 100vh;
    z-index: 3;
    background-color: rgba(0, 0, 0, 0.85);
    display: none;
    opacity: 0; /* Establecer opacidad a 0 al principio */
    transition: opacity .3s ease-in-out; /* Añadir la transición de opacidad */
}
.art-md.show {
    display: flex; /* Mostrar el modal */
    opacity: 1; /* Establecer la opacidad a 1 cuando se muestre */
}
.md-dt{
    width: 47.5%;
    height: 70vh;
    border-radius: 1vw;
    background-color: #f5f5f5;
}
.data-art{
    width: 50%;
    height: 55vh;
    /* background-color: yellowgreen; */
}
.data-img{
    width: 80%;
    height: 40vh;
    border-radius: 1vw;
    background-color: white;
}
.data-img img{
    width: auto;
    height: 40vh;
    object-fit: contain;
}
.data-nom{
    width: 90%;
    height: 5vh;
    font-size: 1.1rem;
    color: #0470AE;
    /* background-color: turquoise; */
}
.data-mnd{
    width: 60%;
    height: 5vh;
    font-size: 1rem;
    color: #0397D5;
    /* background-color: thistle; */
}
.data-dsc{
    width: 50%;
    height: 55vh;
    /* background-color: violet; */
}
.dsc-bck{
    width: 90%;
    height: 5vh;
    font-size: 3rem;
    color: red;
    /* background-color: rosybrown; */
}
.dsc-bck i{
    transition: all ease .3s;
}
.dsc-bck i:hover{
    cursor: pointer;
    transform: scale(150%);
}
.dsc-txt{
    width: 90%;
    height: auto;
    /* background-color: teal; */
}
.dsc-txt textarea{
    width: 100%;
    height: 40vh;
    resize: none;
    font-size: 1rem;
    pointer-events: none;
    overflow: hidden;
    background-color: transparent;
}
.dsc-btn{
    width: 27.5%;
    height: 6vh;
    /* background-color: slateblue; */
}
.dsc-btn a{
    width: 100%;
    height: 6vh;
    color: white;
    font-size: 1.1rem;
    border-radius: 1vw;
    background-color: #F26A20;
    transition: all ease .3s;
}
.dsc-btn a:hover{
    transform: scale(120%);
    background-color: #25d366;
}
@media (max-width: 480px) {
    .md-dt{
        width: 90%;
        height: 75vh;
        flex-direction: column;
        justify-content: space-around;
    }
    .data-art{
        width: 90%;
        height: 30vh;
    }
    .data-img{
        width: 90%;
        height: 25vh;
    }
    .data-img img{
        width: 90%;
        max-height: 20vh;
    }
    .data-dsc{
        width: 90%;
        height: 35vh;
    }
    .dsc-txt{
        height: 20vh;
    }
    
}
/*WhastsApp*/
.c-wsp{
    top: 80vh;
    left: 90%;
    width: 5%;
    height: 10vh;
    /* background-color: yellow; */
    position: fixed;
    z-index: 1;
}
.c-wsp a{
    width: 100%;
    height: 10vh;
    background-color: #25d366;
    border-radius: 50%;
    font-size: 3rem;
    color: white;
    transition: all ease .3s;
}
.c-wsp a:hover{
    transform: scale(125%);
}
@media (max-width: 480px) {
    .c-wsp{
        left: 80%;
        top: 80vh;
        width: 15vw;
        height: 7.5vh;
    }
    .c-wsp a{
        font-size: 2.5rem;
        height: 7.5vh;
    }
}
/*Menu Pantalla*/
.c-mn{
    width: 100%;
    height: auto;
    background-color: white;
    position: fixed;
    box-shadow: -3px 10px 8px -5px rgba(167,167,167,0.76);
    z-index: 2;
}
.p-mn{
   width: 95%;
   height: auto; 
   /* background-color: yellow; */
}
.mn-lg{
    width: auto;
    height: 7vh;
    /* background-color: antiquewhite; */
}
.mn-lg img{
    height: 5vh;
}
.mn-nlc{
    width: 25%;
    height: 7vh;
    font-size: 1.1rem;
    /* background-color: yellowgreen; */
}
.mn-nlc a{
    color: #053364;
    font-weight: 600;
    transition: all ease .3s;
}
.mn-nlc a:first-child{
    color: #F26A20;
}
.mn-nlc a:hover{
    color: #F26A20;
}
.mn-rd{
    width: 7%;
    height: 7vh;
    /* background-color: thistle; */
}
.mn-rd a{
    color: #053364;
    font-size: 1.1rem;
    transition: all ease .3s;
}
.mn-rd a:hover{
    color: #0397D5;
    transform: translateY(-20%);
}
.mn-tl{
    width: 12%;
    height: 7vh;
    /* background-color: seagreen; */
}
.mn-tl a{
    width: 85%;
    height: 4vh;
    color: white;
    border-radius: 1vh;
    background-color: #F26A20;
    transition: all ease .3s;
}
.mn-tl a:hover{
    background-color: #25d366;
}
.mn-tl a i{
    font-size: 1.3rem;
}
.mn-tl a p{
    font-size: 1.1rem;
}
@media (max-width: 480px) {
    .mn-lg img{
        height: 2.5vh;
    }
    .mn-nlc{
        width: 80%;
        font-size: 1rem;
    }
    .mn-tl{
        display: none;
    }
    .mn-rd{
        display: none;
    }
}
/*Portada*/
.c-prt{
    padding-top: 7vh;
    width: 100%;
    height: 93vh;
    position: relative;
}
.prt-img{
    width: 100%;
    height: 93vh;
    position: absolute;
    overflow: hidden;
    background-color: black;
}
.prt-img img{
    width: 100%;
    height: 93vh;
    object-fit: cover;
    position: absolute;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}
.prt-img img.active {
    opacity: 1;
}
.prt-txt{
    width: 50%;
    height: 5vh;
    /* background-color: yellow; */
    text-align: center;
    top: 50vh;
    position: absolute;
}
.prt-txt h1{
    font-family: "Tilt Warp", serif;
    color: white;
}
.prt-btn{
    width: 25%;
    height: 5vh;
     /*background-color: gold; */
    position: absolute;
    top: 70vh;
}
.prt-btn a{
    /*width: 100%;*/
    /*height: 5vh;*/
    padding:.5vw;
    color: white;
    font-size: 1.3rem;
    background-color: #F26A20;
    border-radius: 1vh;
    transition: all ease .3s;
}
.prt-btn a:hover{
    background-color: #0397D5;
}
@media (max-width: 480px) {
    .prt-txt{
        top: 50vh;
        width: 90%;
    }
    .prt-txt h1{
        font-size: 1rem;
    }
    .prt-btn{
        top: 55vh;
        /*width: 25%;*/
    }
    .prt-btn a{
        font-size: 1rem;
    }
}
/*Porductos Estrella*/
.c-fav{
    padding-top: 7vh;
    width: 100%;
    height: 93vh;
    background-color: white;
}
.fav-tit{
    width: 100%;
    height: 10vh;
    /* background-color: turquoise; */
}
.fav-tit h1{
    font-family: "Tilt Warp", serif;
    color: #0470AE;
}
.fav-lst{
    width: 100%;
    height: 70vh;
    position: relative;
    /* background-color: springgreen; */
}
.fav-arw{
    position: absolute;
    top: 25vh;
    margin-left: 2.5%;
    width: 95%;
    height: 10vh;
    /* background-color: thistle; */
}
.arw-i{
    width: 5vw;
    height: 5vw;
    background-color: rgba(104, 104, 104, 0.3);
    backdrop-filter: blur(10px);
    border-radius: 50%;
    font-size: 3rem;
    color: white;
    transition: all ease .3s;
}
.arw-i:hover{
    background-color: rgba(104, 104, 104, 1);
}
.fav-prd{
    width: auto;
    height: 70vh;
    /* position: relative; */
    flex-wrap: nowrap;
    overflow-x: hidden;
    scroll-behavior: smooth;
    /* background-color: slateblue; */
}
.prd-c{
    width: 20%;
    height: 50vh;
    margin-left:7%;
    /* position: relative; */
    flex: 0 0 auto;
    /* background-color: teal; */
}
.prd-bck{
    width: 100%;
    height: 40vh;
    background-color: #f9f9f9;
    border-radius: 1vh;
    position: relative;
}
.prd-img{
    top: 5vh;
    left: 10%;
    width: 80%;
    height: 30vh;
    position: absolute;
    /* background-color: yellow; */
}
.prd-img img{
    height: 30vh;
}
.prd-cat{
    width: 35%;
    height: 3vh;
    text-align: center;
    color: white;
    border-radius: 1vh;
    background-color: #0397D5;
    position: absolute;
    top: 1vh;
    left: 60%;
}
.dsc-prd{
    width: 100%;
    height: 5vh;
    color: #0470AE;
    /* background-color: violet; */
}
.tit-prd{
    width: 50%;
    /* background-color: yellowgreen; */
}
.prc{
    width: 30%;
    /* background-color: yellow; */
}
.fav-btn{
    width: 100%;
    height: 10vh;
    /* background-color: royalblue; */
}
.btn-prd{
    width: 40%;
    height: 7vh;
    /* background-color: sandybrown; */
}
.btn-prd a{
    width: 30%;
    height: 5vh;
    color: white;
    text-align: center;
    font-size: 1.1rem;
    border-radius: 1vh;
    background-color: #F26A20;
    transition: all ease .3s;
}
.btn-prd a:hover{
    background-color: #0397D5;
}
@media (max-width: 480px) {
    .fav-tit h1{
        font-size: 1.1rem;
    }
    .fav-arw{
        height: auto;
    }
    .arw-i{
        width: 10vw;
        height: 5vh;
        font-size: 2rem;
    }
    .fav-prd{
        height: 60vh;
    }
    .prd-c{
        width: 80%;
        height: 40vh;
    }
    .prd-bck{
        height: 35vh;
    }
    .prd-img{
        top: 5vh;
    }
    .prd-img img{
        height: 30vh;
        object-fit: contain;
    }
    .btn-prd{
        width: 50%;
    }
    .btn-prd a{
    width:80%
}
}
/*Beneficios*/
.c-bnf{
    padding-top: 7vh;
    width: 100%;
    height: 93vh;
    background-color: #f9f9f9;
}
.bnf-tit{
    width: 100%;
    height: 10vh;
    /* background-color: yellow; */
}
.bnf-tit h1{
    font-family: "Tilt Warp", serif;
    color: #0470AE;
}
.bnf-cont{
    width: 85%;
    height: 60vh;
    /* background-color: yellowgreen; */
}
.bnf-tp{
    width: 20%;
    height: 40vh;
    border-radius: 1vh;
    box-shadow: inset 0 0 0 .2vw #0397D5;
    transition: all ease .3s;
    /* background-color: turquoise; */
}
.bnf-tp:hover{
    cursor: pointer;
    box-shadow: none;
    background-color: #0470AE;
    transform: scale(110%);
}
.bnf-tp:hover .tp-i{
    color: white;
}
.bnf-tp:hover .tp-txt{
    color: white;
}
.bnf-tp:hover .tp-prf{
    color: white;
}
.tp-i{
    width: 90%;
    height: 5vh;
    font-size: 2rem;
    color: #0397D5;
    /* background-color: violet; */
}
.tp-txt{
    width: 90%;
    height: 5vh;
    color: #0397D5;
    /* background-color: rosybrown; */
}
.tp-prf{
    width: 90%;
    height: 20vh;
    color: #0397D5;
    font-size: 1.1rem;
    /* background-color: thistle; */
}
.bnf-btn{
    width: 100%;
    height: 10vh;
    /* background-color: wheat; */
}
.bnf-btn a{
    width: 8%;
    height: 5vh;
    color: white;
    border-radius: 1vw;
    background-color: #F26A20;
    transition: all ease .3s;
}
.bnf-btn a:hover{
    background-color: #0397D5;
}
@media (max-width: 480px) {
    .c-bnf{
        justify-content: space-around;
    }
    .bnf-tit h1{
        font-size: 1.3rem;
    }
    .bnf-cont{
        flex-direction: column;
    }
    .bnf-tp{
        width: 100%;
        height: 12.5vh;
    }
    .tp-i{
        display: none;
    }
    .tp-txt{
        height: 4vh;
    }
    .tp-prf{
        height: 5vh;
        font-size: .9rem;
    }
    .bnf-btn a{
        width: 25%;
    }
}
/*Productos*/
.c-art{
    width: 100%;
    min-height: 93vh;
    padding-top: 7vh;
    background-color: white;
}
.art-inf{
    width: 85%;
    height: 7vh;
    /* background-color: yellow; */
}
.art-tit{
    width: 15%;
    height: 7vh;
    color: #0470AE;
    /* background-color: yellowgreen; */
}
.art-cat{
    width: 30%;
    height: 7vh;
    font-size: 1.2rem;
    color: #0470AE;
    transition: all ease .3s;
    /* background-color: violet; */
}
.p-active{
    color: #F26A20;
}
.art-cat p{
    font-weight: 600;
    transition: all ease .3s;
}
.art-cat p:hover{
    cursor: pointer;
    color: #F26A20;
}
.art-cont{
    width: 85%;
    min-height: 80vh;
    flex-wrap: wrap;
    position: relative;
    padding: 5vw;
    box-sizing: border-box;
    /* background-color: yellow; */
}
.art-dt{
    width:17.5%;
    height: 32.5vh;
    border-radius: 1vh;
    margin: 0 2.5%;
    padding-left: 1.25%;
    padding-right: 1.25%;
    padding-top: 2.5%;
    padding-bottom: 2.5%;
    opacity: 1;
    transition: all 0.3s ease-in-out;
    /* background-color: violet; */
}
.art-dt.hidden {
    opacity: 0;
    transform: translateY(10%);
}
.art-bck{
    width: 97.5%;
    height: 30vh;
    border-radius: 1vh;
    position: relative;
    background-color: #f5f5f5;
}
.art-bck img{
    width: 90%;
    height: 30vh;
    object-fit: contain;
    position: absolute;
    /* top: 2.5vh; */
}
.art-nlc{
    width: 17.5%;
    height: 4vh;
    font-size: 1.7rem;
    color: white;
    position: absolute;
    top: 15vh;
    left: 75%;
}
.art-nlc a{
    color: white;
    width: 100%;
    padding: .5vw;
    border-radius: 50%;
    background-color: #0397D5;
    transition: all ease .3s;
}
.art-nlc a:hover{
    background-color: #053364;
}
.art-nlc a i{
    transition: all ease .3s;
}
.art-nlc a:hover i{
    transform: rotate(-45deg);
}
.art-prc{
    width: 75%;
    height: 5vh;
    color: #0397D5;
    font-size: .9rem;
    text-align: center;
    /* background-color: wheat; */
}
@media (max-width: 480px) {
   .art-tit{
    width: 10%;
    font-size: .6rem;
   }
    .art-cat{
    width: 80%;
    font-size: 1.2rem;
   } 
   .art-dt{
    width: 40%;
    height: 20vh;
    justify-content: space-around;
   }
   .art-bck{
    width: 85%;
    height: 12.5vh;
   }
   .art-bck img{
    max-height: 10vh;
    top: 1vh;
   }
   .art-nlc{
    width: 20%;
    font-size: 1.5rem;
    top: 7.5vh;
   }
   .art-prc{
    height: 4vh;
    font-size: .7rem;
   }
}
/*Aliados*/
.c-ali{
    width: 100%;
    height: 70vh;
    padding-top: 7vh;
    background-color: #F26A20;
}
.ali-tit{
    width: 90%;
    height: 10vh;
    /* background-color: yellowgreen; */
}
.ali-tit h1{
    font-family: "Tilt Warp", serif;
    color: white;
}
.ali-cont{
    width: 90%;
    height: 60vh;
    /* background-color: yellow; */
}
.ali-dt{
    width: 30%;
    height: 50vh;
    border-radius: 1vw;
    background-color: #053364;
}
.ali-dt img{
    height: 45vh;
    object-fit: contain;
}
@media (max-width: 480px) {
    .c-ali{
        height: 50vh;
        justify-content: space-around;
    }
    .ali-tit{
        height: 5vh;
    }
    .ali-tit h1{
        font-size: 1.3rem;
    }
    .ali-cont{
        height: 40vh;
        flex-wrap: wrap;
        flex-direction: column;
    }
    .ali-dt{
        width: 30%;
        height: 12.5vh;
    }
    .ali-dt img{
        object-fit: contain;
        height: 12.5vh;
        width: 60%;
    }
}
/*Pie de página*/
.c-pie{
    width: 100%;
    height: 80vh;
    background-color: white;
}
.pie-cont{
    width: 100%;
    height: 60vh;
    background-color: #0397D5;
}
.pie-inf{
    width: 25%;
    height: 50vh;
    /* background-color: yellowgreen; */
}
.inf-img{
    width: 75%;
    height: 12.5vh;
    /* background-color: tomato; */
}
.inf-img img{
    height: 7.5vh;
}
.inf-txt{
    width: 80%;
    height: 25vh;
    /* background-color: thistle; */
}
.inf-txt #area-inf{
    width: 90%;
    color: white;
    resize: none;
    background-color: transparent;
    text-align: left;
    padding-left: 0%;
}
.inf-txt #area-inf::placeholder{
    padding-left: 0%;
}
.inf-nlc{
    width: 70%;
    height: 10vh;
    /* background-color: seagreen; */
}
.inf-nlc a{
    font-size: 1.7rem;
    color: white;
    transition: all ease .3s;
}
.inf-nlc a:hover{
    color: #053364;
    transform: translateY(-40%);
}
.pie-map{
    width: 30%;
    height: 50vh;    
    border-radius: 1vw;
    /* background-color: yellow; */
}
.pie-map iframe{
    border-radius: 1vw;
}
.pie-frm{
    width: 25%;
    height: 50vh;
    /* background-color: violet; */
}
.frm-tit{
    width: 100%;
    height: 5vh;
    color: white;
    /* background-color: yellowgreen; */
}
.pie-frm form{
    width: 100%;
    height: 45vh;
    /* background-color: yellow; */
}
.pie-frm form input{
    width: 90%;
    height: 2vh;
    padding: 1vh 0;
    border-radius: .3vw;
    outline: none;
    padding-left: 2.5%;
    align-self: flex-start;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.pie-frm form input::placeholder{
    font-size: 1rem;
    padding-left: 2.5%;
}
.pie-frm form textarea{
    width: 90%;
    height: 15vh;
    resize: none;
    font-size: 1rem;
    padding-left: 2.5%;
    border-radius: .3vw;
    align-self: flex-start;
}
.pie-frm form textarea::placeholder{
    padding-left: 2.5%;
}
.pie-frm form .frm-btn{
    width: 100%;
    /* background-color: yellowgreen; */
}
.pie-frm form .btn-frm{
    width: 20%;
    height: 4vh;
    background-color: #F26A20;
    color: white;
    margin-right: auto;
    padding-left: 0;
    transition: all ease .3s;
}
.pie-frm form .btn-frm:hover{
    background-color: #053364;
    cursor: pointer;
}
@media (max-width: 480px) {
    .c-pie{
        height: auto;
    }
    .pie-cont{
        flex-direction: column;
        height: auto;
        padding-top: 5%;
        padding-bottom: 5%;
    }
    .pie-inf{
        width: 80%;
        height: 20vh;
        padding-bottom: 5%;
    }
    .inf-img{
        display: none;
    }
    .inf-txt{
        height: auto;
        padding: 1vw;
        text-align: center;
        justify-content: center;
    }
    .inf-txt #area-inf{
        width: 90%;
        height: 20vh;
    }
    .inf-nlc{
        width: 80%;
        padding-top: 5%;
        padding-bottom: 5%;
    }
    .pie-map{
        width: 80%;
        height: 30vh;
        padding-bottom: 5%;
    }
    .pie-frm{
        width: 80%;
        height: 45vh;
    }
    .pie-frm form{
        height: 40vh;
    }
    .pie-frm form input{
        width: 100%;
    }
    .pie-frm form textarea{
        width: 100%;
    }
    .pie-frm form .btn-frm{
        text-align: center;
    }
}