/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    nav .links .accordion-collapse { opacity: 0; transition: 0.1s; height: auto!important; display: none; }
    nav .links .accordion-collapse.collapsing { display: block; opacity: 0; }
    nav .links .accordion-collapse.show { display: block; opacity: 1; }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {}

/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {}

/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {}

nav { z-index: 21; position: relative; background: var(--bg-color); position: fixed; top: 0; right: 0; left: 0; width: 100%; transition: 0.6s; box-shadow: 0px 4px 15px 0px rgba(75, 83, 91, 0.02); border-bottom: 1px solid var(--light-stroke-color); }
nav .container {  }
nav .container .content { position: relative; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; align-content: space-between; justify-content: space-between; padding: 1rem 0; }

nav .logo { z-index: 23; margin-right: 4rem; }
nav .logo img { display: block; height: 1.5rem; width: auto; }

nav .toggle-btn { z-index: 23; display: none; }
nav .toggle-btn button { outline: none; border: 0; background: rgba(0,0,0,0); transition: 0.4s; }
nav .toggle-btn button .bar { width: 25px; height: 2px; background-color: var(--pri-color); margin: 5px 0; transition: 0.5s; }
nav.open .toggle-btn button .bar1 { -webkit-transform: rotate(-45deg) translate(-4px, 4px); transform: rotate(-45deg) translate(-5px, 4px); }
nav.open .toggle-btn button .bar2 { opacity: 0; }
nav.open .toggle-btn button .bar3 { -webkit-transform: rotate(45deg) translate(-4px, -4px); transform: rotate(45deg) translate(-5px, -5px); }

nav .links { flex-grow: 1; position: relative; transition: 0.4s; }
nav .links .links-container { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; align-content: flex-start; justify-content: center; padding-right: 0; padding-left: 0; height: 100%; position: relative; }
nav .links ul.links-content { flex-grow: 1; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: center; align-content: flex-start; gap: 4rem; list-style: none; padding-left: 0; margin-bottom: 0; position: relative; overflow-y: visible; }
nav .links ul.links-content li.links-item {  }
nav .links ul.links-content li.links-item a { cursor: pointer; color: var(--text-color); font-weight: 400; line-height: 1; margin-bottom: 0; font-size: .9rem; text-decoration: none; transition: 0.4s; }
nav .links ul.links-content li.links-item a:hover { color: var(--pri-color); }
nav .links ul.links-content li.links-item a .icon { height: .6rem; width: .6rem; vertical-align: baseline; margin-left: .5rem; transition: 0.2s; filter: var(--gray-filter); }
nav .links ul.links-content li.links-item a:hover .icon { filter: var(--pri-color-filter); }
nav .links ul.links-content li.links-item a[aria-expanded="true"] .icon { transform: rotate(180deg); }

nav .links .accordion-collapse { z-index: 22; position: absolute; top: 2rem; left: 0; right: 0; background: var(--bg-color); box-shadow: 0px 4px 40px rgba(25, 85, 139, 0.09); border: 1px solid var(--light-stroke-color); padding: 0 .5rem; max-width: 800px; }
nav .links .accordion-collapse.servicios { max-width: 600px; }
nav .links .accordion-collapse.productos { max-width: 900px; }
nav .links .accordion-collapse ul.dropdown { padding-left: 0; display: flex; flex-direction: column; flex-wrap: wrap; align-items: stretch; justify-content: space-between; row-gap: 1rem; padding: .5rem 0; }
nav .links .accordion-collapse.servicios ul.dropdown { flex-direction: column; }
nav .links .accordion-collapse.productos ul.dropdown { flex-direction: row; }
nav .links .accordion-collapse ul.dropdown li.dropdown-item { flex: 0 0 calc(50% - 1rem); box-sizing: border-box; transition: 0.2s; }
nav .links .accordion-collapse ul.dropdown li.dropdown-item:hover { background: var(--stroke-color); }
nav .links .accordion-collapse ul.dropdown li.dropdown-item a { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: stretch; text-decoration: none; padding: .7rem .5rem; height: 100%; }
nav .links .accordion-collapse ul.dropdown li.dropdown-item a .icon { flex: 0 0 auto; }
nav .links .accordion-collapse ul.dropdown li.dropdown-item a .icon img { width: 3rem; height: 3rem; display: block; padding: .5rem; border: 1px solid var(--dark-stroke-color); }
nav .links .accordion-collapse ul.dropdown li.dropdown-item a .info { flex: 1; padding-left: 1rem; }
nav .links .accordion-collapse ul.dropdown li.dropdown-item a .info h6 { color: var(--text-color); font-weight: 500; line-height: 2; margin-bottom: 0; font-size: .9rem; transition: 0.4s; }
nav .links .accordion-collapse ul.dropdown li.dropdown-item a .info p { color: var(--gray); font-weight: 400; line-height: 1.2; margin-bottom: 0; font-size: .9rem; transition: 0.4s; white-space: normal; }

