/* VARIABLES */

:root {
    --dark-red: #BC171B;
    --red: #E82127;
    --black: #000;
    --black2: #0B090A;
    --light-gray: #F9F9F9;
    --dark-gray: #222222;
    --white: #FFF;
    --white2: #F9F9F9;
}

/* FONTS */

@font-face {
    font-family: "SF-Pro-Display-Black";
    font-weight: 900;
    src: url("/website_hino/static/src/tambor/fonts/SF-Pro-Display-Black.otf") format("opentype");
}

@font-face {
    font-family: "SF-Pro-Display-Bold";
    font-weight: 800;
    src: url("/website_hino/static/src/tambor/fonts/SF-Pro-Display-Bold.otf") format("opentype");
}

@font-face {
    font-family: "SF-Pro-Display-Semibold";
    font-weight: 700;
    src: url("/website_hino/static/src/tambor/fonts/SF-Pro-Display-Semibold.otf") format("opentype");
}

@font-face {
    font-family: "SF-Pro-Display-Medium";
    font-weight: 600;
    src: url("/website_hino/static/src/tambor/fonts/SF-Pro-Display-Medium.otf") format("opentype");
}

@font-face {
    font-family: "SF-Pro-Display-Light";
    font-weight: 500;
    src: url("/website_hino/static/src/tambor/fonts/SF-Pro-Display-Light.otf") format("opentype");
}

@font-face {
    font-family: "SF-Pro-Display-Thin";
    font-weight: 400;
    src: url("/website_hino/static/src/tambor/fonts/SF-Pro-Display-Thin.otf") format("opentype");
}

@font-face {
    font-family: "SF-Pro-Display-Ultralight";
    font-weight: 300;
    src: url("/website_hino/static/src/tambor/fonts/SF-Pro-Display-Ultralight.otf") format("opentype");
}

/* ADJUSTMENTS GENERAL */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

#wrapwrap {
    overflow: inherit !important;
    height: auto;
}

[required="1"] {
    scroll-margin-top: 180px;
}

section[id], div[id] {
    scroll-margin-top: 150px;
}

@media only screen and (max-height: 750px) {
    [required="1"] {
        scroll-margin-top: 150px;
    }

    section[id] {
        scroll-margin-top: -50px;
    }

    div[id] {
        scroll-margin-top: 105px;
    }
}

body, input {
    font-family: "SF-Pro-Display-Medium";
}

a {
    text-decoration: none;
    font-family: "SF-Pro-Display-Medium";
}

a:hover {
    text-decoration: none !important;
}

figure, ul, p {
    margin: 0;
    padding: 0;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    font-family: "SF-Pro-Display-Medium";
}

/* CONTAINER */

.container {
    max-width: 1500px;
    width: 1500px;
    margin: 0 auto;
    padding: 0;
}

@media only screen and (max-width: 1600px) {
    .container {
        max-width: 1300px;
        width: 1300px;
    }
}

@media only screen and (max-width: 1400px) {
    .container {
        max-width: 1200px;
        width: 1200px;
    }
}

@media only screen and (max-width: 1300px) {
    .container {
        max-width: 1100px;
        width: 1100px;
    }
}

@media only screen and (max-width: 1200px) {
    .container {
        max-width: 1000px;
        width: 1000px;
    }
}

@media only screen and (max-width: 1100px) {
    .container {
        max-width: 900px;
        width: 900px;
    }
}

@media only screen and (max-width: 1000px) {
    .container {
        max-width: 800px;
        width: 800px;
    }
}

@media only screen and (max-width: 900px) {
    .container {
        max-width: 750px;
        width: 750px;
    }
}

@media only screen and (max-width: 800px) {
    .container {
        max-width: 650px;
        width: 650px;
    }
}

@media only screen and (max-width: 700px) {
    .container {
        max-width: 90%;
        width: 90%;
    }
}

/* WHATSAPP */

#draggable-whatsapp {
    z-index: 10000;
    touch-action: none;
    will-change: transform;
}

