:root {
    --color-default: #080C17;
}

* {
    font-family: 'Space Grotesk', sans-serif;
    margin: 0;
    padding: 0;
}

main {
    background-color: var(--color-default);
}

/* NAV MENU */

header {
    font-family: 'Work Sans', sans-serif;
}

nav a {
    color: #fff;
    text-decoration: none;
    align-self: start;
}

#a-cliente {
    border: 1px solid white;
    border-radius: 26px;
    padding: inherit;
    padding: 0.5rem;
}

.space-grotesk {
    font-family: 'Space Grotesk', sans-serif;
}

.work-sans {
    font-family: 'Work Sans', sans-serif;
}

.w-m {
    width: 90%;
    margin: 0 auto;
}

#icon-ham {
    color: white;
}

#nav-idiomas {
    margin: 0;
    border: 1px solid #1FA8DF;
    border-right: 0;
    border-top: 0;
    border-radius: 0 0 0 66px;
    display: flex;
    overflow: hidden;
    flex-direction: column;
    padding-bottom: 2rem;
    z-index: 2;
    position: absolute;
    right: 0;
}

#nav-idiomas div {
    margin: 0;
}

#nav-idiomas ul>li {
    padding-top: 2rem;
    list-style: none;
    overflow: hidden;
}

#nav-idiomas a {
    text-decoration: none;
    color: white;
}

#nav-idiomas ul {
    padding-left: 1rem;
}

#nav-nav .logo,
#nav-nav nav {
    align-self: start;
    padding-top: 4rem;
    z-index: 1;
}

.nav-item.idiomas {
    display: none;
}


@media screen and (max-height: 450px) {

    .sidenav,
    .sidenavR {
        padding-top: 15px;
    }

    .sidenav a,
    .sidenavR a {
        font-size: 18px;
    }
}

@media (min-width: 1200px) {
    .menu-icon {
        position: relative;
        width: 30px;
        height: 100%;
        cursor: pointer;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-end;
    }

    .menu-icon span {
        display: block;
        height: 2px;
        background-color: white;
        margin-top: 0.2rem;
        margin-bottom: 0.2rem;
    }

    .menu-icon span:last-child {
        width: 50%;
    }

    .menu-icon span:nth-last-child(2) {
        width: 70%;
    }

    .menu-icon span:first-child {
        width: 100%;
    }

    #nav-idiomas {
        margin: 0;
        border: 1px solid #1FA8DF;
        border-right: 0;
        border-top: 0;
        border-radius: 0 0 0 66px;
        display: flex;
        overflow: hidden;
        flex-direction: column;
        padding-bottom: 2rem;
        z-index: 2;
        position: absolute;
        right: 0;
    }

    #nav-idiomas div {
        margin: 0;
    }

    #nav-idiomas ul>li {
        padding-top: 2rem;
        list-style: none;
        overflow: hidden;
    }

    #nav-idiomas a {
        text-decoration: none;
        color: white;
    }

    #nav-idiomas ul {
        padding-left: 1rem;
    }

    .navmenu {
        padding: 0;
    }

    .navmenu ul {
        margin: 0;
        padding: 0;
        display: flex;
        list-style: none;
        align-items: center;
    }

    .navmenu li {
        position: relative;
    }

    .navmenu a,
    .navmenu a:focus {
        color: white;
        padding: 18px 15px;
        font-size: 16px;
        font-weight: 400;
        display: flex;
        align-items: center;
        justify-content: space-between;
        white-space: nowrap;
        transition: 0.3s;
    }

    .navmenu a i,
    .navmenu a:focus i {
        font-size: 12px;
        line-height: 0;
        margin-left: 5px;
        transition: 0.3s;
    }

    .navmenu li:last-child a {
        padding-right: 0;
    }

    .navmenu li:hover>a,
    .navmenu .active,
    .navmenu .active:focus {
        color: white;
    }

    .navmenu .dropdown ul {
        margin: 0;
        padding: 10px 0;
        display: block;
        position: absolute;
        visibility: hidden;
        left: 14px;
        top: 130%;
        opacity: 0;
        transition: 0.3s;
        border-radius: 4px;
        z-index: 99;
    }

    .navmenu .dd-box-shadow {
        box-shadow: 0px 0px 30px rgba(var(--color-default-rgb), 0.15);
    }
}