nav .contact-btn {  }
nav .contact-btn a { font-size: .85rem; padding: .7rem 1rem; font-weight: 400; }

/* `xxl` applies to x-large devices (large desktops, less than 1400px) */
@media (max-width: 1399.98px) {}

/* `xl` applies to large devices (desktops, less than 1200px) */
@media (max-width: 1199.98px) {
    nav .links .accordion-collapse ul.dropdown li.dropdown-item a .info h6 { font-size: .8rem; }
    nav .links .accordion-collapse ul.dropdown li.dropdown-item a .info p { font-size: .8rem; }
}

/* `lg` applies to medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {
    nav .links .accordion-collapse { width: 150%; left: -30%; }
}

/* `md` applies to small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) {
    nav .container .content { padding: 1rem 0; }

    nav .logo { margin-right: 0; }
    nav .logo img { height: 1.6rem; }

    nav .toggle-btn { display: grid; }
    
    nav .links { background: var(--bg-color); position: fixed; top: var(--navbar-height); right: 0; bottom: 0; left: 0; z-index: 20; transform: translateX(100%); }
    nav.open .links { transform: translateX(0%); }
    nav .links .links-container { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; justify-content: space-between; padding-right: calc(var(--bs-gutter-x) * var(--navbar-sm-multiplier)); padding-left: calc(var(--bs-gutter-x) * var(--navbar-sm-multiplier)); padding-bottom: 1rem; }

    nav .links ul.links-content { flex-direction: column; align-items: stretch; gap: 0; flex-wrap: nowrap; overflow-y: auto; }
    nav .links ul.links-content li.links-item { border-bottom: 1px solid var(--light-stroke-color); }
    nav .links ul.links-content li.links-item a { padding: 1.5rem 0; display: block; font-size: 1.1rem; }
    nav .links ul.links-content li.links-item a .icon { height: .8rem; width: .8rem; float: inline-end; position: relative; top: .25rem; }

    nav .links .accordion-collapse { position: relative; width: 100%; top: unset; left: unset; right: unset; background: unset; box-shadow: none; border: 0; padding: 0; transition: 0.35s; }
    nav .links .accordion-collapse ul.dropdown { flex-wrap: nowrap; }
    nav .links .accordion-collapse.productos ul.dropdown { flex-direction: column; }
    nav .links .accordion-collapse ul.dropdown li.dropdown-item a .info h6 { font-size: .9rem; }
    nav .links .accordion-collapse ul.dropdown li.dropdown-item a .info p { font-size: .9rem; }

    nav .contact-btn { display: block; padding-top: 1rem; border: 1px solid var(--light-stroke-color); }
    nav .contact-btn a { font-size: 1.1rem; width: 100%; text-align: center; padding: 1rem 0; font-weight: 400; }
}

/* `sm` applies to x-small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {}