@charset "UTF-8";

    /* {
        padding: 0;
        margin: 0;
        font-family: 'Lato', sans-serif;
    }*/

    *,
    *::after,
    *::before {
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

    html,
    body,
    .site-wrapper {
        height: 100%;
    }

    body {
        font-style: normal;
        line-height: 1.75;
        position: relative;
        visibility: visible;
        overflow-x: hidden;
        color: #000000;
        /*color: #696969;*/
        background-color: #FFFFFF;
    }

    @font-face {
        font-family: 'Gandhi Sans';
        src: url('GandhiSans-Bold.eot');
        src: local('Gandhi Sans Bold'), local('GandhiSans-Bold'), url('GandhiSans-Bold.eot?#iefix') format('embedded-opentype'), url('GandhiSans-Bold.woff2') format('woff2'), url('GandhiSans-Bold.woff') format('woff'), url('GandhiSans-Bold.ttf') format('truetype');
        font-weight: bold;
        font-style: normal;
        font-display: swap;
    }

    @font-face {
        font-family: 'Gandhi Sans';
        src: url('GandhiSans-BoldItalic.eot');
        src: local('Gandhi Sans Bold Italic'), local('GandhiSans-BoldItalic'), url('GandhiSans-BoldItalic.eot?#iefix') format('embedded-opentype'), url('GandhiSans-BoldItalic.woff2') format('woff2'), url('GandhiSans-BoldItalic.woff') format('woff'), url('GandhiSans-BoldItalic.ttf') format('truetype');
        font-weight: bold;
        font-style: italic;
        font-display: swap;
    }

    @font-face {
        font-family: 'Gandhi Sans';
        src: url('GandhiSans-Italic.eot');
        src: local('Gandhi Sans Italic'), local('GandhiSans-Italic'), url('GandhiSans-Italic.eot?#iefix') format('embedded-opentype'), url('GandhiSans-Italic.woff2') format('woff2'), url('GandhiSans-Italic.woff') format('woff'), url('GandhiSans-Italic.ttf') format('truetype');
        font-weight: normal;
        font-style: italic;
        font-display: swap;
    }

    @font-face {
        font-family: 'Gandhi Sans';
        src: url('GandhiSans-Regular.eot');
        src: local('Gandhi Sans'), local('GandhiSans-Regular'), url('GandhiSans-Regular.eot?#iefix') format('embedded-opentype'), url('GandhiSans-Regular.woff2') format('woff2'), url('GandhiSans-Regular.woff') format('woff'), url('GandhiSans-Regular.ttf') format('truetype');
        font-weight: normal;
        font-style: normal;
        font-display: swap;
    }

    /*Tamaño de fuente h3*/
    h3 {
        font-size: 1.5rem;
    }

    h4 {
        font-size: 1.3rem;
    }

    a {
        text-decoration: none;
    }

    .menu {
        background-color: #F15A29!important;
        color: #fff!important;
        border: 3px;
        padding-left: 30px;
        padding-right: 30px;
    }

    .color-orange {
        color: #f15a29!important;
    }

    a.color-orange:hover {
        text-decoration: underline;
    }

    .color-white {
        color: #fff!important;
    }

    a.color-white:hover {
        color: #f15a29!important;
    }

    .negro-color {
        color: rgb(0, 0, 0)!important;
    }

    .autor-blog {
        color: #95ac5b!important;
    }
    /* width */

     ::-webkit-scrollbar {
        width: 10px;
    }
    /* Track */

     ::-webkit-scrollbar-track {
        background: #f1f1f1;
    }
    /* Handle */

     ::-webkit-scrollbar-thumb {
        background: #888;
    }
    /* Handle on hover */

     ::-webkit-scrollbar-thumb:hover {
        background: #1e1e1e;
    }

    .bold {
        font-weight: bold;
        color: black;
    }

    .header {
        background: #1e1e1e;
        z-index: 999;
        position: fixed;
        width: 100%;
        top: 0;
    }

    /* Offset para compensar header fixed */
    body {
        padding-top: 113px;
    }

    @media (max-width: 767px) {
        body {
            padding-top: 158px;
        }
    }

    @media (min-width: 768px) and (max-width: 1080px) {
        body {
            padding-top: 104px;
        }
    }

    .header .menu-Desktop a {
        color: white;
    }

    .header .menu-Desktop a:hover {
        text-decoration: none;
        color: #7F6AAF;
    }

    .header .menu-Desktop i {
        color: #fff;
    }

    .header .top a {
        color: #7F6AAF;
    }

    .header .top a:hover {
        text-decoration: none;
        color: black;
    }

    .header .menu-Desktop i:hover {
        color: black;
    }

    .header .dropdown-menu a {
        color: black;
    }

    .header .dropdown-toggle:hover {
        color: #7F6AAF;
    }
    /* .header .col-md-4 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
} */

    .navbar li {
        list-style: none;
    }

    .navbar li a {
        color: #fff;
    }

    .navbar li a:hover {
        color: #F15A29;
        text-decoration: none;
    }

    .header .social {
        color: black;
        margin-right: 15px;
        font-size: 20px;
    }

    .header .social:hover {
        color: #F15A29;
    }
    .mobile-menu {
        position: fixed;
        width: 100%;
        height: 100vh;
        background: #1e1e1e;
        -webkit-transition: all 1s;
        -o-transition: all 1s;
        transition: all 1s;
        left: -100%;
        overflow-y: scroll;
    }

    .mobile-menu.active {
        -webkit-transform: translateX(100%);
        -ms-transform: translateX(100%);
        transform: translateX(100%);
    }

    .btn-mobile-menu a i {
        font-size: 30px;
    }
    .accordions .label {
        font-size: 15px;
    }
    .mobile-menu ul li a {
        font-size: 15px;
    }

    .mobile-menu .social {
        font-size: 35px;
    }

    main,
    footer {
        position: relative;
    }

    footer ul li a:hover {
        color: #fff;
    }

    footer i.fa-star {
        color: #FBBC04;
    }

    .comentarios i.fa-star {
        color: #FBBC04;
    }

    .review {
        -webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
        -webkit-transition: 0.3s;
        -o-transition: 0.3s;
        transition: 0.3s;
        padding: 20px;
        margin: 20px;
        border-radius: 20px;
        height: 200px !important;
        overflow: hidden;
        overflow-y: scroll;
    }
    .review::-webkit-scrollbar {
        width: 10px;
      }
    .review::-webkit-scrollbar-track {
        background: transparent;
      }
    .review::-webkit-scrollbar-thumb {
        background: #ccc;
        border-radius: 15%;
      }
    .review::-webkit-scrollbar-thumb:hover {
        background: #555;
      }
    .review:hover {
        -webkit-box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
        box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
    }

    .slick-prev.slick-arrow {
        position: absolute;
        z-index: 2;
        top: 50%;
        left: 10px;
    }

    .slick-next.slick-arrow {
        position: absolute;
        z-index: 2;
        top: 50%;
        right: 10px;
    }

    .slick-arrow {
        font-size: 20px;
        background: #D9DBDD;
        color: #1e1e1e;
        width: 40px;
        height: 40px;
        border-radius: 50px;
        -webkit-transition: all 500ms;
        -o-transition: all 500ms;
        transition: all 500ms;
    }

    .slick-arrow:hover {
        color: #555;
        text-decoration: none;
    }

    .slick-dots {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        margin-top: 10px;
        padding-top: 0px;
        padding-right: 0px;
        padding-bottom: 0px;
        padding-left: 0px;
    }

    @media (max-width: 512px) {
        .slick-dots li {
            display: none;
        }
    }

    .slick-dots li {
        list-style: none;
        margin-left: 5px;
        margin-right: 5px;
        width: 15px;
        height: 15px;
    }

    .slick-dots li button {
        width: 100%;
        height: 100%;
        background: #777;
        color: transparent;
        font-size: 10px;
        border: none;
        border-radius: 50%;
    }

    .slick-dots li.slick-active button {
        width: 100%;
        height: 100%;
        border: none;
        border-radius: 50%;
        background: #000;
        color: transparent;
        font-size: 10px;
    }

    .mapa-sitio a {
        color: #000;
    }

    .checklist li:before {
        content: "\f059";
        font-family: "Font Awesome 5 Free";
        color: #8974B7;
        margin-right: 10px;
        font-size: 12px;
    }

    .checklist li {
        margin-bottom: 5px;
        display: block;
    }

    .checklistTipos li:before {
        content: "\f058";
        font-family: "Font Awesome 5 Free";
        color: #8974B7;
        margin-right: 10px;
        font-size: 16px;
    }

    .checkCircle li:before {
        content: "\f059";
        font-family: "Font Awesome 5 Free";
        color: #8974B7;
        margin-right: 10px;
        font-size: 16px;
    }

    .checklistTipos li {
        margin-bottom: 5px;
        display: block;
    }
    /* CALL TO ACTIONS */

    .cta-phone {
        color: #fff;
        background: #6A52A2;
        border: 2px #6A52A2 solid;
        padding: 10px;
        border-radius: 15px;
        text-decoration: none;
        -webkit-transition: all 500ms;
        -o-transition: all 500ms;
        transition: all 500ms;
    }

    .cta-phone:hover {
        color: #6A52A2;
        background-color: #fff;
        text-decoration: none;
    }

    .search-btn {
        color: #fff;
        background: #1e1e1e;
        border: 2px #1e1e1e solid;
        padding: 15px;
        border-radius: 30px;
        text-decoration: none;
        -webkit-transition: all 500ms;
        -o-transition: all 500ms;
        transition: all 500ms;
    }

    .search-btn:hover {
        color: #1e1e1e;
        background-color: #fff;
        text-decoration: none;
    }

    .cta-whatsapp {
        color: #000;
        font-weight: 600;
        background: #0DF053;
        border: 2px #0DF053 solid;
        padding: 10px;
        border-radius: 30px;
        -webkit-transition: all 500ms;
        -o-transition: all 500ms;
        transition: all 500ms;
        display: inline-block;
        text-decoration: none;
    }

    .cta-ecomerce {
        color: #000;
        font-weight: 600;
        background: #e6f90b;
        border: 2px #e6f90b solid;
        padding: 10px;
        border-radius: 30px;
        -webkit-transition: all 500ms;
        -o-transition: all 500ms;
        transition: all 500ms;
    }

    .cta-landing {
        color: #000;
        font-weight: 600;
        background: #ffe30e;
        border: 2px #ffe30e solid;
        padding: 15px;
        border-radius: 30px;
        -webkit-transition: all 500ms;
        -o-transition: all 500ms;
        transition: all 500ms;
    }

    .cta-whatsapp:hover {
        color: #000;
        border: 2px #0DF053 solid;
        background-color: #fff;
        text-decoration: none;
    }

    .cta-ecomerce:hover {
        color: #000;
        border: 2px #e6f90b solid;
        background-color: #fff;
        text-decoration: none;
    }

    .cta-landing:hover {
        color: #000;
        border: 2px #ffe30e solid;
        background-color: #fff;
        text-decoration: none;
    }

    h1 {
        font-weight: 300;
        font-size: 40px!important;
        color: #1e1e1e;
    }

    h2 {
        font-weight: 300;
        font-size: 30px!important;
        color: #1e1e1e;
    }
    /* Footer */

    .footer {
        background: #1f2530;
    }

    footer h3 {
        font-size: 40px;
        font-weight: 300;
    }

    footer .social {
        font-size: 24px;
    }

    footer .social.facebook {
        color: #3b5998;
    }

    footer .social.instagram {
        color: #e1306c;
    }

    footer .social.youtube {
        color: #e62117;
    }

    footer .social.mapa {
        color: #35A654;
    }

    footer .linked {
        color: #0e76a8;
    }

    footer ul li {
        list-style: inside;
        color: #fff;
    }

    footer ul li a {
        color: #fff;
    }

    footer ul li a:hover,
    footer .copy a:hover,
    .underline:hover {
        text-decoration: underline;
    }

    footer .border-footer {
        border-color: #666666;
    }

    footer .border-redes i {
        border: 1px solid #dee2e6!important;
        border-radius: 50%;
        width: 44px;
        height: 44px;
        line-height: 40px;
        text-align: center;
    }

    footer .border-redes:hover i {
        background-color: #e2e2e1;
    }
    /* Google maps */

    .g-maps {
        width: 100%;
    }

    #search-wrapper .search-btn {
        position: fixed;
        bottom: 185px;
        right: 15px;
        width: 72px;
        height: 72px;
        border-radius: 50%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        vertical-align: middle;
        z-index: 9999;
    }

    #phone-wrapper .cta-phone {
        position: fixed;
        bottom: 100px;
        right: 20px;
        width: 62px;
        height: 62px;
        border-radius: 50%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        vertical-align: middle;
        z-index: 9999;
        box-shadow: 2px 2px 3px #999;
    }

    #search-wrapper .search-btn i {
        margin: auto;
        font-size: 35px;
    }

    #phone-wrapper .cta-phone i {
        margin: auto;
        font-size: 32px;
    }
    /* search container */

    #search-container {
        background: rgba(30, 30, 30, 0.7);
        position: fixed;
        top: 0;
        width: 100vw;
        height: 100vh;
        z-index: 99;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-transition: all 500ms;
        -o-transition: all 500ms;
        transition: all 500ms;
    }

    #search-container form {
        margin: auto;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }

    #search-container form #myInput {
        width: 100%;
        height: 50px;
        font-size: 20px;
        padding: 10px;
        line-height: 1;
    }

    #search-container .search {
        padding: 10px;
    }

    #close-search-container {
        position: absolute;
        top: 110px;
        left: 20px;
        font-size: 50px;
        color: orange;
    }

    @media screen and (max-width: 767px) {
        main,
        footer {
            position: relative;
            top: 60px;
        }
        h1 {
            font-size: 30px!important;
        }
        h2 {
            font-size: 28px!important;
        }
        h3 {
            font-size: 25px!important;
        }
        li {
            font-size: 15px!important;
        }
        main {
            top: 0;
        }
        .secure-payment {
            font-size: 25px!important;
        }
        a.bg-orange {
            font-size: 20px!important;
        }
        p {
            color: #1e1e1e;
        }
        .slide{
            max-height: 265px;
        }
    }

    .slick-product .slick-slide img,
    .slick-mobile-product .slick-slide img,
    .slider-nav .slick-slide img,
    .border-rounded {
        border-radius: 20px;
    }
    .slide{
        max-height: 970px;
    }

    @media (max-width:575px){
        .slider-nav {
            padding-top: 0px;
        }
    }
    .autocomplete {
        /*the container must be positioned relative:*/
        position: relative;
        display: inline-block;
    }

    .autocomplete-items {
        position: absolute;
        border: 1px solid #d4d4d4;
        border-bottom: none;
        border-top: none;
        z-index: 99;
        /*position the autocomplete items to be the same width as the container:*/
        top: 100%;
        left: 0;
        right: 0;
    }

    .autocomplete-items div {
        padding: 10px;
        cursor: pointer;
        background-color: #fff;
        border-bottom: 1px solid #d4d4d4;
    }

    .autocomplete-items div:hover {
        /*when hovering an item:*/
        background-color: #e9e9e9;
    }

    .autocomplete-active {
        /*when navigating through the items using the arrow keys:*/
        background-color: DodgerBlue !important;
        color: #ffffff;
    }

    .dropbtn {
        background: #fff;
        color: #6A52A2;
        padding: 15px;
        font-size: 16px;
        border-radius: 50px;
        border-color: transparent;
        cursor: pointer;
        text-decoration: none;
        -webkit-transition: all 500ms;
        -o-transition: all 500ms;
        transition: all 500ms;
    }

    .dropbtn:hover {
        color: #fff;
        background-color: #6A52A2;
    }

    .searchBtn {
        background: #fff;
        color: #6A52A2;
        padding: 15px;
        font-size: 20px;
        border-radius: 50px;
        border-color: transparent;
        cursor: pointer;
        text-decoration: none;
        -webkit-transition: all 500ms;
        -o-transition: all 500ms;
        transition: all 500ms;
    }

    .searchBtn:hover {
        color: #fff;
        background-color: #6A52A2;
    }

    .movilbtn {
        background: #6A52A2;
        color: #fff;
        padding: 8px;
        font-size: 16px;
        border-radius: 15px;
        border-color: transparent;
        cursor: pointer;
        text-decoration: none;
        -webkit-transition: all 500ms;
        -o-transition: all 500ms;
        transition: all 500ms;
    }

    .movilbtn:hover {
        color: #6A52A2;
        background-color: #fff;
    }
    /* Dropdown button on hover & focus */

    .dropbtn:hover,
    .dropbtn:focus {
        background-color: #6A52A2;
    }
    /* The search field */

    #myInput {
        box-sizing: border-box;
        background-image: url('searchicon.png');
        background-position: 14px 12px;
        background-repeat: no-repeat;
        font-size: 16px;
        padding: 14px 20px 12px 45px;
        border: none;
        border-bottom: 1px solid #ddd;
    }
    /* The search field when it gets focus/clicked on */

    #myInput:focus {
        outline: 3px solid #ddd;
    }
    /* The container <div> - needed to position the dropdown content */

    .dropdown {
        position: relative;
        display: inline-block;
    }
    /* Dropdown Content (Hidden by Default) */

    .dropdown-content {
        display: none;
        position: absolute;
        background-color: #f6f6f6;
        min-width: 230px;
        height: 300px;
        border: 1px solid #ddd;
        z-index: 1;
        overflow-y: scroll;
        scroll-behavior: smooth;
        border-radius: 5px;
    }
    /* Links inside the dropdown */

    .dropdown-content a {
        color: black;
        padding: 5px 16px;
        text-decoration: none;
        display: block;
    }

    .dropdown-content .categoria a {
        color: black;
        font-weight: bold;
        padding: 5px 16px;
        text-decoration: none;
        display: block;
    }
    /* Change color of dropdown links on hover */

    .dropdown-content a:hover {
        background-color: #f1f1f1
    }
    /* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */

    .show {
        display: block;
    }

    .dropdown p {
        font-size: 1rem;
        background-color: #bcb1d5;
        padding-top: 5px;
        padding-bottom: 5px;
        padding-left: 10px;
        font-weight: 800;
    }

    .streetbtn {
        background: #6F58A5;
        color: white;
        width: 140px;
        padding: 15px;
        font-size: 16px;
        border-radius: 50px;
        border-color: transparent;
        cursor: pointer;
        color: #fff;
        text-decoration: none;
        -webkit-transition: all 500ms;
        -o-transition: all 500ms;
        transition: all 500ms;
        font-size: 13px;
    }

    .streetbtn:hover {
        color: #6A52A2;
        background: #fff;
    }

    .circulo {
        width: 100px;
        height: 100px;
        -moz-border-radius: 50%;
        -webkit-border-radius: 50%;
        border-radius: 50%;
        background: #5cb85c;
    }

    .promobramante {
        font-variant: small-caps;
        color: #F15A29
    }

    .list {
        font-size: 20px;
        font-variant: small-caps;
    }

    @media (max-width: 512px) {
        .descripcion h4 {
            font-size: 16px;
        }
    }

    @media(min-width: 750px) and (max-width: 1190px) {
        .font-header {
            font-size: 10px;
            margin-top: 20px !important;
        }
    }
    /*galery*/

    .gallery {
        -webkit-column-count: 3;
        -moz-column-count: 3;
        column-count: 3;
        -webkit-column-width: 33%;
        -moz-column-width: 33%;
        column-width: 33%;
    }

    .gallery .pics {
        -webkit-transition: all 350ms ease;
        transition: all 350ms ease;
    }

    .gallery .animation {
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
    }

    @media (max-width: 450px) {
        .gallery {
            -webkit-column-count: 1;
            -moz-column-count: 1;
            column-count: 1;
            -webkit-column-width: 100%;
            -moz-column-width: 100%;
            column-width: 100%;
        }
    }

    @media (max-width: 400px) {
        .btn.filter {
            padding-left: 1.1rem;
            padding-right: 1.1rem;
        }
    }

    .whatsapp-float {
        position: fixed;
        width: 60px;
        height: 60px;
        bottom: 30px;
        right: 20px;
        background-color: #00bb2d;
        color: #FFF;
        border-radius: 50px;
        text-align: center;
        font-size: 30px;
        box-shadow: 2px 2px 3px #999;
        z-index: 100;
    }

    .whatsapp-float:hover {
        text-decoration: none;
        color: #00bb2d;
        background-color: #fff;
    }

    .whatsapp-my-float {
        margin-top: 16px;
    }

    .telavsdesechable th {
        padding: 5px;
        background-color: #6B5094;
        color: #FFFFFF;
        border-width: 2px;
        border-style: solid;
        border-color: #000000;
        text-transform: uppercase;
    }

    .telavsdesechable td {
        padding: 5px;
        color: black;
        border-width: 1px;
        border-style: solid;
        border-color: #000000;
    }

    .fichaTecnica th {
        padding: 5px;
        background-color: #cecdcd8a;
        color: #FFFFFF;
        border-width: 2px;
        border-style: solid;
        border-color: #000000;
        text-transform: capitalize;
        vertical-align: middle;
    }

    .fichaTecnica td {
        padding: 5px;
        vertical-align: middle;
        color: black;
        border-width: 1px;
        border-style: solid;
        border-color: #000000;
        padding-left: 10px;
        width: 25px;
    }

    .fichaTecnica a {
        padding: 5px;
        vertical-align: middle;
        color: black;
    }

    .fichaTecnicaP {
        padding: 5px;
        vertical-align: middle;
        color: black;
        margin-top: auto;
        margin-bottom: auto;
    }

    .fichaTecnica i {
        font-size: 35px;
        color: #f15a29;
    }

    .fichaTecnica th {

        background-color: #cecdcd8a;
        color: #FFFFFF;
        border-width: 2px;
        border-style: solid;
        border-color: #000000;
        text-transform: capitalize;
        vertical-align: middle;
    }
    /* Estilos para tablas personalizadas en TSG's venta de telas */
    .ficha-ventajas{
        /* background-color: #FF8000; */
        background: rgb(255,128,0);
        background: linear-gradient(180deg, rgba(255,128,0,0.14609593837535018) 25%, rgba(255,128,0,1) 95%);
        width: 100%;
        border-collapse: collapse;
    }

    .ficha-ventajas th {
        padding: 5px;
        color: #1F314F;
        border: solid 1px #fff;
        text-transform: capitalize;
        vertical-align: middle;
    }
    .ficha-ventajas ul{
        list-style: none;
    }
    .ficha-ventajas li{
        color: #ffff;
        font-weight: bold;
        margin: auto;
    }
    .ficha-ventajas td {
        padding: 5px;
        vertical-align: middle;
        color: black;
        border: solid 1px #fff;
        padding: 8px;
        width: 50%;
        font-size: 24px;
    }
    .ficha-ventajas th h3{
        font-weight: bold;
        font-size: 40px;
    }
    .ficha-ventajas a {
        padding: 5px;
        vertical-align: middle;
        color: black;
    }

    .ficha-ventajas tr td p {
        padding: 5px;
        vertical-align: middle;
        color: black;
        margin-top: auto;
        margin-bottom: auto;
    }

    .ficha-ventajas i {
        font-size: 35px;
        color: #f15a29;
    }
    @media (max-width: 480px) {
        .ficha-ventajas td {
          font-size: 12px;
          border: 1px solid #fff;
          display: block;
          width: 100%;
          margin: auto;
        }
      }
    /* CSS para la animación y localización de los DIV de cookies */
    /*
@keyframes desaparecer
{
0%		{bottom: 0px;}
80%		{bottom: 0px;}
100%		{bottom: -50px;}
}

@-webkit-keyframes desaparecer Safari and Chrome
{
0%		{bottom: 0px;}
80%		{bottom: 0px;}
100%		{bottom: -50px;}
}

@keyframes aparecer
{
0%		{bottom: -38px;}
10%		{bottom: 0px;}
90%		{bottom: 0px;}
100%		{bottom: -38px;}
}

@-webkit-keyframes aparecer  Safari and Chrome
{
0%		{bottom: -38px;}
10%		{bottom: 0px;}
90%		{bottom: 0px;}
100%		{bottom: -38px;}
}
#cookie1{
    padding-top: 10px;
}
#cookiesms1:target {
    display: none;
}
.cookiesms{
	width:100%;
	height:65px;
	margin:0 auto;
	padding-left:3%;
        padding-top:5px;
        font-size:20px;
	clear:both;
        font-weight: strong;
color: #000;
bottom:-50px;
position:fixed;
left: 0px;
background-color: #DDDCE1;
opacity:0.9;
filter:alpha(opacity=80);  For IE8 and earlier
transition: bottom 2s;
-webkit-transition:bottom 1s;  Safari
-webkit-box-shadow: 3px -3px 1px rgba(50, 50, 50, 0.56);
-moz-box-shadow:    3px -3px 1px rgba(50, 50, 50, 0.56);
box-shadow:         3px -3px 1px rgba(50, 50, 50, 0.56);
z-index:999999999;
}

.cookiesms:hover{
bottom:15px;
}
.cookies2{
background-color: #DDDCE1;
display:inline;
opacity:0.95;
filter:alpha(opacity=95);
position:absolute;
left:1%;
top:-30px;
font-size:15px;
height:30px;
padding-left:25px;
padding-right:25px;
-webkit-border-top-right-radius: 10px;
-webkit-border-top-left-radius: 10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-topleft: 10px;
border-top-right-radius: 10px;
border-top-left-radius: 10px;
-webkit-box-shadow: 3px -3px 1px rgba(50, 50, 50, 0.56);
-moz-box-shadow:    3px -3px 1px rgba(50, 50, 50, 0.56);
box-shadow:         3px -3px 1px rgba(50, 50, 50, 0.56);
} */
    /* Fin del CSS para cookies */

    .modal-title {
        font-weight: 900
    }

    .modal-content {
        border-radius: 13px
    }

    .modal-body {
        color: #3b3b3b
    }

    .rss-logo {
        border-radius: 33px;
        width: 61px;
        height: 61px
    }

    .rss-fab:before {
        position: relative;
        top: 16px
    }

    .smd {
        width: 100px;
        font-size: small;
        text-align: center
    }

    .btn-descarga {
        display: inline-block;
        font-weight: 400;
        text-align: center;
        vertical-align: middle;
        border: 1px solid transparent;
        padding-top: 0.375rem;
        padding-right: 0.75rem;
        padding-bottom: 0.375rem;
        padding-left: 0.75rem;
        font-size: 1rem;
        line-height: 1.5;
        border-radius: .25rem;
        color: #fff;
        background-color: #F25A29;
        border-color: #F25A29;
    }

    .btn-catalogo-escolar {
        display: inline-block;
        font-weight: 400;
        text-align: center;
        vertical-align: middle;
        border: 1px solid transparent;
        padding-top: 0.375rem;
        padding-right: 0.75rem;
        padding-bottom: 0.375rem;
        padding-left: 0.75rem;
        font-size: 2rem;
        line-height: 1.5;
        border-radius: .25rem;
        color: black;
        background-color: #F8D207;
        border-color: #F8D207;
    }

    .catalogo-escolar {
        font-size: 4rem;
        color: #F8D207;
    }
    /* 8. Portfolio styles  */

    .portfolio-header-details {
        position: relative;
        padding-bottom: 60px;
    }

    .portfolio-header-details::after {
        content: '';
        position: absolute;
        height: 1px;
        width: calc(100% - 60px);
        background: #384357;
        left: 0;
        bottom: 0;
    }

    .ph-title {
        font-size: 20px;
        font-weight: 700;
        margin-bottom: 30px;
        color: #fff;
        text-transform: uppercase;
    }

    .ph-icon {
        font-size: 65px;
        line-height: 1;
        color: #538de4;
        margin-right: 20px;
    }

    .portfolio-carousel-block {
        position: relative;
        overflow: hidden;
    }

    .portfolio-item-overlay {
        position: absolute;
        left: 50px;
        right: 50px;
        bottom: 0px;
        color: #ffffff;
        opacity: 0;
        -webkit-transform: translateY(200px);
        -ms-transform: translateY(200px);
        transform: translateY(200px);
        -webkit-transition: all 500ms ease;
        -moz-transition: all 500ms ease;
        -ms-transition: all 500ms ease;
        -o-transition: all 500ms ease;
        transition: all 500ms ease;
    }

    .portfolio-item:hover .portfolio-item-overlay {
        opacity: 1;
        -webkit-transform: translateY(0px);
        -ms-transform: translateY(0px);
        transform: translateY(0px);
        z-index: 3;
    }

    .portfolio-item {
        position: relative;
        overflow: hidden;
        z-index: 2;
    }

    .portfolio-item::after {
        content: '';
        position: absolute;
        height: 0px;
        width: 100%;
        left: 0;
        bottom: 0;
        background: #538de4;
        opacity: 0.9;
        -webkit-transition: all 500ms ease;
        -moz-transition: all 500ms ease;
        -ms-transition: all 500ms ease;
        -o-transition: all 500ms ease;
        transition: all 500ms ease;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        z-index: 1;
    }

    .portfolio-item:hover::after {
        height: 100%;
    }

    .portfolio-carousel-block {
        margin-left: -webkit-calc((100% - 1180px)/2);
        margin-left: calc((100% - 1180px)/2);
    }

    .portfolio-carousel-block {
        margin-top: -60px;
    }

    .portfolio-carousel-block img {
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
    }

    .portfolio-block-category a,
    .portfolio-block-category a:visited {
        color: #d7e6fd;
        font-size: 16px;
        font-weight: 600;
        text-transform: uppercase;
    }

    .portfolio-block-title {
        font-size: 30px;
        font-weight: 600;
        text-transform: uppercase;
    }

    .portfolio-more {
        width: 60px;
        height: 60px;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
        background: #fff;
        color: #11172e;
        line-height: 60px;
        text-align: center;
        display: inline-block;
        position: absolute;
        right: 50px;
        top: 50px;
        visibility: hidden;
        opacity: 0;
        -webkit-transform: translateY(20px);
        -ms-transform: translateY(20px);
        transform: translateY(20px);
        -webkit-transition: all 500ms ease;
        -moz-transition: all 500ms ease;
        -ms-transition: all 500ms ease;
        -o-transition: all 500ms ease;
        transition: all 500ms ease;
    }

    .portfolio-item:hover .portfolio-more {
        visibility: visible;
        opacity: 1;
        -webkit-transform: translateY(0px);
        -ms-transform: translateY(0px);
        transform: translateY(0px);
        z-index: 3;
        -webkit-transition-delay: 0.3s;
        -moz-transition-delay: 0.3s;
        -ms-transition-delay: 0.3s;
        -o-transition-delay: 0.3s;
        transition-delay: 0.3s;
    }

    .portfolio-pagination .swiper-pagination-bullet {
        width: 10px;
        height: 10px;
        display: inline-block;
        border-radius: 100%;
        background: #11172e;
        opacity: .2;
        margin: 0px 3px;
    }

    [role=button]:focus {
        outline: -webkit-focus-ring-color auto 0px;
    }

    .portfolio-pagination .swiper-pagination-bullet-active {
        background: #538de4;
        opacity: 1;
    }

    .portfolio-carousel-footer {
        padding: 40px 0;
        border-bottom: 1px solid #d9dfe9;
    }

    .btn-underline {
        position: relative;
        display: inline-block;
        padding-bottom: 2px;
        vertical-align: top;
        color: #7b8391;
        font-size: 16px;
        font-weight: 600;
        line-height: 1.25em;
        letter-spacing: 1.6px;
        text-transform: uppercase;
        transition: all 0.3s ease;
        -moz-transition: all 0.3s ease;
        -webkit-transition: all 0.3s ease;
        -ms-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
    }

    .btn-underline:hover {
        text-decoration: none;
        color: #538de4;
    }

    .btn-underline::before {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        border-bottom: 2px solid #11172e;
        transition: all 0.3s ease;
        -moz-transition: all 0.3s ease;
        -webkit-transition: all 0.3s ease;
        -ms-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
    }

    .btn-underline:hover::before {
        border-color: #538de4;
        transform: scaleX(0.8);
    }

    .portfolio-filters ul {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        padding-left: 0;
        margin-bottom: 0;
        list-style: none;
        -ms-flex-pack: center !important;
        justify-content: center !important;
    }

    .portfolio-filters ul li {
        margin: 0px 20px;
        font-size: 18px;
        font-weight: 500;
        color: #7b8391;
        text-transform: capitalize;
        cursor: pointer;
    }

    .portfolio-sec {
        padding-top: 50px;
        padding-right: 0px;
        padding-bottom: 10px;
        padding-left: 0px;
    }

    .portfolio-filters {
        margin-bottom: 40px;
    }

    .portfolio-gallary .portfolio-item {
        margin-bottom: 30px;
    }

    .portfolio-filters .mixitup-control-active,
    .portfolio-filters ul li:hover {
        color: #000000;
    }

    .bg-negro {
        background: #000000;
    }

    .bg-rojo {
        background: #ff0000;
        padding: 40px;
    }

    img.hover-shadow {
        transition: 0.3s;
    }

    .hover-shadow:hover {
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    }

    .oferta {
        background-color: #FF5C23;
    }
    /* Product Rating */

    .product-ratings {
        line-height: 1;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
        margin-bottom: 15px;
        padding: 13px 0;
    }

    .product-ratings .star-rating {
        font-size: 12px;
        position: relative;
        display: block;
        margin-right: 10px;
    }

    .product-ratings .star-rating::before {
        font-family: "Font Awesome 5 Free";
        font-size: 12px;
        font-weight: 300;
        line-height: 1;
        content: "    ";
        color: #ABABAB;
    }

    .product-ratings .star-rating .rating-active {
        font-size: 0;
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        overflow: hidden;
        height: 100%;
    }

    .product-ratings .star-rating .rating-active::before {
        font-family: "Font Awesome 5 Free";
        font-size: 12px;
        font-weight: 900;
        line-height: 1;
        content: "    ";
        white-space: nowrap;
        color: #F5CC26;
    }

    .product-ratings .review-link {
        font-size: 16px;
        font-weight: 500;
        line-height: 1;
        color: #7E7E7E;
    }

    .product-ratings .review-link:hover {
        color: #333333;
    }

    /* Product Tab List */

    .otros-productos {
        font-weight: bold;
        color: #F05B29;
    }

    .product-tab-list {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center;
        margin-bottom: 35px;
    }

    .product-tab-list li {
        line-height: 1;
        margin: 0 10px;
    }

    .product-tab-list li a {
        font-size: 25px;
        font-weight: 250;
        line-height: 1;
        position: relative;
        display: block;
        font-weight: bold;
        color: #000000;
    }

    .nav-tabs a.active {
        font-weight: bold;
    }

    .product-tab-list li a.active,
    .product-tab-list li a:hover {
        color: #6B5094 !important;
    }

    .product-tab-list li a.active:after,
    .product-tab-list li a:hover:after {
        top: 100%;
        opacity: 1;
    }

    @media only screen and (min-width: 768px) and (max-width: 991px) {
        .product-tab-list li a {
            font-size: 24px;
        }
    }

    @media only screen and (max-width: 767px) {
        .product-tab-list {
            margin-bottom: 20px;
        }
        .product-tab-list li {
            margin: 0 10px 10px;
        }
        .product-tab-list li a {
            font-size: 20px;
        }
        .product-tab-list li a::after {
            display: none;
        }
    }

    @media only screen and (max-width: 575px) {
        .product-tab-list li a {
            font-size: 18px;
        }
    }

    .myhover:hover {
        opacity: 0.6;
    }

    .photo-gallery {
        color: #313437;
        background-color: #fff;
    }

    .photo-gallery .photos {
        padding-bottom: 20px;
    }

    .photo-gallery .item {
        padding-bottom: 30px;
    }

    .border-carrusel {
        border: 2px #6A52A2 solid;
        padding: 10px;
    }

    .imagen-carrusel {
        max-width: 100%;
    }

    .btn-floating {
        color: #000;
        font-size: 35px;
    }

    .btn-floating:hover {
        color: #6A52A2;
    }
    /* Product Color */

    .product-colors {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
    }

    .product-colors a {
        width: 22px;
        height: 22px;
        margin-right: 15px;
        border: 1px solid #000000;
        border-radius: 50%;
    }

    @media (max-width: 576px) {
        .product-colors a {
            width: 17px;
            height: 17px;
            margin-right: 15px;
            border: 1px solid #000000;
            border-radius: 50%;
        }
    }

    .product-colors a:last-child {
        margin-right: 0;
    }

    .product-select {
        font-size: 30px;
        background-color: #FFFF00;
        font-weight: bold;
        font-style: italic;
    }
    /* .cls-home{
  height: 0;
  width: 100%;
  padding-top: (910 / 1900 ) * 100%;
} */
    /* @media (max-width: 576px) {
  .cls-home{
    transform: scale(1);
    height: 0;
    padding-top: 71%;
  }

  .cls-landing-slide{
    transform: scale(1);
    height: 260px;
    width: auto;
  }
} */
    /* .cls-landing-gal{
  transform: scale(1);
  height: 440px;
  width: auto;
} */
    /* @media (min-width: 577px) and (max-width: 720px){
  .cls-landing-slide{
    transform: scale(1);
    height: 460px;
    width: auto;
  }

  .cls-landing-gal{
    transform: scale(1);
    height: 640px;
    width: auto;
  }
} */

    .caract-envio {
        font-size: 16px;
        font-variant: normal;
    }
    /* botones flotantes de redes sociales */
    /* ------ Social Bar -------*/

    .sticky-container {
        padding: 0px;
        margin: 0px;
        position: fixed;
        right: -90px;
        top: 450px;
        width: 180px;
        z-index: 1100;
    }

    .sticky li {
        list-style-type: none;
        background-color: #6A52A2;
        color: #efefef;
        height: 43px;
        padding: 0px;
        margin: 0px 0px 5px 0px;
        -webkit-transition: all 0.25s ease-in-out;
        -moz-transition: all 0.25s ease-in-out;
        -o-transition: all 0.25s ease-in-out;
        transition: all 0.25s ease-in-out;
        cursor: pointer;
    }

    .sticky li:hover {
        margin-left: -25px;
    }

    .sticky {
        padding-top: 5px;
        margin: 0px;
        line-height: 16px;
        font-size: 15px;
    }

    .sticky li p a:hover {
        text-decoration: underline;
    }

    .icono-bar {
        padding: 15px 15px 15px 15px;
    }

    .icono-flotante {
        border-radius: 20px;
    }

    .icono-color {
        color: #fff;
    }

    .icono-color-youtube {
        background-color: #c4302b;
        color: #fff;
    }
    /* .icono-color:hover{
  color: #F15A29;
} */

    @media screen and (max-width: 920px) {
        .sticky-container {
            padding: 0px;
            margin: 0px;
            position: fixed;
            right: 0px;
            top: 450px;
            width: 90px;
            z-index: 1100;
        }
    }
    /* -------- End Social Bar -----------*/
    /* ------ Social Bar Submenu -------*/

    .sticky-container-submenu-1,
    .sticky-container-submenu-2,
    .sticky-container-submenu-3,
    .sticky-container-submenu-4,
    .sticky-container-submenu-5 {
        display: none;
    }

    .sticky-container-submenu-1 {
        padding: 0px;
        margin: 0px;
        position: fixed;
        right: 80px;
        top: 470px;
        z-index: 1100;
    }

    .sticky-container-submenu-2 {
        padding: 0px;
        margin: 0px;
        position: fixed;
        right: 80px;
        top: 530px;
        z-index: 1100;
    }

    .sticky-container-submenu-3 {
        padding: 0px;
        margin: 0px;
        position: fixed;
        right: 90px;
        top: 425px;
        z-index: 1100;
    }

    .sticky-container-submenu-4 {
        padding: 0px;
        margin: 0px;
        position: fixed;
        right: 80px;
        top: 470px;
        z-index: 1100;
    }

    .sticky-container-submenu-5 {
        padding: 0px;
        margin: 0px;
        position: fixed;
        right: 70px;
        top: 515px;
        z-index: 1100;
    }

    @media screen and (max-width: 920px) {
        .sticky-container-submenu-1 {
            padding: 0px;
            margin: 0px;
            position: fixed;
            right: 80px;
            top: 470px;
            z-index: 1100;
        }
        .sticky-container-submenu-2 {
            padding: 0px;
            margin: 0px;
            position: fixed;
            right: 80px;
            top: 530px;
            z-index: 1100;
        }
    }

    .sticky-submenu li {
        list-style-type: none;
        background-color: #00bb2d;
        color: #efefef;
        border-radius: 10px;
        padding: 0px;
        margin: 0px 0px 1px 0px;
        -webkit-transition: all 0.25s ease-in-out;
        -moz-transition: all 0.25s ease-in-out;
        -o-transition: all 0.25s ease-in-out;
        transition: all 0.25s ease-in-out;
        cursor: pointer;
    }

    .sticky-submenu li:hover {
        margin-left: -10px;
    }

    .sticky-submenu {
        padding-top: 0px;
        margin: 0px;
        font-size: 13px;
    }

    .sticky-submenu li p a:hover {
        text-decoration: underline;
    }

    .icono-bar-submenu {
        padding: 9px 9px 9px 9px;
    }

    .icono-bar-submenu-4 {
        padding: 5px 30px 5px 30px;
    }

    .icono-bar-submenu-3 {
        padding: 5px 80px 5px 80px;
    }
    /* -------- End Social Bar submenu -----------*/

    .icono-blog {
        font-size: 18px;
        color: #f15a29;
    }

    .circulo-nav {
        width: 3rem;
        height: 3rem;
        border-radius: 50%;
        background: #f15a29;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        margin: 0px auto;
        padding: 3%;
    }

    .circulo-nav>p {
        color: white;
        font-size: 1.4rem;
        font-weight: bold;
        display: contents;
    }

    .box-color {
        text-align: center;
        position: relative;
        height: 100%;
        min-height: 210px;
        background-color: #f8f8f8;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
        -webkit-transition: color .5s cubic-bezier(0.165, 0.84, 0.44, 1), background-color .5s cubic-bezier(0.165, 0.84, 0.44, 1);
        transition: color .5s cubic-bezier(0.165, 0.84, 0.44, 1), background-color .5s cubic-bezier(0.165, 0.84, 0.44, 1);
    }

    .pie-video p {
        font-size: 14px;
    }

    .pie-video:hover a {
        color: #6A52A2;
    }
    /* Rebajas */

    .product-badges {
        position: absolute;
        top: 50px;
        left: 15px;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
        margin-bottom: -12px;
    }

    .product-badges span {
        font-weight: 400;
        line-height: 35px;
        z-index: 5;
        width: 100px;
        height: 35px;
        margin-bottom: 12px;
        text-align: center;
        color: #FFFFFF;
        align-items: center;
        border-radius: 5%;
    }

    .product-badges span.hot {
        background-color: #C61932;
    }

    .viejo-precio {
        font-size: 16px;
        color: #767676;
        text-decoration: line-through;
        margin: 6px;
        color: #FF0100;
    }

    .nuevo-precio {
        font-size: 18px;
        font-weight: 800;
        white-space: nowrap;
        margin: 6px;
        color: #0c8e0c;
    }
    .gramaje {
        font-size: 18px;
        font-weight: 800;
        color: black;
    }
    .price-red{
        font-size: 25px;
        font-weight: bold;
        margin: 6px;
        color: #FF0100;

    }
    .precio{
        font-size: 25px;
        font-weight: bold;
        white-space: nowrap;
        margin: 6px;
        color: #0c8e0c;
    }
    /* Catálogo Telas */

    .des-tela {
        font-size: 12px;
        text-align: justify;
    }

    .tit-categorias {
        font-size: 18px;
        text-align: center;
        font-weight: bold;
        padding-bottom: 7px;
    }

    .subtit-categorias {
        font-size: 15px;
        text-align: justify;
        font-weight: bold;
        padding-bottom: 5px;
    }

    .border-categorias {
        padding: 20px;
        outline: 1px solid #adadad;
    }

    @media screen and (max-width: 767px) {
        .des-tela {
            font-size: 18px;
            text-align: justify;
        }
        .tit-categorias {
            font-size: 20px !important;
            text-align: center;
            font-weight: bold;
            padding-bottom: 2px;
        }
        .subtit-categorias {
            font-size: 16px;
            text-align: center;
            font-weight: bold;
            padding-bottom: 2px;
        }
        .border-categorias {
            padding: 10px;
            outline: 1px solid #adadad;
        }
    }

    .categorias-filters ul {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        padding-left: 0;
        margin-bottom: 0;
        list-style: none;
        -ms-flex-pack: center !important;
        justify-content: justify !important;
    }

    .categorias-filters ul li {
        font-size: 18px;
        font-weight: 300;
        color: #7b8391;
        text-transform: capitalize;
        cursor: pointer;
        padding-bottom: 13px;
    }

    .categorias-filters {
        margin-bottom: 30px;
    }

    .categorias-filters .mixitup-control-active,
    .categorias-filters ul li:hover {
        color: #000000;
        font-weight: 400;
    }

    .colors-catalog {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
    }

    .colors-catalog a {
        width: 22px;
        height: 22px;
        margin-right: 15px;
        border: 1px solid #000000;
        border-radius: 50%;
    }

    .colors-catalog a:hover {
        /* box-shadow: 0 8px 16px 0 #f15a29; */
        border: 1px solid #ffffff;
    }

    @media (max-width: 767px) {
        .categorias-filters {
            margin-bottom: 0px;
        }
        .categorias-filters ul li {
            margin: 0px 10px;
            font-size: 16px !important;
            font-weight: 300;
            color: #7b8391;
            text-transform: capitalize;
            cursor: pointer;
            padding-bottom: 13px;
        }
        .colors-catalog a {
            width: 27px;
            height: 27px;
            margin-right: 15px;
            border: 1px solid #000000;
            border-radius: 50%;
        }
        .categorias-filters .mixitup-control-active,
        .categorias-filters ul li:hover {
            color: #000000;
            font-weight: 550;
        }
    }

    .colors-catalog a:last-child {
        margin-right: 0;
    }

    .bg-background-image {
        position: relative;
    }

    .calificanos {
        background-color: #F05B29 !important;
        border-color: #F05B29 !important;
        color: #fff;
    }

    .calificanos:hover {
        background-color: #fff !important;
        border-color: #F05B29 !important;
        color: #000;
    }
    /* Site Menu Section */

    .site-menu-section {
        border-top: 1px dashed #DEDEDE;
    }
    /* Site Main Menu */

    .site-main-menu {
        font-weight: 400;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
    }

    .site-main-menu>ul {
        font-size: 13px;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        margin-bottom: 0;
        padding-left: 0;
        list-style: none;
    }

    .site-main-menu>ul>li {
        letter-spacing: 1.5px;
    }

    .site-main-menu>ul>li>a {
        font-size: 16px;
        line-height: 1.5;
        position: relative;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        padding: 20px;
        color: #7E7E7E;
    }

    @media(min-width: 750px) and (max-width: 1190px) {
        .site-main-menu>ul>li>a {
            font-size: 11px;
            padding: 8px;
        }
    }

    .site-main-menu>ul>li>a>.menu-text {
        position: relative;
    }

    .site-main-menu>ul>li>a>.menu-text::after {
        position: absolute;
        bottom: -3px;
        left: 0;
        width: 100%;
        height: 1px;
        content: "";
        -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.8, 0, 0.2, 1);
        transition: -webkit-transform 0.5s cubic-bezier(0.8, 0, 0.2, 1);
        -o-transition: transform 0.5s cubic-bezier(0.8, 0, 0.2, 1);
        transition: transform 0.5s cubic-bezier(0.8, 0, 0.2, 1);
        transition: transform 0.5s cubic-bezier(0.8, 0, 0.2, 1), -webkit-transform 0.5s cubic-bezier(0.8, 0, 0.2, 1);
        -webkit-transform: scale3d(0, 1, 1);
        transform: scale3d(0, 1, 1);
        -webkit-transform-origin: 100% 50%;
        -ms-transform-origin: 100% 50%;
        transform-origin: 100% 50%;
        background-color: #333333;
    }

    .site-main-menu>ul>li.align-left>.sub-menu {
        right: 0;
        left: auto;
    }

    .site-main-menu>ul>li:hover>a {
        color: #6B5094;
    }

    .site-main-menu>ul>li:hover>a>.menu-text::after {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
        -webkit-transform-origin: 0 50%;
        -ms-transform-origin: 0 50%;
        transform-origin: 0 50%;
    }
    .site-main-menu>ul>li:hover>.sub-menu {
        z-index: 99;
        top: 100%;
        visibility: visible;
        opacity: 1;
    }
    .site-main-menu.menu-height-100>ul>li>a {
        padding-top: 38px;
        padding-bottom: 38px;
    }

    .site-main-menu.menu-height-60>ul>li>a {
        padding-top: 18px;
        padding-bottom: 18px;
    }


    /* Sub Menu */
    .sub-menu {
        position: absolute;
        z-index: 9;
        z-index: 9;
        top: 150%;
        visibility: hidden;
        min-width: 280px;
        margin: 0;
        padding: 20px 0;
        list-style: none;
        -webkit-transition: all 0.5s ease 0s;
        -o-transition: all 0.5s ease 0s;
        transition: all 0.5s ease 0s;
        letter-spacing: 0;
        opacity: 0;
        background-color: #FFFFFF;
        -webkit-box-shadow: -1px 10px 80px -15px rgba(0, 0, 0, 0.3);
        box-shadow: -1px 10px 80px -15px rgba(0, 0, 0, 0.3);
    }

    .sub-menu li {
        line-height: 3.125;
        position: relative;
    }

    .sub-menu li a {
        position: relative;
        display: block;
        padding: 0 30px;
        color: #7E7E7E;
    }

    .sub-menu li a:not(.mega-menu-title) .menu-text {
        position: relative;
    }

    .sub-menu li a:not(.mega-menu-title) .menu-text::after {
        position: absolute;
        top: calc(50% + 10px);
        left: 0;
        width: 100%;
        height: 1px;
        content: "";
        -webkit-transition: all 0.5s ease 0s;
        -o-transition: all 0.5s ease 0s;
        transition: all 0.5s ease 0s;
        opacity: 0;
        background-color: #333333;
    }

    .sub-menu li a:hover .menu-text::after {
        opacity: 0.2;
    }

    .sub-menu li.has-children.align-left>.sub-menu {
        right: 100%;
        left: auto;
    }

    .sub-menu li>.sub-menu {
        top: 100%;
        left: 100%;
    }

    .sub-menu li:hover>a {
        color: #6B5094;
    }

    .sub-menu li:hover>.sub-menu {
        top: 0;
        visibility: visible;
        opacity: 1;
    }

    .drop-menu i {
        color: #fff !important;
        font-size: 12px;
        position: absolute;
        top: 45%;
        right: 5px;
    }

    .drop-menu i:hover {
        color: #6B5094 !important;
    }

    @media(min-width: 750px) and (max-width: 1190px) {
        .drop-menu i {
            color: #fff !important;
            font-size: 10px;
            position: absolute;
            top: 38%;
            right: -2px;
        }
        .sub-menu.mega-menu {
            right: auto;
            left: 10px !important;
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            -webkit-flex-wrap: wrap;
            -ms-flex-wrap: wrap;
            flex-wrap: wrap;
            width: 750px !important;
            margin: 0;
            padding: 20px 20px 10px 10px;
            list-style: none;
        }
    }

    .sub-menu.mega-menu {
        right: auto;
        left: 100px;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        width: 1050px;
        height: 500px;
        overflow-y: auto;
        margin: 0;
        padding: 20px 20px 10px 10px;
        list-style: none;
    }

    .sub-menu.mega-menu>li {
        -webkit-box-flex: 1;
        -webkit-flex: 1 0 25%;
        -ms-flex: 1 0 25%;
        flex: 1 0 25%;
        padding: 0 10px 0 30px;
        border-right: 1px solid #E7E7E7;
    }

    .sub-menu.mega-menu>li:last-child {
        border: none;
    }

    .sub-menu.mega-menu>li>a {
        padding: 0;
    }

    .sub-menu.mega-menu>li>a.mega-menu-title {
        font-size: 18px;
        font-weight: 500;
        line-height: 1.2;
        margin-bottom: 16px;
        letter-spacing: 0.01em;
        color: #6B5094;
        text-align: center;
    }

    .li-kaltex {
        font-size: 18px;
        font-weight: 500;
        line-height: 1.2;
        margin-bottom: 16px;
        letter-spacing: 0.01em;
        color: #6B5094;
        text-align: center;
    }

    .li-kaltex:hover {
        color: #F05B29;
    }

    .sub-menu.mega-menu>li:hover>a {
        color: #F05B29;
    }

    .sub-menu.mega-menu>li ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .sub-menu.mega-menu>li ul li {
        line-height: 3.125;
        position: relative;
    }

    .sub-menu.mega-menu>li ul li a {
        padding: 0;
        color: #7E7E7E;
        font-size: 14px;
        text-align: left;
    }

    .sub-menu.mega-menu>li ul li>img {
        position: absolute;
        z-index: 99;
        top: 50%;
        left: 60%;
        visibility: hidden;
        width: 250px;
        height: auto;
        -webkit-transform: translateY(-40%);
        -ms-transform: translateY(-40%);
        transform: translateY(-40%);
        opacity: 0;
        border-radius: 5px;
        -webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    }

    .sub-menu.mega-menu>li ul li:hover>a {
        color: #F05B29;
    }

    .sub-menu.mega-menu>li ul li:hover>img {
        visibility: visible;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
        opacity: 1;
    }
    /* OffCanvas Menu */

    .offcanvas-menu>ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .offcanvas-menu>ul>li {
        position: relative;
    }

    .offcanvas-menu>ul>li>a {
        display: block;
        padding: 8px 24px 8px 0;
        text-transform: uppercase;
        color: #cfcece;
    }

    .offcanvas-menu>ul>li>a:hover {
        color: #dddada;
    }

    .offcanvas-menu>ul>li .menu-expand {
        position: absolute;
        z-index: 2;
        top: 0;
        right: 0;
        width: 24px;
        height: 44px;
        cursor: pointer;
        background-color: transparent;
    }

    .offcanvas-menu>ul>li .menu-expand::before,
    .offcanvas-menu>ul>li .menu-expand::after {
        position: absolute;
        top: calc(50% - 1px);
        left: calc(50% - 7px);
        width: 14px;
        height: 2px;
        content: "";
        -webkit-transition: all 0.5s ease 0s;
        -o-transition: all 0.5s ease 0s;
        transition: all 0.5s ease 0s;
        -webkit-transform: scale(0.75);
        -ms-transform: scale(0.75);
        transform: scale(0.75);
        background-color: #7E7E7E;
    }

    .offcanvas-menu>ul>li .menu-expand::after {
        -webkit-transform: rotate(90deg) scale(0.75);
        -ms-transform: rotate(90deg) scale(0.75);
        transform: rotate(90deg) scale(0.75);
    }

    .offcanvas-menu>ul>li.active>.menu-expand::after {
        -webkit-transform: rotate(0) scale(0.75);
        -ms-transform: rotate(0) scale(0.75);
        transform: rotate(0) scale(0.75);
    }

    .offcanvas-menu>ul>li .sub-menu {
        position: static;
        top: auto;
        display: none;
        visibility: visible;
        width: 100%;
        min-width: auto;
        padding: 0;
        padding-left: 15px;
        -webkit-transition: none;
        -o-transition: none;
        transition: none;
        opacity: 1;
        -webkit-box-shadow: none;
        box-shadow: none;
    }

    .offcanvas-menu>ul>li .sub-menu li {
        line-height: inherit;
        position: relative;
    }

    .offcanvas-menu>ul>li .sub-menu li>a {
        display: block;
        padding: 8px 24px 8px 0;
        color: #9e9d9d;
    }

    .offcanvas-menu>ul>li .sub-menu li>a:hover {
        color: #ffffff;
    }

    .offcanvas-menu>ul>li .sub-menu li.active>.menu-expand::after {
        -webkit-transform: rotate(0) scale(0.75);
        -ms-transform: rotate(0) scale(0.75);
        transform: rotate(0) scale(0.75);
    }
    /* Body Style When OffCanvas Open */

    body.offcanvas-open {
        overflow: hidden;
        padding-right: 17px;
    }

    body.offcanvas-open .sticky-header {
        right: 17px;
    }

    @media only screen and (min-width: 768px) and (max-width: 991px),
    only screen and (max-width: 767px) {
        body.offcanvas-open {
            padding-right: 0;
        }
        body.offcanvas-open .sticky-header {
            right: 0;
        }
    }
    /* OffCanvas Overlay */

    .offcanvas-overlay {
        position: fixed;
        z-index: 999;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        display: none;
        background-color: rgba(0, 0, 0, 0.5);
    }
    /* OffCanvas */

    .offcanvas {
        font-size: 16px;
        font-weight: 400;
        position: fixed;
        z-index: 1000;
        top: 0;
        right: 0;
        left: auto;
        display: block;
        overflow: hidden;
        width: 400px;
        height: 100vh;
        padding: 20px;
        -webkit-transition: all 0.5s ease 0s;
        -o-transition: all 0.5s ease 0s;
        transition: all 0.5s ease 0s;
        -webkit-transform: translateX(100%);
        -ms-transform: translateX(100%);
        transform: translateX(100%);
        background-color: #FFFFFF;
        -webkit-box-shadow: none;
        box-shadow: none;
    }

    .offcanvas.offcanvas-open {
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0);
    }

    .offcanvas .inner {
        position: relative;
        z-index: 9;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
        height: 100%;
    }

    .offcanvas .inner.ps {
        margin-right: -10px;
    }

    .offcanvas .inner .head {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-box-pack: justify;
        -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
        justify-content: space-between;
        width: 100%;
        margin-bottom: 25px;
        padding-bottom: 15px;
        border-bottom: 1px solid #EEEEEE;
    }

    .offcanvas .inner .head .title {
        font-size: 18px;
        line-height: 1;
        color: #333333;
    }

    .offcanvas .inner .head .offcanvas-close {
        position: relative;
        width: 20px;
        height: 20px;
        text-indent: -9999px;
        border: none;
        background-color: transparent;
    }

    .offcanvas .inner .head .offcanvas-close::before,
    .offcanvas .inner .head .offcanvas-close::after {
        position: absolute;
        top: calc(50% - 1px);
        left: 0;
        width: 20px;
        height: 2px;
        content: "";
        -webkit-transition: all 0.5s ease 0s;
        -o-transition: all 0.5s ease 0s;
        transition: all 0.5s ease 0s;
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
        background-color: #333333;
    }

    .offcanvas .inner .head .offcanvas-close::after {
        -webkit-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }

    .offcanvas .inner .head .offcanvas-close:hover::before {
        -webkit-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
        transform: rotate(180deg);
    }

    .offcanvas .inner .head .offcanvas-close:hover::after {
        -webkit-transform: rotate(0);
        -ms-transform: rotate(0);
        transform: rotate(0);
    }

    .offcanvas .inner .body {
        overflow: hidden;
        height: auto;
    }

    .offcanvas .inner .foot {
        width: 100%;
        margin-top: 25px;
    }

    .offcanvas .inner .foot .sub-total {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-box-pack: justify;
        -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
        justify-content: space-between;
        padding-top: 10px;
        padding-bottom: 10px;
        border-top: 1px solid #EEEEEE;
    }

    .offcanvas .inner .foot .sub-total strong {
        font-weight: 600;
        color: #333333;
    }

    .offcanvas .inner .foot .sub-total .amount {
        font-weight: 600;
        color: #F8796C;
    }

    .offcanvas .inner .foot .buttons {
        padding-top: 20px;
        border-top: 1px solid #EEEEEE;
    }

    .offcanvas .inner .foot .buttons .btn {
        display: block;
        padding: 10px 20px;
    }

    .offcanvas .inner .foot .buttons .btn+.btn {
        margin-top: 15px;
    }

    .offcanvas .inner .foot .minicart-message {
        margin-top: 15px;
    }

    .offcanvas.offcanvas-cart .inner .body {
        max-height: calc(100% - (60px + 245px));
    }

    .offcanvas.offcanvas-wishlist .inner .body {
        max-height: calc(100% - (60px + 92px));
    }

    .offcanvas.offcanvas-mobile-menu {
        right: auto;
        left: 0;
        padding: 50px 40px;
        -webkit-transform: translateX(-100%);
        -ms-transform: translateX(-100%);
        transform: translateX(-100%);
    }

    .offcanvas.offcanvas-mobile-menu.offcanvas-open {
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0);
    }

    .offcanvas.offcanvas-search {
        width: 100%;
        padding: 40px;
        -webkit-transition: all 0.5s ease 0.5s;
        -o-transition: all 0.5s ease 0.5s;
        transition: all 0.5s ease 0.5s;
    }

    .offcanvas.offcanvas-search::before {
        position: absolute;
        z-index: 9;
        top: 0;
        right: 0;
        width: 100%;
        height: 100%;
        content: "";
        -webkit-transition: all 0.5s ease 0s;
        -o-transition: all 0.5s ease 0s;
        transition: all 0.5s ease 0s;
        background-color: #FFFFFF;
    }

    .offcanvas.offcanvas-search .inner {
        z-index: 5;
        padding-right: 10%;
    }

    .offcanvas.offcanvas-search .inner .offcanvas-close {
        position: absolute;
        top: 5px;
        right: 0;
        width: 50px;
        height: 50px;
        text-indent: -9999px;
        border: none;
        background-color: transparent;
    }

    .offcanvas.offcanvas-search .inner .offcanvas-close::before,
    .offcanvas.offcanvas-search .inner .offcanvas-close::after {
        position: absolute;
        top: calc(50% - 1px);
        left: 0;
        width: 50px;
        height: 2px;
        content: "";
        -webkit-transition: all 0.5s ease 0s;
        -o-transition: all 0.5s ease 0s;
        transition: all 0.5s ease 0s;
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
        background-color: #333333;
    }

    .offcanvas.offcanvas-search .inner .offcanvas-close::after {
        -webkit-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }

    .offcanvas.offcanvas-search .inner .offcanvas-close:hover::before {
        -webkit-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
        transform: rotate(180deg);
    }

    .offcanvas.offcanvas-search .inner .offcanvas-close:hover::after {
        -webkit-transform: rotate(0);
        -ms-transform: rotate(0);
        transform: rotate(0);
    }

    .offcanvas.offcanvas-search.offcanvas-open {
        -webkit-transition: all 0.5s ease 0s;
        -o-transition: all 0.5s ease 0s;
        transition: all 0.5s ease 0s;
    }

    .offcanvas.offcanvas-search.offcanvas-open::before {
        width: 0;
        -webkit-transition: all 0.5s ease 0.5s;
        -o-transition: all 0.5s ease 0.5s;
        transition: all 0.5s ease 0.5s;
    }

    .offcanvas.offcanvas-header {
        position: fixed;
        right: auto;
        left: 0;
        padding: 50px 40px;
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0);
        -webkit-box-shadow: 0 0 30px rgba(0, 0, 0, 0.05);
        box-shadow: 0 0 30px rgba(0, 0, 0, 0.05);
    }

    @media only screen and (min-width: 992px) and (max-width: 1199px),
    only screen and (min-width: 768px) and (max-width: 991px),
    only screen and (max-width: 767px) {
        .offcanvas.offcanvas-header {
            -webkit-transform: translateX(-100%);
            -ms-transform: translateX(-100%);
            transform: translateX(-100%);
        }
        .offcanvas.offcanvas-header.offcanvas-open {
            -webkit-transform: translateX(0);
            -ms-transform: translateX(0);
            transform: translateX(0);
        }
    }

    .offcanvas.offcanvas-overlay-menu {
        left: 0;
        visibility: hidden;
        width: 100%;
        padding: 40px;
        -webkit-transition: all 0.5s ease 0.5s;
        -o-transition: all 0.5s ease 0.5s;
        transition: all 0.5s ease 0.5s;
        -webkit-transform: scale(0.3);
        -ms-transform: scale(0.3);
        transform: scale(0.3);
        opacity: 0;
        background-color: #F4EDE7;
    }

    .offcanvas.offcanvas-overlay-menu .inner {
        z-index: 5;
        padding-right: 0;
    }

    .offcanvas.offcanvas-overlay-menu .inner .offcanvas-close {
        position: absolute;
        z-index: 9;
        top: 5px;
        right: 0;
        width: 50px;
        height: 50px;
        text-indent: -9999px;
        border: none;
        background-color: transparent;
    }

    .offcanvas.offcanvas-overlay-menu .inner .offcanvas-close::before,
    .offcanvas.offcanvas-overlay-menu .inner .offcanvas-close::after {
        position: absolute;
        top: calc(50% - 1px);
        left: 0;
        width: 50px;
        height: 2px;
        content: "";
        -webkit-transition: all 0.5s ease 0s;
        -o-transition: all 0.5s ease 0s;
        transition: all 0.5s ease 0s;
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
        background-color: #333333;
    }

    .offcanvas.offcanvas-overlay-menu .inner .offcanvas-close::after {
        -webkit-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }

    .offcanvas.offcanvas-overlay-menu .inner .offcanvas-close:hover::before {
        -webkit-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
        transform: rotate(180deg);
    }

    .offcanvas.offcanvas-overlay-menu .inner .offcanvas-close:hover::after {
        -webkit-transform: rotate(0);
        -ms-transform: rotate(0);
        transform: rotate(0);
    }

    .offcanvas.offcanvas-overlay-menu.offcanvas-open {
        visibility: visible;
        -webkit-transition: all 0.5s ease 0s;
        -o-transition: all 0.5s ease 0s;
        transition: all 0.5s ease 0s;
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }

    @media only screen and (min-width: 1200px) and (max-width: 1499px) {
        .offcanvas.offcanvas-header {
            width: 300px;
        }
    }

    @media only screen and (min-width: 768px) and (max-width: 991px) {
        .offcanvas.offcanvas-search .inner .offcanvas-close {
            width: 40px;
            height: 40px;
        }
        .offcanvas.offcanvas-search .inner .offcanvas-close::before,
        .offcanvas.offcanvas-search .inner .offcanvas-close::after {
            width: 40px;
        }
    }

    @media only screen and (max-width: 767px) {
        .offcanvas.offcanvas-search .inner {
            padding-right: 40px;
        }
        .offcanvas.offcanvas-search .inner .offcanvas-close {
            width: 30px;
            height: 30px;
        }
        .offcanvas.offcanvas-search .inner .offcanvas-close::before,
        .offcanvas.offcanvas-search .inner .offcanvas-close::after {
            width: 30px;
        }
    }

    @media only screen and (max-width: 575px) {
        .offcanvas.offcanvas-search {
            padding: 30px;
        }
        .offcanvas.offcanvas-overlay-menu {
            padding: 30px;
        }
    }

    @media only screen and (max-width: 479px) {
        .offcanvas {
            width: 300px;
        }
        .offcanvas.offcanvas-search {
            padding: 20px;
        }
        .offcanvas.offcanvas-overlay-menu {
            padding: 20px;
        }
    }

    .border-tendencias {
        border: 2px #9c9696 solid;
        padding-top: 20px;
    }

    .border-tendencias img {
        border-radius: 0 !important;
    }

    .banner-olextla {
        background-image: url("/images/bodegas-tlax/textura.webp");
    }

    .text-olextla {
        font-size: 33px;
        font-family: helvetica;
        font-weight: bold;
        color: #ffffff;
        text-transform: uppercase;
    }

    .text-bbaner {
        font-size: 33px;
        font-family: helvetica;
        font-weight: bold;
        color: #ffffff;
        text-transform: uppercase;
    }

    .parpadea {
        animation-name: parpadeo;
        animation-duration: 1.8s;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
        -webkit-animation-name: parpadeo;
        -webkit-animation-duration: 1.8s;
        -webkit-animation-timing-function: linear;
        -webkit-animation-iteration-count: infinite;
    }
    .parpadea-memory {
        animation-name: parpadea;
        animation-duration: 4s;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
        -webkit-animation-name: parpadea;
        -webkit-animation-duration: 4.5s;
        -webkit-animation-timing-function: linear;
        -webkit-animation-iteration-count: infinite;
        height: 100%;
    }


    @-moz-keyframes parpadeo {
        0% {
            opacity: 1.0;
        }
        50% {
            opacity: 0.0;
        }
        100% {
            opacity: 1.0;
        }
    }

    @-webkit-keyframes parpadeo {
        0% {
            opacity: 1.0;
        }
        50% {
            opacity: 0.0;
        }
        100% {
            opacity: 1.0;
        }
    }

    @keyframes parpadeo {
        0% {
            opacity: 1.0;
        }
        50% {
            opacity: 0.0;
        }
        100% {
            opacity: 1.0;
        }
    }

    /* parpadeo meory*/

    @-moz-keyframes parpadea {
        0% {
            opacity: 1;
        }

        50%{
            opacity:0.6;
        }

        100% {
            opacity: 1;
        }
    }


    @-webkit-keyframes parpadea {
        0% {
            opacity: 1;
        }

        50%{
            opacity:0.5;
        }

        100% {
            opacity: 1;
        }
    }


    @keyframes parpadea {
        0% {
            opacity: 1;
        }

        50%{
            opacity:0.6;
        }

        100% {
            opacity: 1;
        }
    }


    .num li::marker {
        color: black;
        font-size: 1.1em;
    }

    .number li::marker {
        color: black;
        font-size: 1.3em;
    }

    .single-blog .meta li {
        font-size: 16px;
        font-weight: 400;
        line-height: 1.25;
        margin-bottom: 10px;
    }

    .single-blog .meta li:not(:last-child) {
        margin-right: 25px;
    }

    .single-blog .meta li i {
        margin-right: 8px;
        color: #999999;
    }

    .single-blog .meta li a {
        border-bottom: 1px solid transparent;
    }

    .single-blog .meta li a:hover {
        color: #333333;
        border-color: rgba(51, 51, 51, 0.2);
    }

    .cursiva {
        font-style: italic;
    }

    .negrita {
        font-weight: bold;
        color: #000;
    }
    .linea {
        display: -webkit-box;

    }
    .responsive-video {
        position: relative;
        padding-bottom: 40%;
        padding-top: 60px; overflow: hidden;
    }

    .responsive-video iframe,
    .responsive-video object,
    .responsive-video embed {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
        .wave{
    position: absolute;
    bottom: 0;
    width: 100%;
}
.fondos{
        font-size: 1rem;
        background-color: #bcb1d5;
        padding-top: 5px;
        padding-bottom: 5px;
        padding-left: 10px;
        font-weight: 800;

}
.ol-styles li::marker {
    color: #8487c1;
    font-weight: bold;
    font-size: 20px;
}
.sub-titulo {
    font-size: 25px;
    text-align: center;
    font-weight: bold;
    padding-bottom: 7px;
}

.degradado-tabla {
    background: rgb(106,82,162);
    background: linear-gradient(90deg, rgba(106,82,162,1) 15%, rgba(241,90,41,1) 85%);
    color: #ffff;
}

.boton-black {
    color: #fff;
    background: black;
    border: 2px black solid;
    padding: 15px;
    border-radius: 30px;
    -webkit-transition: all 500ms;
    -o-transition: all 500ms;
    transition: all 500ms;
}

.boton-black:hover {
    color: black;
    background-color: #fff;
    text-decoration: none;
}
.parpadea-escolar {
    animation-name: parpadeo;
    animation-duration: 1.5s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    -webkit-animation-name: parpadeo;
    -webkit-animation-duration: 1.5s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
}
.text-escolar {
    font-size: 33px;
    font-family: helvetica;
    font-weight: bold;
    color: #000000;
    text-transform: uppercase;
}

/* ------ Start Botones Flotantes Nuevos -------*/
.btn-wsp {
    position: fixed;
    width: 55px;
    height: 55px;
    line-height: 55px;
    bottom: 2vh;
    right: 1vw;
    background: #0df053;
    color: #fff;
    border-radius: 50px;
    text-align: center;
    font-size: 30px;
    z-index: 100;
    margin-bottom: 80px;
}

.woot-widget-bubble.woot-elements--right {
    right: 1vw !important;
    bottom: 2vh !important;
}

.btn-wsp:hover {
    text-decoration: none;
    color: #0df053;
    background: #fff;
}

.btn-you {
    position: fixed;
    width: 55px;
    height: 55px;
    line-height: 55px;
    bottom: 2vh;
    right: 1vw;
    background: #ff0000;
    color: #fff;
    border-radius: 50px;
    text-align: center;
    font-size: 30px;
    z-index: 100;
    margin-bottom: 150px;
}

.btn-you:hover {
    text-decoration: none;
    color: #ff0000;
    background: #fff;
}

.btn-phone {
    position: fixed;
    width: 55px;
    height: 55px;
    line-height: 55px;
    bottom: 2vh;
    right: 1vw;
    background: #6a52a2;
    color: #fff;
    border-radius: 50px;
    text-align: center;
    font-size: 30px;
    z-index: 100;
    margin-bottom: 220px;
}

.btn-phone:hover {
    text-decoration: none;
    color: #6a52a2;
    background: #fff;
}
/* ------ End Botones Flotantes Nuevos -------*/

.background-prev{
    margin-right: 230px;
    background-color: black;
    border-radius: 50px;
    padding: 26px;

}
.background-next{
    margin-left: 230px;
    background-color: black;
    border-radius: 50px;
    padding: 26px;

}

/* Estilo Menu Colores Start */
/* Site Menu Section Colores */

.site-menu-section {
    border-top: 1px dashed #DEDEDE;
}
/* Site Main Menu Colores */

.site-main-menu {
    font-weight: 400;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

.site-main-menu>ul {
    font-size: 13px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-bottom: 0;
    padding-left: 0;
    list-style: none;
}

.site-main-menu>ul>li {
    letter-spacing: 1.5px;
}

.site-main-menu>ul>li>a {
    font-size: 16px;
    line-height: 1.5;
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    padding: 20px;
    color: #7E7E7E;
}

@media(min-width: 750px) and (max-width: 1190px) {
    .site-main-menu>ul>li>a {
        font-size: 11px;
        padding: 8px;
    }
}

.site-main-menu>ul>li>a>.menu-text {
    position: relative;
}

.site-main-menu>ul>li>a>.menu-text::after {
    position: absolute;
    bottom: -3px;
    left: 0;
    width: 100%;
    height: 1px;
    content: "";
    -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.8, 0, 0.2, 1);
    transition: -webkit-transform 0.5s cubic-bezier(0.8, 0, 0.2, 1);
    -o-transition: transform 0.5s cubic-bezier(0.8, 0, 0.2, 1);
    transition: transform 0.5s cubic-bezier(0.8, 0, 0.2, 1);
    transition: transform 0.5s cubic-bezier(0.8, 0, 0.2, 1), -webkit-transform 0.5s cubic-bezier(0.8, 0, 0.2, 1);
    -webkit-transform: scale3d(0, 1, 1);
    transform: scale3d(0, 1, 1);
    -webkit-transform-origin: 100% 50%;
    -ms-transform-origin: 100% 50%;
    transform-origin: 100% 50%;
    background-color: #333333;
}

.site-main-menu>ul>li.align-left>.sub-menus {
    right: 0;
    left: auto;
}

.site-main-menu>ul>li:hover>a {
    color: #6B5094;
}

.site-main-menu>ul>li:hover>a>.menu-text::after {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
    -webkit-transform-origin: 0 50%;
    -ms-transform-origin: 0 50%;
    transform-origin: 0 50%;
}

.site-main-menu>ul>li:hover>.sub-menus {
    z-index: 99;
    top: 100%;
    visibility: visible;
    opacity: 1;
}

.site-main-menu.menu-height-100>ul>li>a {
    padding-top: 38px;
    padding-bottom: 38px;
}

.site-main-menu.menu-height-60>ul>li>a {
    padding-top: 18px;
    padding-bottom: 18px;
}

/* Sub Menu Colores*/
.sub-menus {
    position: absolute;
    z-index: 9;
    z-index: 9;
    top: 150%;
    visibility: hidden;
    min-width: 280px;
    margin: 0;
    padding: 20px 0;
    list-style: none;
    -webkit-transition: all 0.5s ease 0s;
    -o-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
    letter-spacing: 0;
    opacity: 0;
    background-color: #FFFFFF;
    -webkit-box-shadow: -1px 10px 80px -15px rgba(0, 0, 0, 0.3);
    box-shadow: -1px 10px 80px -15px rgba(0, 0, 0, 0.3);
}

.sub-menus li {
    line-height: 3.125;
    position: relative;
}

.sub-menus li a {
    position: relative;
    display: block;
    padding: 0 30px;
    color: #7E7E7E;
}

.sub-menus li a:not(.mega-menu-title) .menu-text {
    position: relative;
}

.sub-menus li a:not(.mega-menu-title) .menu-text::after {
    position: absolute;
    top: calc(50% + 10px);
    left: 0;
    width: 100%;
    height: 1px;
    content: "";
    -webkit-transition: all 0.5s ease 0s;
    -o-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
    opacity: 0;
    background-color: #333333;
}

.sub-menus li a:hover .menu-text::after {
    opacity: 0.2;
}

.sub-menus li.has-children.align-left>.sub-menus {
    right: 100%;
    left: auto;
}

.sub-menus li>.sub-menus {
    top: 100%;
    left: 100%;
}

.sub-menus li:hover>a {
    color: #6B5094;
}

.sub-menus li:hover>.sub-menus {
    top: 0;
    visibility: visible;
    opacity: 1;
}

.drop-menu i {
    color: #fff !important;
    font-size: 12px;
    position: absolute;
    top: 45%;
    right: 5px;
}

.drop-menu i:hover {
    color: #6B5094 !important;
}

@media(min-width: 750px) and (max-width: 1190px) {
    .drop-menu i {
        color: #fff !important;
        font-size: 10px;
        position: absolute;
        top: 38%;
        right: -2px;
    }
    .sub-menus.mega-menus {
        right: auto;
        left: 10px !important;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        width: 750px !important;
        margin: 0;
        padding: 20px 20px 10px 10px;
        list-style: none;
    }
}
/* Estilos para submenús de venta de telas */
#venta-de-telas{
    height: 350px;
    left: 60%;
}
/* End estilos para submenús de venta de telas */
.sub-menus.mega-menus {
    right: auto;
    left: 55%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    width: 50px;
    height: 500px;
    overflow-y: auto;
    margin: 0;
    padding: 20px 20px 10px 10px;
    list-style: none;
}

.sub-menus.mega-menus>li {
    -webkit-box-flex: 1;
    -webkit-flex: 1 0 25%;
    -ms-flex: 1 0 25%;
    flex: 1 0 25%;
    padding: 0 10px 0 30px;
    border-right: 1px solid #E7E7E7;
}

.sub-menus.mega-menus>li:last-child {
    border: none;
}

.sub-menus.mega-menus>li>a {
    padding: 0;
}

.sub-menus.mega-menus.mega-menus>li>a.mega-menu-title {
    font-size: 18px;
    font-weight: 500;
    line-height: 1.2;
    margin-bottom: 16px;
    letter-spacing: 0.01em;
    color: #6B5094;
    text-align: center;
}

.sub-menus.mega-menus>li:hover>a {
    color: #F05B29;
}

.sub-menus.mega-menus>li ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.sub-menus.mega-menus>li ul li {
    line-height: 3.125;
    position: relative;
}

.sub-menus.mega-menus>li ul li a {
    padding: 0;
    color: #7E7E7E;
    font-size: 14px;
    text-align: left;
}

.sub-menus.mega-menus>li ul li>img {
    position: absolute;
    z-index: 99;
    top: 50%;
    left: 60%;
    visibility: hidden;
    width: 250px;
    height: auto;
    -webkit-transform: translateY(-40%);
    -ms-transform: translateY(-40%);
    transform: translateY(-40%);
    opacity: 0;
    border-radius: 5px;
    -webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.sub-menus.mega-menus>li ul li:hover>a {
    color: #F05B29;
}

.sub-menus.mega-menus>li ul li:hover>img {
    visibility: visible;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    opacity: 1;
}
/* Media queries para sub menús */
@media screen and (max-width: 1190px) {
    .sub-menus.mega-menus{
        width: 200px !important;
        left: 55% !important;
    }
}
/* Estilo Menu Colores End */



/* Estilo Menu Hilos Start */
/* Site Menu Section Hilos */

.site-menu-section {
    border-top: 1px dashed #DEDEDE;
}
/* Site Main Menu Hilos */

.site-main-menu {
    font-weight: 400;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
}

.site-main-menu>ul {
    font-size: 13px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding-left: 0;
    list-style: none;
}

.site-main-menu>ul>li {
    letter-spacing: 1.5px;
}

.site-main-menu>ul>li>a {
    font-size: 16px;
    line-height: 1.5;
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    color: #7E7E7E;
}

@media(min-width: 750px) and (max-width: 1190px) {
    .site-main-menu>ul>li>a {
        font-size: 11px;
    }
}

.site-main-menu>ul>li>a>.menu-text {
    position: relative;
}

.site-main-menu>ul>li>a>.menu-text::after {
    position: absolute;
    bottom: -3px;
    left: 0;
    width: 100%;
    height: 1px;
    content: "";
    -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.8, 0, 0.2, 1);
    transition: -webkit-transform 0.5s cubic-bezier(0.8, 0, 0.2, 1);
    -o-transition: transform 0.5s cubic-bezier(0.8, 0, 0.2, 1);
    transition: transform 0.5s cubic-bezier(0.8, 0, 0.2, 1);
    transition: transform 0.5s cubic-bezier(0.8, 0, 0.2, 1), -webkit-transform 0.5s cubic-bezier(0.8, 0, 0.2, 1);
    -webkit-transform: scale3d(0, 1, 1);
    transform: scale3d(0, 1, 1);
    -webkit-transform-origin: 100% 50%;
    -ms-transform-origin: 100% 50%;
    transform-origin: 100% 50%;
    background-color: #333333;
}