@media (max-width: 1199px) {
    #nav-idiomas {
        margin: 0;
        border: 0;
        border-right: 0;
        border-top: 0;
        border-radius: 0 0 0 66px;
        display: flex;
        overflow: hidden;
        flex-direction: column;
        padding-bottom: 2rem;
        z-index: 2;
        position: absolute;
        right: 0;
    }

    .nav-item.idiomas {
        display: flex;
        justify-content: space-evenly;
        margin-top: 30%;
    }

    .li-idioma {
        display: none;
    }

    .menu-icon {
        position: relative;
        width: 30px;
        height: 100%;
        cursor: pointer;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-end;
    }

    .menu-icon span {
        display: block;
        height: 2px;
        background-color: white;
        margin-top: 0.2rem;
        margin-bottom: 0.2rem;
    }

    .menu-icon span:last-child {
        width: 100%;
    }

    .menu-icon span:nth-last-child(2) {
        width: 100%;
    }

    .menu-icon span:first-child {
        width: 100%;
    }

    .mobile-nav-toggle {
        color: var(--color-nav);
        font-size: 28px;
        line-height: 0;
        margin-right: 10px;
        cursor: pointer;
        transition: color 0.3s;
    }

    .navmenu {
        padding: 0;
        z-index: 9997;
    }

    .navmenu ul {
        display: none;
        position: absolute;
        inset: 60px 20px 20px 20px;
        padding: 10px 0;
        margin: 0;
        border-radius: 6px;
        background-color: var(--color-nav-mobile-background);
        overflow-y: auto;
        transition: 0.3s;
        z-index: 9998;
        box-shadow: 0px 0px 30px rgba(var(--color-default-rgb), 0.1);
    }

    .navmenu a,
    .navmenu a:focus {
        color: var(--color-nav-dropdown);
        padding: 10px 20px;
        font-family: var(--font-secondary);
        font-size: 17px;
        font-weight: 500;
        display: flex;
        align-items: center;
        justify-content: space-between;
        white-space: nowrap;
        transition: 0.3s;
    }

    .navmenu a i,
    .navmenu a:focus i {
        font-size: 12px;
        line-height: 0;
        margin-left: 5px;
        width: 30px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        transition: 0.3s;
    }


    .navmenu .active i,
    .navmenu .active:focus i {
        transform: rotate(180deg);
    }

    .navmenu .dropdown ul,
    .navmenu .megamenu ul {
        position: static;
        display: none;
        z-index: 99;
        padding: 10px 0;
        margin: 10px 20px;
        transition: all 0.5s ease-in-out;
    }

    .navmenu .dropdown ul ul {
        background-color: rgba(33, 37, 41, 0.1);
    }

    .navmenu .dropdown>.dropdown-active {
        display: block;
        background-color: rgba(33, 37, 41, 0.03);
    }

    .mobile-nav-active {
        overflow: hidden;
    }

    .mobile-nav-active .mobile-nav-toggle {
        color: #fff;
        position: absolute;
        font-size: 32px;
        top: 15px;
        right: 15px;
        margin-right: 0;
        z-index: 9999;
    }

    .mobile-nav-active .navmenu {
        position: fixed;
        overflow: hidden;
        inset: 0;
        background: rgba(33, 37, 41, 0.8);
        transition: 0.3s;
    }

    .mobile-nav-active .navmenu>ul {
        display: block;
    }
}

#nav-nav {
    margin: 0 auto;
    padding-left: 3rem;
    padding-top: 0;
    width: 95%;
    margin-right: inherit;
    grid-template-columns: 0.5fr 1fr;
}

.logo img {
    max-width: 212px;
    width: 25vw;
    object-fit: contain;
}

.align-s-normal {
    align-self: normal;
}

.btn-close {
    margin-top: 1.5rem !important;
    margin-right: 0.2rem !important;
    font-size: 1.5rem;
    --bs-btn-close-opacity: 1 !important;
}

.container-fluid {
    padding-left: 0 !important;
}

.offcanvas-body {
    text-align: end;
}

#offcanvasNavbar {
    background-color: var(--color-default);
}

header {
    position: relative;
    background-color: black;
    height: 100vh;
    min-height: 25rem;
    width: 100%;
    overflow: hidden;
}

header video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: 0;
    -ms-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}

header .overlay {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: black;
    opacity: 0.3;
    z-index: 1;
}

.title-inicio {
    display: grid;
    grid-template-rows: 0.7fr 0.3fr;
    position: relative;
    color: white;
    z-index: 1;
    height: 100%;
    gap: 1rem;
}

.title-inicio h1 {
    max-width: 900px;
    margin-left: 5%;
    align-self: end;
    font-size: clamp(1rem, 8vw, 3rem);
}

#btns-inicio {
    display: flex;
    flex-direction: row;
    margin-left: 5%;
}

#btns-inicio .btn-b1,
#btns-inicio .btn-b2 {
    border: 1px solid #00B1E4;
    border-radius: 45px;
    padding: 0.7rem 1rem;
    color: white;
    font-size: clamp(0.1rem, 4vw, 1rem);
}

#btns-inicio div {
    margin-right: 0.5rem;
}

#btns-inicio a {
    text-decoration: none;
}

.btn-b2 {
    background-color: #1FA8DF;
    min-width: 100px;
}

.btn-b1:hover {
    background-color: #00B1E4;
    color: white;
}

@media (max-width: 546px) {
    #btns-inicio {
        display: flex;
        flex-direction: column;
        margin-left: 5%;
        margin-right: 5%;
    }

    #btns-inicio a {
        margin-top: 0.8rem;
    }
}

/******************************************
        CONOCE NUESTROS PRODUCTOS
******************************************/

#conoce-nuestros-productos {
    width: 90%;
    margin: 0 auto;
    background-color: var(--color-default);
    padding-top: 2rem;
    padding-bottom: 2rem;
    padding-top: 5rem;
}

#conoce-nuestros-productos div.text-center {
    max-width: 900px;
    margin: auto;
    margin-bottom: 5rem;
}

#owl-productos .item>img {
    object-fit: contain;
    position: relative;
    background-color: #252E36A6;
    opacity: 0.4;
}

.owl-carousel {
    width: 100%;
    height: 100%;
    position: relative;
}

#c-prod .text-carousel {
    position: absolute;
    color: white;
    top: 40%;
    z-index: 9999999;
}

.text-carousel {
    text-align: center;
}

.text-carousel>img {
    width: 70% !important;
    margin: auto;
    border-bottom: 1px solid white;
}

.text-carousel span {
    height: 10px;
    width: 30px;
    background-color: #fff;
}

.btn-saber {
    border: 1px solid white;
    border-radius: 66px;
    margin: 1rem;
    padding: 0.5rem 1rem;
    opacity: 0;
}

.proximamente {
    opacity: 0;
}

.text-carousel p {
    width: 70%;
    margin: auto;
    margin-top: 1rem;
    font-weight: 100;
}

.item.a {
    display: flex;
    align-content: center;
    justify-content: center;
}

.item.a::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s ease;
}


.item1::before {
    background-color: #557ca0;
}

.item2::before {
    background-color: #43abc5;
}

.item3::before {
    background-color: #fb5908;
}

.item4::before {
    background-color: #493b62;
}

.item5::before {
    background-color: #80539c;
}

.item6::before {
    background-color: #df320f;
}

.item7::before {
    background-color: #bd1523;
}

.item8::before {
    background-color: #bd1523;
}

.item1:hover::before,
.item2:hover::before,
.item3:hover::before,
.item4:hover::before,
.item5:hover::before,
.item6:hover::before,
.item7:hover::before,
.item8:hover::before {
    opacity: 1;
}

.item1:hover button,
.item2:hover button,
.item3:hover button,
.item4:hover button,
.item5:hover button,
.item6:hover button,
.item7:hover button,
.item8:hover button,
.item1:hover button {
    opacity: 1;
}

.item6:hover .proximamente {
    opacity: 1;
}

#owl-productos .item:hover .text-carousel {
    transform: translateY(-30%);
    transition: 0.4s;
}

@media (max-width: 790px) {

    .item.a button {
        opacity: 1 !important;
    }

    .item.a .proximamente {
        opacity: 1 !important;
    }

    .item1:hover::before,
    .item2:hover::before,
    .item3:hover::before,
    .item4:hover::before,
    .item5:hover::before,
    .item6:hover::before,
    .item7:hover::before,
    .item8:hover::before {
        opacity: 0;
    }

    .text-carousel {
        transform: translateY(0) !important;
    }

    #c-prod .text-carousel {
        top: 25%;
    }
}

#c-prod .owl-dots {
    display: none;
}

#c-prod .owl-nav {
    margin-top: 0;
}