.whatsapp {
    position: fixed;
    width: 90px;
    height: 90px;
    right: 40px;
    bottom: 20%;
    transition: all 1s cubic-bezier(.165, .84, .44, 1);
    z-index: 100;
    cursor: move;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

@media (hover: hover) and (pointer: fine) {
    .whatsapp:hover {
        transform: scale(1.2);
    }
}

.whatsapp figure {
    width: 100%;
    height: 100%;
}

.whatsapp figure img {
    width: 100%;
    height: 100%;
    pointer-events: none;
}

@media only screen and (max-width: 1400px) {
    .whatsapp {
        width: 80px;
        height: 80px;
    }
}

@media only screen and (max-width: 1300px) {
    .whatsapp {
        width: 70px;
        height: 70px;
        right: 20px;
    }
}

@media only screen and (max-width: 600px) {
    .whatsapp {
        width: 60px;
        height: 60px;
        right: 15px;
    }
}

/* HEADER */

header {
    position: fixed;
    width: 100%;
    z-index: 100;
}

header .header-container {
    width: 100%;
    height: 70px;
    background-color: var(--white);
    display: flex;
    align-items: center;
}

header .header-container .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

header .header-container .container .header-logo {
    display: flex;
    gap: 30px;
}

header .header-container .container .header-logo>a {
    display: flex;
    align-items: center;
    height: 35px;
}

header .header-container .container .header-logo>a figure img {
    width: 215px;
}

header .header-container .container .header-logo input {
    width: 450px;
    height: 36px;
    border: none;
    background-color: var(--light-gray);
    border-radius: 50px;
    padding: 1% 3%;
    font-size: 14px;
    outline: none;
    color: var(--dark-gray);
}

header .header-container .container .header-logo .header-logo-menu {
    display: none;
}

header .header-container .container .header-shopping {
    display: flex;
    width: 50%;
    justify-content: right;
    align-items: center;
    gap: 10px;
}

header .header-container .container .header-shopping .shopping-icon {
    width: 25px;
    height: 25px;
    margin-right: 3%;
    display: flex;
}

.contact-btn {
    font-family: "SF-Pro-Display-Medium";
    height: 36px;
    width: 140px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid var(--dark-gray);
    border-radius: 40px;
    background-color: transparent;
    color: var(--dark-gray);
    font-size: 18px;
    transition: color .20s ease-in-out, background-color .20s ease-in-out, border-color .20s ease-in-out;
    order: 2;
}

.contact-btn:hover {
    border-color: #E82127 !important;
    background-color: #E82127;
    color: var(--white);
}

.mi-portal {
    order: 1;
}

.red-arrow-btn {
    width: 35px;
    height: 35px;
    background-color: var(--red);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 100%;
    order: 3;
}

.red-arrow-btn svg {
    width: 20px;
    height: 20px;
    rotate: 45deg;
}

.header-menu {
    background-color: var(--dark-gray);
    height: 50px;
}

.header-menu .container {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.header-menu .container nav {
    width: 40%;
    height: 100%;
}

.header-menu .container nav ul {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
}

.header-menu .container nav ul li {
    list-style: none;
}

.header-menu .container nav ul li a {
    display: flex;
    align-items: center;
    gap: 5px;
    color: rgba(255, 255, 255, .5);
    font-size: 16px;
    transition: color .20s ease-in-out;
}

.header-menu .container nav ul li a svg path {
    fill: rgba(255, 255, 255, .5) !important;
    transition: fill .20s ease-in-out;
}

.header-menu .container nav ul li a:hover {
    color: var(--white);
}

.header-menu .container nav ul li a:hover svg path {
    fill: var(--white) !important;
}

.header-menu .container nav ul li a svg {
    width: 15px;
    height: 15px;
}

.header-menu .container nav ul li a>figure {
    display: flex;
    transform: rotatex(180deg);
}

.header-menu .container .contact-info {
    width: 45%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.header-menu .container .contact-info div {
    display: flex;
    align-items: center;
    gap: 10px;
}

.header-menu .container .contact-info div figure {
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
}

.header-menu .container .contact-info div figure img {
    width: 100%;
}

.header-menu .container .contact-info div a {
    font-family: "SF-Pro-Display-Light";
    font-size: 16px;
    color: var(--white);
}

.header-menu .container .contact-info div.separator {
    width: 1px;
    height: 22px;
    background: white;
}

.social-media-info a {
    width: 20px;
    height: 20px;
    display: flex;
}

.header-menu .container .contact-info .social-media-info>a>figure {
    width: 100%;
    height: auto;
}

.header-space {
    height: 120px;
    width: 100%;
}

@media only screen and (max-width: 1400px) {
    .contact-btn {
        font-size: 16px;
    }

    .header-menu .container nav {
        width: 45%;
    }

    .header-menu .container .contact-info {
        width: 46%;
    }
}

@media only screen and (max-width: 1300px) {

    .header-menu .container .contact-info {
        width: 48%;
    }

    .header-menu .container .contact-info div {
        gap: 8px;
    }

    .header-menu .container nav ul li a svg {
        width: 12px;
        height: 12px;
    }

    .social-media-info a {
        width: 18px;
        height: 18px;
    }
}

@media only screen and (max-width: 1200px) {

    .header-menu .container .contact-info {
        width: auto;
    }

    .header-menu .container .contact-info div:not(:last-child) {
        display: none;
    }

    .header-menu .container nav {
        width: 55%;
    }

    .header-menu .container .contact-info div {
        gap: 10px;
    }
}

@media only screen and (max-width: 1100px) {

    .contact-btn {
        height: 35px;
    }

    header .header-container .container .header-logo {
        gap: 20px;
    }

    header .header-container .container .header-logo input {
        width: 350px;
    }
}

@media only screen and (max-width: 1000px) {

    .header-menu .container nav {
        width: 70%;
    }

    .header-menu .container .contact-info div {
        gap: 12px;
    }

    header .header-container .container .header-logo input {
        width: 300px;
    }
}

@media only screen and (max-width: 800px) {

    header .header-container .container .header-logo input,
    header .header-container .container .header-shopping .shopping-icon,
    .header-menu {
        display: none;
    }

    .header-space {
        height: 70px;
    }

    header .header-container .container .header-logo .header-logo-menu {
        display: flex;
    }

    header .header-container .container .header-logo>a figure img {
        width: 190px;
    }

    .mi-portal {
        display: none;
    }
}

@media only screen and (max-width: 500px) {
    header .header-container .container .header-shopping .contact-btn {
        width: 120px;
    }

    header .header-container .container .header-logo>a figure img {
        width: 160px;
    }
}

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

    .header-menu .container nav {
        width: 100%;
    }

    .header-menu .container .contact-info {
        width: 100%;
    }

    .header-menu .container .contact-info div {
        gap: 15px;
    }

    .header-menu .container .contact-info div figure {
        width: 20px;
        height: 20px;
    }

    .header-menu .container .contact-info div a {
        font-size: 14px;
    }

    .header-menu .container .contact-info div.separator {
        width: 2px;
        height: 22px;
    }

    .header-menu .container .contact-info div:not(:last-child) {
        display: none;
    }

    .header-menu .container .contact-info div:last-child {
        display: block;
    }

    .header-menu .container .contact-info div:last-child:after {
        content: '';
        display: block;
        width: 100%;
        height: 1px;
        background-color: white;
        margin-top: 10px;
    }
}

@media only screen and (max-width: 400px) {
    .header-shopping .red-arrow-btn {
        display: none;
    }

    header .header-container .container .header-logo {
        gap: 10px;
    }

}

@media only screen and (max-width: 350px) {
    header .header-container .container .header-logo>a figure img {
        width: 130px;
    }
}

/* MENU RESPONSIVE */

.menu-responsive {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100% !important;
    background-color: #FFF;
    z-index: 9999;
    overflow-y: auto;
}

.logo-cerrar {
    background-color: #3D3D3D;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 5%;
    position: relative;
}

.logo-cerrar>a {
    width: 152px;
    margin: 0 auto;
}

.logo-cerrar>a figure {
    width: 100%;
    height: 100%;
    margin: 0;
}

.logo-cerrar>a figure img {
    width: 100%;
}

.cerrar-icono {
    display: flex;
    align-items: center;
    height: 25px;
}

.nav-responsive {
    margin: 3% 5%;
}

.nav-responsive>ul {
    padding: 0;
    list-style: none;
}

.nav-responsive>ul>li {
    padding: 2% 0;
}

.nav-responsive>ul>li:nth-child(2) {
    padding-bottom: 0;
}

.nav-responsive>ul>li:not(:last-child) {
    border-bottom: 1px solid #ECECEC;
}

.nav-responsive>ul li h5 {
    font-family: "SF-Pro-Display-SemiBold";
    margin: 0;
    font-size: 20px;
    display: flex;
    justify-content: space-between;
    color: var(--black2);
}

.nav-responsive>ul li h5 a {
    font-family: "SF-Pro-Display-SemiBold";
    font-size: 20px;
    font-weight: 500;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--black2);
    width: 100%;
}

.nav-responsive>ul li h5 button {
    border: 1px solid var(--black2);
    background-color: transparent;
}

.checkbox-container-responsive {
    margin-top: 10px;
}

.nav-responsive .checkbox-container-responsive ul {
    list-style: none;
    padding: 0 2%;
}

.nav-responsive .checkbox-container-responsive ul li {
    display: flex;
    align-items: center;
    padding: 2% 1%;
}

.nav-responsive .checkbox-container-responsive ul li:not(:last-child) {
    border-bottom: 1px solid #ECECEC;
}

.nav-responsive ul li.nav-responsive-hino h5>a figure {
    width: 130px;
}

.nav-responsive ul li.nav-responsive-hino h5>a figure img {
    width: 100%;
}

.nav-responsive .checkbox-container-responsive ul li a {
    font-size: 18px;
    color: #000;
    display: flex;
    align-items: center;
    gap: 10px;
}

.nav-responsive .checkbox-container-responsive ul li a figure {
    width: 34px;
    height: 34px;
    border-radius: 70px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.nav-responsive .checkbox-container-responsive ul li a p {
    font-size: 18px;
}

.checkbox-container-responsive.slider-products-responsive {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px;
}

.slide-product-responsive {
    width: 45%;
    height: 120px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    text-decoration: none;
    position: relative;
}

.slide-product-responsive .product-img {
    top: 0;
    width: auto;
    height: 75px;
    display: flex;
    position: absolute;
}

.slide-product-responsive p {
    font-size: 18px;
    width: 85%;
    height: 70px;
    background-color: #F5F5F5;
    color: var(--black2);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 12px;
}

@media only screen and (max-width: 500px) {

    .logo-cerrar>a {
        width: 140px;
    }

    .nav-responsive>ul>li {
        padding: 3% 0;
    }

    .nav-responsive .checkbox-container-responsive ul li {
        display: flex;
        align-items: center;
        padding: 3% 1%;
    }

    .slide-product-responsive {
        width: 48%;
        height: 100px;
    }

    .slide-product-responsive p {
        height: 50px;
    }

    .slide-product-responsive .product-img {
        height: 60px;
    }

    .nav-responsive>ul li h5,
    .nav-responsive>ul li h5 a {
        font-size: 18px;
    }

    .nav-responsive .checkbox-container-responsive ul li a p,
    .slide-product-responsive p {
        font-size: 16px;
    }
}

@media only screen and (max-width: 350px) {
    .logo-cerrar>a {
        width: 130px;
    }
}

/* MENU PRODUCTS */

.menu-products {
    display: none;
    position: fixed;
    background-color: var(--white);
    margin-top: 120px;
    padding: 2% 0;
    width: 100%;
    z-index: 999;
}

.menu-products.active {
    display: flex;
}

.menu-products .container {
    position: relative;
    overflow: hidden;
}

.menu-products .container .menu-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.menu-products .container .menu-title h4 {
    font-size: 32px;
}

.menu-products .container .menu-title a {
    display: flex;
    gap: 10px;
}

.menu-products .container .menu-title a:hover .contact-btn {
    background-color: var(--red);
    border-color: var(--red);
}

.menu-products .container .menu-title a .red-arrow-btn {
    transition: background-color .20s ease-in-out;
}

.menu-products .container .menu-title a .red-arrow-btn svg {
    width: 25px;
    height: 25px;
}

.menu-products .container .menu-title a:hover .red-arrow-btn {
    background-color: var(--black2);
}

.menu-products .container .menu-title a:hover .red-arrow-btn svg path {
    fill: var(--white);
}

.menu-products .slider-products {
    display: flex;
    align-items: center;
    transition: transform 0.5s ease;
    height: 200px;
    margin-top: 1%;
}

.menu-products .slide-product {
    min-width: 20%;
    height: 150px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    text-decoration: none;
}

.menu-products img {
    width: 70%;
    height: auto;
}

.menu-products img.product-img {
    width: auto;
    height: 100px;
    display: flex;
    position: absolute;
    top: 26px;
}

.menu-products .slide-product p {
    font-size: 18px;
    width: 85%;
    height: 70px;
    background-color: #F5F5F5;
    color: var(--black2);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 12px;
    transition: background-color .20s ease-in-out;
}

.menu-products .slide-product:hover p {
    background-color: #E8E8E8;
    cursor: pointer;
}

.menu-products .product-img-disabled {
    cursor: auto;
}

.menu-products .slide-product.disabled {
    cursor: auto;
}

.menu-products .slide-product.disabled:hover p {
    background-color: #F5F5F5;
    cursor: auto;
}

.menu-products .arrow {
    position: absolute;
    top: 40%;
    border: none;
    cursor: pointer;
    font-size: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    background-color: transparent;
}

.menu-products>button svg {
    width: 40px !important;
    height: 40px !important;
}

.menu-products .car-left {
    left: 12%;
}

.menu-products .car-right {
    right: 12%;
}

/* RESPONSIVE MENU PRODUCTS */

@media only screen and (max-width: 1400px) {

    .menu-products .container .menu-title h4 {
        font-size: 30px;
    }

    .menu-products .slider-container button svg {
        width: 15px !important;
        height: 15px !important;
    }

    .menu-products .arrow {
        width: 35px;
        height: 35px;
    }
}

@media only screen and (max-width: 1200px) {
    .menu-products .container .menu-title h4 {
        font-size: 25px;
    }

    .menu-products .slider-products {
        height: 150px;
        margin-top: 2%;
    }

    .menu-products img.product-img {
        top: 10px;
        height: 60%;
    }
}

@media only screen and (max-width: 1000px) {

    .menu-products .slide-product {
        height: 135px;
    }

    .menu-products .slide-product p {
        font-size: 16px;
        width: 80%;
        height: 60px;
    }

    .menu-products img.product-img {
        top: 25px;
        height: 50%;
    }

    .menu-products>button svg {
        width: 30px !important;
        height: 30px !important;
    }

    .menu-products .car-right {
        right: 8%;
    }

    .menu-products .car-left {
        left: 8%;
    }
}

@media only screen and (max-width: 900px) {
    .menu-products .container .menu-title h4 {
        font-size: 22px;
    }

    .menu-products .arrow {
        top: 45%;
    }

    .menu-products .car-right {
        right: 5%;
    }

    .menu-products .car-left {
        left: 5%;
    }
}

/* MENU SERVICES */

.menu-services {
    display: none;
    position: fixed;
    background-color: var(--white);
    margin-top: 120px;
    padding: 2% 0;
    width: 100%;
    z-index: 999;
}

.menu-services.active {
    display: flex;
}

.menu-services .container .menu-title {
    display: flex;
    justify-content: space-between;
}

.menu-services .container .menu-title h4 {
    font-size: 32px;
}

.menu-services .container .menu-title a {
    display: flex;
    align-items: center;
    gap: 10px;
}

.menu-services .container .menu-title a:hover .contact-btn {
    background-color: var(--red);
    border-color: var(--red);
}

.menu-services .container .menu-title>div {
    display: flex;
    gap: 20px;
}

.menu-services .container .menu-title a .red-arrow-btn {
    transition: background-color .20s ease-in-out;
}

.menu-services .container .menu-title a .red-arrow-btn svg {
    width: 25px;
    height: 25px;
}

.menu-services .container .menu-title a:hover .red-arrow-btn {
    background-color: var(--black2);
}

.menu-services .container .menu-title a:hover .red-arrow-btn svg path {
    fill: var(--white);
}

.menu-services .container .slider-services {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 20px 40px;
    margin-top: 2%;
}

.menu-services .container .slider-services .slide-service {
    width: 23%;
    height: 85px;
    display: flex;
    gap: 20px;
    align-items: center;
    border: 1px solid #E8E8E8;
    border-radius: 12px;
    padding: 12px 16px;
}

.menu-services .container .slider-services .slide-service figure {
    width: 55px;
    height: 55px;
    border-radius: 70px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    transition: all 1s cubic-bezier(.165, .84, .44, 1);
}

.menu-services .container .slider-services .slide-service:hover figure {
    transform: scale(1.1);
}

.menu-services .container .slider-services .slide-service p {
    font-size: 20px;
    color: var(--black2);
    line-height: 22px;
}

@media only screen and (max-width: 1600px) {
    .menu-services .container .slider-services {
        gap: 20px 34px;
    }
}

@media only screen and (max-width: 1400px) {
    .menu-services .container .menu-title h4 {
        font-size: 30px;
    }

    .menu-services .container .slider-services {
        gap: 20px 32px;
    }
}

@media only screen and (max-width: 1300px) {
    .menu-services .container .slider-services {
        gap: 20px 22px;
    }

    .menu-services .container .slider-services .slide-service {
        width: 32%;
    }

    .menu-services .container .slider-services .slide-service figure {
        width: 50px;
        height: 50px;
    }
}

@media only screen and (max-width: 1200px) {

    .menu-services .container .menu-title h4 {
        font-size: 25px;
    }

    .menu-services .container .slider-services .slide-service {
        width: 30%;
    }

    .menu-services .container .slider-services {
        gap: 20px 50px;
    }

    .menu-services .container .slider-services .slide-service p {
        font-size: 18px;
        line-height: 20px;
    }
}

@media only screen and (max-width: 1100px) {
    .menu-services .container .slider-services {
        gap: 20px 45px;
        margin-top: 3%;
    }
}

@media only screen and (max-width: 1000px) {
    .menu-services .container .slider-services {
        gap: 20px 40px;
    }

    .menu-services .container .slider-services .slide-service {
        height: 80px;
    }

    .menu-services .container .slider-services .slide-service p {
        font-size: 16px;
        line-height: 18px;
    }
}

@media only screen and (max-width: 900px) {

    .menu-services .container .menu-title h4 {
        font-size: 20px;
    }

    .menu-services .container .slider-services {
        gap: 20px 36px;
    }
}

/* PAGE PATH */

.page-path-cotizador {
    margin: 15px 0;
    width: 100%;
}

.page-path-cotizador .container {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-left: 0;
}

.page-path-cotizador .container a {
    font-size: 16px;
    color: rgba(0, 0, 0, .5);
    text-decoration: none;
}

.page-path-cotizador .container a.actual-page {
    color: #222;
}

.page-path-cotizador .container span {
    font-family: "SF-Pro-Display-SemiBold";
    font-size: 16px;
    color: rgba(0, 0, 0, .5);
}

@media only screen and (max-width: 800px) {

    .page-path-cotizador {
        margin-top: 20px;
    }

    .page-path-cotizador .container {
        padding: 0;
    }
}

/* BANNER PRINCIPAL */

.main-banner {
    height: 500px;
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: #000;
    display: flex;
    align-items: center;
    color: var(--white);
}

.main-banner .main-banner-title {
    width: 55%;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.main-banner .main-banner-title h1 {
    font-size: 55px;
    line-height: 60px;
}

.main-banner .main-banner-title p {
    font-size: 24px;
    line-height: 28px;
    width: 85%;
}

.main-banner .main-banner-title>a {
    width: 200px;
    display: flex;
    gap: 10px;
    margin-top: 3%;
}

.main-banner .main-banner-title>a .contact-btn {
    height: 45px;
    border-color: var(--white);
    color: var(--white);
    transition: background-color .20s ease-in-out,
        border-color .20s ease-in-out;
}

.main-banner .main-banner-title>a:hover .contact-btn {
    background-color: var(--red);
    border-color: var(--red);
}

.main-banner .main-banner-title>a .red-arrow-btn {
    width: 45px;
    height: 45px;
    transition: background-color .20s ease-in-out;
}

.main-banner .main-banner-title>a .red-arrow-btn svg {
    width: 25px;
    height: 25px;
}

.main-banner .main-banner-title>a:hover .red-arrow-btn {
    background-color: var(--white);
}

.main-banner .main-banner-title>a:hover .red-arrow-btn svg path {
    fill: var(--red);
}

.main-banner-responsive {
    display: none !important;
}

@media only screen and (max-width: 1500px) {
    .main-banner {
        height: 400px;
    }
}

@media only screen and (max-width: 1400px) {

    .main-banner .main-banner-title {
        width: 660px;
    }

    .main-banner .main-banner-title h1 {
        font-size: 50px;
        line-height: 55px;
    }

    .main-banner .main-banner-title p {
        font-size: 22px;
        line-height: 25px;
    }
}

@media only screen and (max-width: 1300px) {

    .main-banner .main-banner-title {
        gap: 20px;
    }

    .main-banner .main-banner-title h1 {
        font-size: 45px;
        line-height: 48px;
    }

    .main-banner .main-banner-title p {
        width: 90%;
        font-size: 20px;
    }
}

@media only screen and (max-width: 1200px) {

    .main-banner .main-banner-title {
        width: 620px;
    }

    .main-banner .main-banner-title h1 {
        font-size: 40px;
        line-height: 40px;
    }
}

@media only screen and (max-width: 1100px) {

    .main-banner .main-banner-title>a .contact-btn {
        height: 40px;
    }

    .main-banner .main-banner-title>a .red-arrow-btn {
        height: 40px;
        width: 40px;
    }

    .main-banner .main-banner-title>a .red-arrow-btn svg {
        width: 20px;
        height: 20px;
    }
}

@media only screen and (max-width: 1000px) {

    .main-banner {
        height: 350px;
    }

    .main-banner .main-banner-title {
        width: 550px;
    }

    .main-banner .main-banner-title h1 {
        font-size: 35px;
        line-height: 38px;
    }

    .main-banner .main-banner-title p {
        font-size: 18px;
    }
}

@media only screen and (max-width: 800px) {
    .main-banner .main-banner-title h1 {
        font-size: 30px;
        line-height: 35px;
        text-align: center;
        width: 70%;
    }

    .main-banner .main-banner-title p {
        width: 45%;
        text-align: center;
    }

    .main-banner .main-banner-title {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .main-banner .main-banner-title>a {
        margin-top: 1%;
    }
}

@media only screen and (max-width: 767.98px) {
    .main-banner {
        height: 350px !important;
    }
}

@media only screen and (max-width: 700px) {
    .main-banner .main-banner-title h1 {
        width: 470px;
    }

    .main-banner .main-banner-title p {
        width: 285px;
    }
}

@media only screen and (max-width: 600px) {
    .main-banner .main-banner-title p {
        font-family: "SF-Pro-Display-Light";
    }

    .main-home-banner .main-banner-title p {
        width: 300px;
    }
}

@media only screen and (max-width: 500px) {

    .main-banner {
        height: 600px !important;
    }

    .main-banner .main-banner-title h1 {
        font-size: 25px;
        width: 340px;
        line-height: 30px;
    }

    .main-banner-desktop {
        display: none !important;
    }

    .main-banner-responsive {
        display: flex !important;
    }

}

@media only screen and (max-width: 450px) {
    .main-banner {
        height: 540px !important;
    }
}

@media only screen and (max-width: 400px) {

    .main-banner {
        height: 480px !important;
    }

    .main-banner .main-banner-title h1,
    .main-home-banner .main-banner-title p {
        width: 100%;
    }
}

@media only screen and (max-width: 360px) {
    .main-banner {
        height: 440px !important;
    }
}

/* HOME FILTERS */

.section-home-filters {
    width: 1100px;
    margin: 0 auto;
    background-image: linear-gradient(to top, #121212, #161616, #1a1a1a, #1e1e1e, #222222);
    padding: 24px 35px;
    border-radius: 25px;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    top: -60px;
    z-index: 1;
}

.section-home-filters>.figure-filter {
    position: static;
    transform: translateY(36px);
    will-change: transform;
    z-index: 0;
}

.section-home-filters>.figure-filter .filter-data {
    position: absolute;
    top: 28px;
    display: flex;
    color: var(--white);
    font-size: 16px;
    width: 100%;
    justify-content: center;
}

.section-home-filters>.figure-filter .filter-data .ancho {
    transform: rotate(-13deg);
}

.section-home-filters>.figure-filter .filter-data .barra {
    transform: rotate(-10deg) translateY(-5px);
    margin-left: 3px;
}

.section-home-filters>.figure-filter .filter-data .alto {
    transform: rotate(0deg) translateY(-4px);
    margin-left: 2px;
}

.section-home-filters>.figure-filter .filter-data .rin {
    margin-left: 10px;
    transform: rotate(13deg) translateY(0px);
}

.section-home-filters .home-filters {
    width: 60%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.section-home-filters .home-filters .home-filters-title {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.section-home-filters .home-filters h3 {
    font-size: 24px;
    color: var(--white);
}

.section-home-filters .home-filters .home-filters-title p {
    font-size: 16px;
    color: var(--white);
}

.section-home-filters .home-filters .filters {
    display: flex;
    flex-wrap: wrap;
    gap: 20px 24px;
}

.section-home-filters .home-filters .filters .filter {
    width: 20%;
    height: 55px;
    border: 1px solid #CCC;
    border-radius: 12px;
    display: flex;
    align-items: center;
    padding: 0 10px;
    position: relative;
}

.section-home-filters .home-filters .filters .filter .filter-check {
    position: absolute;
    right: 10px;
    display: none;
    align-items: center;
    z-index: 1;
}

.section-home-filters .home-filters .filters .marca-filter {
    width: 28%;
}

.section-home-filters .home-filters .filters .filter .filter-data {
    display: flex;
    flex-direction: column;
    font-size: 14px;
    width: 100%;
    color: #CCC;
}

.section-home-filters .home-filters .filters .filter .filter-data input {
    background: transparent;
    border: none;
    outline: none;
    font-size: 14px;
    color: var(--white);
    padding: 0;
    width: auto;
}

.section-home-filters .home-filters .filters .filter .filter-data input:focus {
    box-shadow: none;
}

.section-home-filters .home-filters .filters .home-filters-buttons {
    width: 100%;
    display: flex;
    justify-content: right;
    gap: 24px;
}

.section-home-filters .home-filters .filters .home-filters-buttons a {
    font-size: 18px;
}

.section-home-filters .home-filters .clean-btn {
    width: 180px;
    height: 40px;
    background-color: transparent;
    color: var(--white);
    border: 1px solid var(--white);
    text-decoration: none;
    display: flex;
    justify-content: center;
    gap: 10px;
    align-items: center;
    border-radius: 70px;
}

.section-home-filters .home-filters .clean-btn svg {
    width: 18px;
    height: 18px;
}

.section-home-filters .home-filters .search-btn {
    width: 140px;
    height: 40px;
    background-color: var(--dark-red);
    color: var(--white);
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 70px;
    gap: 10px;
    border: none;
}

.section-home-filters .home-filters .search-btn figure {
    display: flex;
}

@media only screen and (max-width: 1400px) {
    .section-home-filters .home-filters h3 {
        font-size: 22px;
    }

    .section-home-filters .home-filters .filters .home-filters-buttons a {
        font-size: 16px;
    }
}

@media only screen and (max-width: 1300px) {

    .section-home-filters {
        width: 1000px;
    }

    .section-home-filters .home-filters {
        width: 65%;
    }

    .section-home-filters .home-filters .filters {
        gap: 22px;
    }

    .section-home-filters .home-filters .filters .home-filters-buttons {
        gap: 22px;
    }

    .section-home-filters .home-filters .clean-btn svg,
    .section-home-filters .home-filters .search-btn figure {
        width: 16px;
        height: 16px;
    }
}

@media only screen and (max-width: 1100px) {
    .section-home-filters {
        width: 900px;
    }

    .section-home-filters .home-filters .filters {
        gap: 20px 18px;
    }
}

@media only screen and (max-width: 1000px) {
    .section-home-filters {
        width: 800px;
        flex-direction: column-reverse;
    }

    .section-home-filters .home-filters {
        width: 100%;
    }

    .section-home-filters .home-filters .filters {
        gap: 25px 24px;
    }

    .section-home-filters .home-filters .filters .marca-filter {
        width: 30%;
    }

    .section-home-filters>.figure-filter {
        position: relative;
        bottom: -25px;
    }
}

@media only screen and (max-width: 900px) {
    .section-home-filters {
        width: 750px;
    }

    .section-home-filters .home-filters .filters {
        gap: 25px 22px;
    }

    .section-home-filters .home-filters .filters .home-filters-buttons {
        gap: 20px;
    }
}

@media only screen and (max-width: 800px) {

    .section-home-filters {
        top: 0;
        border-radius: 0;
        width: 100%;
    }

    .section-home-filters .home-filters h3,
    .section-home-filters .home-filters .home-filters-title p {
        text-align: center;
    }

    .section-home-filters .home-filters .filters {
        flex-direction: column;
    }

    .section-home-filters .home-filters .filters .filter {
        width: 100%;
        background-color: var(--black2);
        padding: 0 3%;
    }

    .section-home-filters .home-filters .filters .filter .filter-data {
        flex-direction: row;
        justify-content: space-between;
        font-size: 16px;
        color: rgba(255, 255, 255, .7);
    }

    .section-home-filters .home-filters .filters .filter .filter-data select {
        width: 50%;
    }

    .section-home-filters .home-filters .filters .home-filters-buttons {
        justify-content: center;
    }

    .section-home-filters>.figure-filter {
        position: relative;
        bottom: -30px;
    }
}

@media only screen and (max-width: 400px) {
    .section-home-filters .home-filters .home-filters-title p {
        font-size: 14px;
    }
}

/* SLIDER LOGOS */

.slider {
    width: 100%;
    height: auto;
    margin: auto;
    overflow: hidden;
    margin-bottom: 4%;
}

.slide-track {
    display: flex;
    animation: scroll 40s linear infinite;
    -webkit-animation: scroll 40s linear infinite;
    width: calc(300px * 12);
}

.slider .slide {
    width: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.slider .slide img {
    width: 55%;
}

@keyframes scroll {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }

    100% {
        -webkit-transform: translateX(calc(-300px * 6));
        transform: translateX(calc(-300px * 6));
    }
}

@media only screen and (max-width: 1100px) {
    .slider .slide {
        width: 250px;
    }

    .slider .slide img {
        width: 60%;
    }
}

@media only screen and (max-width: 800px) {
    .slider {
        margin: 5% 0;
    }

    .slider .slide {
        width: 200px;
    }

    .slider .slide img {
        width: 70%;
    }
}

@media only screen and (max-width: 600px) {
    .slider {
        margin: 8% 0;
    }
}

/* PROMOTIONS */

.promotions {
    margin-bottom: 3%;
}

.promotions-container {
    position: relative;
}

.promotions #carouselExampleIndicators {
    border-radius: 20px;
    overflow: hidden;
}

.external-indicators {
    display: flex;
    justify-content: center;
    margin-top: 15px;
    gap: 10px;
}

.external-indicators button {
    width: 50px;
    height: 5px;
    border: none;
    background-color: rgba(0, 0, 0, .5);
    cursor: pointer;
    padding: 0;
}

.external-indicators button.active {
    background-color: var(--dark-gray);
}

@media only screen and (max-width: 1100px) {
    .promotions {
        margin-bottom: 8%;
    }
}

@media only screen and (max-width: 800px) {
    .promotions #carouselExampleSlidesOnly {
        border-radius: 10px;
    }
}

/* WE OFFER */

.we-offer .we-offer-top {
    position: absolute;
    top: -17px;
    left: 50%;
    transform: translate(-50%, -50%);
}

.we-offer {
    position: relative;
    background-color: var(--dark-gray);
    padding: 5% 0;
    margin-top: 5%;
}

.we-offer .we-offer-top-buttons {
    display: flex;
    justify-content: center;
    gap: 8px;
    height: 10px;
    width: auto;
    position: absolute;
    top: -18px;
    right: 0;
    left: 0;
}

.we-offer .we-offer-top-buttons .we-offer-top-btn {
    width: 20px;
    height: 100%;
    background-color: #CCC;
    border-radius: 12px;
    transition: all 0.3s ease;
}

.we-offer .we-offer-top-buttons .we-offer-top-btn.active {
    background-color: var(--white);
    width: 38px;
}

.we-offer .we-offer-titles {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.we-offer .we-offer-titles .we-offer-title span {
    font-family: "SF-Pro-Display-Semibold";
    font-size: 16px;
    color: rgba(255, 255, 255, .7);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.we-offer .we-offer-titles .we-offer-title h3 {
    color: var(--white);
    font-size: 55px;
}

.we-offer .we-offer-titles>a {
    display: flex;
    gap: 10px;
}

.we-offer .we-offer-titles>a button {
    border: 1px solid var(--white2);
    color: var(--white2);
    width: 160px;
    height: 48px;
}

.we-offer .we-offer-titles>a .red-arrow-btn {
    width: 48px;
    height: 48px;
    transition: background-color .20s ease-in-out;
}

.we-offer .we-offer-titles>a:hover .red-arrow-btn {
    background-color: var(--white2);
}

.we-offer .we-offer-titles>a .red-arrow-btn svg {
    width: 30px;
    height: 30px;
}

.we-offer .we-offer-titles>a .red-arrow-btn svg path {
    transition: fill .20s ease-in-out;
}

.we-offer .we-offer-titles>a:hover .red-arrow-btn svg path {
    fill: var(--red);
}

.we-offer .we-offer-articles {
    display: flex;
    justify-content: space-between;
    gap: 40px;
    margin-top: 3%;
}

.we-offer .we-offer-articles article {
    width: 400px;
    height: 420px;
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    padding: 25px;
    cursor: pointer;
}

.we-offer .we-offer-articles article .we-offer-article-bg {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    filter: grayscale(100%);
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    transition: filter .20s ease-in-out;
}

.we-offer .we-offer-articles article h4 {
    font-family: "SF-Pro-Display-Bold";
    color: var(--white);
    font-size: 36px;
    line-height: 38px;
    position: relative;
    z-index: 5;
}

.we-offer .we-offer-articles article>a {
    width: 56px;
    height: 56px;
    border: 1px solid var(--white);
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    bottom: 30px;
    right: 30px;
    transition: background-color .20s ease-in-out,
        border-color .20s ease-in-out,
        transform .20s ease-in-out;
}

.we-offer .we-offer-articles article>a svg {
    width: 30px;
    height: 30px;
    rotate: 45deg;
}

.we-offer .we-offer-articles article .we-offer-article-line {
    height: 10px;
    width: 40%;
    background-color: var(--red);
    position: absolute;
    bottom: 0;
    left: 0;
    transition: width .20s ease-in-out;
}

.we-offer .we-offer-articles article:hover .we-offer-article-bg {
    filter: grayscale(0%);
}

.we-offer .we-offer-articles article:hover .we-offer-article-line {
    width: 100%;
}

.we-offer .we-offer-articles article:hover>a {
    background-color: var(--red);
    border-color: var(--red);
    transform: scale(1.2);
}

@media only screen and (max-width: 1400px) {
    .we-offer .we-offer-titles .we-offer-title h3 {
        font-size: 50px;
    }

    .we-offer .we-offer-articles {
        gap: 50px;
    }

    .we-offer .we-offer-articles article {
        width: auto;
        flex: 1;
        height: 400px;
    }

    .we-offer .we-offer-articles article h4 {
        font-size: 30px;
        line-height: 30px;
    }

    .we-offer .we-offer-articles article>a {
        width: 48px;
        height: 48px;
    }
}

@media only screen and (max-width: 1300px) {

    .we-offer .we-offer-titles .we-offer-title h3 {
        font-size: 45px;
    }

    .we-offer .we-offer-articles article {
        height: 380px;
    }
}

@media only screen and (max-width: 1200px) {
    .we-offer .we-offer-titles .we-offer-title h3 {
        font-size: 40px;
    }

    .we-offer .we-offer-articles article h4 {
        font-size: 25px;
        line-height: 25px;
    }

    .we-offer .we-offer-articles article {
        height: 350px;
    }

    .we-offer .we-offer-titles>a .red-arrow-btn svg {
        width: 25px;
        height: 25px;
    }

    .we-offer .we-offer-articles article>a svg {
        width: 25px;
        height: 25px;
    }
}

@media only screen and (max-width: 1100px) {

    .we-offer .we-offer-top {
        width: 800px;
        height: 30px;
    }

    .we-offer .we-offer-top img {
        width: 100%;
        height: 100%;
    }

    .we-offer .we-offer-titles>a button {
        height: 40px;
        width: 150px;
    }

    .we-offer .we-offer-titles>a .red-arrow-btn {
        width: 40px;
        height: 40px;
    }

    .we-offer .we-offer-titles>a .red-arrow-btn svg {
        width: 20px;
        height: 20px;
    }

    .we-offer .we-offer-articles article {
        height: 300px;
    }

    .we-offer .we-offer-articles article>a {
        width: 40px;
        height: 40px;
    }

    .we-offer .we-offer-articles article>a svg {
        width: 20px;
        height: 20px;
    }
}

@media only screen and (max-width: 1000px) {
    .we-offer .we-offer-titles .we-offer-title h3 {
        font-size: 35px;
    }

    .we-offer .we-offer-articles {
        gap: 25px;
    }

    .we-offer .we-offer-articles article {
        height: 270px;
        padding: 20px;
    }

    .we-offer .we-offer-articles article h4 {
        font-size: 20px;
        line-height: 22px;
    }

    .we-offer .we-offer-articles article>a {
        bottom: 25px;
        right: 20px;
    }
}

@media only screen and (max-width: 800px) {
    .we-offer .we-offer-top {
        width: 650px;
        height: 28px;
        top: -16px;
    }

    .we-offer .we-offer-top-buttons {
        top: -12px;
    }

    .we-offer .we-offer-titles .we-offer-title h3 {
        font-size: 30px;
    }

    .we-offer .we-offer-titles .we-offer-title span {
        font-size: 14px;
    }

    .we-offer .we-offer-articles {
        flex-direction: column;
    }

    .we-offer .we-offer-articles article {
        flex: auto;
        height: 250px;
    }

    .we-offer .we-offer-articles article h4 {
        font-size: 22px;
    }
}

@media only screen and (max-width: 700px) {
    .we-offer .we-offer-top {
        width: 90%;
        height: 26px;
        top: -14px;
    }
}

@media only screen and (max-width: 600px) {

    .we-offer {
        margin-top: 12%;
        padding-top: 3%;
    }

    .we-offer .we-offer-top-buttons {
        top: -8px;
    }

    .we-offer .we-offer-titles {
        flex-direction: column;
        gap: 30px;
        margin: 6% 0;
    }

    .we-offer .we-offer-titles .we-offer-title {
        text-align: center;
    }

    .we-offer .we-offer-articles {
        gap: 30px;
    }
}

@media only screen and (max-width: 500px) {
    .we-offer .we-offer-articles article {
        height: 200px;
    }
}

/* FEATURED PRODUCTS */

.featured-products {
    background-color: var(--white2);
    padding: 5% 0;
    overflow: hidden;
}

.featured-products h3 {
    font-size: 45px;
    margin-bottom: 1%;
}

.featured-products .articles-container {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: 20px 0;
    margin: 0 -20px;
    padding-left: 20px;
    scrollbar-width: none;
}

.articles-container::-webkit-scrollbar {
    display: none;
}

.featured-products .articles-container article {
    width: 320px;
    height: auto;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: var(--white);
    padding: 15px;
    gap: 5px;
    transition: box-shadow .30s ease-in-out;
}

.featured-products .articles-container article:hover {
    box-shadow: 0px 0px 20px -8px rgba(0, 0, 0, 0.2);
}

.featured-products .articles-container article h4 {
    display: flex;
    gap: 6px;
    margin: 0;
}

.featured-products .articles-container article h4 span {
    font-family: "SF-Pro-Display-Bold";
    font-size: 18px;
    color: var(--black2);
}

.featured-products .articles-container article h4 .separator {
    width: 1px;
    height: 20px;
    background-color: #D3D3D3;
}

.featured-products .articles-container article .product-use {
    display: flex;
    align-items: center;
    gap: 8px;
}

.featured-products .articles-container article .product-use p {
    font-size: 16px;
    color: #555;
}

.featured-products .articles-container article .product-price {
    font-family: "SF-Pro-Display-Bold";
    font-size: 20px;
    display: flex;
    gap: 3px;
}

.featured-products .articles-container article .cotizar-btn {
    font-family: "SF-Pro-Display-Semibold";
    width: 190px;
    height: 45px;
    font-size: 18px;
    background-color: var(--dark-red);
    color: var(--white);
    border-radius: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 3%;
    border: none;
    transition: all 1s cubic-bezier(.165, .84, .44, 1);
}

.featured-products .articles-container article .cotizar-btn:hover {
    transform: scale(1.05);
}

.featured-products .articles-container article>figure {
    height: 150px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.featured-products .articles-container article>figure img {
    width: auto;
    height: 100%;
}

@media only screen and (max-width: 1400px) {
    .featured-products h3 {
        font-size: 40px;
    }

    .featured-products .articles-container article {
        flex: 0 0 280px;
        height: 350px;
    }

    .featured-products .articles-container article>figure {
        height: 150px;
        margin: 0 auto;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .featured-products .articles-container article>figure img {
        width: auto;
        height: 100%;
    }

    .featured-products .articles-container article h4 span {
        font-size: 16px;
    }

    .featured-products .articles-container article .product-price {
        font-size: 18px;
    }

    .featured-products .articles-container article .cotizar-btn {
        font-size: 16px;
        width: 180px;
        height: 40px;
    }
}

@media only screen and (max-width: 1300px) {
    .featured-products .articles-container article {
        flex: 0 0 260px;
    }
}

@media only screen and (max-width: 1200px) {
    .featured-products h3 {
        font-size: 30px;
    }

    .featured-products .articles-container article {
        flex: 0 0 230px;
        height: 320px;
        gap: 10px;
    }

    .featured-products .articles-container article .cotizar-btn {
        width: 170px;
        height: 36px;
    }

    .featured-products .articles-container article>figure {
        height: 120px;
    }
}

@media only screen and (max-width: 1100px) {
    .featured-products .articles-container article {
        gap: 1px;
    }

    .featured-products .articles-container article .cotizar-btn {
        margin-top: 6%;
    }

    .featured-products .articles-container article>figure {
        margin-bottom: 8%;
    }
}

@media only screen and (max-width: 1000px) {
    .featured-products h3 {
        font-size: 25px;
    }
}

/* WHY CHOOSE */

.why-choose {
    background-color: var(--black2);
    height: 255px;
    display: flex;
    align-items: center;
}

.why-choose .container {
    display: flex;
    justify-content: space-between;
    gap: 9%;
}

.why-choose h3 {
    font-size: 32px;
    color: var(--white);
    flex: 1;
    display: flex;
    align-items: center;
}

.why-choose article {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.why-choose article>a {
    width: 45px;
    height: 45px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--dark-red);
    border-radius: 100%;
    cursor: auto;
}

.why-choose article>a figure {
    width: 24px;
    height: 24px;
    display: flex;
}

.why-choose article>.why-choose-info {
    display: flex;
    flex-direction: column;
    gap: 5px;
    color: var(--white);
}

.why-choose article>.why-choose-info h4 {
    font-size: 20px;
}

.why-choose article>.why-choose-info p {
    font-family: "SF-Pro-Display-Light";
    font-size: 16px;
    line-height: 20px;
}

@media only screen and (max-width: 1400px) {
    .why-choose h3 {
        font-size: 30px;
    }

    .why-choose .container {
        gap: 8%;
    }

    .why-choose article>.why-choose-info h4 {
        font-size: 18px;
    }
}

@media only screen and (max-width: 1200px) {

    .why-choose {
        height: 220px;
    }

    .why-choose h3 {
        font-size: 25px;
    }

    .why-choose .container {
        gap: 5%;
    }

    .why-choose article>.why-choose-info h4 {
        font-size: 16px;
    }

    .why-choose article>.why-choose-info p {
        font-size: 14px;
        line-height: 18px;
    }

    .why-choose article>a {
        width: 40px;
        height: 40px;
    }

    .why-choose article>a figure {
        width: 20px;
        height: 20px;
    }
}

@media only screen and (max-width: 900px) {

    .why-choose {
        height: auto;
        padding: 5% 0;
    }

    .why-choose .container {
        flex-direction: column;
        gap: 30px;
    }

    .why-choose article {
        flex-direction: row;
        align-items: center;
    }

    .why-choose article>.why-choose-info h4 {
        font-size: 18px;
    }

    .why-choose article>.why-choose-info p {
        font-size: 16px;
        line-height: 18px;
    }
}

@media only screen and (max-width: 600px) {
    .why-choose article>.why-choose-info {
        width: 85%;
    }
}

/* APPOINTMENT */

.appointment {
    position: relative;
    height: auto;
    background-color: var(--white2);
}

.appointment .container {
    display: flex;
    justify-content: flex-end;
    height: 100%;
}

.appointment #mapa-cobertura-iframe {
    position: absolute;
    width: 45%;
    height: 100%;
    z-index: 10;
    left: 0;
    top: 0;

    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    touch-action: pan-x pan-y;
    -ms-touch-action: pan-x pan-y;
    -webkit-touch-action: pan-x pan-y;
    pointer-events: auto !important;

    will-change: transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.appointment #mapa-cobertura-iframe .leaflet-popup-content {
    width: 250px;
    margin: 24px;
    line-height: 0;
}

.appointment #mapa-cobertura-iframe .leaflet-popup-content .custom-popup {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.appointment #mapa-cobertura-iframe .leaflet-popup-content .popup-header {
    display: flex;
    align-items: center;
    gap: 10px;
}

.appointment #mapa-cobertura-iframe .leaflet-popup-content .popup-header .popup-logo {
    width: 100px;
}

.appointment #mapa-cobertura-iframe .leaflet-popup-content .popup-header h3 {
    font-size: 20px;
    font-family: "SF-Pro-Display-Bold";
    display: flex;
    gap: 10px;
}

.appointment #mapa-cobertura-iframe .leaflet-popup-content .popup-header h3 span {
    color: #D3D3D3;
}

.appointment #mapa-cobertura-iframe .leaflet-popup-content .popup-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.appointment #mapa-cobertura-iframe .leaflet-popup-content .popup-body div {
    font-family: "SF-Pro-Display-Medium";
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
}

.appointment #mapa-cobertura-iframe .leaflet-popup-content .popup-body div p {
    margin: 0;
    line-height: 20px;
}

.appointment #mapa-cobertura-iframe .leaflet-popup-content .popup-body div.popup-actions {
    width: 180px;
    height: 30px;
    border-radius: 30px;
    background-color: var(--black2);
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
}

.appointment #mapa-cobertura-iframe .leaflet-popup-content .popup-body div.popup-actions a {
    color: var(--white);
    font-size: 16px;
    font-family: "SF-Pro-Display-SemiBold";
}