.site-main-menu>ul>li.align-left>.sub-menu-hilo  {
    right: 0;
    left: auto;
}

.site-main-menu>ul>li:hover>a {
    color: #6B5094;
}

.site-main-menu>ul>li:hover>a>.menu-text::after {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
    -webkit-transform-origin: 0 50%;
    -ms-transform-origin: 0 50%;
    transform-origin: 0 50%;

}

.site-main-menu>ul>li:hover>.sub-menu-hilo  {
    z-index: 99;
    top: 100%;
    visibility: visible;
    opacity: 1;
}
#tipos-de-tela{
    left: 0%;
}
#venta-telas {
    height: 350px;
    left: 55%;
}
#tabla-kaltex {
    height: 160px;
    left: 38%;
}
#catalogos {
    height: 110px;
    left: 30%;
}

@media (min-width: 768px) and (max-width: 1080px) {
    #tipos-de-tela {
        position: absolute;
        left: 100%;
        transform: translateX(-20%);
    }

    #tabla-kaltex {
        position: absolute;
        left: 100%;
        transform: translateX(-60%);
    }
}


/* Sub Menu Hilos*/
.sub-menu-hilo {
    position: absolute;
    z-index: 9;
    z-index: 9;
    top: 150%;
    visibility: hidden;
    min-width: 280px;
    margin: 0;
    padding: 20px 0;
    list-style: none;
    -webkit-transition: all 0.5s ease 0s;
    -o-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
    letter-spacing: 0;
    opacity: 0;
    background-color: #FFFFFF;
    -webkit-box-shadow: -1px 10px 80px -15px rgba(0, 0, 0, 0.3);
    box-shadow: -1px 10px 80px -15px rgba(0, 0, 0, 0.3);
}

.sub-menu-hilo li {
    line-height: 3.125;
    position: relative;
}

.sub-menu-hilo li a {
    position: relative;
    display: block;
    padding: 0 30px;
    color: #7E7E7E;
}

.sub-menu-hilo li a:not(.mega-menu-title) .menu-text {
    position: relative;
}

.sub-menu-hilo li a:not(.mega-menu-title) .menu-text::after {
    position: absolute;
    top: calc(50% + 10px);
    left: 0;
    width: 100%;
    height: 1px;
    content: "";
    -webkit-transition: all 0.5s ease 0s;
    -o-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
    opacity: 0;
    background-color: #333333;
}

.sub-menu-hilo li a:hover .menu-text::after {
    opacity: 0.2;
}

.sub-menu-hilo li.has-children.align-left>.sub-menu-hilo {
    right: 100%;
    left: auto;
}

.sub-menu-hilo li>.sub-menu-hilo {
    top: 100%;
    left: 100%;
}

.sub-menu-hilo li:hover>a {
    color: #6B5094;
}

.sub-menu-hilo li:hover>.sub-menu-hilo {
    top: 0;
    visibility: visible;
    opacity: 1;
}

.drop-menu i {
    color: #fff !important;
    font-size: 12px;
    position: absolute;
    top: 45%;
    right: 5px;
}

.drop-menu i:hover {
    color: #6B5094 !important;
}

@media(min-width: 750px) and (max-width: 1190px) {
    .drop-menu i {
        color: #fff !important;
        font-size: 10px;
        position: absolute;
        top: 38%;
        right: -2px;
    }
    .sub-menu-hilo.mega-menus {
        right: auto;
        left: 10px !important;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        width: 750px !important;
        margin: 0;
        padding: 20px 20px 10px 10px;
        list-style: none;
    }
}

.sub-menu-hilo.mega-menus {
    right: auto;
    left: 700px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    width: 40px;
    margin: 0;
    padding: 20px 20px 10px 10px;
    list-style: none;
}

.sub-menu-hilo.mega-menus>li {
    -webkit-box-flex: 1;
    -webkit-flex: 1 0 25%;
    -ms-flex: 1 0 25%;
    flex: 1 0 25%;
    padding: 0 10px 0 30px;
    border-right: 1px solid #E7E7E7;
}

.sub-menu-hilo.mega-menus>li:last-child {
    border: none;
}

.sub-menu-hilo.mega-menus>li>a {
    padding: 0;
}

.sub-menu-hilo.mega-menus.mega-menus>li>a.mega-menu-title {
    font-size: 18px;
    font-weight: 500;
    line-height: 1.2;
    margin-bottom: 16px;
    letter-spacing: 0.01em;
    color: #6B5094;
    text-align: center;
}

.sub-menu-hilo.mega-menus>li:hover>a {
    color: #F05B29;
}

.sub-menu-hilo.mega-menus>li ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.sub-menu-hilo.mega-menus>li ul li {
    line-height: 3.125;
    position: relative;
}

.sub-menu-hilo.mega-menus>li ul li a {
    padding: 0;
    color: #7E7E7E;
    font-size: 14px;
    text-align: left;
}

.sub-menu-hilo.mega-menus>li ul li>img {
    position: absolute;
    z-index: 99;
    top: 50%;
    left: 60%;
    visibility: hidden;
    width: 250px;
    height: auto;
    -webkit-transform: translateY(-40%);
    -ms-transform: translateY(-40%);
    transform: translateY(-40%);
    opacity: 0;
    border-radius: 5px;
    -webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.sub-menu-hilo.mega-menus>li ul li:hover>a {
    color: #F05B29;
}

.sub-menu-hilo.mega-menus>li ul li:hover>img {
    visibility: visible;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    opacity: 1;
}
/* Estilo Menu Hilos End */


.menu-movil {
    background: none;
    border: 0;
    color: white;
    font-size: 20px;
    contain: none;
    content: "";
    display: block;
    clear: both;
}

/* Dropdown Colores */
.dropdown-color {
    position: relative;
    display: inline-block;
}
/* Dropdown Content (Hidden by Default) */

.dropdown-color-content {
    display: none;
    position: absolute;
    background-color: #f6f6f6;
    min-width: 230px;
    height: 50px;
    border: 1px solid #ddd;
    z-index: 1;
    overflow-y: scroll;
    scroll-behavior: smooth;
    border-radius: 5px;
}
/* Links inside the dropdown */

.dropdown-color-content a {
    color: black;
    padding: 5px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-color-content .categoria a {
    color: black;
    font-weight: bold;
    padding: 5px 16px;
    text-decoration: none;
    display: block;
}
/* Change color of dropdown links on hover */

.dropdown-color-content a:hover {
    background-color: #f1f1f1
}
/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */

.show {
    display: block;
}

.dropdown-color p {
    font-size: 1rem;
    background-color: #bcb1d5;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 10px;
    font-weight: 800;
}
.border-prueba{
    border: 2px solid red;
}
.border-prueba2{
    border: 2px solid green;
}

.collapse-catalogo{
    height: 300px;
    overflow-y: scroll;
    width: 160px;
}
.hrefs-de-filtro{
    color: #7b8391;
    text-decoration: none;
}
.hrefs-de-filtro:hover{
    color: #000;
    text-decoration: none;
}

/* Estilos para el nuevo home */
.grid-slide{
    display: grid;
    grid-template-columns: 24% 52% 24%;
    gap: 16px;
    justify-content: center;
    align-items: stretch;
    max-width: 1820px;
    width: 100%;
    padding: 0 10px;
    box-sizing: border-box;
    margin: 0 auto;
}
.grid-slide .column-slide{
    margin: 0;

}
.grid-slide .column-slide .slide-secundario{
    margin: 5% auto;
    
}
.grid-slide .central-image,
.grid-slide #carouselExampleIndicators,
.grid-slide #carouselExampleIndicators .carousel-inner,
.grid-slide #carouselExampleIndicators .carousel-item,
.grid-slide #carouselExampleIndicators .slide-principal,
.grid-slide #carouselExampleIndicators picture {
    width: 100%;
    height: 100%;
}

.grid-slide #carouselExampleIndicators .carousel-inner {
    aspect-ratio: 950 / 730;
}

.slide-principal img {
    display: block;
    margin: auto;
    border-radius: 25px;
    height: 100% !important;
    width: 100%;
    object-fit: cover;
}
.column-slide .slide-secundario img{
    height: auto;
    margin: 0 auto;
    border-radius: 25px;
    aspect-ratio: 6/5;
}
@media screen and (max-width: 850px) {
    .grid-slide {
        display: none;
    }
}
@media screen and (min-width: 851px) and (max-width: 1200px) {
    .grid-slide {
        gap: 4px;
        padding: 0 8px;
    }

    .new-cards-row {
        gap: 10px;
        padding: 0 8px;
    }
}

@media screen and (min-width: 1201px) and (max-width: 1920px) {
    .grid-slide {
        gap: 6px;
        padding: 0 8px;
    }

    .new-cards-row {
        gap: 10px;
        padding: 0 8px;
    }
}
.slides-movil{
    display: block;
}
.grid-movil-secundarios{
    display: block;
    gap: 10px;
}
.grid-movil-secundarios .img-grid-movil img{
    margin: 5px auto;
    border-radius: 15px;
}
@media screen and (min-width: 851px) {
    .slides-movil{
        display: none;
    }
}
/* Estilos nuevos para home */
.new-cards-row {
    padding: 0 10px; /* Ajusta el espaciado entre las cards */
    display: grid;
    grid-template-columns: 1fr 1fr 1fr; /* Ajusta el número de cards por fila */
    gap: 12px;
    max-width: 1920px;
    margin: 0 auto;
}

.new-cards-row .widget-banner {
    width: 100%;
    height: auto; /* Asegura que las imágenes mantengan su proporción */
}
.home-benefits-strip {
    max-width: 1920px;
    margin: 0 auto;
    padding: 0 10px;
}

.home-benefits-strip img {
    border-radius: 10px;
}
.new-cards {
    margin: 0px 5px 10px; 
}
.new-cards img{
    border-radius: 15px;
    width: 100%;
}
.new-cards-mobile {
    display: none;
}
@media (max-width: 850px) {
    .new-cards-row {
        display: none; /* Oculta las cards en dispositivos móviles */
    }
    .new-cards-mobile {
        display: block;
        width: 96%;
        margin: auto;
    }
}
.mas-vendidos .tela-mas-vendido {
    border-radius: 15px;
    padding: auto 10px;
    margin: auto 10px;
}
.mas-vendidos .tela-mas-vendido img{
    border-radius: 15px;
}
.banner-round img{
    border-radius: 20px;
}
.colores-tela .color-tela{
    border-radius: 20px;
    padding: auto 10px;
    margin: auto 10px;
    background-color: #F0F0F0;
}
.colores-tela .color-tela img{
    border-radius: 15px 15px 0 0;
}
.colores-tela .color-tela .info{
    height: 180px;
    overflow-y: scroll;
}
.tipos-tela .color-tela{
    border-radius: 20px;
    padding: auto 10px;
    margin: auto 10px;
    background-color: #F0F0F0;
}
.tipos-tela .color-tela img{
    border-radius: 15px 15px 0 0;
}
.tipos-tela .color-tela .info{
    height: 180px;
    overflow-y: scroll;
}
.info::-webkit-scrollbar {
    width: 10px;
  }
.info::-webkit-scrollbar-track {
    background: transparent;
  }
.info::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 15%;
    height: 0.5px !important;
  }
.info::-webkit-scrollbar-thumb:hover {
    background: #555;
  }
.container-youtube iframe{
    border-radius: 25px;
}
.picture-rad img{
    border-radius: 15px;
}


/* tsg poliester */
.tsg-poliester .producto-poliester {
    border-radius: 15px;
    padding: auto 10px;
    margin: auto 10px;
    background-color: #eaeaea;
}
.tsg-poliester .producto-movil{
    border-radius: 15px;
    padding: auto 10px;
    margin: auto 10px;
    background-color: #00FF0000;
}
.tsg-poliester .producto-poliester img{
    border-radius: 15px 15px 0 0;
}
.tsg-poliester .producto-poliester .info {
    margin: 10px;
    height: 120px;
    overflow-y: scroll;
}
.tsg-poliester-vendido{
    background-color: #eaeaea;
    padding: 30px;
    border-radius: 15px;
}
.tsg-poliester-vendido .producto-poliester {
    border-radius: 15px;
    padding: auto 10px;
    margin: auto 10px;
    background-color: #fff;

}
.tsg-poliester-vendido .producto-poliester img{
    border-radius: 15px 15px 0 0;
}
.tsg-poliester-vendido .producto-poliester .info {
    margin: 10px;
    height: 200px;
    overflow-y: scroll;
}
.que-poliester{
    padding: 15px;
    border-radius: 15px;
}
@media screen and (min-width: 851px) {
    .que-poliester{
        display: none;
    }
}
.que-poliester .producto-poliester {
    border-radius: 15px;
    padding: auto 10px;
    margin: auto 10px;
    background-color: #fff;
}
.que-poliester .producto-poliester img{
    border-radius: 15px 15px 0 0;
}
.que-poliester .producto-poliester .info {
    height: 150px;
    overflow-y: scroll;
}

.fondo-gradient {
    background: rgb(255,255,255);
    background: linear-gradient(180deg, rgba(255,255,255,1) 25%, rgba(234,234,234,1) 70%);
}

.producto-round {
    border-radius: 15px;
    background-color: #EAEAEA;
}

.producto-round-claro {
    border-radius: 15px;
    background-color: #f8f3ef;
    -webkit-box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.producto-round-claro-1 {
    border-radius: 0 0 15px 15px;
    background-color: #f8f3ef;
    border-top: 2px solid #000;
}

.evita-pr-contendedor {
    background-color: #6A52A2;
    border-radius: 17px;
}
.producto-round-claro-gris {
    border-radius: 15px;
    background-color: #f7f7f7;
}
.rollo{
    background-image: url('/telas-assets/en/canvas-fabric/banner-arletex-canvas-fabric.png');
    height: 100% !important;
    width: 100% !important;
  }
  /*Se crean efectos Hover para los objetos de Guadalajara*/
.contenedor{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.contenedor figure{
    position: relative;
    overflow: hidden;
    border-radius: 18px;
}
.contenedor figure img{
    width: 100%;
    height: 100%;
    transition: all 500ms ease-out;
}
.contenedor figure .capa{
    position: absolute;
    top: 0px;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    transition: all 500ms ease-out;
    opacity: 0;
    visibility: hidden;
    display: flex;
    align-items: center;
}
.contenedor figure:hover >.capa{
    opacity: 1;
    visibility: visible;
    margin-top: 0px;
    margin-bottom: 15px;
}
.contenedor figure .capa button{
    color: #fff;
    font-weight: 300;
    font-size: 15px;
    transition: all 500ms ease-out;
    margin-bottom: 50px;
    margin-top: 80px;
    margin: 15px;
}
/*Se crean efectos para las FAQ de la nueva entrada del Blog: Diferencias entre algodon y poliester*/
.faq-section {
    background: #fdfdfd;
    min-height: 100vh;
    padding: 10vh 0 0;
}
.faq-title h2 {
  position: relative;
  margin-bottom: 45px;
  display: inline-block;
  font-weight: 600;
  line-height: 1;
}
.faq-title h2::before {
    content: "";
    position: absolute;
    left: 50%;
    width: 60px;
    height: 2px;
    background: #E91E63;
    bottom: -25px;
    margin-left: -30px;
}
.faq-title p {
  padding: 0 190px;
  margin-bottom: 10px;
}

.faq {
  background: #FFFFFF;
  box-shadow: 0 2px 48px 0 rgba(0, 0, 0, 0.06);
  border-radius: 4px;
}

.faq .card {
  border: none;
  background: none;
  border-bottom: 1px dashed #CEE1F8;
}

.faq .card .card-header {
  padding: 0px;
  border: none;
  background: none;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}

.faq .card .card-header:hover {
    background: rgba(18, 127, 199, 0.692);
    padding-left: 10px;
}
.faq .card .card-header .faq-title {
  width: 100%;
  text-align: left;
  padding: 0px;
  padding-left: 30px;
  padding-right: 30px;
  font-weight: 400;
  font-size: 15px;
  letter-spacing: 1px;
  color: #3B566E;
  text-decoration: none !important;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  cursor: pointer;
  padding-top: 20px;
  padding-bottom: 20px;
}

.faq .card .card-header .faq-title .badge {
  display: inline-block;
  width: 20px;
  height: 20px;
  line-height: 14px;
  -webkit-border-radius: 100px;
  -moz-border-radius: 100px;
  border-radius: 100px;
  text-align: center;
  background: #E91E63;
  color: #fff;
  font-size: 12px;
  margin-right: 20px;
}

.faq .card .card-body {
  padding: 30px;
  padding-left: 35px;
  padding-bottom: 16px;
  font-weight: 400;
  font-size: 16px;
  color: #6F8BA4;
  line-height: 28px;
  letter-spacing: 1px;
  border-top: 1px solid #F3F8FF;
}

.faq .card .card-body p {
  margin-bottom: 14px;
}

@media (max-width: 991px) {
  .faq {
    margin-bottom: 30px;
  }
  .faq .card .card-header .faq-title {
    line-height: 26px;
    margin-top: 10px;
  }
}
/*Se crean nuevas clases para efecto Hover de Mantelería Perfecta; Junio 18, 2024*/
.fondo-gradient-gris:hover{
    background: rgba(1, 31, 75, 0.692);
    padding-left: 10px;
    p, h3{
        color:#FFFFFF;
    }
    border-radius: 20px;
}
.fondo-gradient-gris {
    background: rgb(255,255,255);
    background: linear-gradient(180deg, rgba(255,255,255,1) 25%, rgba(234,234,234,1) 70%);
}
.info-fixed{
    height: 210px;
    margin: auto 10px;
}

.info-fixed-1{
    height: 45px;
    margin: auto 10px;
}

/* Se agrega clase para dar espaciado uniforme al contenedor del titulo, 19/06/2024 */
@media screen and (max-width: 1067px) {
    .espacio-titulo-carousel {
      min-height: 70px;
    }
  }

  /* Se agrega un borde inferior a un elemento*/
.border-bot-6 {
    border-bottom: 6px solid #6a52a2;
}

.imagen-con-zoom {
    overflow: hidden;
    transition: transform 0.3s;
}

.imagen-con-zoom img {
    width: 100%;
    height: auto;
    display: block;
}

.imagen-con-zoom:hover img {
    transform: scale(1.05);
    border-radius: 15px !important;
}

.imagen-con-zoom:hover {
    border-radius: 15px !important;
}

/* Agrega un borde de 15px al todo el contorno del elemento*/
.border-15 {
    border-radius: 15px !important;
}

/* Agregar borde de 15 px al contenedor/elemento superior top */
.border-15-top {
    border-top-right-radius: 15px;
    border-top-left-radius: 15px;
}

.border-15-bot {
    border-bottom-right-radius: 15px;
    border-bottom-left-radius: 15px;
}

/* Agrega un hover en tono azul a un elemento */

.no-fondo-hover-dark {
    background: none;
    border: 5px solid transparent !important;
    color: #000000;
    contain: none;
    content: "";
    display: block;
    clear: both;
    transition: all 0.3s ease 0s;
    border-radius: 20px;
}
.no-fondo-hover-dark:hover{
    background: #9c999a;
    p{
        color:#FFFFFF;
    }
    h3 {
        color:#f8f9fa;
    }
    border-radius: 20px;
    border-color: #ffc107 !important;
    border-width: 5px;
    border-style: solid;
}

.blanco-texto {
    color: #FFFFFF !important;
}

/* Estilos personalizados para el badge como botón - inicia */
.badge.button-style {
    cursor: pointer;
    padding: 10px 20px; /* Ajusta el padding según el tamaño deseado */
    font-size: 14px; /* Tamaño de fuente */
    border: none; /* Sin borde */
    border-radius: 20px; /* Bordes redondeados */
    transition: all 0.3s ease; /* Transición suave */
}

.badge.button-style:hover {
    opacity: 0.8; /* Opacidad al pasar el ratón */
}
/* Estilos personalizados para el badge como botón - termina */

/* Estilos para animacion de texto que aparece - inicia */
.text1-content {
    display:inline-block;
    overflow:hidden;
    white-space:nowrap;
  }
  
  .text1-content:first-of-type { 
    animation: showup 11s infinite;
  }
  
  .text1-content:last-of-type {
    width:0px;
    animation: reveal 11s infinite;
  }
  
  .text1-content:last-of-type span {
    margin-left:-695px;
    animation: slidein 11s infinite;
  }

@keyframes showup {
    0% {opacity:0;}
    20% {opacity:1;}
    80% {opacity:1;}
    100% {opacity:0;}
}

@keyframes slidein {
    0% { margin-left:-800px; }
    20% { margin-left:-800px; }
    35% { margin-left:0px; }
    100% { margin-left:0px; }
}

@keyframes reveal {
    0% {opacity:0;width:0px;}
    20% {opacity:1;width:0px;}
    30% {width:695px;}
    80% {opacity:1;}
    100% {opacity:0;width:695px;}
}

/* Estilos texto que aparece y desaparece */
.text-1 {
    font-weight: bold;
    font-size: 1.8em;
}

.text-2 {
    font-size: 1.8em;
}

@media (max-width: 768px) {
    .text-2, .text-1 {
        font-size: .9em;
    }

    .text1-content:last-of-type span {
        margin-left: -300px;
    }

    @keyframes reveal {
        0% { opacity: 0; width: 0px; }
        20% { opacity: 1; width: 0px; }
        30% { width: 300px; }
        80% { opacity: 1; }
        100% { opacity: 0; width: 300px; }
    }

    @keyframes slidein {
        0% { margin-left: -400px; }
        20% { margin-left: -400px; }
        35% { margin-left: 0px; }
        100% { margin-left: 0px; }
    }
    
}

@media (max-width: 480px) {
    .text-1 {
        font-size: 1.3em;
    }
    .text-2{
        font-size: 1em;
    }

    .text1-content:last-of-type span {
        margin-left: -380px;
    }

    @keyframes reveal {
        0% { opacity: 0; width: 0px; }
        20% { opacity: 1; width: 0px; }
        30% { width: 390px; }
        80% { opacity: 1; }
        100% { opacity: 0; width: 390px; }
    }

    @keyframes slidein {
        0% { margin-left: -400px; }
        20% { margin-left: -400px; }
        35% { margin-left: 0px; }
        100% { margin-left: 0px; }
    }
}
   
/* Estilos para animacion de texto que aparece - termina */

/* Inicia - css carousel infinito formas de pago */
@keyframes scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(calc(-250px * 6));
    }
}
.slider {
    background: white;
    /*box-shadow: 0 10px 20px -5px rgba(0, 0, 0, .125);*/
    height: 100px;
    margin: auto;
    overflow: hidden;
    position: relative;
    width: 100%;
}
.slider::before, .slider::after {
    background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
    content: "";
    height: 100px;
    position: absolute;
    width: 200px;
    z-index: 2;
}
.slider::after {
    right: 0;
    top: 0;
    transform: rotateZ(180deg);
}
.slider::before {
    left: 0;
    top: 0;
}
.slider .slide-track {
    animation: scroll 40s linear infinite;
    display: flex;
    width: calc(250px * 12);
}
.slider .slide {
    height: 100px;
    width: 250px;
    flex-shrink: 0;
}
/* Termina - css carousel infinito formas de pago */

/* Estilos card - inicia */
.card-efecto-1:hover{
    background-color: rgba(245, 245, 245, 1); /* Un tono muy claro de gris */
    p{
        color:#000000;
    }
    h3 {
        color: #000000;
    }
    border-radius: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 6px 20px rgba(0, 0, 0, 0.1);
}
/* Estilos card termina*/

.gris-fondo {
    background-color: #EAEAEA; /*rgba(234,234,234,1) 70%*/
}

.violeta-fondo {
    background-color: #E6E6FA; /*rgba(234,234,234,1) 70%*/
}

.violeta-fondo-rgb {
    background-color: rgb(242, 235, 243);
}

.rounded-circle-container img {
    width: 100%;
    height: auto;
}

.blanco-contenedor {
    background: #FFFFFF;
}

.texto-gris {
    color: #EAEAEA;
}

.texto-rojo {
    color: #ff0000;
}

.banner-container {
    position: relative;
    text-align: center;
    color: white;
}
.banner-container img {
    width: 100%;
}
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap');
.animated-text {
    width: 40%;
    position: absolute;
    top: 35%;
    left: 70%;
    transform: translate(-50%, -50%);
    font-size: 1.7em;
    animation: colorChange 1s infinite alternate;
    font-family: Poppins, sans-serif; /* Aplicar Impact solo a este div */
    font-weight: bolder;
    span {
        font-weight: bolder;
        font-family: 'Monaco', monospace;
    }
    /*border: green solid 3px;*/
}
@keyframes colorChange {
    from {
        color: black;
    }
    to {
        color: red;
    }
}
.banner-button {
    position: absolute;
    top: 70%;
    left: 70%;
    transform: translate(-50%, -50%);
}

.btn-fiu {
    background: #ffc107;
    font-size: 1.3em;
    font-weight: bold;
    border-radius: 25px;
    padding: 10px 20px;
    color: #FFFFFF;
    text-decoration: none;
    white-space: nowrap; /* Evita que el texto se envuelva */
    display: inline-block; /* Asegura que el elemento se comporte como un botón */
    transition: background 0.3s ease, font-size 0.3s ease, opacity 0.3s ease; /* Añade transición para el fondo, el tamaño de fuente y la opacidad */
}

.btn-fiu:hover {
    text-decoration: none;
    background: #ff9800;
    font-weight: bolder;
    color: #FFFFFF;
    font-size: 1.4em;
    padding: 10px 20px;
    white-space: nowrap; /* Evita que el texto se envuelva */
    opacity: 0.8; /* Cambia la opacidad en el hover */
}

/* Mediaqueries de texto animado */

@media (max-width: 998px) {
    .animated-text {
        width: 50%;
        position: absolute;
        top: 35%;
        left: 68%;
        transform: translate(-50%, -50%);
        font-size: 1.1em;
        animation: colorChange 1s infinite alternate;
        font-family: 'Monaco', monospace; /* Aplicar Impact solo a este div */
        font-weight: bolder;
        span {
            font-weight: bolder;
            font-family: 'Monaco', monospace;
        }
        /*border: green solid 3px;*/
    }

    .banner-button {
        position: absolute;
        top: 70%;
        left: 68%;
        transform: translate(-50%, -50%);
    }

    .btn-fiu {
        background: #ffc107;
        font-size: .9em;
        font-weight: bold;
        border-radius: 25px;
        padding: 10px 20px;
        color: #FFFFFF;
        text-decoration: none;
        white-space: nowrap; /* Evita que el texto se envuelva */
        display: inline-block; /* Asegura que el elemento se comporte como un botón */
        transition: background 0.3s ease, font-size 0.3s ease, opacity 0.3s ease; /* Añade transición para el fondo, el tamaño de fuente y la opacidad */
    }

    .btn-fiu:hover {
        text-decoration: none;
        background: #ff9800;
        font-weight: bolder;
        color: #FFFFFF;
        font-size: 1em;
        padding: 10px 20px;
        white-space: nowrap; /* Evita que el texto se envuelva */
        opacity: 0.8; /* Cambia la opacidad en el hover */
    }
}

@media (max-width: 767px) {
    .animated-text {
        width: 75%;
        position: absolute;
        top: 65%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 1.5em;
        animation: colorChange 1s infinite alternate;
        font-family: 'Monaco', monospace; /* Aplicar Impact solo a este div */
        font-weight: bolder;
        span {
            font-weight: bolder;
            font-family: 'Monaco', monospace;
        }
        /*border: green solid 3px;*/
    }

    .banner-button {
        position: absolute;
        top: 85%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .btn-fiu {
        background: #ffc107;
        font-size: 1.1em;
        font-weight: bold;
        border-radius: 25px;
        padding: 10px 20px;
        color: #FFFFFF;
        text-decoration: none;
        white-space: nowrap; /* Evita que el texto se envuelva */
        display: inline-block; /* Asegura que el elemento se comporte como un botón */
        transition: background 0.3s ease, font-size 0.3s ease, opacity 0.3s ease; /* Añade transición para el fondo, el tamaño de fuente y la opacidad */
    }

    .btn-fiu:hover {
        text-decoration: none;
        background: #ff9800;
        font-weight: bolder;
        color: #FFFFFF;
        font-size: 1.2em;
        padding: 10px 20px;
        white-space: nowrap; /* Evita que el texto se envuelva */
        opacity: 0.8; /* Cambia la opacidad en el hover */
    }
}


@media (max-width: 535px) {
    .animated-text {
        width: 70%;
        position: absolute;
        top: 65%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 1.2em;
        animation: colorChange 1s infinite alternate;
        font-family: Poppins, sans-serif; /* Aplicar Impact solo a este div */
        font-weight: bolder;
        span {
            font-weight: bolder;
            font-family: 'Monaco', monospace;
        }
        /*border: green solid 3px;*/
    }

    .banner-button {
        position: absolute;
        top: 85%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .btn-fiu {
        background: #ffc107;
        font-size: .7em;
        font-weight: bold;
        border-radius: 25px;
        padding: 10px 20px;
        color: #FFFFFF;
        text-decoration: none;
        white-space: nowrap; /* Evita que el texto se envuelva */
        display: inline-block; /* Asegura que el elemento se comporte como un botón */
        transition: background 0.3s ease, font-size 0.3s ease, opacity 0.3s ease; /* Añade transición para el fondo, el tamaño de fuente y la opacidad */
    }

    .btn-fiu:hover {
        text-decoration: none;
        background: #ff9800;
        font-weight: bolder;
        color: #FFFFFF;
        font-size: .8em;
        padding: 10px 20px;
        white-space: nowrap; /* Evita que el texto se envuelva */
        opacity: 0.8; /* Cambia la opacidad en el hover */
    }
}

/* Scroll dentro de una card */
.scrollable-content {
    max-height: 160px; /* Ajusta esta altura según tus necesidades */
    overflow-y: auto;
}

/* Contenedor para titulo en h2  que abarca dos lineas*/
.two-lines {
    height: 70px;
}

.pattern-fondo {
    background: linear-gradient(45deg, #ab8fe6 0%, #ab8fe6 5%,transparent 5%, transparent 10%, #ab8fe6 10%, #ab8fe6 15%,transparent 15%,transparent 20%, #ab8fe6 20%, #ab8fe6 25%,transparent 25%,transparent 30%, #ab8fe6 30%, #ab8fe6 35%,transparent 35%,transparent 40%, #ab8fe6 40%, #ab8fe6 45%,transparent 45%,transparent 50%, #ab8fe6 50%, #ab8fe6 55%,transparent 55%,transparent 60%, #ab8fe6 60%, #ab8fe6 65%,transparent 65%,transparent 70%, #ab8fe6 70%, #ab8fe6 75%,transparent 70%,transparent 80%, #ab8fe6 80%, #ab8fe6 85%,transparent 85%,transparent 90%, #ab8fe6 90%, #ab8fe6 95%,transparent 95%), linear-gradient(135deg, #ab8fe6 0%, #ab8fe6 5%,transparent 5%, transparent 10%, #ab8fe6 10%, #ab8fe6 15%,transparent 15%,transparent 20%, #ab8fe6 20%, #ab8fe6 25%,transparent 25%,transparent 30%, #ab8fe6 30%, #ab8fe6 35%,transparent 35%,transparent 40%, #ab8fe6 40%, #ab8fe6 45%,transparent 45%,transparent 50%, #ab8fe6 50%, #ab8fe6 55%,transparent 55%,transparent 60%, #ab8fe6 60%, #ab8fe6 65%,transparent 65%,transparent 70%, #ab8fe6 70%, #ab8fe6 75%,transparent 70%,transparent 80%, #ab8fe6 80%, #ab8fe6 85%,transparent 85%,transparent 90%, #ab8fe6 90%, #ab8fe6 95%,transparent 95%);
        background-size: 2em 2em;
        background-color: #ffffff;
        opacity: 1
}

.color-text-message {
    background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.text-num1 {
    font-size: 2.3em;
    font-family: 'Dosis', sans-serif;
    font-weight: bold;
}

.text-num2 {
    font-size: 3.5em;
    font-family: 'Roboto', sans-serif;
    font-weight: bolder;
}

.text-num3 {
    font-size: 2em;
    font-family: 'Dosis', sans-serif;
    font-weight: bold;
}

@media (max-width: 992px) {
    .text-num1 {
        font-size: 1.2em;
        font-family: 'Dosis', sans-serif;
        font-weight: bold;
    }
    
    .text-num2 {
        font-size: 4em;
        font-family: 'Roboto', sans-serif;
        font-weight: bolder;
    }
    
    .text-num3 {
        font-size: 1.2em;
        font-family: 'Dosis', sans-serif;
        font-weight: bold;
    }
}

@media (max-width: 767px) {
    .content-message {
        height: 40px;
    }
    .text-num1 {
        font-size: 1.5em;
        font-family: 'Dosis', sans-serif;
        font-weight: bold;
    }
    
    .text-num2 {
        font-size: 4em;
        font-family: 'Roboto', sans-serif;
        font-weight: bolder;
        
    }
    
    .text-num3 {
        font-size: 1.2em;
        font-family: 'Dosis', sans-serif;
        font-weight: bold;
        background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%);
	    -webkit-background-clip: text;
	    background-clip: text;
	    color: transparent;
        display: block;
    }
}

.title-font-poppins {
    font-family: Poppins, sans-serif;
    font-size: clamp(1.0000rem, 0.7899rem + 1.3445vw, 2.0000rem);
    font-weight: 700;
    color: #333232;
    background-color: #F0F0F0;
    padding: 10px;
    border-radius: 10px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
}

.bg-azul {
    background: #142157;
}

.gris-text {
    color: #333232;
}

.azul-text {
    color: #3498db;
}

.btn-vacantes {
    border: 0;
    background: #4070fa;
    color: #FFF;
    border-radius: 6px;
    padding: 16px 30px;
    transition: 0.2s;
    cursor: pointer;
    font-weight: bold;
    font-family: Poppins, sans-serif; 
    text-decoration: none;
}

.btn-vacantes:hover {
    box-shadow: 0 0 0 4px #ffff, 0 0 0 8px #4070fa;
    text-decoration: none;
    color: #FFF;
    font-weight: bolder;
    font-family: Poppins, sans-serif; 
}

.banner-text1 {
    color: #FFF;
    font-family: 'Montserrat', sans-serif;
    font-size: 1.5em;
    font-weight: 700;
}

.banner-text2 {
    color: #FFF;
    font-family: 'Montserrat', sans-serif;
    font-size: 2em;
    font-weight: 700;
}

/* Agregar box-shadow a una card - agregar un efecto hover - inicia */
.card-box-shadow {
    border-radius: 10px;
    background-color: #ffffff;
    
    /* Añade un box-shadow llamativo */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), 0 6px 20px rgba(0, 0, 0, 0.19);

    /* Opcional: añade una transición suave para el efecto al pasar el ratón */
    transition: box-shadow 0.3s ease-in-out;
}

/* Efecto hover */
.card-box-shadow:hover {
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3), 0 18px 40px rgba(0, 0, 0, 0.25);
}
/* Agregar box-shadow a una card - agregar un efecto hover - termina */

.font-bebas-neue-regular {
    font-family: "Bebas Neue", sans-serif;
    font-weight: 400;
    font-style: normal;
  }

.card-vacantes-disponibles {
    margin: 25px 0 0 -20px; 
}

/* Agregar un scroll a un contenedor mostrar aproximadamente 6 lineas de texto como alto */
.text-container-scrolly {
    max-height: 9em;
    overflow-y: auto;
}

.embed-responsive-9by16::before{  
    padding-top: 175%;
}

.text-font-size-1rem{
    font-size: 1rem;
}

.text-font-size-16px{
    font-size: 16px;
}

.text-font-size-12px{
    font-size: 12px;
}

.img-display-inline{
    display: inline!important;
}

.img-review-250px{
    height: 250px!important;
}


.img-with-background{
    z-index: 1;
    position: absolute;
}
.img-background{
    position: absolute;
    background-color: #6a52a2;
    width: 100%;
    height: 95%;
    top: 5%;
    z-index: 0;
    border-radius: 20px;
    left: 12%;
    box-shadow: 3px 3px 3px 3px rgba(32, 32, 32, 0.3);
}
@media (max-width: 768px){
    .img-with-background{
        z-index: 1;
        position: initial;
    }
    .img-background{
        opacity: 0;
        width: 0;
    }
}

@media (max-width: 990px) and (min-width: 768px){
    .img-background{
        position: absolute;
        background-color: #6a52a2;
        width: 100%;
        height: 41%;
        top: 8%;
        z-index: 0;
        border-radius: 20px;
        left: 10%;
        box-shadow: 3px 3px 3px 3px rgba(32, 32, 32, 0.3);
    }
}

@media (max-width: 1199px) and (min-width: 991px) {
    .img-background{
        position: absolute;
        background-color: #6a52a2;
        width: 100%;
        height: 70%;
        top: 6%;
        z-index: 0;
        border-radius: 20px;
        left: 7%;
        box-shadow: 3px 3px 3px 3px rgba(32, 32, 32, 0.3);
    }
}

@media (max-width: 1400px) and (min-width: 1200px){
    .img-background{
        position: absolute;
        background-color: #6a52a2;
        width: 100%;
        height: 90%;
        top: 6%;
        z-index: 0;
        border-radius: 20px;
        left: 7%;
        box-shadow: 3px 3px 3px 3px rgba(32, 32, 32, 0.3);
    }
}
/**/
.espacio {
    padding-right: 50px;
}
.vert .carousel-item-next.carousel-item-left,
.vert .carousel-item-prev.carousel-item-right {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.vert .carousel-item-next,
.vert .active.carousel-item-right {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
}

.vert .carousel-item-prev,
.vert .active.carousel-item-left {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
}

/* Nuevas reglas para los indicadores */
.carousel-indicators{
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    height: 30px;
    width: 50px;
    right: 0px;
    left: auto;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
}
.carousel-indicators li{
    display: block;
    margin-bottom: 0px;
    width: 10px;
    height: 10px;
    background: #BDBDBD;
    transition: all ease 0.6s;
}
.carousel-indicators li.active{
    background: #000;
    width: 15px;
    border-radius: 15px;
}
hr.style-1{
	border-top: 1px solid #ffffff;
    padding-top: 2px;
    opacity: 0.2;
}

/*Se crean efectos Hover en Tela Para Manteles*/
.hover-transicion  {
    background: #FFFFFF;
    background: linear-gradient(180deg, rgba(255,255,255,1) 25%, rgba(234,234,234,1) 70%);
}
.hover-transicion:hover{
    height: 100%;
    background: rgba(1, 31, 75, 0.692);
    --webkit-transition: all 1500ms;
    --o-transition: all 1500ms;
    transition: all 1500ms;
    p, h3, strong{
        color:#FFFFFF;
    }
}
/*Se crean efectos para nueva sección de Felpa Toalla; Nov 14, 2024*/
.p-diferencias-izquierdo{
    border-top: 1.5px solid #6A52A2;
    border-left: 1.5px solid #6A52A2;
    padding: 25px 8px 8px 25px;
}
.p-diferencias-derecho{
    border-bottom: 2px solid #6A52A2;
    border-right: 2px solid #6A52A2;
    padding: 8px 25px 25px 8px;
}

.blur-effect {
    transition: transform 0.3s ease-in-out;
}

.blur-effect:hover {
    transform: scale(1.04);
}

.slides-atenas {
    height: 41vh;
    width: auto;
    overflow: hidden;
    position: relative;
    border-radius: 20px;
  }
  .slide-atenas {
    position: absolute;
    height: 100%;
    opacity: 0;
    inset: 0;
    animation: slide-show 6s infinite;
  }

  .slide-1 {
    animation-delay: 0s;
  }

  .slide-2 {
    animation-delay: 2s;
  }

  .slide-3 {
    animation-delay: 4s;
  }

  .slide-atenas img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
  }

  .slides-bramante {
    height: 41vh;
    width: auto;
    overflow: hidden;
    position: relative;
    border-radius: 20px;
  }
  .slide-bramante {
    position: absolute;
    height: 100%;
    opacity: 0;
    inset: 0;
    animation: slide-show 6s infinite;
  }

  .slide-bramante-1 {
    animation-delay: 0s;
  }

  .slide-bramante-2 {
    animation-delay: 2s;
  }

  .slide-bramante-3 {
    animation-delay: 4s;
  }

  .slide-bramante img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
  }

  .slides-gabardina {
    height: 41vh;
    width: auto;
    overflow: hidden;
    position: relative;
    border-radius: 20px;
  }
  .slide-gabardina {
    position: absolute;
    height: 100%;
    opacity: 0;
    inset: 0;
    animation: slide-show2 8s infinite;
  }

  .slide-gabardina-1 {
    animation-delay: 0s;
  }

  .slide-gabardina-2 {
    animation-delay: 2s;
  }

  .slide-gabardina-3 {
    animation-delay: 4s;
  }

  .slide-gabardina-4 {
    animation-delay: 6s;
  }

  .slide-gabardina img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
  }

  .slides-sarga {
    height: 41vh;
    width: auto;
    overflow: hidden;
    position: relative;
    border-radius: 20px;
  }
  .slide-sarga {
    position: absolute;
    height: 100%;
    opacity: 0;
    inset: 0;
    animation: slide-show3 10s infinite;
  }

  .slide-sarga-1 {
    animation-delay: 0s;
  }

  .slide-sarga-2 {
    animation-delay: 2s;
  }

  .slide-sarga-3 {
    animation-delay: 4s;
  }

  .slide-sarga-4 {
    animation-delay: 6s;
  }

  .slide-sarga-5 {
    animation-delay: 8s;
  }

  .slide-sarga img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
  }

  @keyframes slide-show {
    0%  { opacity: 0; }
    10% { opacity: 1; }
    20%,30% { opacity: 1;scale: 1.03; }
    50% { opacity: 0; }
  }

  @keyframes slide-show2 {
    0% { opacity: 0; }
    10% { opacity: 1; }
    25% { opacity: 1; scale: 1.03;}
    30.5% { opacity: 0; }
    100% { opacity: 0; }
  }

  @keyframes slide-show3 {
    0% { opacity: 0; }
    10% { opacity: 1; }
    20% { opacity: 1; scale: 1.03; }
    30% { opacity: 0; }
    100% { opacity: 0; }
  }

  .producto-round-grey {
    background-color: lightgray;
    border-radius: 20px;
  }

  /* Se crean efectos para telas guadalajar sección Fábricas de Telas en Guadalajara y Textiles Guadalajara */
  .parent {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(4, 1fr);
    grid-column-gap: 4px;
    grid-row-gap: 4px;
}

.div1, .div2, .div3, .div4, .div5 {
    border-radius: 15px
}

.div1 { 
    grid-area: 1 / 1 / 5 / 2;
    margin: 10px 
}
.div2 { 
    grid-area: 1 / 2 / 3 / 3;
    margin: 10px;
}
.div3 { 
    grid-area: 1 / 3 / 3 / 4;
    margin: 10px;
 }
.div4 { 
    grid-area: 3 / 2 / 5 / 3;
    margin: 10px;
}
.div5 { 
    grid-area: 3 / 3 / 5 / 4;
    margin: 10px;
}

 @media (max-width: 767px) {
    .parent {
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: auto;
    grid-column-gap: 4px;
    grid-row-gap: 4px;
}

.div1 { 
    grid-area: 1 / 1 / 2 / 2; 
}
.div2 { grid-area: 3 / 1 / 4 / 2; }
.div3 { grid-area: 2 / 1 / 3 / 2; }
.div4 { grid-area: 4 / 1 / 5 / 2; }
.div5 { grid-area: 5 / 1 / 6 / 2; }

}

/* Carrusel de tela escolar */
.minatura-larga {
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
    display: block;
}

.miniaturas-carousel {
    position: relative; /* Esto permite posicionar de manera absoluta a los elementos hijos */
}

.miniaturas-carousel .slick-atra,
.miniaturas-carousel .slick-sig {
    position: absolute;
    top: 42%;
    transform: translateY(-50%);
}

/* Opcionalmente, ajusta la posición horizontal */
.miniaturas-carousel .slick-atra {
    left: -50px; /* Ajusta según convenga */
    z-index: 1; /* Asegura que esté por encima de las imágenes */
}

.miniaturas-carousel .slick-sig {
    right: -20px; /* Ajusta según convenga */
}

@media (max-width: 767px) {
.miniaturas-carousel {
    position: relative; /* Esto permite posicionar de manera absoluta a los elementos hijos */
}

.miniaturas-carousel .slick-atra,
.miniaturas-carousel .slick-sig {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

/* Opcionalmente, ajusta la posición horizontal */
.miniaturas-carousel .slick-atra {
    left: -20px; /* Ajusta según convenga */
    z-index: 1; /* Asegura que esté por encima de las imágenes */
}

.miniaturas-carousel .slick-sig {
    right: -20px; /* Ajusta según convenga */
} 
}

/* Estilo micrfibra tacto algodon */

#tacto-algodon {
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-template-rows: 1fr;
    grid-column-gap: 10px;
    grid-row-gap: 0px;
    margin: 10px 0;
}

.algodon-texto { 
    grid-area: 1 / 1 / 2 / 2;
    margin-right: 10px;
    text-align: justify;
    align-content: center; 
}
.algodon-imagen { 
    grid-area: 1 / 2 / 2 / 3;
    margin-left: 10px;
    background-color: cornflowerblue;
    border-radius: 15px;
    height: auto; 
}

@media (max-width: 768px) {
    #tacto-algodon {
        display: block;
        justify-content: center;
        margin: auto;
    }
    .algodon-imagen {
        margin-top: 10px;
        justify-content: center;
        margin: auto;
    }
}

/* Nuevos estilos para las cards de productos */
.producto-round-1 {
    margin-bottom: 30px;
    background-color: #f5f5f5;
    border-radius: 15px;
    padding: 20px 10px;
}

.producto-card-wrapper-1 {
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
    background-color: transparent;
    border-radius: 15px;
}

.producto-card-wrapper-1:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.15);
    background-color: #ffffff;
    border-radius: 15px;
}

.producto-card-wrapper-1:hover .producto-titulo-1 {
    background-color: #6A52A2;
    transition: background-color 0.3s ease;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}

.producto-card-wrapper-1:hover .producto-titulo-1 a{
    color: #ffffff !important;
    transition: color 0.3s ease;
}

.producto-card-wrapper-1:hover .producto-titulo-1 h3{
    color: #ffffff !important;
    transition: color 0.3s ease;
}

.producto-titulo-1 {
    height: 50px; /* Altura fija para los títulos */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px 5px;
    transition: background-color 0.3s ease;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}

.producto-titulo-1 h3 {
    font-size: 20px;
    font-weight: 700;
    margin: 0;
    line-height: 1.2;
}

.producto-image-container-1 {
    border-radius: 8px;
}

.producto-content-1 {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 10px;
}

.producto-description-1 {
    flex: 1 0 auto;
    min-height: 120px; /* Altura mínima para las descripciones */
    margin-bottom: 20px;
}

.producto-button-container-1 {
    display: flex;
    justify-content: center;
    padding-bottom: 0;
    margin-bottom: 0;
}

.cta-producto-1 {
    background-color: #ffcc00; /* Color amarillo */
    color: #000;
    font-weight: 700;
    text-decoration: none;
    padding: 12px 20px;
    border-radius: 30px;
    display: inline-block;
    min-width: 140px;
    text-align: center;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.cta-producto-1:hover {
    background-color: #f5c000;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    color: #000;
    text-decoration: none;
}

/* Añadir animación de salto al botón cuando se hace hover en el contenedor */
.producto-card-wrapper-1:hover .cta-producto-1 {
    animation: bounce 0.6s ease infinite alternate;
}

.producto-card-wrapper-1 .cta-producto-1 {
    transition: all 0.5s ease;
    animation: none; /* Asegura que no haya animación por defecto */
}

@keyframes bounce {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-10px);
    }
}

.producto-card-wrapper-1:hover img {
    transform: scale(1.05);
    transition: transform 0.3s ease;
    transition: border-radius 0.3s ease;
    border-radius: 15px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.20);
}

.producto-card-wrapper-1 img {
    transition: transform 0.3s ease;
    width: 100%;
    height: auto;
}

.cta-producto-1 i {
    margin-right: 5px;
    transition: transform 0.5s ease;
}

.producto-card-wrapper-1:hover .cta-producto-1 i {
    transform: rotate(360deg);
}

#boton-loneta-color {
    position: relative;
    top: -13px;
    left: 20px;
    background-color: #6A52A2;
    color: #fff;
    border-color: #000;
    border-radius: 20px;
    padding: 10px 20px;
    font-size: 0.7em;
    font-weight: bold;
    text-decoration: none;
    transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
}

#boton-loneta-color:hover {
    transform: translateY(-5px);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
}

#boton-loneta-color:active {
    transform: scale(0.95);
    transition: transform 0.3s ease;
    color: #000;
    background-color: #564381;
    transition: background-color 0.3s ease, transform 0.3s ease;
    transition: color 0.3s ease, transform 0.3s ease;
}

#boton-loneta-color i {
    margin-right: 5px;
    animation-fill-mode: both;
}

#boton-loneta-color:hover i {
    animation: shake 0.5s ease forwards;
}

#boton-loneta-color:not(:hover) i {
    animation: shake-reverse 0.5s ease forwards;
}

@keyframes shake-reverse {
    0% { transform: translateY(0); }
    25% { transform: translateY(2px); }
    50% { transform: translateY(-2px); }
    75% { transform: translateY(2px); }
    100% { transform: translateY(0); }
}

#boton-loneta-color:hover i {
    animation: shake 0.5s ease;
}

@keyframes shake {
    0% { transform: translateY(0); }
    25% { transform: translateY(-2px); }
    50% { transform: translateY(2px); }
    75% { transform: translateY(-2px); }
    100% { transform: translateY(0); }
}

/* Base styles with minimalist approach */
.tela-ripstop-info-container {
    margin: 2.5rem 0;
    position: relative;
}

/* Card styling with minimalist design */
.tela-ripstop-content .tela-ripstop-info-box,
.tela-ripstop-content .tela-ripstop-info-box-left,
.tela-ripstop-content .tela-ripstop-info-box-right {
    background-color: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.03);
    padding: 2rem !important;
}

/* Box with elegant accent borders */
.tela-ripstop-content .tela-ripstop-info-box {
    border-bottom: 5px solid;
    border-image: linear-gradient(to right, #6a52a2, #f46543) 1;
}

.tela-ripstop-content .tela-ripstop-info-box-left {
    border-left: 5px solid #6a52a2;
    border-image: linear-gradient(to bottom, #6a52a2, #f46543) 1 100%;
}

.tela-ripstop-content .tela-ripstop-info-box-right {
    border-right: 5px solid #6a52a2;
    border-image: linear-gradient(to bottom, #6a52a2, #f46543) 1 100%;
}

/* Refined hover effects */
.tela-ripstop-content .tela-ripstop-info-box:hover,
.tela-ripstop-content .tela-ripstop-info-box-left:hover,
.tela-ripstop-content .tela-ripstop-info-box-right:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(106, 82, 162, 0.1);
}

/* Typography with modern styling */
.tela-ripstop-title {
    color: #333;
    font-size: 1.8rem;
    position: relative;
    padding-bottom: 15px;
    margin-bottom: 20px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.tela-ripstop-title:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 175px;
    height: 4px;
    background: linear-gradient(to right, #6a52a2, #f46543);
    transition: width 0.3s ease;
}

/* Title decoration animation */
.tela-ripstop-info-box:hover .tela-ripstop-title:after,
.tela-ripstop-info-box-left:hover .tela-ripstop-title:after,
.tela-ripstop-info-box-right:hover .tela-ripstop-title:after {
    width: 300px;
}

.tela-ripstop-subtitle {
    color: #666;
    font-size: 1.3rem;
    font-weight: 500;
    margin-bottom: 1.5rem;
    letter-spacing: 0.01em;
}

/* Content styling with improved readability */
.tela-ripstop-description p {
    line-height: 1.8;
    color: #555;
    margin-bottom: 1.2rem;
    font-size: 1.05rem;
    font-weight: 400;
}

.tela-ripstop-description strong {
    color: #333;
    font-weight: 600;
    position: relative;
    display: inline-block;
}

/* Subtle highlight effect for important terms */
.tela-ripstop-description strong::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: rgba(106, 82, 162, 0.15);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}

.tela-ripstop-description strong:hover::after {
    transform: scaleX(1);
}

/* Image styling with elegant frame */
.tela-ripstop-image-container {
    display: flex;
    height: 100%;
    align-items: center;
    justify-content: center;
}

.tela-ripstop-image-frame {
    border-radius: 12px;
    position: relative;
    width: 100%;
    margin: 1.2rem 0;
    transition: all 0.3s ease;
}

/* Image hover effect */
.tela-ripstop-img-hover-zoom {
    transition: transform 0.5s ease;
}

.tela-ripstop-image-frame:hover .tela-ripstop-img-hover-zoom {
    transform: scale(1.05);
}

/* CTA button styling */
.tela-ripstop-pulse-button {
    position: relative;
    box-shadow: 0 0 0 0 rgba(106, 82, 162, 0.7);
    animation: pulse 2s infinite;
    border-radius: 30px;
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(106, 82, 162, 0.7);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(106, 82, 162, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(106, 82, 162, 0);
    }
}

/* Card layout enhancements */
.card {
    border: none;
}

.card-body {
    padding: 0;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .tela-ripstop-info-container {
        margin: 1.5rem 0;
    }
    
    .tela-ripstop-content .tela-ripstop-info-box,
    .tela-ripstop-content .tela-ripstop-info-box-left,
    .tela-ripstop-content .tela-ripstop-info-box-right {
        padding: 1.5rem !important;
    }
    
    .tela-ripstop-title {
        font-size: 1.5rem;
    }
    
    .tela-ripstop-subtitle {
        font-size: 1.1rem;
    }
    
    .tela-ripstop-description p {
        font-size: 1rem;
        line-height: 1.7;
    }
    
    .tela-ripstop-image-frame {
        margin: 1rem 0;
    }
}

.tabla-fila h3 {
    margin: 0;
    font-size: clamp(0.8rem, 0.7071rem + 0.4956vw, 1.5rem) !important;
    color: #333;
}

.tabla-fila h3 {
    margin: 0;
    font-size: clamp(0.8rem, 0.7071rem + 0.4956vw, 1.5rem) !important;
    color: #333;
}
.tabla-fila td {
    margin: 0;
    font-size: clamp(0.7rem, 0.6071rem + 0.4956vw, 1.4rem) !important;
    color: #333;
}
.tabla-especificaciones-container {
    margin-bottom: 1.5rem;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(220, 53, 69, 0.15);
    background: linear-gradient(to right, rgba(220, 53, 69, 0.05), rgba(220, 53, 69, 0.02));
}
.tabla-especificaciones-wrapper {
    overflow-x: auto;
    border-radius: 8px;
}
.tabla-especificaciones {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    color: #333;
    font-size: 0.95rem;
}
.tabla-encabezado {
    background: #dc3545;
    color: white;
    text-align: center;
    padding: 12px 16px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: clamp(0.8rem, 0.7071rem + 0.4956vw, 1.5rem) !important;
}
.tabla-encabezado:first-child {
    border-top-left-radius: 6px;
}
.tabla-encabezado:last-child {
    border-top-right-radius: 6px;
}
.tabla-fila {
    transition: all 0.2s ease;
}
.tabla-fila:nth-child(odd) {
    background-color: rgba(220, 53, 69, 0.04);
}
.tabla-fila:hover {
    background-color: rgba(220, 53, 69, 0.1);
    transform: translateY(-1px);
    box-shadow: 0 2px 5px rgba(220, 53, 69, 0.2);
}
.tabla-tipo, .tabla-peso {
    padding: 12px 16px;
    text-align: center;
    border-bottom: 1px solid rgba(220, 53, 69, 0.1);
}
.tabla-imagen {
    padding: 8px;
    text-align: center;
    border-bottom: 1px solid rgba(220, 53, 69, 0.1);
    vertical-align: middle;
}
.imagen-contenedor {
    width: 200px;
    height: 200px;
    margin: 0 auto;
    border-radius: 5px;
    overflow: hidden;
    border: 1px solid rgba(220, 53, 69, 0.2);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.imagen-contenedor img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}
.tabla-fila:hover .imagen-contenedor img {
    transform: scale(3);
}
.tipo-tela {
    font-weight: 600;
    color: #333;
    display: block;
    position: relative;
    padding-left: 24px;
    margin-bottom: 0;
}
.tipo-tela:before {
    content: "\f0a9";
    font-family: "Font Awesome 5 Free";
    position: absolute;
    left: -5px;
    top: 50%;
    transform: translateY(-50%);
    color: #dc3545;
    font-size: clamp(0.9375rem, 0.8462rem + 0.4867vw, 1.625rem) !important;
}
.etiqueta-peso {
    background: rgba(220, 53, 69, 0.12);
    color: #dc3545;
    padding: 4px 12px;
    border-radius: 30px;
    font-weight: 600;
    display: inline-block;
    min-width: 80px;
    text-align: center;
}
#whatsapp-tabla {
    font-size: clamp(0.9375rem, 0.8462rem + 0.4867vw, 1.625rem) !important;
}

/* Estilos del carrusel móvil */
#carrusel-manta-movil {
    margin-top: 2rem;
    position: relative;
}

#carrusel-manta-movil h3 {
    color: #dc3545;
    font-weight: 600;
    margin-bottom: 1.5rem;
}

.tarjeta-manta {
    background: white;
    border-radius: 15px;
    box-shadow: 0 8px 25px rgba(220, 53, 69, 0.15);
    margin: 0 15px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.tarjeta-manta:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 35px rgba(220, 53, 69, 0.25);
    border-color: #dc3545;
}

#imagen-manta-135,
#imagen-manta-san-pedro,
#imagen-manta-san-juan,
#imagen-manta-santiago,
#imagen-manta-san-juan-lavada {
    height: 250px;
    overflow: hidden;
    position: relative;
}

.imagen-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.tarjeta-manta:hover .imagen-slide img {
    transform: scale(1.05);
}

#info-manta-135,
#info-manta-san-pedro,
#info-manta-san-juan,
#info-manta-santiago,
#info-manta-san-juan-lavada {
    padding: 20px;
}

.info-slide h4 {
    color: #dc3545;
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 5px;
    text-align: center;
}

.tipo-slide {
    color: #666;
    font-size: 1rem;
    text-align: center;
    margin-bottom: 15px;
    font-style: italic;
}

.especificaciones-slide {
    margin-bottom: 20px;
}

.spec-item {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    margin-bottom: 8px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(220, 53, 69, 0.1);
}

.spec-label {
    font-weight: 600;
    color: #333;
    font-size: 0.95rem;
}

.spec-value {
    background: rgba(220, 53, 69, 0.1);
    color: #dc3545;
    padding: 4px 12px;
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.9rem;
}

.boton-cotizar {
    background: linear-gradient(135deg, #dc3545, #c82333);
    color: white;
    text-align: center;
    padding: 12px 20px;
    border-radius: 25px;
    font-weight: 600;
    font-size: 1rem;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(220, 53, 69, 0.3);
}

.boton-cotizar:hover {
    background: linear-gradient(135deg, #c82333, #dc3545);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(220, 53, 69, 0.4);
}

.boton-cotizar i {
    margin-right: 8px;
    font-size: 1.1rem;
}

/* Botones de navegación personalizados */
#boton-anterior,
#boton-siguiente {
    width: 50px;
    height: 50px;
    background: rgba(220, 53, 69, 0.9);
    border-radius: 50%;
    border: none;
    top: 55%;
    transform: translateY(-50%);
    transition: all 0.3s ease;
}

#boton-anterior:hover,
#boton-siguiente:hover {
    background: #dc3545;
    transform: translateY(-50%) scale(1.1);
}

#boton-anterior {
    left: -25px;
}

#boton-siguiente {
    right: -25px;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    width: 25px;
    height: 25px;
}

@media (max-width: 576px) {
    .tabla-especificaciones {
    font-size: 0.85rem;
    }
    .tabla-encabezado {
    font-size: 1rem;
    }
    .tabla-tipo, .tabla-peso {
    padding: 10px 8px;
    }
    .tabla-imagen {
    padding: 5px;
    }
    .imagen-contenedor {
    width: 60px;
    height: 60px;
    }
    .etiqueta-peso {
    padding: 3px 8px;
    min-width: 70px;
    }

    /* Ajustes para carrusel en móvil */
    .tarjeta-manta {
    margin: 0 10px;
    }

    #imagen-manta-135,
    #imagen-manta-san-pedro,
    #imagen-manta-san-juan,
    #imagen-manta-santiago,
    #imagen-manta-san-juan-lavada {
    height: 200px;
    }

    #info-manta-135,
    #info-manta-san-pedro,
    #info-manta-san-juan,
    #info-manta-santiago,
    #info-manta-san-juan-lavada {
    padding: 15px;
    }

    .info-slide h4 {
    font-size: 1.2rem;
    }

    #boton-anterior {
    left: -15px;
    }

    #boton-siguiente {
    right: -15px;
    }
}

@media (min-width: 992px) {
    #carrusel-manta-movil {
    display: none !important;
    }
}

/* Estilos para las Cards Comfy */
.contenedor-cards-comfy {
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    border-radius: 20px;
    margin: 2rem 0;
    box-shadow: 0 5px 15px rgba(106, 82, 162, 0.1);
}

.titulo-seccion-cards {
    color: #2c3e50;
    font-size: 2.5rem;
    margin-bottom: 1rem;
    position: relative;
}

.titulo-seccion-cards::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 3px;
    background: linear-gradient(90deg, #6a52a2, #8b69c7);
    border-radius: 2px;
}

.subtitulo-seccion-cards {
    color: #7f8c8d;
    font-size: 1.2rem;
    margin-bottom: 0;
}

.enlace-tarjeta-comfy {
    text-decoration: none;
    color: inherit;
    display: block;
    height: 100%;
}

.enlace-tarjeta-comfy:hover {
    text-decoration: none;
    color: inherit;
}

.tarjeta-comfy {
    background: #ffffff;
    border-radius: 15px;
    box-shadow: 0 8px 25px rgba(106, 82, 162, 0.15);
    overflow: hidden;
    transition: all 0.3s ease;
    height: 100%;
    position: relative;
    cursor: pointer;
}

.enlace-tarjeta-comfy:hover .tarjeta-comfy {
    transform: translateY(-8px);
    box-shadow: 0 15px 40px rgba(106, 82, 162, 0.25);
}

.imagen-tarjeta-comfy {
    position: relative;
    overflow: hidden;
    height: 220px;
}

.img-tarjeta-comfy {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.enlace-tarjeta-comfy:hover .img-tarjeta-comfy {
    transform: scale(1.1);
}

.contenido-tarjeta-comfy {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    height: calc(100% - 220px);
}

.titulo-tarjeta-comfy {
    color: #2c3e50;
    font-size: 1.4rem;
    font-weight: bold;
    margin-bottom: 1rem;
    text-align: center;
}

.descripcion-tarjeta-comfy {
    color: #7f8c8d;
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
    text-align: justify;
    flex-grow: 1;
}

.boton-tarjeta-comfy {
    text-align: center;
    margin-top: auto;
}

.cta-tarjeta-comfy {
    display: inline-block;
    background: linear-gradient(135deg, #6a52a2, #8b69c7);
    color: #ffffff !important;
    padding: 12px 30px;
    border-radius: 25px;
    text-decoration: none;
    font-weight: bold;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(106, 82, 162, 0.3);
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.cta-tarjeta-comfy::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s;
}

.enlace-tarjeta-comfy:hover .cta-tarjeta-comfy::before {
    left: 100%;
}

.enlace-tarjeta-comfy:hover .cta-tarjeta-comfy {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(106, 82, 162, 0.4);
    text-decoration: none;
    color: #ffffff !important;
}

/* Responsividad */
@media (max-width: 1199px) {
    .titulo-seccion-cards {
    font-size: 2.2rem;
    }
    
    .subtitulo-seccion-cards {
    font-size: 1.1rem;
    }
}

@media (max-width: 991px) {
    .contenedor-cards-comfy {
    padding: 3rem 1rem;
    }
    
    .titulo-seccion-cards {
    font-size: 2rem;
    }
    
    .imagen-tarjeta-comfy {
    height: 200px;
    }
    
    .contenido-tarjeta-comfy {
    height: calc(100% - 200px);
    }
}

@media (max-width: 767px) {
    .contenedor-cards-comfy {
    padding: 2rem 0.5rem;
    margin: 1rem 0;
    }
    
    .titulo-seccion-cards {
    font-size: 1.8rem;
    }
    
    .subtitulo-seccion-cards {
    font-size: 1rem;
    }
    
    .imagen-tarjeta-comfy {
    height: 180px;
    }
    
    .contenido-tarjeta-comfy {
    padding: 1.2rem;
    height: calc(100% - 180px);
    }
    
    .titulo-tarjeta-comfy {
    font-size: 1.3rem;
    }
    
    .descripcion-tarjeta-comfy {
    font-size: 0.9rem;
    }
    
    .cta-tarjeta-comfy {
    padding: 10px 25px;
    font-size: 0.9rem;
    }
}

@media (max-width: 575px) {
    .titulo-seccion-cards {
    font-size: 1.6rem;
    }
    
    .imagen-tarjeta-comfy {
    height: 160px;
    }
    
    .contenido-tarjeta-comfy {
    padding: 1rem;
    height: calc(100% - 160px);
    }
    
    .titulo-tarjeta-comfy {
    font-size: 1.2rem;
    }
    
    .descripcion-tarjeta-comfy {
    font-size: 0.85rem;
    margin-bottom: 1rem;
    }
    
    .cta-tarjeta-comfy {
    padding: 8px 20px;
    font-size: 0.85rem;
    }
}

/* Hover activo para dispositivos táctiles */
.hover-activo .tarjeta-comfy {
    transform: translateY(-8px);
    box-shadow: 0 15px 40px rgba(106, 82, 162, 0.25);
}

.hover-activo .img-tarjeta-comfy {
    transform: scale(1.1);
}

.hover-activo .cta-tarjeta-comfy {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(106, 82, 162, 0.4);
}

.seccion-encabezado-blog {
    padding: 2rem 0rem;
    border-radius: 20px;
    position: relative;
    overflow: hidden;
}

.titulo-principal-blog {
    font-size: 2.5rem;
    font-weight: 700;
    color: #343a40;
    margin-bottom: 1rem;
    letter-spacing: -0.02em;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.subtitulo-blog {
    font-size: 1.4rem;
    color: #6c757d;
    font-weight: 400;
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

.contenedor-compartir-blog {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 1rem;
}

.boton-compartir-blog {
    background: #fff;
    border: 2px solid #e9ecef;
    color: #6c757d;
    padding: 0.75rem 1.5rem;
    border-radius: 50px;
    font-weight: 500;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

.boton-compartir-blog:hover {
    background: #f8f9fa;
    border-color: #6c757d;
    color: #495057;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
    text-decoration: none;
}

.icono-compartir-blog {
    font-size: 1rem;
    transition: transform 0.3s ease;
}

.boton-compartir-blog:hover .icono-compartir-blog {
    transform: scale(1.1);
}

.separador-blog {
    height: 2px;
    background: linear-gradient(90deg, transparent, #dee2e6, transparent);
    border: none;
    margin: 2rem 0;
}

/* Responsividad */
@media (max-width: 768px) {
    .seccion-encabezado-blog {
        margin-bottom: 1.5rem;
        border-radius: 15px;
    }

    .titulo-principal-blog {
        font-size: 2rem;
        margin-bottom: 0.8rem;
    }

    .subtitulo-blog {
        font-size: 1.2rem;
        margin-bottom: 1rem;
    }

    .boton-compartir-blog {
        padding: 0.6rem 1.2rem;
        font-size: 0.9rem;
    }
}

@media (max-width: 480px) {
    .seccion-encabezado-blog {
        border-radius: 12px;
    }

    .titulo-principal-blog {
        font-size: 1.8rem;
        line-height: 1.3;
    }

    .subtitulo-blog {
        font-size: 1.1rem;
    }

    .boton-compartir-blog {
        padding: 0.5rem 1rem;
        font-size: 0.85rem;
    }
}

@media (min-width: 1200px) {
    .titulo-principal-blog {
        font-size: 3rem;
    }

    .subtitulo-blog {
        font-size: 1.5rem;
    }
}

.seccion-contenido-blog {
    background: #fefefe;
    border-radius: 15px;
    padding: 2.5rem;
    margin-bottom: 2rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    border: 1px solid #f1f3f4;
    position: relative;
}

.titulo-seccion-blog {
    font-size: 2.2rem;
    font-weight: 600;
    color: #2d3748;
    margin-bottom: 1.5rem;
    line-height: 1.3;
    position: relative;
    text-align: center;
}

.subtitulo-seccion-blog {
    font-size: 1.5rem;
    font-weight: 600;
    color: #4a5568;
    margin-bottom: 1rem;
    line-height: 1.4;
    position: relative;
    text-align: center;
}

.titulo-seccion-blog::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, #a0aec0, #cbd5e0);
    border-radius: 2px;
}

.parrafo-blog {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #4a5568;
    margin-bottom: 1.5rem;
    text-align: justify;
    font-weight: 400;
}

.parrafo-blog strong {
    color: #2d3748;
    font-weight: 600;
}

.enlace-blog {
    color: #4a5568;
    text-decoration: none;
    border-bottom: 1px solid #e2e8f0;
    transition: all 0.3s ease;
    font-weight: 500;
}

.enlace-blog:hover {
    color: #2d3748;
    border-bottom-color: #a0aec0;
    text-decoration: none;
}

.contenedor-texto-blog {
    max-width: 90%;
    margin: 0 auto;
}

.destacado-blog {
    background: linear-gradient(135deg, #f7fafc 0%, #edf2f7 100%);
    border-left: 4px solid #a0aec0;
    padding: 1.5rem;
    border-radius: 0 12px 12px 0;
    margin: 1.5rem 0;
}

/* Responsividad */
@media (max-width: 768px) {
    .seccion-contenido-blog {
        padding: 1.8rem 1.5rem;
        margin-bottom: 1.5rem;
        border-radius: 12px;
    }

    .titulo-seccion-blog {
        font-size: 1.8rem;
        margin-bottom: 1.2rem;
    }

    .subtitulo-seccion-blog {
        font-size: 1.4rem;
        margin-bottom: 0.8rem;
    }

    .parrafo-blog {
        font-size: 1rem;
        line-height: 1.7;
        margin-bottom: 1.2rem;
    }

    .destacado-blog {
        padding: 1.2rem;
        margin: 1.2rem 0;
    }
}

@media (max-width: 480px) {
    .seccion-contenido-blog {
        padding: 1.5rem 1rem;
        border-radius: 10px;
    }

    .titulo-seccion-blog {
        font-size: 1.6rem;
        line-height: 1.4;
    }

    .subtitulo-seccion-blog {
        font-size: 1.2rem;
        margin-bottom: 0.6rem;
    }

    .parrafo-blog {
        font-size: 0.95rem;
        line-height: 1.6;
    }

    .destacado-blog {
        padding: 1rem;
        border-radius: 0 8px 8px 0;
    }
}

@media (min-width: 1200px) {
    .seccion-contenido-blog {
        padding: 3rem 3.5rem;
    }

    .titulo-seccion-blog {
        font-size: 2.4rem;
    }

    .parrafo-blog {
        font-size: 1.15rem;
        line-height: 1.9;
    }

    .contenedor-texto-blog {
        max-width: 90%;
    }
}

@media (min-width: 1400px) {
    .contenedor-texto-blog {
        max-width: 90%;
    }
}

.catalogo-btn {
    background: linear-gradient(135deg, #ff7e00 0%, #ff9d45 100%);
    color: white;
    border: none;
    border-radius: 50px;
    padding: 12px 24px;
    font-weight: 600;
    font-size: 1.1rem;
    margin: 1.5rem auto;
    display: block;
    width: fit-content;
    max-width: 380px;
    text-align: center;
    text-decoration: none;
    box-shadow: 0 4px 15px rgba(255, 126, 0, 0.2);
    transition: all 0.3s ease;
}

.catalogo-btn:hover {
    background: linear-gradient(135deg, #ff9d45 0%, #ff7e00 100%);
    transform: translateY(-3px);
    box-shadow: 0 7px 20px rgba(255, 126, 0, 0.3);
    color: white;
    text-decoration: none;
}

.catalogo-btn .fa-book-open {
    margin-right: 10px;
}

@media (max-width: 768px) {
    .catalogo-btn {
        padding: 10px 20px;
        font-size: 1rem;
        width: 100%;
        max-width: none;
    }
}

.seccion-preguntas-frecuentes-blog {
    background: #fafbfc;
    padding: 3rem 0;
    border-radius: 20px;
    position: relative;
}

.contenedor-preguntas-blog {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 2rem;
}

.titulo-preguntas-blog {
    font-size: 2.5rem;
    font-weight: 700;
    color: #2d3748;
    text-align: center;
    margin-bottom: 3rem;
    position: relative;
}

.titulo-preguntas-blog::after {
    content: '';
    position: absolute;
    bottom: -12px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 4px;
    background: linear-gradient(90deg, #a0aec0, #e2e8f0);
    border-radius: 2px;
}

.tarjeta-pregunta-blog {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 15px;
    margin-bottom: 1.5rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
    overflow: hidden;
    transition: all 0.3s ease;
}

.tarjeta-pregunta-blog:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

.cabecera-pregunta-blog {
    background: #ffffff;
    border-bottom: 1px solid #f7fafc;
}

.boton-pregunta-blog {
    background: transparent;
    border: none;
    width: 100%;
    padding: 1.5rem 2rem;
    text-align: left;
    font-size: 1.1rem;
    font-weight: 600;
    color: #2d3748;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    justify-content: space-between;
    align-items: center;
    line-height: 1.4;
}

.boton-pregunta-blog:hover,
.boton-pregunta-blog:focus {
    color: #4a5568;
    background: #f7fafc;
    outline: none;
}

.icono-pregunta-blog {
    font-size: 0.9rem;
    color: #a0aec0;
    transition: transform 0.3s ease;
    margin-left: 1rem;
    flex-shrink: 0;
}

.boton-pregunta-blog:not(.collapsed) .icono-pregunta-blog {
    transform: rotate(180deg);
    color: #4a5568;
}

.cuerpo-respuesta-blog {
    padding: 1.5rem 2rem 2rem;
    background: #fdfdfe;
    border-top: 1px solid #f1f3f4;
}

.cuerpo-respuesta-blog p {
    margin: 0;
    font-size: 1rem;
    line-height: 1.7;
    color: #4a5568;
    text-align: justify;
}

.contenedor-contacto-preguntas-blog {
    margin-top: 3rem;
    text-align: center;
}

.caja-contacto-preguntas-blog {
    background: linear-gradient(135deg, #f7fafc 0%, #edf2f7 100%);
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    padding: 2.5rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.titulo-contacto-preguntas-blog {
    font-size: 1.5rem;
    font-weight: 600;
    color: #2d3748;
    margin-bottom: 1rem;
}

.texto-contacto-preguntas-blog {
    font-size: 1rem;
    color: #718096;
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

.boton-contacto-preguntas-blog {
    background: #25d366;
    color: white;
    border: none;
    border-radius: 50px;
    padding: 1rem 2rem;
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(37, 211, 102, 0.2);
}

.boton-contacto-preguntas-blog:hover {
    background: #20ba5a;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.3);
    text-decoration: none;
    color: white;
}

.boton-contacto-preguntas-blog .fab {
    font-size: 1.2rem;
}

/* Responsividad */
@media (max-width: 768px) {
    .seccion-preguntas-frecuentes-blog {
        padding: 2rem 0;
        margin: 1.5rem 0;
        border-radius: 15px;
    }

    .contenedor-preguntas-blog {
        padding: 0 1rem;
    }

    .titulo-preguntas-blog {
        font-size: 2rem;
        margin-bottom: 2rem;
    }

    .tarjeta-pregunta-blog {
        margin-bottom: 1rem;
        border-radius: 12px;
    }

    .boton-pregunta-blog {
        padding: 1.2rem 1.5rem;
        font-size: 1rem;
    }

    .cuerpo-respuesta-blog {
        padding: 1.2rem 1.5rem 1.5rem;
    }

    .cuerpo-respuesta-blog p {
        font-size: 0.95rem;
    }

    .caja-contacto-preguntas-blog {
        padding: 2rem 1.5rem;
        border-radius: 15px;
    }

    .titulo-contacto-preguntas-blog {
        font-size: 1.3rem;
    }

    .boton-contacto-preguntas-blog {
        padding: 0.8rem 1.5rem;
        font-size: 0.95rem;
    }
}

@media (max-width: 480px) {
    .seccion-preguntas-frecuentes-blog {
        padding: 1.5rem 0;
        border-radius: 12px;
    }

    .contenedor-preguntas-blog {
        padding: 0 0.75rem;
    }

    .titulo-preguntas-blog {
        font-size: 1.8rem;
        line-height: 1.3;
    }

    .boton-pregunta-blog {
        padding: 1rem 1.2rem;
        font-size: 0.95rem;
        line-height: 1.3;
    }

    .icono-pregunta-blog {
        font-size: 0.8rem;
        margin-left: 0.5rem;
    }

    .cuerpo-respuesta-blog {
        padding: 1rem 1.2rem 1.2rem;
    }

    .cuerpo-respuesta-blog p {
        font-size: 0.9rem;
        line-height: 1.6;
    }

    .caja-contacto-preguntas-blog {
        padding: 1.5rem 1rem;
    }

    .titulo-contacto-preguntas-blog {
        font-size: 1.2rem;
    }

    .texto-contacto-preguntas-blog {
        font-size: 0.9rem;
    }

    .boton-contacto-preguntas-blog {
        padding: 0.7rem 1.2rem;
        font-size: 0.9rem;
        width: 100%;
        justify-content: center;
    }
}

@media (min-width: 1200px) {
    .contenedor-preguntas-blog {
        max-width: 1000px;
        padding: 0 2.5rem;
    }

    .titulo-preguntas-blog {
        font-size: 2.8rem;
    }

    .boton-pregunta-blog {
        padding: 1.8rem 2.5rem;
        font-size: 1.15rem;
    }

    .cuerpo-respuesta-blog {
        padding: 1.8rem 2.5rem 2.2rem;
    }

    .cuerpo-respuesta-blog p {
        font-size: 1.05rem;
    }

    .caja-contacto-preguntas-blog {
        padding: 3rem;
    }
}

.seccion-cambio-compra {
    padding: 4rem 0;
    position: relative;
    overflow: hidden;
}

.titulo-cambio-compra {
    font-size: clamp(1.8rem, 4vw, 2.5rem);
    color: #2c3e50;
    font-weight: 700;
    text-align: center;
    margin-bottom: 1rem;
    position: relative;
}

.subtitulo-cambio-compra {
    font-size: clamp(1rem, 2.5vw, 1.2rem);
    color: #6c757d;
    text-align: center;
    font-weight: 300;
}

.contenedor-comparacion {
    background: white;
    border-radius: 20px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.1);
    overflow: hidden;
    margin-bottom: 2rem;
}

.lado-comparacion {
    padding: 2rem;
    position: relative;
}

.lado-antes {
    background: linear-gradient(45deg, #ff6b6b20, #ffa50020);
    border-right: 3px dashed #dee2e6;
}

.lado-ahora {
    background: linear-gradient(45deg, #4ecdc420, #45b04920);
}

.icono-comparacion {
    font-size: 3rem;
    margin-bottom: 1rem;
    display: block;
    text-align: center;
}

.titulo-lado {
    font-size: clamp(1.2rem, 3vw, 1.5rem);
    font-weight: 600;
    text-align: center;
    margin-bottom: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.lista-caracteristicas {
    list-style: none;
    padding: 0;
    margin: 0;
}

.lista-caracteristicas li {
    padding: 0.8rem 0;
    border-bottom: 1px solid rgba(0,0,0,0.1);
    font-size: clamp(0.9rem, 2vw, 1rem);
    display: flex;
    align-items: center;
    transition: transform 0.3s ease;
}

.lista-caracteristicas li:hover {
    transform: translateX(5px);
}

.lista-caracteristicas li:last-child {
    border-bottom: none;
}

.lista-caracteristicas li i {
    margin-right: 1rem;
    font-size: 1.2rem;
    width: 20px;
    text-align: center;
}

.lado-antes .lista-caracteristicas li i {
    color: #ff6b6b;
}

.lado-ahora .lista-caracteristicas li i {
    color: #4ecdc4;
}

.tarjetas-beneficios {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-top: 3rem;
}

.tarjeta-beneficio {
    background: white;
    border-radius: 15px;
    padding: 2rem;
    text-align: center;
    transition: 0.3s all ease-in-out;
    border: 4px solid #D7D0E7;
}

.tarjeta-beneficio:hover {
    -webkit-box-shadow: 10px 10px 0 #A392C8, 20px 20px 0 #8974B9;
    box-shadow: 10px 10px 0 #A392C8, 20px 20px 0 #8974B9;
    border-color: #5B468B;
    -webkit-transform: translate(-20px, -20px);
    -ms-transform: translate(-20px, -20px);
    transform: translate(-20px, -20px);
}

@media (max-width: 767px) {
    .tarjeta-beneficio:hover {
        -webkit-box-shadow: 5px 5px 0 #A392C8, 10px 10px 0 #8974B9;
        box-shadow: 5px 5px 0 #A392C8, 10px 10px 0 #8974B9;
        -webkit-transform: translate(-10px, -10px);
        -ms-transform: translate(-10px, -10px);
        transform: translate(-10px, -10px);
    }

}
.icono-beneficio {
    font-size: 3rem;
    color: #4ecdc4;
    margin-bottom: 1rem;
    display: block;
}

.titulo-beneficio {
    font-size: clamp(1rem, 2.5vw, 1.2rem);
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 0.5rem;
}

.descripcion-beneficio {
    font-size: clamp(0.85rem, 2vw, 0.95rem);
    color: #6c757d;
    line-height: 1.6;
}

.seccion-estadisticas {
    background: #2c3e50;
    color: white;
    padding: 2rem;
    border-radius: 15px;
    margin-top: 3rem;
    text-align: center;
}

.estadistica {
    margin-bottom: 1.5rem;
}

.numero-estadistica {
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 700;
    color: #4ecdc4;
    display: block;
}

.texto-estadistica {
    font-size: clamp(0.9rem, 2vw, 1rem);
    margin-top: 0.5rem;
}

.cta-final {
    background: linear-gradient(135deg, #ff6b35, #f7931e);
    color: white;
    padding: 1.2rem 2.5rem;
    border: none;
    border-radius: 15px;
    font-size: clamp(1rem, 2.5vw, 1.1rem);
    font-weight: 700;
    text-decoration: none;
    display: inline-block;
    margin-top: 2rem;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 8px 25px rgba(255, 107, 53, 0.3);
    position: relative;
    overflow: hidden;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.cta-final::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s;
}

.cta-final:hover::before {
    left: 100%;
}

.cta-final:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 15px 35px rgba(255, 107, 53, 0.4);
    color: white;
    text-decoration: none;
    background: linear-gradient(135deg, #ff5722, #ff9800);
}

.cta-final i {
    margin-left: 0.5rem;
    transition: transform 0.3s ease;
}

.cta-final:hover i {
    transform: translateX(5px);
}

@media (max-width: 768px) {
    .seccion-cambio-compra {
        padding: 2rem 0;
    }
    
    .lado-comparacion {
        padding: 1.5rem;
    }
    
    .lado-antes {
        border-right: none;
        border-bottom: 3px dashed #dee2e6;
    }
    
    .tarjetas-beneficios {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .tarjeta-beneficio {
        padding: 1.5rem;
    }
    
    .seccion-estadisticas {
        padding: 1.5rem;
    }
}

@media (max-width: 480px) {
    .lista-caracteristicas li {
        font-size: 0.85rem;
        padding: 0.6rem 0;
    }
    
    .icono-comparacion {
        font-size: 2.5rem;
    }
}

.seccion-ventajas-compra-online {
    padding: 4rem 0;
    position: relative;
    overflow: hidden;
}

.titulo-seccion-principal {
    font-size: clamp(2rem, 5vw, 3rem);
    color: #2c3e50;
    font-weight: 700;
    margin-bottom: 1rem;
    position: relative;
    z-index: 2;
}

.subtitulo-seccion {
    font-size: clamp(1.1rem, 3vw, 1.3rem);
    color: #6c757d;
    font-weight: 300;
    margin-bottom: 3rem;
    position: relative;
    z-index: 1;
}

.contenedor-ventajas {
    position: relative;
    z-index: 2;
}

.ventaja-item {
    margin-bottom: 2.5rem;
    align-items: center;
}

.contenido-ventaja {
    padding: 2rem;
    background: white;
    border-radius: 20px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.1);
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.contenido-ventaja:hover {
    transform: translateY(-10px);
    box-shadow: 0 25px 50px rgba(0,0,0,0.15);
}

.icono-ventaja {
    font-size: 3rem;
    color: #4ecdc4;
    margin-bottom: 1.5rem;
    text-align: center;
}

.titulo-ventaja {
    font-size: clamp(1.375rem, 1.2321rem + 0.7143vw, 1.875rem) !important;
    color: #2c3e50;
    font-weight: 600;
    margin-bottom: 1rem;
    text-align: center;
}

.titulo-ventaja::after {
    content: '';
    display: block;
    width: 10%;
    height: 4px;
    background: #D7D0E7;
    border-radius: 20px;
    margin: 0.5rem auto 0;
}

.tarjeta-beneficio:hover .titulo-ventaja::after {
    background: #6a52a2;
    width: 30%;
    margin: 0.5rem auto 0;
}

.tarjeta-beneficio .titulo-ventaja::after {
    transition: all 0.3s ease;
}

.subtitulo-ventaja {
    font-size: clamp(1.1rem, 3vw, 1.4rem);
    color: #6c757d;
    font-weight: 600;
    margin-bottom: 1rem;
    text-align: center;
}

.descripcion-ventaja {
    font-size: clamp(0.95rem, 2.5vw, 1.05rem);
    color: #6c757d;
    line-height: 1.7;
    margin-bottom: 1.5rem;
    text-align: center;
}

.lista-beneficios {
    list-style: none;
    padding: 0;
    margin: 0;
}

.lista-beneficios li {
    padding: 0.5rem 0;
    font-size: clamp(0.9rem, 2.3vw, 1rem);
    color: #495057;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: left;
}

.lista-beneficios li i {
    color: #28a745;
    margin-right: 0.75rem;
    font-size: 1rem;
}

.imagen-ventaja {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem;
    height: 100%;
}

.contenedor-imagen-redondeado {
    width: 200px;
    height: 200px;
    background: linear-gradient(135deg, #4ecdc4, #44a08d);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 20px 40px rgba(78, 205, 196, 0.3);
    transition: transform 0.3s ease;
}

.contenedor-imagen-redondeado:hover {
    transform: scale(1.1) rotate(5deg);
}

.icono-imagen {
    font-size: 4rem;
    color: white;
}

.seccion-cta-compra-segura {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 25px;
    padding: 3rem;
    margin-top: 3rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.seccion-cta-compra-segura::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.1);
    z-index: 1;
}

.contenido-cta-segura {
    position: relative;
    z-index: 2;
}

.icono-cta-segura {
    font-size: 4rem;
    color: #fff;
    margin-bottom: 1.5rem;
}

.titulo-cta-segura {
    font-size: clamp(1.5rem, 4vw, 2.2rem);
    color: #fff;
    font-weight: 700;
    margin-bottom: 1rem;
}

.descripcion-cta-segura {
    font-size: clamp(1rem, 2.8vw, 1.2rem);
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 2rem;
    line-height: 1.6;
}

.contenedor-botones-cta {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.boton-cta-principal, .boton-cta-secundario {
    padding: 1rem 2rem;
    border-radius: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    font-size: clamp(0.9rem, 2.5vw, 1.1rem);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 200px;
    justify-content: center;
}

.boton-cta-principal {
    background: #ff6b35;
    color: white;
    border: 2px solid #ff6b35;
}

.boton-cta-principal:hover {
    background: #ff5722;
    color: white;
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(255, 107, 53, 0.4);
    text-decoration: none;
}

.boton-cta-secundario {
    background: transparent;
    color: white;
    border: 2px solid white;
}

.boton-cta-secundario:hover {
    background: white;
    color: #667eea;
    transform: translateY(-3px);
    text-decoration: none;
}

.sellos-confianza {
    display: flex;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
}

.sello-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: rgba(255, 255, 255, 0.9);
    font-size: clamp(0.85rem, 2.2vw, 1rem);
}

.sello-item i {
    font-size: 1.2rem;
}

/* Responsive Design */
@media (max-width: 768px) {
    .seccion-ventajas-compra-online {
        padding: 2rem 0;
    }
    
    .ventaja-item {
        margin-bottom: 2rem;
    }
    
    .contenido-ventaja {
        padding: 1.5rem;
        margin-bottom: 1rem;
    }
    
    .imagen-ventaja {
        padding: 1rem;
        order: -1 !important;
    }
    
    .contenedor-imagen-redondeado {
        width: 150px;
        height: 150px;
    }
    
    .icono-imagen {
        font-size: 3rem;
    }
    
    .seccion-cta-compra-segura {
        padding: 2rem 1rem;
    }
    
    .contenedor-botones-cta {
        flex-direction: column;
        align-items: center;
    }
    
    .boton-cta-principal, .boton-cta-secundario {
        width: 100%;
        max-width: 300px;
    }
    
    .sellos-confianza {
        gap: 1rem;
    }
    
    .lista-beneficios li {
        justify-content: flex-start;
    }
}

@media (max-width: 480px) {
    .contenido-ventaja {
        padding: 1rem;
    }
    
    .icono-ventaja {
        font-size: 2.5rem;
    }
    
    .contenedor-imagen-redondeado {
        width: 120px;
        height: 120px;
    }
    
    .icono-imagen {
        font-size: 2.5rem;
    }
    
    .seccion-cta-compra-segura {
        padding: 1.5rem 0.75rem;
        margin-top: 2rem;
    }
    
    .sellos-confianza {
        flex-direction: column;
        gap: 0.5rem;
    }
}

/* Animaciones */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.ventaja-item {
    animation: fadeInUp 0.6s ease-out;
}

.ventaja-item:nth-child(even) {
    animation-delay: 0.2s;
}

.ventaja-item:nth-child(odd) {
    animation-delay: 0.4s;
}

.proceso-compra {
    margin-top: 1rem;
}

.paso-compra {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    margin-bottom: 2rem;
    position: relative;
}

.paso-compra:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 22px;
    top: 45px;
    width: 2px;
    height: calc(100% + 1rem);
    background: linear-gradient(to bottom, #4ecdc4, #e9ecef);
}

.numero-paso {
    width: 45px;
    height: 45px;
    background: linear-gradient(135deg, #4ecdc4, #44a08d);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.1rem;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(78, 205, 196, 0.3);
}

.contenido-paso h4 {
    font-size: clamp(1rem, 2.8vw, 1.2rem);
    color: #2c3e50;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.contenido-paso p {
    font-size: clamp(0.9rem, 2.3vw, 1rem);
    color: #6c757d;
    margin: 0;
    line-height: 1.5;
}

/* Responsive Design */
@media (max-width: 768px) {
    .paso-compra {
        gap: 1rem;
    }
    
    .paso-compra:not(:last-child)::after {
        left: 17px;
    }
    
    .numero-paso {
        width: 35px;
        height: 35px;
        font-size: 1rem;
    }
}
@media (max-width: 480px) {
    .numero-paso {
        width: 30px;
        height: 30px;
        font-size: 0.9rem;
    }
    
    .paso-compra:not(:last-child)::after {
        left: 14px;
    }
}

.seccion-cobertura {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: 60px 0;
    border-radius: 15px;
    margin: 40px 0;
}

.titulo-cobertura {
    color: #2c3e50;
    font-weight: 700;
    margin-bottom: 30px;
    text-align: center;
    font-size: 2.2rem;
    line-height: 1.3;
}

.subtitulo-cobertura {
    color: #34495e;
    text-align: center;
    margin-bottom: 50px;
    font-size: 1.1rem;
    font-weight: 300;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.contenedor-ciudades {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
    max-width: 1000px;
    margin: 0 auto;
}

.tarjeta-ciudad {
    background: white;
    border-radius: 12px;
    padding: 25px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
    transition: all 0.3s ease;
    border: 1px solid #e8ecef;
    text-align: center;
}

.tarjeta-ciudad:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

.icono-ubicacion {
    width: 50px;
    height: 50px;
    background: linear-gradient(45deg, #007bff, #0056b3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    color: white;
    font-size: 1.5rem;
}

.nombre-ciudad {
    font-size: 1.4rem;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 15px;
}

.descripcion-ciudad {
    color: #7f8c8d;
    font-size: 0.95rem;
    line-height: 1.5;
}

.ciudad-especial {
    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
    color: white;
}

.ciudad-especial .icono-ubicacion {
    background: rgba(255,255,255,0.2);
}

.ciudad-especial .nombre-ciudad,
.ciudad-especial .descripcion-ciudad {
    color: white;
}

.cta-cobertura {
    text-align: center;
    margin-top: 40px;
}

.boton-contacto-cobertura {
    background: linear-gradient(45deg, #28a745, #20c997);
    color: white;
    padding: 15px 35px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.1rem;
    display: inline-block;
    transition: all 0.3s ease;
    border: none;
    box-shadow: 0 4px 15px rgba(40, 167, 69, 0.3);
}

.boton-contacto-cobertura:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(40, 167, 69, 0.4);
    color: white;
    text-decoration: none;
}

@media (max-width: 768px) {
    .titulo-cobertura {
        font-size: 1.8rem;
        margin-bottom: 20px;
    }
    
    .subtitulo-cobertura {
        font-size: 1rem;
        margin-bottom: 30px;
        padding: 0 15px;
    }
    
    .contenedor-ciudades {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 0 15px;
    }
    
    .tarjeta-ciudad {
        padding: 20px;
    }
    
    .seccion-cobertura {
        padding: 40px 0;
        margin: 20px 0;
    }
    
    .boton-contacto-cobertura {
        padding: 12px 25px;
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .titulo-cobertura {
        font-size: 1.6rem;
    }
    
    .contenedor-ciudades {
        padding: 0 10px;
    }
    
    .tarjeta-ciudad {
        padding: 15px;
    }
    
    .nombre-ciudad {
        font-size: 1.2rem;
    }
}

.flag-guide {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    margin: 2rem 0;
}

.guide-step {
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    border-radius: 20px;
    padding: 2rem;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    border: 2px solid transparent;
    overflow: hidden;
}

.guide-step:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
    border-color: #ff6b35;
}

.guide-step::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #00b04f, #ffffff, #ce1126);
}

.step-number {
    position: absolute;
    top: -10px;
    right: -10px;
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #ff6b35, #ff8c42);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1.2rem;
    box-shadow: 0 4px 15px rgba(255, 107, 53, 0.3);
}

.step-content {
    text-align: center;
}

.step-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #f1f3f4, #e8eaed);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    transition: all 0.3s ease;
}

.step-icon i {
    font-size: 2rem;
    color: #5f6368;
    transition: color 0.3s ease;
}

.guide-step:hover .step-icon {
    background: linear-gradient(135deg, #ff6b35, #ff8c42);
    transform: scale(1.1);
}

.guide-step:hover .step-icon i {
    color: white;
}

.step-content h3 {
    color: #2c3e50;
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 1rem;
    transition: color 0.3s ease;
}

.guide-step:hover .step-content h3 {
    color: #ff6b35;
}

.step-content p {
    color: #6c757d;
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 0;
}

.guide-cta {
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    border-radius: 20px;
    padding: 2.5rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border: 2px solid #e9ecef;
}

.guide-cta h3 {
    color: #2c3e50;
    font-weight: 600;
    margin-bottom: 1rem;
}

.guide-cta p {
    color: #6c757d;
    margin-bottom: 2rem;
}

.btn-guide-cta {
    background: linear-gradient(135deg, #25d366, #128c7e);
    color: white;
    padding: 12px 30px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 5px 20px rgba(37, 211, 102, 0.3);
}

.btn-guide-cta:hover {
    background: linear-gradient(135deg, #128c7e, #25d366);
    color: white;
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(37, 211, 102, 0.4);
}

.btn-guide-cta i {
    font-size: 1.2rem;
}

/* Responsive Design */
@media (max-width: 768px) {
    .flag-guide {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .guide-step {
        padding: 1.5rem;
    }
    
    .step-number {
        width: 35px;
        height: 35px;
        font-size: 1rem;
    }
    
    .step-icon {
        width: 70px;
        height: 70px;
    }
    
    .step-icon i {
        font-size: 1.8rem;
    }
    
    .step-content h3 {
        font-size: 1.2rem;
    }
    
    .step-content p {
        font-size: 0.9rem;
    }
    
    .guide-cta {
        padding: 2rem 1.5rem;
    }
    
    .btn-guide-cta {
        padding: 10px 25px;
        font-size: 0.95rem;
    }
}

@media (max-width: 576px) {
    .guide-step {
        padding: 1.2rem;
    }
    
    .step-number {
        width: 30px;
        height: 30px;
        font-size: 0.9rem;
        top: -8px;
        right: -8px;
    }
    
    .step-icon {
        width: 60px;
        height: 60px;
        margin-bottom: 1rem;
    }
    
    .step-icon i {
        font-size: 1.5rem;
    }
    
    .step-content h3 {
        font-size: 1.1rem;
    }
    
    .guide-cta {
        padding: 1.5rem 1rem;
    }
    
    .guide-cta h3 {
        font-size: 1.3rem;
    }
    
    .btn-guide-cta {
        padding: 8px 20px;
        font-size: 0.9rem;
    }
}

/* Animation for steps */
    .guide-step {
        animation: banderitas 0.6s ease forwards;
        opacity: 0;
        transform: translateY(30px);
    }
    
    .guide-step:nth-child(1) { animation-delay: 0.1s; }
    .guide-step:nth-child(2) { animation-delay: 0.2s; }
    .guide-step:nth-child(3) { animation-delay: 0.3s; }
    .guide-step:nth-child(4) { animation-delay: 0.4s; }
    .guide-step:nth-child(5) { animation-delay: 0.5s; }
    .guide-step:nth-child(6) { animation-delay: 0.6s; }

@keyframes banderitas {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.telas-bebes-section {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 20px;
    margin: 40px 0;
    position: relative;
    overflow: hidden;
    padding: 20px 20px;
}

.tela-bebe-card {
    background: rgba(255, 255, 255, 0.9);
    border-radius: 15px;
    padding: 20px;
    margin: 25px 0 0 0;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.tela-bebe-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

.tela-bebe-title {
    color: #495057;
    font-weight: 600;
    margin-bottom: 10px;
    position: relative;
}

.tela-bebe-description {
    color: #6c757d;
    font-size: 14px;
    line-height: 1.6;
}

.telas-bebes-icon {
    font-size: 2.5rem;
    color: #ff6b9d;
    margin-bottom: 15px;
    display: block;
}

.tela-link {
    text-decoration: none;
    color: inherit;
    display: block;
    height: 100%;
}

.tela-link:hover {
    text-decoration: none;
    color: inherit;
}

.section-header {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 15px;
    padding: 30px;
    text-align: center;
    position: relative;
    z-index: 2;
}

.section-subtitle {
    color: #6c757d;
    font-size: 16px;
    line-height: 1.7;
    margin-top: 15px;
}

@media (max-width: 768px) {
    .telas-bebes-section {
        margin: 20px 0;
        border-radius: 15px;
    }
    
    .tela-bebe-card {
        margin: 10px 0;
        padding: 15px;
    }
    
    .telas-bebes-icon {
        font-size: 2rem;
        margin-bottom: 10px;
    }
    
    .section-header {
        padding: 20px;
        margin-bottom: 20px;
    }
    
    .section-subtitle {
        font-size: 14px;
    }
}

@media (max-width: 576px) {
    .tela-bebe-card {
        padding: 12px;
    }
    
    .tela-bebe-title {
        font-size: 16px;
        margin-bottom: 8px;
    }
    
    .tela-bebe-description {
        font-size: 13px;
    }
}

.halloween-colors-section {
    background-color: #000000;
    background-image: url('/telas-assets/telas-para-dia-de-muertos/telarana-textura.jpg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden;
    border-radius: 15px;
}

.halloween-colors-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
}

.halloween-title {
    font-size: 2.5rem;
    color: #000000;
    margin-bottom: 1rem;
    font-weight: bold;
}

.halloween-subtitle {
    color: #ccc;
    font-size: 1.2rem;
    margin-bottom: 2rem;
}

.halloween-colors-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}

.color-card {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    padding: 25px;
    border: 2px solid transparent;
    transition: all 0.4s ease;
    backdrop-filter: blur(10px);
    position: relative;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.color-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 18px;
    padding: 2px;
    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: subtract;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.color-card:hover::before {
    opacity: 1;
}

.halloween-white {
    border-color: rgba(255, 255, 255, 0.3);
}

.halloween-white:hover {
    transform: translateY(-10px);
    border-color: rgba(255, 255, 255, 0.8);
    box-shadow: 0 15px 35px rgba(255, 255, 255, 0.2);
}

.halloween-black {
    border-color: rgba(0, 0, 0, 0.5);
}

.halloween-black:hover {
    transform: translateY(-10px);
    border-color: rgba(138, 43, 226, 0.8);
    box-shadow: 0 15px 35px rgba(138, 43, 226, 0.3);
}

.halloween-orange {
    border-color: rgba(255, 140, 0, 0.3);
}

.halloween-orange:hover {
    transform: translateY(-10px);
    border-color: rgba(255, 140, 0, 0.8);
    box-shadow: 0 15px 35px rgba(255, 140, 0, 0.3);
}

.halloween-gray {
    border-color: rgba(128, 128, 128, 0.3);
}

.halloween-gray:hover {
    transform: translateY(-10px);
    border-color: rgba(128, 128, 128, 0.8);
    box-shadow: 0 15px 35px rgba(128, 128, 128, 0.2);
}

.color-header {
    text-align: center;
    margin-bottom: 20px;
}

.color-header h3 {
    color: #fff;
    font-size: 1.5rem;
    margin-bottom: 10px;
    font-weight: bold;
}

.color-badge {
    background: linear-gradient(45deg, #ff8c00, #ff6b35);
    color: white;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.color-carousel {
    margin-bottom: 20px;
    flex-grow: 1;
}

.carousel-container {
    position: relative;
    width: 100%;
    height: auto;
    overflow: hidden;
    border-radius: 15px;
    margin-bottom: 15px;
}

.carousel-track {
    display: flex;
    width: 300%;
    height: 100%;
    transition: transform 0.5s ease;
}

.carousel-slide {
    width: 33.333%;
    height: 100%;
    position: relative;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.carousel-slide.active {
    opacity: 1;
}

.carousel-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
}

.fabric-info {
    position: absolute;
    display: flex;
    justify-content: space-between;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
    color: white;
    padding: 20px 15px 15px;
    border-radius: 0 0 10px 10px;
}

.fabric-name {
    font-weight: 600;
    font-size: 1rem;
}

.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.7);
    color: white;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 10;
}

.carousel-btn:hover {
    background: rgba(255, 140, 0, 0.8);
    transform: translateY(-50%) scale(1.1);
}

.carousel-btn.prev {
    left: 10px;
}

.carousel-btn.next {
    right: 10px;
}

.carousel-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
}

.dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    cursor: pointer;
    transition: all 0.3s ease;
}

.dot.active {
    background: #ff8c00;
    transform: scale(1.2);
}

.color-description {
    text-align: center;
    margin-top: auto;
}

.color-description p {
    color: #ccc;
    font-size: 0.95rem;
    line-height: 1.5;
    margin: 0;
}

.halloween-cta {
    margin-top: 1rem;
}

.btn-halloween-special {
    display: inline-block;
    background: linear-gradient(45deg, #ff4800, #ff6b35);
    color: white;
    padding: 15px 30px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.1rem;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.btn-halloween-special:hover {
    color: white;
    text-decoration: none;
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(255, 140, 0, 0.4);
}

.btn-glow {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.6s ease;
}

.btn-halloween-special:hover .btn-glow {
    left: 100%;
}

/* Responsive */
@media (max-width: 768px) {
    .halloween-title {
        font-size: 2rem;
    }
    
    .halloween-subtitle {
        font-size: 1rem;
    }
    
    .color-card {
        padding: 20px;
    }
    
    .carousel-container {
        height: auto;
    }
    
    .carousel-btn {
        width: 35px;
        height: 35px;
    }
    
    .btn-halloween-special {
        padding: 12px 25px;
        font-size: 1rem;
    }
}

@media (max-width: 576px) {
    .halloween-title {
        font-size: 1.8rem;
    }
    
    .color-header h3 {
        font-size: 1.3rem;
    }
    
    .carousel-container {
        height: auto;
    }
    
    .fabric-info {
        padding: 15px 10px 10px;
    }
    
    .fabric-name {
        font-size: 0.9rem;
    }
}

/* Nuevo botón de WhatsApp */
.btn-timeline-whatsapp {
    font-size: clamp(0.75rem, 0.6929rem + 0.2857vw, 1.15rem);
    background: linear-gradient(135deg, #25d366 0%, #20bf55 100%);
    color: white;
    padding: 0.8rem 2rem;
    border-radius: 30px;
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-block;
    margin-top: 1rem;
    font-weight: 600;
    box-shadow: 0 4px 15px rgba(37, 211, 102, 0.3);
    position: relative;
    overflow: hidden;
}

.btn-timeline-whatsapp::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s ease;
}

.btn-timeline-whatsapp:hover::before {
    left: 100%;
}

.btn-timeline-whatsapp:hover {
    background: linear-gradient(135deg, #1da851 0%, #1ea84e 100%);
    transform: translateY(-2px);
    text-decoration: none;
    color: white;
    box-shadow: 0 8px 25px rgba(37, 211, 102, 0.4);
}

@media (max-width: 768px) {
    .btn-timeline-whatsapp {
        padding: 0.7rem 1.8rem;
    }
}

@media (max-width: 480px) {
    .btn-timeline-whatsapp {
        padding: 0.6rem 1.5rem;
    }
}

.btn-ecommerce-directo {
    background: linear-gradient(135deg, #f8d206 0%, #efcc06 100%);
    color: black;
    padding: 0.8rem 2rem;
    border-radius: 30px;
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-block;
    margin-top: 1rem;
    font-weight: 600;
    box-shadow: 0 4px 15px rgba(211, 208, 37, 0.3);
    position: relative;
    overflow: hidden;
}

.btn-ecommerce-directo::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s ease;
}

.btn-ecommerce-directo:hover::before {
    left: 100%;
}

.btn-ecommerce-directo:hover {
    background: linear-gradient(135deg, #9b8505 0%, #806e05 100%);
    transform: translateY(-2px);
    text-decoration: none;
    color: white;
    box-shadow: 0 8px 25px rgba(199, 211, 37, 0.4);
}

@media (max-width: 480px) {
    .btn-ecommerce-directo {
        padding: 0.6rem 1.5rem;
        font-size: 0.9rem;
    }
}

.specs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}

.spec-card {
    background: linear-gradient(135deg, #fff 0%, #f8f9fa 100%);
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.spec-card-wide {
    grid-column: 1 / -1;
}

.spec-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #ff6b35, #f7931e);
    border-radius: 50%;
    margin: 0 auto 1rem;
    box-shadow: 0 4px 15px rgba(247, 147, 30, 0.3);
}

.spec-icon i {
    font-size: 1.5rem;
    color: white;
}

.spec-content {
    text-align: center;
}

.spec-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.spec-value {
    font-size: 1rem;
    color: #5a6c7d;
    font-weight: 500;
    margin: 0;
    line-height: 1.4;
}

.colors-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    margin-top: 1rem;
}

.color-tag {
    background: linear-gradient(135deg, #e3f2fd, #f3e5f5);
    color: #37474f;
    padding: 0.4rem 0.8rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
    border: 1px solid rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
}

@media (max-width: 768px) {
    .specs-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .spec-card {
        padding: 1.25rem;
    }
    
    .spec-icon {
        width: 50px;
        height: 50px;
    }
    
    .spec-icon i {
        font-size: 1.25rem;
    }
    
    .spec-title {
        font-size: 1rem;
    }
    
    .spec-value {
        font-size: 0.9rem;
    }
    
    .color-tag {
        font-size: 0.8rem;
        padding: 0.3rem 0.6rem;
    }
}

.contenedor-carrusel-colores .slick-list {
    overflow: visible !important;
}

.contenedor-carrusel-colores .slick-prev.slick-arrow {
    left: -30px;
}

.contenedor-carrusel-colores .slick-next.slick-arrow {
    right: -30px;
}

.contenedor-carrusel-colores .slick-prev.slick-arrow:hover,
.contenedor-carrusel-colores .slick-next.slick-arrow:hover {
    background: #6a52a2;
    color: #ffffff;
    transform: scale(1.1);
}

.contenedor-carrusel-colores .slick-prev.slick-arrow,
.contenedor-carrusel-colores .slick-next.slick-arrow {
    width: 50px;
    height: 50px;
    z-index: 1;
    background: #ffffffa4;
    border-radius: 50%;
    display: flex !important;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.contenedor-carrusel-colores .slick-dots li.slick-active button {
    background: #6a52a2;
    width: 14px;
    height: 14px;
}

.contenedor-carrusel-colores .slick-dots li button {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #cccccc;
    transition: all 0.3s ease;
}

.elige-color {
    display: inline-block;
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 5px 5px 20px #bebebe,
                -5px -5px 20px #ffffff;
    transition: all 0.3s ease-in-out;
}
.elige-color p {
    margin: auto;
    padding: 10px 20px;
    font-weight: 600;
    color: #333333;
    transition: all 0.3s ease-in-out;
}

.contenedor-carrusel-colores {
    border: 3px solid #D7D0E7;
    padding: 30px;
    border-radius: 30px;
    background: #ffffff;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 50px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 26px -18px inset;
    overflow: hidden;
    transition: all 0.3s ease-in-out;
}

.tarjeta-beneficio:hover .elige-color {
    box-shadow: 5px 5px 15px #bebebe;
    transition: all 0.3s ease-in-out;
    background-color: #6a52a2;
}

.tarjeta-beneficio:hover .elige-color p {
    color: #ffffff;
}

.tarjeta-beneficio:hover .contenedor-carrusel-colores {
    box-shadow: rgba(50, 50, 93, 0.35) 0px 40px 60px -15px inset, rgba(0, 0, 0, 0.4) 0px 25px 35px -20px inset;
    border-color: #5B468B;
}

.contenedor-imagen-redondeado-1 {
    border-radius: 20px;
    overflow: hidden;
    transition: 0.3s all ease-in-out;
    border: 3px solid transparent;
}

.tarjeta-beneficio:hover .contenedor-imagen-redondeado-1 {
    box-shadow: 8px 8px #8974B9;
    transform: translate(-8px, -8px);
    border-color: #5B468B;
}

@media (max-width: 767px) {
    .tarjeta-beneficio:hover .contenedor-imagen-redondeado-1 {
        box-shadow: 5px 5px #8974B9;
        transform: translate(-5px, -5px);
    }

    .contenedor-carrusel-colores {
        padding: 15px;
    }

    .contenedor-carrusel-colores .slick-prev.slick-arrow,
    .contenedor-carrusel-colores .slick-next.slick-arrow {
        width: 40px;
        height: 40px;
    }

    .tarjeta-beneficio:hover .card-imagen {
        transform: rotate(-2deg) translate(-5px, -5px);
        box-shadow: 5px 5px #8974B9;
    }
}

.card-imagen {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: 0.3s all ease-in-out;
    border: 3px solid transparent;
}

.tarjeta-beneficio:hover .card-imagen {
    transform: rotate(-2deg) translate(-8px, -8px);
    box-shadow: 8px 8px #8974B9;
    border-color: #5B468B;
}

.card__content {
    display: flex;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-15deg);
    width: 100%;
    height: 100%;
    padding: 20px;
    box-sizing: border-box;
    background-color: #000000c7;
    opacity: 0;
    transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1);
}

.tarjeta-beneficio:hover .card-imagen .card__content {
    transform: translate(-50%, -50%) rotate(0deg);
    opacity: 1;
}

.card__title {
    margin: 0;
    font-size: clamp(0.875rem, 0.6964rem + 0.8929vw, 1.5rem);
    color: #ffffff;
    font-weight: 700;
}

.card__description {
    margin: 10px 0 0;
    font-size: 14px;
    color: #ffffff;
    line-height: 1.4;
}

.card-imagen img {
    transition: 0.30s all ease-in-out;
}

.tarjeta-beneficio:hover .card-imagen img {
    filter: blur(5px);
    transition: 0.30s all ease-in-out;
}

.grid-seccion {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    grid-gap: 20px;
}

.grid-seccion-1 {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

@media (max-width: 768px) {
    .grid-seccion {
        grid-template-columns: 1fr;
    }
}

.card-compra-producto {
  -webkit-transition: 0.15s all ease-in-out;
  transition: 0.15s all ease-in-out;
  border-radius: 10px;
  padding: 5px;
  border: 4px solid #D7D0E7;
  cursor: pointer;
  background-color: white;
}

.card-compra-producto:hover {
  -webkit-box-shadow: 5px 5px 0 #A392C8, 10px 10px 0 #8974B9;
  box-shadow: 5px 5px 0 #A392C8, 10px 10px 0 #8974B9;
  border-color: #5B468B;
  -webkit-transform: translate(-10px, -10px);
  -ms-transform: translate(-10px, -10px);
  transform: translate(-10px, -10px);
}

.card-compra-producto:active {
  -webkit-box-shadow: none;
  box-shadow: none;
  -webkit-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  transform: translate(0, 0);
}

.card-compra-subcontenido {
  gap: 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  place-content: flex-start;
}

.imagen-compra-redonda {
 /* class tailwind */
  border-radius: 10px;
}

.card-compra-producto:hover .card-compra-flecha {
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
  background-color: #D7D0E7;
}

.card-compra-contenido {
  padding-top: 20px;
  padding: 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 20px;
}

.card-compra-titulo {
  font-size: 1.4em;
  margin: 0;
  font-weight: 600;
  overflow: hidden;
  color: #2c3e50;
  height: 80px;
}

.flex-card-compra {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.project-type {
  background: #b2b2fd;
  color: #1a41cd;
  font-weight: bold;
  padding: 0.3em 0.7em;
  border-radius: 15px;
  font-size: 12px;
  letter-spacing: -0.6px
}

.card-compra-flecha {
  border-radius: 50%;
  width: 50px;
  height: 50px;
  padding: 9px;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.imagen-compra-contenedor {
  width: 100%;
  transition: all 0.15s ease-in-out;
  overflow: hidden;
}

.card-compra-producto:hover .imagen-compra-contenedor img  {
  transform: scale(1.1);
  -webkit-transform: scale(1.1);
  background-color: #A392C8;
}

.card-compra-producto:active .imagen-compra-contenedor img  {
  transform: scale(1);
  -webkit-transform: scale(1);
}

.card-compra-producto:hover .card-compra-titulo {
  color: #5B468B;
}

.imagen-compra-contenedor img {
  width: 100%;
  height: 100%;
  object-fit:contain;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.titulo-compra-producto h2 {
  margin: 0;
  font-size: 1.5em;
  font-weight: 600;
  color: #343a40;
  text-align: center;
}

@media (max-width: 768px) {
  .card-compra-producto:hover {
    -webkit-transform: translate(-10px, -10px);
    -ms-transform: translate(-10px, -10px);
    transform: translate(-10px, -10px);
    box-shadow: 5px 5px 0 #A392C8, 10px 10px 0 #8974B9;
    -webkit-box-shadow: 5px 5px 0 #A392C8, 10px 10px 0 #8974B9;
  }
  .card-compra-titulo {
    font-size: 1.3em;
    height: auto;
  }
}

@media (max-width: 480px) {
  .card-compra-producto:hover {
    -webkit-transform: translate(-5px, -5px);
    -ms-transform: translate(-5px, -5px);
    transform: translate(-5px, -5px);
    box-shadow: 2px 2px 0 #A392C8, 5px 5px 0 #8974B9;
    -webkit-box-shadow: 2px 2px 0 #A392C8, 5px 5px 0 #8974B9;
  }
  .card-compra-titulo {
    font-size: 1em;
    height: auto;
  }
}

.portada-video {
    position: relative;
    cursor: pointer;
    isolation: isolate;
}
.portada-video img {
    width: 100%;
    border-radius: 20px;
    height: auto;
    display: block;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    filter: brightness(0.9);
    transition: filter 0.25s ease, transform 0.25s ease;
}
.tarjeta-beneficio-video:hover .portada-video img {
    transform: scale(1.01);
}
.boton-play {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    border: 0;
    display: grid;
    place-items: center;
    color: #fff;
    background: radial-gradient(ellipse at center, #f46543 0%, #6a52a2 100%);
    box-shadow: 0 8px 20px rgba(106,82,162,0.4);
    transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
    opacity: 0.95;
}
.boton-play i {
    font-size: 26px;
    margin-left: 3px;
}
.portada-video:hover .boton-play,
.boton-play:focus {
    transform: scale(1.06);
    box-shadow: 0 12px 28px rgba(106,82,162,0.5);
    opacity: 1;
    outline: none;
}

.contenido-video {
    padding: 36px 18px 0px 18px;
}
.titulo-video {
    font-size: 1.25rem;
    font-weight: 700;
    color: #333;
    margin: 0 0 8px 0;
}
.descripcion-video {
    color: #555;
    margin: 0 0 14px 0;
    line-height: 1.6;
}
.acciones-video {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
}
.cta-ver-video {
    background: #ffcc00;
    color: #000;
    font-weight: 700;
    border-radius: 28px;
    border: 0;
    padding: 10px 18px;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
.cta-ver-video:hover {
    transform: translateY(-2px);
    background: #f5c000;
    box-shadow: 0 6px 14px rgba(0,0,0,0.15);
}

/* Contenedor responsivo para iframe 16:9 */
.marco-video {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    background: #000;
    overflow: hidden;
}
.marco-video iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 0;
}

@media (max-width: 576px) {
    .titulo-video { font-size: 1.05rem; }
    .descripcion-video { font-size: 0.95rem; }
    .boton-play { width: 62px; height: 62px; }
}

/* Corrige la alineación del acordeón */
#accordion .card-header .btn-link {
    white-space: normal;
    word-wrap: break-word;
    display: flex;
    align-items: flex-start;
    text-align: left;
    justify-content: flex-start; /* Fuerza alineación a la izquierda */
}

#accordion .card-header .btn-link i {
    margin-right: 10px;
    margin-top: 3px;
    flex-shrink: 0;
    margin-left: 0 !important; /* Anula el mx-auto */
    margin-right: 10px !important;
}

/* Nuevo bloque para landings Above the fold con cta's para cotización por whatsapp y ecommerce */
.comfy-block {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 8px 16px -8px rgba(0,0,0,0.1);
    padding: 20px 16px;
    margin-bottom: 2rem;
    border: 1px solid #f0f2f5;
    transition: transform 0.3s ease;
}
.comfy-block:hover {
    transform: translateY(-2px);
}
.comfy-title {
    font-weight: 800;
    color: #1a1a1a;
    font-family: 'Nunito', sans-serif;
    font-size: 1.25rem;
    margin-bottom: 1.2rem;
    letter-spacing: -0.5px;
}
.comfy-content {
    font-size: 0.95rem;
    color: #333;
    line-height: 1.5;
    margin-bottom: 1.5rem;
    font-weight: 500;
}
.comfy-btn {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    border-radius: 12px;
    text-decoration: none !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
    overflow: hidden;
    border: none;
    margin-bottom: 0.25rem;
    text-align: left;
}
.comfy-btn:hover {
    transform: translateY(-2px) scale(1.005);
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
}
.comfy-primary {
    background: linear-gradient(135deg, #25D366 0%, #128C7E 100%); /* WhatsApp Green */
    color: white !important;
}
.comfy-secondary {
    background: #FFC107; /* Warning Yellow */
    color: #212529 !important;
    border: 2px solid #FFC107;
}
.comfy-secondary:hover {
    background: #FFCA2C;
    border-color: #FFC720;
}
.btn-icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    margin-right: 12px;
    flex-shrink: 0;
    background: rgba(255,255,255,0.2);
}
.comfy-secondary .btn-icon-wrapper {
    background: rgba(255,255,255,0.4);
    color: #212529;
    box-shadow: none;
}
.btn-icon {
    font-size: 1.2rem;
}
.btn-text-group {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}
.btn-main-text {
    font-weight: 800;
    font-size: 0.95rem;
    display: block;
    margin-bottom: 1px;
}
.btn-sub-text {
    font-size: 0.75rem;
    opacity: 0.95;
    font-weight: 600;
}
.comfy-hint {
    font-size: 0.75rem;
    color: #868e96;
    margin-top: 4px;
    margin-bottom: 16px;
    display: block;
    font-weight: 500;
    line-height: 1.3;
    padding-left: 4px;
}
/* Mobile tweaks */
@media (max-width: 576px) {
    .comfy-block { padding: 16px 12px; }
    .btn-icon-wrapper { width: 32px; height: 32px; margin-right: 10px; }
    .btn-icon { font-size: 1.1rem; }
    .btn-main-text { font-size: 0.9rem; }
    .btn-sub-text { font-size: 0.7rem; }
}