.bi-arrow-left-circle-fill,
.bi-arrow-right-circle-fill {
    font-size: 2.5rem;
}

/************************************
                VIDEO
**************************************/

#info-video {
    background-image: url('../imgs/fondo_video.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    padding-top: 5rem;
    padding-bottom: 5rem;
    display: flex;
}

#info-video>div {
    width: 90%;
    margin: auto;
}

#info-video p {
    margin-left: 10%;
    margin-top: 1rem;
}

.c-blue {
    color: #1CA5DC;
}

.link-video {
    color: #1CA5DC;
    text-decoration: none;
}

.bi-play-circle {
    font-size: 3rem;
}

@media (max-width: 600px) {

    #info-video p {
        margin-left: 0;
        margin-top: 2rem;
        text-align: center;
    }
}

/**********************************
        INFORMACION
***********************************/

#informacion {
    width: 90%;
    margin: 0 auto;
    padding-top: 5rem;
    padding-bottom: 5rem;
    max-width: 900px;
}

#informacion p {
    margin-top: 2rem;
}

/************************************
            INDUSTRIAS
************************************/

/* #owl-industrias .item>img {
    object-fit: contain;
    background-color: transparent;
    opacity: 1;
}


#owl-industrias .text-industria {
    position: absolute;
    color: white;
    z-index: 9999999;
    width: 80%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#owl-industrias .item {
    align-items: center;
}

.text-industria>img {
    width: 70% !important;
    margin: auto;
    border-bottom: 1px solid white;
}

.btn-saber2 {
    border: 1px solid white;
    border-radius: 66px;
    margin: 1rem 0;
    padding: 0.5rem 1rem;
    background-color: transparent;
    color: white;
}

.text-industria.p p {
    width: 100%;
    margin: auto;
    margin-top: 1rem;
    font-weight: 100;
}

#owl-industrias .item {
    display: flex;
    justify-content: center;
}

.item.item-i::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s ease;
}

#owl-industrias .item::before {
    background-color: #0000007a;
}

#owl-industrias .item:hover::before {
    opacity: 1;
}

#owl-industrias .item:hover p {
    opacity: 1;
    transition: 0.8s ease;
    position: relative;
    opacity: 1;
    transform: translateY(0);
}

#owl-industrias .item:hover button,
#owl-industrias .item:hover h2 {
    transition: 0.8s ease;
    opacity: 1;
    transform: translateY(0);
}

.text-industria p {
    opacity: 0;
    position: inherit;
    transform: translateY(20px);
    transition: opacity 0.8s ease, transform 0.4s ease;
}

.text-industria h2,
.text-industria button {
    transform: translateY(20px);
    transition: opacity 0.8s ease, transform 0.4s ease;
}

#industrias-mobile {
    display: none;
}

#industrias-mobile div {
    display: gird;
    grid-template-columns: 1fr;
    grid-auto-rows: 1fr;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
}

.row.i1 {
    background-image: url('../imgs/industrias/1-forestal.jpg');
    background-position-y: 60%;
}

.row.i2 {
    background-image: url('../imgs/industrias/2-minera.jpg');
    background-position-y: 60%;
}

.row.i3 {
    background-image: url('../imgs/industrias/3-agricola.png');
    background-position-y: 70%;
}

.row.i4 {
    background-image: url('../imgs/industrias/4-acuicola.jpg');
    background-position-y: 80%;

}

.row.i5 {
    background-image: url('../imgs/industrias/5-transporte.jpg');
    background-position-y: 60%;
}

.row.i6 {
    background-image: url('../imgs/industrias/6-lechera.jpg');
    background-position-y: 80%;
}

#industrias-mobile .row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding-top: 2rem;
    padding-bottom: 2rem;
}

#industrias-mobile .row div {
    text-align: center;
}

@media (max-width: 750px) {
    #industrias {
        display: none;
    }

    #industrias-mobile {
        display: block;
    }
}

.row.i1::before,
.row.i2::before,
.row.i3::before,
.row.i4::before,
.row.i5::before,
.row.i6::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.329);
}

#industrias-mobile .owl-dots,
#industrias-mobile .owl-nav,
#industrias .owl-dots,
#industrias .owl-nav {
    display: none;
}
 */



/***************************************
            VALORES
***************************************/

#valores {
    background-image: url('../imgs/fondo-mas-color.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    padding: 6rem 0;
}

#valores h1 {
    width: 90%;
    margin: 0 auto;
    max-width: 700px;
}

.valores-border {
    border: 2px solid #00B1E4;
    border-radius: 66px;
    padding: 0 0.5rem;
    color: #00B1E4;
    line-height: 1.5;
}

/***************************************
            SELLOS
****************************************/
.sellos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    width: 90%;
    margin: 0 auto;
    padding: 5rem 0;
    max-width: 1200px;
}

.sellos div {
    display: grid;
    align-items: center;
    justify-items: center;
    text-align: center;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.sellos p {
    padding-top: 1rem;
    max-width: 250px;
    padding-left: 1rem;
    padding-right: 1rem;
}

.sellos img {
    max-width: 60%;
}

/***********************************
        OTRO CAROUSEL
***********************************/

#owl-otro .item div {
    position: absolute;
    color: white;
    z-index: 9999999;
    width: 80%;
    height: 100%;
    display: flex;
    flex-direction: column;
    margin-top: 10%;
}

#owl-otro .item {
    display: flex;
    justify-content: center;
}

#owl-otro .item div span {
    height: 1px;
    width: 100%;
    background-color: #fff;
    margin-bottom: 1rem;
}

/***********************************
            TECNOLOGÍAS
***********************************/
#tecnologias {
    width: 90%;
    margin: 0 auto;
    padding-top: 5rem;
    padding-bottom: 3rem;
}

#grid-tecn {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-auto-rows: 1fr;
    gap: 0;
    width: 100%;
}

#grid-tecn div {
    display: grid;
    align-items: center;
    justify-items: center;
    text-align: center;
    margin-bottom: 2rem;
    aspect-ratio: 1/1;
    background-color: #242b37;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    width: 100%;
}

#grid-tecn div img {
    filter: grayscale(100%);
    object-fit: cover;
    width: 70%;
}

#grid-tecn div:hover img {
    filter: grayscale(0%);
    transition: 0.4s ease-in;
}

.owl-prev {
    width: 15px;
    height: 100px;
    position: absolute;
    top: 40%;
    margin-left: -20px;
    display: block !important;
    border: 0px solid black;
}

@media (max-width: 850px) {
    #grid-tecn {
        grid-template-columns: repeat(3, 1fr);
        grid-auto-rows: 1fr;
        gap: 0;
    }

    #grid-tecn div img {
        filter: grayscale(0%);
    }
}

@media (max-width: 650px) {
    #grid-tecn {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 1fr;
        gap: 1rem;
    }

    #grid-tecn div {
        margin-bottom: 0rem;
    }

    #grid-tecn div img {
        filter: grayscale(0%);
    }
}

#tecnologias .owl-dots,
#tecnologias .owl-nav {
    display: none;
}

#tecnologias h2 {
    max-width: 570px;
    margin-bottom: 3rem;
}

/***********************************
            OFRECEMOS
***********************************/

#ofrecemos {
    width: 90%;
    margin: 0 auto;
    padding-top: 3rem;
    padding-bottom: 3rem;
}

#ofrecemos div.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-top: 1rem;
}

#ofrecemos img {
    margin: 2rem 1rem;
    width: 40%;
}

#ofrecemos div.elem:nth-child(3)>img:nth-child(1) {
    width: 30%;
}

#ofrecemos p {
    text-align: justify;
    padding-left: 15%;
    margin-top: 2rem;
}

@media (max-width: 1100px) {
    #ofrecemos div.container {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
        align-items: center;
        justify-items: center;
    }

    #ofrecemos p {
        padding-left: 0;
    }
}

@media (max-width: 780px) {
    #ofrecemos div.container {
        grid-template-columns: repeat(1, 1fr);
        gap: 2rem;
    }

    #ofrecemos .container .elem {
        justify-items: center;
    }

    #ofrecemos p {
        padding-left: 0;
    }
}

#ofrecemos .container .elem {
    display: grid;
    grid-template-rows: 200px 1fr;
}

/********************************************
                GENERAMOS
*********************************************/

#generamos {
    padding-top: 6rem;
    padding-bottom: 6rem;
    background-image: url('../imgs/fondo-mas-color.jpg');
    background-size: cover;
}

#generamos h1 {
    width: 90%;
    margin: 0 auto;
    max-width: 800px;
}

/************************************************
                EMPRESAS
*************************************************/
#empresas {
    background-color: rgba(19, 27, 40, 1);
}