.appointment #mapa-cobertura-iframe .leaflet-control-zoom.leaflet-bar.leaflet-control {
    top: 360px;
}

.appointment .container .appointment-form {
    width: 50%;
    padding: 50px 0;
}

.appointment .container .appointment-form .appointment-form-title span {
    font-family: "SF-Pro-Display-Semibold";
    font-size: 16px;
    color: #555;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.appointment .container .appointment-form .appointment-form-title h3 {
    color: var(--black2);
    font-size: 45px;
    text-transform: capitalize;
}

.appointment .container .appointment-form form {
    background-color: var(--white);
    padding: 25px;
    margin-top: 20px;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.appointment .container .appointment-form form label {
    padding: 1.5%;
    border: 1px solid #E8E8E8;
    border-radius: 12px;
    font-size: 14px;
    display: flex;
    flex-wrap: wrap;
}

.appointment .container .appointment-form form input,
.appointment .container .appointment-form form select,
.appointment .container .appointment-form form textarea {
    font-family: "SF-Pro-Display-Medium";
    width: 100%;
    border: none;
    outline: none;
    font-size: 16px;
    color: gray;
    background-color: transparent;
    box-shadow: none;
    padding: 5px;
}

.appointment .container .appointment-form form label>span {
    color: var(--dark-red);
}

.appointment .container .appointment-form form>.email-phone,
.appointment .container .appointment-form form>.branch-vehicle {
    display: flex;
    justify-content: space-between;
    gap: 15px;
}

.appointment .container .appointment-form form>.email-phone label,
.appointment .container .appointment-form form>.branch-vehicle label {
    flex: 1;
}

.appointment .container .appointment-form form .checkbox-container {
    display: flex;
    align-items: center;
    gap: 10px;
}

.appointment .container .appointment-form form .checkbox-container>input {
    width: auto;
}

.appointment .container .appointment-form form .checkbox-container>p {
    font-size: 16px;
    color: #0B090A;
}

.appointment .container .appointment-form form .checkbox-container>p a {
    color: var(--dark-red);
    text-decoration: underline;
}

.appointment .container .appointment-form form .send-btn {
    height: 45px;
    width: 145px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    border-radius: 70px;
    background-color: var(--dark-red);
    color: var(--white);
    margin: 0 auto;
    margin-top: 15px;
    border-color: var(--dark-red);
    border: none;
    transition: all 1s cubic-bezier(.165, .84, .44, 1);
}

.appointment .container .appointment-form form .send-btn:hover {
    transform: scale(1.05);
}

.appointment .container .appointment-form form fieldset {
    display: flex;
    gap: 20px;
}

.appointment .container .appointment-form form fieldset legend {
    flex: 1;
    font-size: 14px;
    margin: 0;
    color: #0B090A;
    padding-left: 2%;
}

.appointment .container .appointment-form form fieldset legend span {
    color: var(--dark-red);
}

.appointment .container .appointment-form form fieldset>div {
    flex: 4;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.appointment .container .appointment-form form fieldset>div a {
    color: #555;
    border: 1px solid #E8E8E8;
    padding: 3px 8px;
    border-radius: 70px;
    font-size: 14px;
    transition: color .10s ease-in-out, background-color .10s ease-in-out, border-color .10s ease-in-out;
}

.appointment .container .appointment-form form fieldset>div a:hover {
    background-color: var(--dark-red);
    color: var(--white);
    border-color: var(--dark-red);
}

.interest-options a.selected {
    background-color: var(--dark-red);
    color: var(--white) !important;
    border-color: var(--dark-red);
}

.o_background_video, .parallax, section, .oe_img_bg, [data-oe-shape-data], .o_background_video>*, .parallax>*, section>*, .oe_img_bg>*, [data-oe-shape-data]>* {
    position: initial;
}

@media only screen and (max-width: 1400px) {
    .appointment .container .appointment-form {
        padding: 50px 0;
    }
}

@media only screen and (max-width: 1200px) {
    .appointment .container .appointment-form .appointment-form-title h3 {
        font-size: 40px;
    }

    .appointment .container .appointment-form form .send-btn {
        width: 140px;
        height: 40px;
    }

    .appointment .container .appointment-form form .checkbox-container>p {
        font-size: 14px;
        line-height: 18px;
    }
}

@media only screen and (max-width: 1100px) {
    .appointment .container .appointment-form form fieldset>div a {
        font-size: 14px;
    }
}

@media only screen and (max-width: 1000px) {
    .appointment .container .appointment-form .appointment-form-title h3 {
        font-size: 35px;
    }

    .appointment .container .appointment-form {
        width: 800px;
        margin: 0 auto;
    }

    .appointment .container .appointment-form form {
        margin-top: 3%;
    }

    .appointment .container {
        max-width: 100%;
        width: 100%;
        justify-content: center;
        flex-direction: column-reverse;
    }

    .appointment #mapa-cobertura-iframe {
        position: relative;
        width: 100%;
        height: 400px;
    }

    .appointment #mapa-cobertura-iframe .leaflet-control-zoom.leaflet-bar.leaflet-control {
        top: 0px;
    }
}

@media only screen and (max-width: 900px) {
    .appointment .container .appointment-form {
        width: 750px;
    }
}

@media only screen and (max-width: 800px) {
    .appointment .container .appointment-form {
        width: 650px;
    }

    .appointment .container .appointment-form .appointment-form-title span {
        font-size: 14px;
    }

    .appointment .container .appointment-form .appointment-form-title h3 {
        font-size: 30px;
    }

    .appointment #mapa-cobertura-iframe {
        height: 360px;
    }
}

@media only screen and (max-width: 700px) {
    .appointment .container .appointment-form {
        width: 90%;
    }
}

@media only screen and (max-width: 600px) {
    .appointment .container .appointment-form form>.email-phone, .appointment .container .appointment-form form>.branch-vehicle {
        flex-direction: column;
    }

    .appointment .container .appointment-form form fieldset {
        flex-direction: column;
    }
}

@media only screen and (max-width: 500px) {
    .appointment .container .appointment-form {
        padding: 30px 0;
    }

    .appointment #mapa-cobertura-iframe {
        height: 300px;
    }
}

@media only screen and (max-width: 400px) {
    .appointment .container .appointment-form form {
        padding: 15px;
    }
}

/* FOOTER */

footer {
    background-color: #1F1F1F;
    padding: 3% 0;
}

footer .footer-logo-contact {
    display: flex;
    justify-content: space-between;
}

footer .footer-logo-contact>figure {
    height: 40px;
    display: flex;
}

footer .footer-logo-contact>figure img {
    height: 100%;
}

footer .footer-logo-contact .footer-contact {
    display: flex;
    gap: 20px;
}

footer .footer-logo-contact .footer-contact a {
    background-color: transparent;
    border: 1px solid #F9F9F9;
    border-radius: 40px;
    color: #F9F9F9;
    font-size: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 40px;
    padding: 0 20px;
    gap: 10px;
}

footer .footer-logo-contact .footer-contact a figure {
    display: flex;
    width: 20px;
    height: 20px;
}

footer .footer-nav {
    display: flex;
    justify-content: space-between;
    border-top: 1px solid rgba(255, 255, 255, .3);
    border-bottom: 1px solid rgba(255, 255, 255, .3);
    padding: 3% 0;
    margin: 3% 0;
    gap: 50px;
    position: relative;
}

footer .footer-nav .btn-top {
    position: fixed;
    right: 45px;
    bottom: 12%;
    height: auto;
    z-index: 30;
    transition: all 1s cubic-bezier(.165, .84, .44, 1);
}

footer .footer-nav .btn-top:hover {
    transform: scale(1.2);
}

footer .footer-nav .btn-top figure {
    width: 50px;
}

footer .footer-nav .btn-top figure img {
    width: 100%;
}

footer .footer-nav>div {
    flex: 1;
}

footer .footer-nav>nav {
    flex: 1;
}

footer .footer-nav h4 {
    font-size: 20px;
    text-transform: capitalize;
    color: var(--white);
}

footer .footer-nav .footer-email-container .footer-email {
    color: rgba(255, 255, 255, .7);
    font-size: 16px;
}

footer .footer-nav .footer-email-container .footer-sucursales {
    display: flex;
    gap: 10px;
    margin-top: 10%;
}

footer .footer-nav .footer-email-container .footer-sucursales .contact-btn {
    border: 1px solid var(--white);
    color: var(--white);
    transition: background-color .20s ease-in-out, border-color .20s ease-in-out, color .20s ease-in-out;
}

footer .footer-nav .footer-email-container .footer-sucursales:hover .contact-btn {
    border-color: var(--red);
    background-color: var(--red);
    color: var(--white);
}

footer .footer-nav .footer-email-container .footer-sucursales .red-arrow-btn {
    transition: background-color .20s ease-in-out;
}

footer .footer-nav .footer-email-container .footer-sucursales:hover .red-arrow-btn {
    background-color: var(--white);
}

footer .footer-nav .footer-email-container .footer-sucursales:hover .red-arrow-btn svg path {
    fill: var(--red);
}

footer .footer-nav nav ul {
    margin-top: 5%;
    display: flex;
    flex-direction: column;
    gap: 0;
}

footer .footer-nav nav ul li {
    list-style: none;
}

footer .footer-nav nav ul li a {
    color: rgba(255, 255, 255, .7);
    font-size: 16px;
    transition: color .20s ease-in-out;
}

footer .footer-nav nav ul li a:hover {
    color: var(--white);
}

footer .footer-nav nav ul li a.disabled-footer-btn:hover {
    color: rgba(255, 255, 255, .7);
    cursor: auto;
}

footer .footer-nav .footer-subscribe-container p {
    color: rgba(255, 255, 255, .7);
    font-size: 16px;
    margin-top: 5%;
}

footer .footer-nav .footer-subscribe-container .checkbox-acepto {
    display: flex;
    gap: 10px;
    margin-top: 5%;
}

footer .footer-nav .footer-subscribe-container .checkbox-acepto label {
    color: rgba(255, 255, 255, .7);
    font-size: 14px;
}

footer .footer-nav .footer-subscribe-container .checkbox-acepto label a {
    color: rgba(255, 255, 255, .7);
    font-size: 14px;
    text-decoration: underline;
}

footer .footer-nav .footer-subscribe-container .suscribete-input {
    display: flex;
    margin-top: 10%;
}

footer .footer-nav .footer-subscribe-container .suscribete-input input {
    width: 84%;
    font-family: "SF-Pro-Display-Medium";
    font-size: 16px;
    background-color: var(--black);
    color: var(--white);
    height: 48px;
    border: none;
    border-radius: 12px 0 0 12px;
    padding: 1% 5%;
    outline: none;
}

footer .footer-nav .footer-subscribe-container .suscribete-input>a {
    width: 48px;
    height: 48px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--dark-red);
    border-radius: 0 12px 12px 0;
}

footer .footer-nav .footer-subscribe-container .suscribete-input>a svg {
    width: 20px;
    height: 20px;
    rotate: 45deg;
}

footer .footer-copyright {
    display: flex;
    justify-content: space-between;
}

footer .footer-copyright .copyright {
    display: flex;
    align-items: center;
    gap: 50px;
}

footer .footer-copyright .copyright p {
    font-family: "SF-Pro-Display-Light";
    font-size: 16px;
    text-transform: uppercase;
    color: var(--white);
}

footer .footer-copyright .copyright p a {
    font-family: "SF-Pro-Display-Light";
    font-size: 16px;
    text-transform: uppercase;
    color: var(--white);
}

footer .footer-copyright .footer-social-media {
    display: flex;
    align-items: center;
    gap: 20px;
}

footer .footer-copyright .footer-social-media h5 {
    color: var(--white);
    font-size: 16px;
}

footer .footer-copyright .footer-social-media a {
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid var(--white2);
    border-radius: 100%;
    opacity: .7;
    transition: opacity .20s ease-in-out;
}

footer .footer-copyright .footer-social-media a:hover {
    opacity: 1;
}

footer .footer-copyright .footer-social-media a .social-media-layer {
    width: 100%;
    height: 100%;
    border-radius: 100%;
    background-color: rgba(0, 0, 0, .5);
}

footer .footer-copyright .footer-social-media a figure {
    width: 20px;
    height: 20px;
    display: flex;
}

body.sucursales-page .footer-sucursales {
    display: none !important;
}

@media only screen and (max-width: 1600px) {

    footer .footer-nav .footer-subscribe-container .suscribete-input input {
        width: 82%;
    }
}

@media only screen and (max-width: 1400px) {

    footer .footer-logo-contact>figure {
        height: 35px;
    }

    footer .footer-logo-contact .footer-contact a figure {
        width: 18px;
        height: 18px;
    }

    footer .footer-nav {
        gap: 20px;
        margin: 3% 0;
    }

    footer .footer-nav h4 {
        font-size: 18px;
    }
}

@media only screen and (max-width: 1300px) {
    footer .footer-nav .footer-subscribe-container .suscribete-input input {
        width: 80%;
    }

    footer .footer-logo-contact .footer-contact a figure {
        width: 16px;
        height: 16px;
    }

    footer .footer-nav .btn-top {
        right: 30px;
    }
}

@media only screen and (max-width: 1100px) {

    footer .footer-logo-contact>figure {
        height: 30px;
    }

    footer .footer-logo-contact .footer-contact a {
        height: 35px;
    }

    footer .footer-nav {
        gap: 40px;
    }

    footer .footer-nav .footer-subscribe-container .suscribete-input input {
        width: 190px;
        font-size: 14px !important;
    }

    footer .footer-nav nav ul li a,
    footer .footer-nav .footer-subscribe-container p,
    footer .footer-nav .footer-email-container .footer-email {
        font-size: 14px;
    }

    footer .footer-nav h4 {
        font-size: 16px;
    }

    footer .footer-nav .footer-email-container .footer-sucursales button {
        width: 115px;
    }

    footer .footer-copyright .copyright p,
    footer .footer-copyright .copyright p a {
        font-size: 14px;
    }

    footer .footer-copyright .footer-social-media {
        gap: 15px;
    }

    footer .footer-copyright .footer-social-media a {
        width: 38px;
        height: 38px;
    }

    footer .footer-copyright .footer-social-media a figure {
        width: 18px;
        height: 18px;
    }
}

@media only screen and (max-width: 900px) {
    footer .footer-copyright .copyright {
        gap: 20px;
    }

    footer .footer-copyright .copyright p,
    footer .footer-copyright .copyright p a {
        font-size: 12px;
    }

    footer .footer-copyright .footer-social-media h5 {
        font-size: 14px;
    }

    footer .footer-copyright .footer-social-media {
        gap: 10px;
    }

    footer .footer-copyright .footer-social-media a {
        width: 35px;
        height: 35px;
    }
}

@media only screen and (max-width: 800px) {

    footer {
        padding: 5% 0;
    }

    footer .footer-logo-contact {
        flex-direction: column;
        align-items: center;
        gap: 30px;
    }

    footer .footer-nav {
        margin: 5% 0;
        padding: 5% 0;
        flex-direction: column;
        gap: 30px;
    }

    footer .footer-nav>div {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    footer .footer-nav .footer-email-container .footer-sucursales {
        margin-top: 0;
    }

    footer .footer-nav nav ul {
        flex-wrap: wrap;
        flex-direction: row;
        margin-top: 1%;
    }

    footer .footer-nav nav ul li {
        width: 35%;
    }

    .footer-subscribe-container {
        flex-direction: column;
        align-items: flex-start !important;
    }

    footer .footer-nav .footer-subscribe-container p,
    footer .footer-nav .footer-subscribe-container .checkbox-acepto {
        margin-top: 2%;
    }

    footer .footer-nav .footer-subscribe-container .suscribete-input {
        margin-top: 5%;
        width: 100%;
    }

    footer .footer-nav .footer-subscribe-container .suscribete-input input {
        width: 50%;
        font-size: 16px !important;
        padding: 1% 3%;
    }

    footer .footer-copyright {
        flex-direction: column-reverse;
        align-items: center;
        gap: 20px;
    }

    footer .footer-copyright .footer-social-media h5 {
        font-size: 16px;
    }
}

@media only screen and (max-width: 500px) {

    footer .footer-logo-contact>figure {
        height: 25px;
    }

    footer .footer-nav nav ul li {
        width: 45%;
    }

    footer .footer-nav .footer-subscribe-container .suscribete-input input {
        width: 88%;
    }

    footer .footer-nav .footer-subscribe-container .suscribete-input>a {
        width: 12%;
    }
}

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

    footer {
        padding: 5% 0;
    }

    footer .footer-logo-contact>figure {
        height: 22px;
    }

    footer .footer-nav .btn-top figure {
        width: 45px;
    }

    footer .footer-logo-contact .footer-contact a {
        height: 30px;
        padding: 0 18px;
    }

    footer .footer-copyright .footer-social-media,
    footer .footer-copyright .copyright {
        width: 100%;
        justify-content: space-between;
    }

    footer .footer-copyright .footer-social-media h5 {
        margin-right: 15%;
    }
}

@media only screen and (max-width: 400px) {
    footer .footer-copyright .footer-social-media h5 {
        margin-right: 10%;
    }

    footer .footer-nav nav ul li {
        width: 50%;
    }

    footer .footer-copyright .copyright {
        gap: 10px;
    }
}

@media only screen and (max-width: 380px) {
    footer .footer-nav>div {
        flex-direction: column;
        gap: 10px;
        align-items: flex-start;
    }

    footer .footer-copyright .copyright {
        flex-wrap: wrap;
    }

    footer .footer-copyright .footer-social-media h5 {
        margin-right: 5%;
    }
}

@media only screen and (max-width: 350px) {
    footer .footer-logo-contact .footer-contact {
        flex-wrap: wrap;
        justify-content: center;
        gap: 15px;
    }
}

.o_background_video, .parallax, section, .oe_img_bg, [data-oe-shape-data], .o_background_video>*, .parallax>*, section>*, .oe_img_bg>*, [data-oe-shape-data]>* {
    position: initial;
}

/* SHOP */

.oe_website_sale .oe_cart>.col>h3.mb-4 {
    color: var(--dark-gray);
    border-bottom: none;
    margin-bottom: 30px !important;
}

#cart_products {
    gap: 30px;
    max-height: 450px;
    overflow-y: auto;
    padding: 2% 2% 0 0;
}

#cart_products .o_cart_product {
    border-bottom: none !important;
    padding-bottom: 10px !important;
    padding-top: 10px !important;
    background-color: var(--light-gray);
    padding: 10px 20px;
    border-radius: 16px;
    position: relative;
}

#cart_products .o_cart_product>.d-flex.flex-column.align-items-end {
    width: 300px;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between;
}

#cart_products .o_cart_product>.d-flex.flex-column.align-items-end>.css_quantity {
    width: 130px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #D3D3D3;
    border-radius: 50px;
    margin-bottom: 0 !important;
}

#cart_products .o_cart_product .css_quantity .js_quantity {
    background-color: var(--light-gray);
}

#cart_products .o_cart_product .flex-grow-1>a>h6, #cart_products .o_cart_product .flex-grow-1>a>.h6 {
    color: var(--dark-gray) !important;
    font-family: "SF-Pro-Display-SemiBold";
}

.oe_website_sale.o_website_sale_checkout>div {
    justify-content: space-between;
}

#o_cart_summary {
    z-index: 10;
    margin: 0;
    width: 38%;
}

#card-form-total {
    border: none !important;
    border-radius: 16px;
    background-color: var(--light-gray) !important;
}

#card-form-total .cotizacion-detalles>h5 {
    margin-bottom: 20px;
    font-size: 28px;
}

#card-form-total .detalle-linea {
    display: flex;
    justify-content: space-between;
    padding: 5px 10px;
    border-radius: 10px;
}

#card-form-total .detalle-linea .detalle-label,
#card-form-total .detalle-linea .detalle-label-total {
    font-size: 16px;
    font-family: "SF-Pro-Display-SemiBold";
}

#card-form-total .detalle-linea .detalle-value {
    font-size: 16px;
    font-family: "SF-Pro-Display-Light";
}

#card-form-total .detalle-linea .detalle-value-total {
    font-size: 20px;
    font-family: "SF-Pro-Display-SemiBold";
}

#card-form-total .detalle-linea-gris {
    background-color: var(--white);
}

#card-form-total .titulo-datos {
    margin: 20px 0 15px 0;
    font-size: 18px;
}

#message_card {
    display: none;
}

.card-body .text-muted, #order_total strong {
    color: var(--dark-gray) !important;
    font-size: 16px;
    font-family: "SF-Pro-Display-SemiBold";
}

.monetary_field {
    font-family: "SF-Pro-Display-Light";
    font-size: 16px;
}

#order_total .text-end>.monetary_field.text-end {
    font-family: "SF-Pro-Display-SemiBold";
    font-size: 18px;
}

#total-card-form {
    position: initial;
    margin-top: 6.5rem;
}

#contact-us .cotizacion-form {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 15px;
}

#contact-us .cotizacion-form #contact_name,
#contact-us .cotizacion-form #phone {
    width: 100%;
    border: 1px solid #e8e8e8;
    border-radius: 12px;
    padding: 12px;
    font-size: 18px;
    outline: none;
    color: gray;
}

#contact-us .cotizacion-form #email {
    width: 100%;
    border: 1px solid #e8e8e8;
    border-radius: 12px;
    padding: 12px;
    font-size: 18px;
    outline: none;
}

.hablar-btn, #contact-us .cotizacion-form .cotizar-btn {
    width: 100%;
    margin-top: 5% !important;
    font-family: "SF-Pro-Display-SemiBold";
    height: 45px;
    border-radius: 30px;
    background-color: var(--dark-red);
    color: var(--white);
    border: none;
    font-size: 16px;
}

#cart_products .o_cart_product>div:nth-child(2)>div {
    width: 30px !important;
    height: 30px !important;
}

.o_cart_product .delete_icon {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 30px;
    height: 30px;
    background-color: #e8e8e8;
    display: flex !important;
    justify-content: center;
    align-items: center;
    border-radius: 50px;
}

.o_cart_product .js_delete_product svg {
    width: 20px;
}

/* Mostrar siempre icono 'X' y ocultar variante textual 'Eliminar' en todos los breakpoints */
#cart_products .o_cart_product a.js_delete_product:not(.d-md-inline-block) {
    display: none !important;
    /* oculta el enlace textual si existe */
}

#cart_products .o_cart_product a.js_delete_icon_mobile {
    display: inline-block !important;
    /* asegurar icono en móvil */
}

@media only screen and (max-width: 1600px) {
    #contact-us .cotizacion-form #contact_name, #contact-us .cotizacion-form #phone {
        width: 100%;
    }
}

@media only screen and (max-width: 1400px) {
    #cart_products .o_cart_product>.d-flex.flex-column.align-items-end {
        width: 260px;
    }
}

@media only screen and (max-width: 1300px) {
    #cart_products .o_cart_product>.d-flex.flex-column.align-items-end {
        width: 230px;
    }
}

@media only screen and (max-width: 1200px) {

    .oe_cart.col-12.col-lg-7 {
        width: 60%;
    }
}