#owl-empresas-mobile {
    display: none;
}

#owl-empresas {
    width: 90%;
    margin: 0 auto;
    padding-bottom: 3rem;
}

#empresas h2 {
    padding-top: 4rem;
    padding-left: 5%;
    max-width: 700px;
}

#owl-empresas .empresas {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-row: 2;
    gap: 0;
    margin-top: 5rem;
}

#owl-empresas .empresas div {
    border: 1px solid white;
    padding: 3rem;
    display: flex;
    aspect-ratio: 1/1;
}

#arauco,
#polykarpo {
    grid-column: 1/2;
}

#arauco,
#enex,
#anchile,
#manu,
#tpf,
#rioclaro,
#biomar,
#fll {
    grid-row: 1/2;
}

#colun,
#unilever,
#kunstmann,
#af,
#cautin,
#polykarpo,
#kunstmann,
#valdes,
#jcs {
    grid-row: 2/3;

}

#unilever img,
#cautin img {
    width: 70%;
    margin: auto;
}

#af,
#biomar {
    grid-column: 5/6;
}

#cautin,
#fll {
    grid-column: 6/7;
}

#tpf,
#valdes,
#anchile,
#colun {
    grid-column: 3/4;
}

#rioclaro,
#jcs,
#manu,
#unilever {
    grid-column: 4/5;
}

#kunstmann,
#enex {
    grid-column: 2/3;
}

@media (max-width: 1100px) {
    #owl-empresas .empresas {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        grid-row: 2;
        gap: 0;
        margin-top: 5rem;
    }

    #owl-empresas .empresas div {
        padding: 2rem;
    }

    #colun,
    #tpf {
        grid-column: 2/3;
    }

    #unilever,
    #rioclaro {
        grid-column: 3/4;
    }

    #af,
    #biomar {
        grid-column: 4/5;
    }

    #cautin,
    #fll {
        grid-column: 5/6;
    }
}

@media (max-width: 850px) {
    #owl-empresas .empresas {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 0;
        margin-top: 5rem;
    }

    #owl-empresas .empresas div {
        padding: 1rem;
    }

    #colun,
    #tpf {
        grid-column: 1/2;
    }

    #unilever,
    #rioclaro {
        grid-column: 2/3;
    }

    #af,
    #biomar {
        grid-column: 3/4;
    }

    #cautin,
    #fll {
        grid-column: 4/5;
    }
}

@media (max-width: 700px) {
    #owl-empresas-mobile {
        display: block;
    }

    #owl-empresas {
        display: none;
    }

    #owl-empresas-mobile {
        margin-top: 3rem;
    }

    #owl-empresas-mobile .empresas {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-row: 2;
        gap: 0;
        justify-content: center;
    }

    #owl-empresas-mobile .empresas div {
        border: 1px solid white;
        padding: 3rem;
        display: flex;
        aspect-ratio: 1/1;
    }

    #owl-empresas-mobile .empresas img {
        height: 100px;
        width: 100px;
    }
}

/* @media (max-width: 442px) {
    #owl-empresas-mobile {
        display: block;
    }
    #owl-empresas {
        display: none;
    }
} */
#carousel-3 .owl-carousel .owl-nav button.owl-prev,
#carousel-3 .owl-carousel button.owl-dot.owl-nav,
#owl-testimonios .owl-carousel .owl-nav button.owl-prev,
#owl-testimonios .owl-carousel button.owl-dot.owl-nav,
#div-testimonios .owl-nav button.owl-prev,
#c-prod .owl-carousel button.owl-dot.owl-nav {
    position: absolute;
    left: 20px;
    top: 50%;
    background-color: transparent !important;
    padding: 0 .3em !important;
    font-size: 2em;
    margin: 0;
    cursor: pointer;
    color: #fff;
    transform: translate(-50%, -50%);
}
#owl-testimonios .owl-carousel .owl-nav button.owl-prev,
#owl-testimonios .owl-carousel button.owl-dot.owl-nav {
    left: -5px;
}

#carousel-3 .owl-carousel .owl-nav button.owl-next,
#carousel-3 .owl-carousel button.owl-dot.owl-nav,
#owl-testimonios .owl-carousel .owl-nav button.owl-next,
#owl-testimonios .owl-carousel button.owl-dot.owl-nav,
#c-prod .owl-carousel .owl-nav button.owl-next,
#c-prod .owl-carousel button.owl-dot.owl-nav {
    position: absolute;
    right: -23px;
    top: 50%;
    background-color: var(--base-color) !important;
    padding: 0 .3em !important;
    font-size: 2em;
    margin: 0;
    cursor: pointer;
    color: #fff;
    transform: translate(-50%, -50%);
}

#owl-testimonios .owl-carousel .owl-nav button.owl-next,
#owl-testimonios .owl-carousel button.owl-dot.owl-nav {
    right: -40px;
}

#empresas .owl-carousel .owl-nav button.owl-next,
#empresas .owl-carousel button.owl-dot.owl-nav {
    position: absolute;
    right: -23px;
    top: 30%;
    background-color: var(--base-color) !important;
    padding: 0 .3em !important;
    font-size: 2em;
    margin: 0;
    cursor: pointer;
    color: #fff;
    transform: translate(-50%, -50%);
}

#empresas .owl-carousel .owl-nav button.owl-prev,
#empresas .owl-carousel button.owl-dot.owl-nav {
    position: absolute;
    left: 20px;
    top: 30%;
    background-color: transparent !important;
    padding: 0 .3em !important;
    font-size: 2em;
    margin: 0;
    cursor: pointer;
    color: #fff;
    transform: translate(-50%, -50%);
}

#empresas .owl-nav .disabled {
    display: none !important;
}


/*******************************************
                TESTIMONIOS
********************************************/

#testimonios {
    width: 90%;
    margin: 0 auto;
    padding-bottom: 3%;
}

.div-testimonios {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 3rem;
}

.card-testimonio {
    background-color: rgba(19, 27, 40, 1);
    padding: 10%;
}

.card-testimonio:hover {
    background-color: rgba(0, 132, 172, 1);
    transition: 0.3s ease-in;
}

#testimonios h3 {
    margin-top: 1rem;
}

.card-testimonio {
    height: 90%;
}

.div-testimonios .card-testimonio.c1 {
    margin-top: 0%;
}

.div-testimonios .card-testimonio.c2 {
    margin-top: 0%;
}

.div-testimonios .card-testimonio.c3 {
    margin-top: 0%;
}

@media (max-width: 1500px) {
    .card-testimonio {
        height: 95%;
    }
}

@media (max-width: 1300px) {
    .card-testimonio {
        height: 90%;
    }
}

@media (max-width: 1280px) {
    .card-testimonio {
        height: 100%;
        padding: 3rem;
    }
}

.comilla-inicio {
    padding-top: 1rem;
    font-size: clamp(2vw, 6vw, 2rem);
    margin: 0;
    line-height: 1rem;
}

.comilla-fin {
    padding-top: 1rem;
    font-size: clamp(2vw, 6vw, 2rem);
    text-align: right;
    line-height: 1rem;
}

@media (max-width: 1272px) {

    .div-testimonios .card-testimonio.c1,
    .div-testimonios .card-testimonio.c2,
    .div-testimonios .card-testimonio.c3 {
        margin-top: 0%;
    }
}

#testimonios h2 {
    max-width: 600px;
}

.title-logo span {
    color: #fff;
    height: 1px;
    width: 100%;
}

.title-logo {
    margin-left: -5%;
    background-image: url('../imgs/w.svg');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: -5rem;
    margin-top: 3rem;
    margin-bottom: 3rem;
}

.title-logo h2 {
    margin-left: 5%;
    padding-top: 4rem;
    padding-bottom: 4rem;
}

.w {
    position: absolute;
    width: 20%;
    left: -7%;
    margin-top: -4rem;
    opacity: 0.4;
}

/* Agrega estilos para el carrusel */
#carrusel-testimonios {
    /*display: grid; *//* Utiliza CSS Grid para alinear las cards */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Define las columnas de igual tamaño mínimo de 300px */
}

/* Agrega estilos para cada elemento del carrusel */
#carrusel-testimonios .card-testimonio {
    margin: 0 25px; /* Separación de 50px entre elementos */
    transform: scale(0.6); /* Reduce el tamaño al 40% (1 - 0.4 = 0.6) */
    transition: transform 0.3s ease; /* Agrega una transición suave */
    min-height: 669px; /* Permite que las cards se ajusten automáticamente */
    display: flex; /* Utiliza Flexbox para alinear el contenido de cada card */
    flex-direction: column; /* Alinea el contenido verticalmente */
}

/* Agrega estilos para el elemento activo */
#carrusel-testimonios .owl-item.active .card-testimonio {
    transform: scale(1); /* Vuelve al tamaño original (1) para el elemento activo */
}

/* Agrega estilos para las imágenes de los testimonios */
#carrusel-testimonios .card-testimonio img {
    width: 30%; /* Reduce el tamaño de las imágenes al 30% */
    margin: auto; /* Centra la imagen horizontalmente */
}

/* Agrega estilos para el contenido de cada card */
#carrusel-testimonios .card-testimonio h3,
#carrusel-testimonios .card-testimonio p {
    flex: 1; /* Hace que el contenido ocupe todo el espacio vertical disponible */
    overflow: hidden; /* Evita que el contenido se desborde */
}

.card-testimonio img {
    display: block !important;
    margin-left: 0 !important;
    margin-right: auto !important;
}

  
/* Nuevo */

/*******************************************
                CONTACTO
********************************************/

#contactanos {
    padding-top: 5rem;
    padding-bottom: 5rem;
    background-image: url('../imgs/fondo-mas-color.jpg');
    background-size: cover;
    background-repeat: no-repeat;
}

#contactanos .div-contact {
    width: 90%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr 0.5fr;
    gap: 3rem;
    align-items: center;
}

form .row {
    margin-bottom: 2rem;
}

input.form-control {
    background-color: transparent !important;
    border-radius: 0 !important;
    color: white !important;
}

form label {
    padding-bottom: 0.5rem;
}

#img-contact {
    background-image: url('../imgs/west.svg');
    background-repeat: no-repeat;
    background-size: contain;
    height: 100%;
    margin-right: -29%;
}

#div-button {
    display: flex;
    justify-content: flex-end;
}

#div-button button,
#btnEnviar {
    background-color: white;
    color: #1FA8DF;
    border-radius: 34px !important;
    padding-left: 1rem;
    padding-right: 1rem;
    font-weight: bold;
}

@media (max-width: 1000px) {
    #img-contact {
        display: none;
    }

    #contactanos .div-contact {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 730px) {
    #contactanos .div-contact {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
}

/***************************************
                SCROLL
****************************************/

.scroll-top {
    position: fixed;
    visibility: hidden;
    opacity: 0;
    right: 15px;
    bottom: 15px;
    z-index: 99999;
    background-color: white;
    width: 40px;
    height: 40px;
    border-radius: 45px;
    transition: all 0.4s;
}

.scroll-top i {
    font-size: 24px;
    color: #080C17;
    line-height: 0;
}

.scroll-top:hover {
    background-color: #1FA8DF;
    color: #ffffff;
}

.scroll-top:hover i {
    color: #ffffff;
}

.scroll-top.active {
    visibility: visible;
    opacity: 1;
}

/* contact */


/* 4k */

#c-prod,
#info-video,
#valores,
#carousel-3,
#tecnologias,
#ofrecemos,
#generamos,
#empresas,
#testimonios,
#contactanos {
    max-width: 1920px;
    margin: 0 auto;
}

/* FOOTER */

footer {
    font-family: 'Work Sans', sans-serif;
    font-size: 12px;
}

footer h1 {
    font-size: medium;
    width: 29%;
}

footer li {
    font-family: 'Space Grotesk', sans-serif;
    color: #FFFFFF;
    font-size: small;
    word-spacing: 0px;
    width: 68%;
}

footer ul {
    width: 100%;
    line-height: 18px;
}

footer img {
    width: 130px;
}

/* Alinear footer */

/* popup */
.gslide-image img {
    max-width: 70% !important;
}

.glightbox-button-hidden {
    display: none !important;
}

@media (min-width: 769px) {
    .glightbox-container .ginner-container {
        width: auto;
        height: auto;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: colum !important;
        flex-direction: column !important;
    }
    .glightbox-clean .gslide-media {
        -webkit-box-shadow: unset !important;
        box-shadow: unset !important;
    }
}

.gslide-inner-content {
    display: flex;
    justify-content: center;
    align-items: center;
}

.gslide-media {
    width: auto; /* Permite que el contenedor ajuste su ancho a la imagen */
    max-width: 100%;
}

@media (min-width: 769px) {
    .goverlay {
        background: rgba(0, 0, 0, .72) !important;
    }
}

.glightbox-mobile .goverlay {
    background: rgba(0, 0, 0, .72) !important;
}