@media only screen and (max-width: 1000px) {
    #o_cart_summary {
        width: 100%;
        margin-left: 0;
    }

    .oe_cart.col-12.col-lg-7 {
        width: 100%;
    }

    #cart_products .o_cart_product>.d-flex.flex-column.align-items-end {
        width: 280px;
    }

    #total-card-form {
        margin-top: 0;
    }
}

@media only screen and (max-width: 991.98px) {

    #card-form-total {
        background-color: var(--white) !important;
    }

    #card-form-total tbody tr td {
        background-color: var(--white);
    }
}

@media only screen and (max-width: 600px) {
    #contact-us .cotizacion-form #contact_name, #contact-us .cotizacion-form #phone {
        width: 100%;
    }

    #message_card {
        text-align: center;
        margin-top: 20px;
    }

    #cart_products {
        padding: 5% 4% 0 0;
    }

    #cart_products .o_cart_product {
        flex-direction: column;
        padding-bottom: 20px !important;
        padding-top: 20px !important;
        position: relative;
    }

    #cart_products .o_cart_product>div:first-child {
        width: 110px !important;
    }

    #cart_products .o_cart_product>div:nth-child(2) {
        width: 100% !important;
        justify-content: center;
        display: flex;
        align-items: center;
        flex-direction: column;
    }

    #cart_products .o_cart_product>div:nth-child(2)>a {
        width: 100%;
        text-align: center;
    }

    #cart_products .o_cart_product>div:nth-child(2)>div {
        position: absolute;
        top: 0;
        right: 0;
        width: auto !important;
        height: auto !important;
    }

    #cart_products .o_cart_product>.d-flex.flex-column.align-items-end {
        width: 100%;
        gap: 10px;
        flex-direction: column !important;
    }
}

@media only screen and (max-width: 500px) {
    #cart_products .o_cart_product>div:first-child {
        width: 100px !important;
    }

    #card-form-total .detalle-linea .detalle-value-total {
        font-size: 18px;
    }
}

/* GRACIAS POR SU SOLICITUD */

.bg-thanks {
    background-color: var(--dark-red) !important;
}

/* LOADING SCREEN */

.loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    transition: all 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}

.loading-screen-container {
    text-align: center;
    transform: translateY(-20px);
}

.spinner {
    width: 120px;
    height: 120px;
    margin: 0 auto 25px;
    position: relative;
    animation: spinPulse 2.5s ease-in-out infinite;
}

.spinner img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    animation: spin 3s linear infinite;
}

.loading-screen p {
    color: var(--white);
    font-size: 18px;
    font-weight: 500;
    margin-top: 15px;
    position: relative;
}

.loading-screen p::after {
    content: '...';
    position: absolute;
    animation: ellipsis 1.5s infinite;
}

/* Animaciones */
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes spinPulse {
    0%, 100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }
}

@keyframes ellipsis {
    0% {
        content: '.';
    }

    33% {
        content: '..';
    }

    66% {
        content: '...';
    }
}

/* Estado oculto */
.loading-screen.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* Estilos para el carrito de compras */
.o_cart_product .js_add_cart_json {
    transition: all 0.2s ease-in-out;
    cursor: pointer;
    user-select: none;
}

.o_cart_product .js_add_cart_json:hover {
    background-color: #f8f9fa;
    transform: scale(1.05);
}

.o_cart_product .js_add_cart_json:active {
    transform: scale(0.95);
    transition: all 0.1s ease-in-out;
}

/* Animación para eliminación de productos */
.cart-item-exit {
    opacity: 0;
    transform: translateX(-100%);
    transition: all 0.3s ease-in-out;
}

/* Estilos para inputs de cantidad */
.o_cart_product .js_quantity {
    transition: border-color 0.2s ease-in-out;
    text-align: center;
}

.o_cart_product .js_quantity:focus {
    border-color: #007bff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

/* Feedback visual para cambios de cantidad */
.o_cart_product .js_quantity.updating {
    background-color: #fff3cd;
    border-color: #ffc107;
}

/* Ocultar enlaces de eliminar textuales */
.o_cart_product .js_delete_product_text {
    display: none !important;
}

/* Forzar icono X para eliminar */
.o_cart_product .delete_icon {
    position: absolute;
    top: 5px;
    right: 5px;
    z-index: 10;
}

.o_cart_product .delete_icon .js_delete_product {
    background: var(--dark-red);
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease-in-out;
}

.o_cart_product .delete_icon .js_delete_product:hover {
    transform: scale(1.1);
}

.o_cart_product .delete_icon .js_delete_product:active {
    transform: scale(0.9);
}

/* Posicionamiento relativo para el contenedor del producto */
.o_cart_product {
    position: relative;
}

/* Estilos para el contenedor de la imagen */
.o_cart_product>div:first-child {
    position: relative;
}

/* Asegurar que el icono de eliminar esté visible */
.o_cart_product .js_delete_product svg {
    width: 16px;
    height: 16px;
    fill: #555;
}

/* Responsive para móviles */
@media (max-width: 768px) {
    .o_cart_product .delete_icon {
        top: 2px;
        right: 2px;
    }

    .o_cart_product .delete_icon .js_delete_product {
        width: 20px;
        height: 20px;
    }

    .o_cart_product .delete_icon .js_delete_product svg {
        width: 12px;
        height: 12px;
    }
}

/* ESTILOS ESPECÍFICOS PARA MANTENER DISEÑO PERSONALIZADO */

/* Ocultar completamente el texto "Eliminar" que aparece después de actualización */
.o_cart_product a[href*="delete"]:not(.js_delete_product),
.o_cart_product .js_delete_product_text,
.o_cart_product .o_cart_line_action a:not(.js_delete_product),
.o_cart_product a[href*="remove"]:not(.js_delete_product),
.o_cart_product .o_cart_line_action,
.o_cart_product .o_cart_line_action a,
.o_cart_product .o_cart_line_action span,
.o_cart_product .o_cart_line_action button,
.o_cart_product .o_cart_line_action input,
.o_cart_product .o_cart_line_action div,
.o_cart_product .o_cart_line_action form,
.o_cart_product .o_cart_line_action label,
.o_cart_product .o_cart_line_action select,
.o_cart_product .o_cart_line_action textarea,
.o_cart_product .o_cart_line_action fieldset,
.o_cart_product .o_cart_line_action legend,
.o_cart_product .o_cart_line_action table,
.o_cart_product .o_cart_line_action tr,
.o_cart_product .o_cart_line_action td,
.o_cart_product .o_cart_line_action th,
.o_cart_product .o_cart_line_action ul,
.o_cart_product .o_cart_line_action ol,
.o_cart_product .o_cart_line_action li,
.o_cart_product .o_cart_line_action dl,
.o_cart_product .o_cart_line_action dt,
.o_cart_product .o_cart_line_action dd,
.o_cart_product .o_cart_line_action blockquote,
.o_cart_product .o_cart_line_action pre,
.o_cart_product .o_cart_line_action code,
.o_cart_product .o_cart_line_action samp,
.o_cart_product .o_cart_line_action kbd,
.o_cart_product .o_cart_line_action var,
.o_cart_product .o_cart_line_action sub,
.o_cart_product .o_cart_line_action sup,
.o_cart_product .o_cart_line_action small,
.o_cart_product .o_cart_line_action big,
.o_cart_product .o_cart_line_action b,
.o_cart_product .o_cart_line_action i,
.o_cart_product .o_cart_line_action u,
.o_cart_product .o_cart_line_action s,
.o_cart_product .o_cart_line_action em,
.o_cart_product .o_cart_line_action strong,
.o_cart_product .o_cart_line_action cite,
.o_cart_product .o_cart_line_action q,
.o_cart_product .o_cart_line_action dfn,
.o_cart_product .o_cart_line_action abbr,
.o_cart_product .o_cart_line_action acronym,
.o_cart_product .o_cart_line_action address,
.o_cart_product .o_cart_line_action ins,
.o_cart_product .o_cart_line_action del,
.o_cart_product .o_cart_line_action strike,
.o_cart_product .o_cart_line_action tt,
.o_cart_product .o_cart_line_action kbd,
.o_cart_product .o_cart_line_action xmp,
.o_cart_product .o_cart_line_action plaintext,
.o_cart_product .o_cart_line_action listing,
.o_cart_product .o_cart_line_action h1,
.o_cart_product .o_cart_line_action h2,
.o_cart_product .o_cart_line_action h3,
.o_cart_product .o_cart_line_action h4,
.o_cart_product .o_cart_line_action h5,
.o_cart_product .o_cart_line_action h6,
.o_cart_product .o_cart_line_action p,
.o_cart_product .o_cart_line_action br,
.o_cart_product .o_cart_line_action hr,
.o_cart_product .o_cart_line_action div,
.o_cart_product .o_cart_line_action span,
.o_cart_product .o_cart_line_action a,
.o_cart_product .o_cart_line_action img,
.o_cart_product .o_cart_line_action object,
.o_cart_product .o_cart_line_action param,
.o_cart_product .o_cart_line_action applet,
.o_cart_product .o_cart_line_action embed,
.o_cart_product .o_cart_line_action iframe,
.o_cart_product .o_cart_line_action map,
.o_cart_product .o_cart_line_action area,
.o_cart_product .o_cart_line_action base,
.o_cart_product .o_cart_line_action basefont,
.o_cart_product .o_cart_line_action bgsound,
.o_cart_product .o_cart_line_action link,
.o_cart_product .o_cart_line_action meta,
.o_cart_product .o_cart_line_action script,
.o_cart_product .o_cart_line_action style,
.o_cart_product .o_cart_line_action title,
.o_cart_product .o_cart_line_action head,
.o_cart_product .o_cart_line_action body,
.o_cart_product .o_cart_line_action html,
.o_cart_product .o_cart_line_action xml,
.o_cart_product .o_cart_line_action xmp,
.o_cart_product .o_cart_line_action plaintext,
.o_cart_product .o_cart_line_action listing,
.o_cart_product .o_cart_line_action h1,
.o_cart_product .o_cart_line_action h2,
.o_cart_product .o_cart_line_action h3,
.o_cart_product .o_cart_line_action h4,
.o_cart_product .o_cart_line_action h5,
.o_cart_product .o_cart_line_action h6,
.o_cart_product .o_cart_line_action p,
.o_cart_product .o_cart_line_action br,
.o_cart_product .o_cart_line_action hr,
.o_cart_product .o_cart_line_action div,
.o_cart_product .o_cart_line_action span,
.o_cart_product .o_cart_line_action a,
.o_cart_product .o_cart_line_action img,
.o_cart_product .o_cart_line_action object,
.o_cart_product .o_cart_line_action param,
.o_cart_product .o_cart_line_action applet,
.o_cart_product .o_cart_line_action embed,
.o_cart_product .o_cart_line_action iframe,
.o_cart_product .o_cart_line_action map,
.o_cart_product .o_cart_line_action area,
.o_cart_product .o_cart_line_action base,
.o_cart_product .o_cart_line_action basefont,
.o_cart_product .o_cart_line_action bgsound,
.o_cart_product .o_cart_line_action link,
.o_cart_product .o_cart_line_action meta,
.o_cart_product .o_cart_line_action script,
.o_cart_product .o_cart_line_action style,
.o_cart_product .o_cart_line_action title,
.o_cart_product .o_cart_line_action head,
.o_cart_product .o_cart_line_action body,
.o_cart_product .o_cart_line_action html,
.o_cart_product .o_cart_line_action xml {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
    text-indent: -9999px !important;
    white-space: nowrap !important;
    pointer-events: none !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
}

/* Ocultar específicamente cualquier texto que contenga "Eliminar" */
.o_cart_product *:contains("Eliminar"),
.o_cart_product *:contains("Delete"),
.o_cart_product *:contains("Remove") {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* Desactivar enlace en nombre del producto sin ocultar el texto */
.o_cart_product a[href*="/shop/"]:not(.js_add_cart_json):not(.js_delete_product),
.o_cart_product a[href*="delete"]:not(.js_delete_product),
.o_cart_product a[href*="remove"]:not(.js_delete_product) {
    display: inline !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: none !important;
    color: inherit !important;
    text-decoration: none !important;
}

/* Reforzar estilo no clickeable para enlaces a /shop/ en nombre del producto */
.o_cart_product h6 a,
.o_cart_product .o_cart_line_name a {
    display: inline !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: none !important;
    color: #333 !important;
    text-decoration: none !important;
    font-weight: 600 !important;
}

/* Ocultar cualquier elemento que contenga texto "Eliminar" de manera más agresiva */
.o_cart_product * {
    position: relative;
}

.o_cart_product *::after {
    content: none !important;
}

/* Ocultar elementos que contengan texto específico */
.o_cart_product *:not(.js_add_cart_json):not(.js_delete_product):not(.js_quantity):not(.delete_icon) {
    /* Verificar si el contenido contiene "Eliminar" */
}

/* Regla específica para ocultar elementos con texto "Eliminar" */
.o_cart_product span:contains("Eliminar"),
.o_cart_product div:contains("Eliminar"),
.o_cart_product a:contains("Eliminar"),
.o_cart_product p:contains("Eliminar"),
.o_cart_product label:contains("Eliminar"),
.o_cart_product button:contains("Eliminar") {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
    text-indent: -9999px !important;
    white-space: nowrap !important;
    pointer-events: none !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
}

/* Asegurar que el botón + permanezca visible */
.o_cart_product .js_add_cart_json,
.o_cart_product .js_add_cart_json:last-child,
.o_cart_product .input-group .js_add_cart_json,
.o_cart_product .input-group .js_add_cart_json:last-child,
.o_cart_product .css_quantity .js_add_cart_json,
.o_cart_product .css_quantity .js_add_cart_json:last-child {
    display: flex !important;
    justify-content: center;
    align-items: center;
    visibility: visible !important;
    opacity: 1 !important;
    position: static !important;
    left: auto !important;
    top: auto !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    clip: auto !important;
    margin: 0 !important;
    padding: 8px 12px !important;
    border: none !important;
    background-color: #f8f9fa !important;
    color: #495057 !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    text-indent: 0 !important;
    white-space: normal !important;
    pointer-events: auto !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    cursor: pointer !important;
    text-decoration: none !important;
    font-weight: bold !important;
    transition: all 0.2s ease-in-out !important;
    z-index: 10 !important;
}

/* Mantener el diseño del input de cantidad */
.o_cart_product .js_quantity {
    border: 1px solid #ced4da !important;
    padding: 5px 10px !important;
    text-align: center !important;
    background-color: white !important;
    color: #495057 !important;
}

/* Mantener el diseño del contenedor de cantidad */
.o_cart_product .css_quantity {
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;
    border: 1px solid #ced4da !important;
    overflow: hidden !important;
}

/* Mantener el diseño del grupo de botones */
.o_cart_product .input-group {
    display: flex !important;
    align-items: center !important;
    border: 1px solid #ced4da !important;
    overflow: hidden !important;
}

.o_cart_product .input-group .js_add_cart_json:active {
    background-color: #dee2e6 !important;
    transform: scale(0.95) !important;
}

/* Mantener el diseño del input en el grupo */
.o_cart_product .input-group .js_quantity {
    border: none !important;
    border-radius: 0 !important;
    text-align: center !important;
    background-color: var(--light-gray) !important;
    flex: 1 !important;
}

/* Ocultar cualquier enlace de producto que aparezca después de actualización */
.o_cart_product h6 a,
.o_cart_product .o_cart_line_name a,
.o_cart_product .product-name a,
.o_cart_product a[href*="/shop/product/"],
.o_cart_product a[href*="/product/"] {
    color: inherit !important;
    text-decoration: none !important;
    pointer-events: none !important;
    cursor: default !important;
}

.o_cart_product h6 a:hover,
.o_cart_product .o_cart_line_name a:hover,
.o_cart_product .product-name a:hover,
.o_cart_product a[href*="/shop/product/"]:hover,
.o_cart_product a[href*="/product/"]:hover {
    color: inherit !important;
    text-decoration: none !important;
    cursor: default !important;
}

/* Asegurar que el nombre del producto se mantenga como texto plano */
.o_cart_product h6,
.o_cart_product .o_cart_line_name,
.o_cart_product .product-name {
    color: #333 !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    pointer-events: none !important;
    cursor: default !important;
}

/* SOLUCIÓN SIMPLE: Icono X en esquina superior derecha */
.o_cart_product .delete_icon {
    position: absolute !important;
    top: -10px !important;
    right: -10px !important;
    z-index: 100 !important;
    width: 30px !important;
    height: 30px !important;
    background-color: #e8e8e8 !important;
    border-radius: 50% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

.o_cart_product .delete_icon .js_delete_product {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    color: #555 !important;
    text-decoration: none !important;
}

.o_cart_product .delete_icon .js_delete_product svg {
    width: 16px !important;
    height: 16px !important;
}

.o_cart_product {
    overflow: visible !important;
}

/* SOLUCIÓN SIMPLE: Ocultar texto "Eliminar" y mostrar icono X */
.o_cart_product .o_cart_line_action {
    display: none !important;
}

.o_cart_product a[href*="delete"]:not(.js_delete_product),
.o_cart_product a[href*="remove"]:not(.js_delete_product) {
    display: none !important;
}

/* SOLUCIÓN SIMPLE: Icono X en esquina superior derecha */
.o_cart_product .delete_icon {
    position: absolute !important;
    top: -10px !important;
    right: -10px !important;
    z-index: 95 !important;
    width: 30px !important;
    height: 30px !important;
    background-color: #e8e8e8 !important;
    border-radius: 50% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

.o_cart_product .delete_icon .js_delete_product {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    color: #555 !important;
    text-decoration: none !important;
}

.o_cart_product .delete_icon .js_delete_product svg {
    width: 16px !important;
    height: 16px !important;
}

/* Asegurar que el nombre del producto sea visible */
.o_cart_product h6,
.o_cart_product .o_cart_line_name,
.o_cart_product .product-name {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: #333 !important;
    font-weight: 600 !important;
    margin: 0 0 10px 0 !important;
    line-height: 1.4 !important;
}

/* Asegurar que todos los elementos internos del producto mantengan su posición */
.o_cart_product>div {
    position: static !important;
    transform: none !important;
    transition: none !important;
}

.o_cart_product .flex-grow-1 {
    position: static !important;
    transform: none !important;
    transition: none !important;
}

.o_cart_product .d-flex.flex-column.align-items-end {
    position: static !important;
    transform: none !important;
    transition: none !important;
}

/* Mantener el diseño de la imagen del producto */
.o_cart_product .o_image_64_max {
    border-radius: 4px !important;
    object-fit: cover !important;
}

/* Mantener el diseño del nombre del producto */
.o_cart_product h6 {
    margin: 0 0 10px 0 !important;
    font-weight: 600 !important;
    color: #333 !important;
    line-height: 1.4 !important;
}

/* Asegurar que el precio tachado se mantenga */
.o_cart_product .mb-0.h6.fw-bold.text-end span[style*="text-decoration: line-through"],
.o_cart_product .mb-0.h6.fw-bold.text-end .text-danger,
.o_cart_product .mb-0.h6.fw-bold.text-end span.text-danger,
.o_cart_product .mb-0.h6.fw-bold.text-end span[style*="line-through"],
.o_cart_product .mb-0.h6.fw-bold.text-end span[style*="text-decoration"],
.o_cart_product .mb-0.h6.fw-bold.text-end del,
.o_cart_product .mb-0.h6.fw-bold.text-end strike,
.o_cart_product .mb-0.h6.fw-bold.text-end s {
    text-decoration: line-through !important;
    color: #dc3545 !important;
    display: inline !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Ocultar elementos de eliminación textuales */
.o_cart_product a[href*="delete"]:not(.js_delete_product),
.o_cart_product a[href*="remove"]:not(.js_delete_product),
.o_cart_product .js_delete_product_text,
.o_cart_product .o_cart_line_action a:not(.js_delete_product),
.o_cart_product .o_cart_line_action,
.o_cart_product .o_cart_line_action span,
.o_cart_product .o_cart_line_action button,
.o_cart_product .o_cart_line_action input,
.o_cart_product .o_cart_line_action div,
.o_cart_product .o_cart_line_action form,
.o_cart_product .o_cart_line_action label,
.o_cart_product .o_cart_line_action select,
.o_cart_product .o_cart_line_action textarea,
.o_cart_product .o_cart_line_action fieldset,
.o_cart_product .o_cart_line_action legend,
.o_cart_product .o_cart_line_action table,
.o_cart_product .o_cart_line_action tr,
.o_cart_product .o_cart_line_action td,
.o_cart_product .o_cart_line_action th,
.o_cart_product .o_cart_line_action ul,
.o_cart_product .o_cart_line_action ol,
.o_cart_product .o_cart_line_action li,
.o_cart_product .o_cart_line_action dl,
.o_cart_product .o_cart_line_action dt,
.o_cart_product .o_cart_line_action dd,
.o_cart_product .o_cart_line_action blockquote,
.o_cart_product .o_cart_line_action pre,
.o_cart_product .o_cart_line_action code,
.o_cart_product .o_cart_line_action kbd,
.o_cart_product .o_cart_line_action samp,
.o_cart_product .o_cart_line_action var,
.o_cart_product .o_cart_line_action sub,
.o_cart_product .o_cart_line_action sup,
.o_cart_product .o_cart_line_action small,
.o_cart_product .o_cart_line_action big,
.o_cart_product .o_cart_line_action b,
.o_cart_product .o_cart_line_action i,
.o_cart_product .o_cart_line_action u,
.o_cart_product .o_cart_line_action s,
.o_cart_product .o_cart_line_action strike,
.o_cart_product .o_cart_line_action tt,
.o_cart_product .o_cart_line_action em,
.o_cart_product .o_cart_line_action strong,
.o_cart_product .o_cart_line_action dfn,
.o_cart_product .o_cart_line_action cite,
.o_cart_product .o_cart_line_action abbr,
.o_cart_product .o_cart_line_action acronym,
.o_cart_product .o_cart_line_action address,
.o_cart_product .o_cart_line_action q,
.o_cart_product .o_cart_line_action ins,
.o_cart_product .o_cart_line_action del,
.o_cart_product .o_cart_line_action img,
.o_cart_product .o_cart_line_action object,
.o_cart_product .o_cart_line_action param,
.o_cart_product .o_cart_line_action applet,
.o_cart_product .o_cart_line_action embed,
.o_cart_product .o_cart_line_action noembed,
.o_cart_product .o_cart_line_action iframe,
.o_cart_product .o_cart_line_action map,
.o_cart_product .o_cart_line_action area,
.o_cart_product .o_cart_line_action base,
.o_cart_product .o_cart_line_action basefont,
.o_cart_product .o_cart_line_action bdo,
.o_cart_product .o_cart_line_action br,
.o_cart_product .o_cart_line_action hr,
.o_cart_product .o_cart_line_action meta,
.o_cart_product .o_cart_line_action link,
.o_cart_product .o_cart_line_action script,
.o_cart_product .o_cart_line_action style,
.o_cart_product .o_cart_line_action title,
.o_cart_product .o_cart_line_action head,
.o_cart_product .o_cart_line_action body,
.o_cart_product .o_cart_line_action html,
/* Ocultar específicamente cualquier elemento que contenga el texto "Eliminar" */
.o_cart_product a:contains("Eliminar"),
.o_cart_product span:contains("Eliminar"),
.o_cart_product div:contains("Eliminar"),
.o_cart_product p:contains("Eliminar"),
.o_cart_product small:contains("Eliminar"),
.o_cart_product *:contains("Eliminar"),
/* Ocultar enlaces de producto que aparecen después de actualizaciones AJAX */
.o_cart_product h6 a,
.o_cart_product .o_cart_line_name a,
.o_cart_product .product-name a,
.o_cart_product a[href*="/shop/product/"],
.o_cart_product a[href*="/product/"],
/* Ocultar cualquier elemento que tenga texto relacionado con eliminar */
.o_cart_product *[title*="Remove"],
.o_cart_product *[title*="Eliminar"],
.o_cart_product *[aria-label*="Remove"],
.o_cart_product *[aria-label*="Eliminar"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
}

#cart_products .o_cart_product .css_quantity .js_add_cart_json {
    color: #FFF !important;
    background: #D3D3D3 !important;
    border-radius: 50%;
    padding: 0 !important;
    width: 20px !important;
    height: 20px !important;
}

/* Asegurar que el contenedor de los botones +/- se mantenga estable */
.o_cart_product .input-group,
.o_cart_product .css_quantity {
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;
    border: 1px solid #ced4da !important;
    overflow: hidden !important;
    position: static !important;
    transform: none !important;
    transition: none !important;
    width: auto !important;
    height: auto !important;
    min-width: 120px !important;
}

/* Asegurar que el input de cantidad no se mueva */
.o_cart_product .js_quantity {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: static !important;
    transform: none !important;
    transition: none !important;
    border: 1px solid #ced4da !important;
    border-radius: 4px !important;
    padding: 5px 10px !important;
    text-align: center !important;
    background-color: white !important;
    color: #495057 !important;
}