@font-face {
    font-family: 'Effra';
    src: url('../font/fonts/Effra_Rg.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'Effra';
    src: url('../font/fonts/Effra_Rg.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}




@font-face {
    font-family: 'Linearicons-Free';
    src: url('../font/fonts/Linearicons-Free.eot?w118d');
    src: url('../font/fonts/Linearicons-Free.eot?#iefixw118d') format('embedded-opentype'), url('../font/fonts/Linearicons-Free.woff2?w118d') format('woff2'), url('../font/fonts/Linearicons-Free.woff?w118d') format('woff'), url('../font/fonts/Linearicons-Free.ttf?w118d') format('truetype'), url('../font/fonts/Linearicons-Free.svg?w118d#Linearicons-Free') format('svg');
    font-weight: normal;
    font-style: normal;
}

.lnr {
    font-family: 'Linearicons-Free';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.lnr-home:before {
    content: "\e800";
}

.lnr-apartment:before {
    content: "\e801";
}

.lnr-pencil:before {
    content: "\e802";
}

.lnr-magic-wand:before {
    content: "\e803";
}

.lnr-drop:before {
    content: "\e804";
}

.lnr-lighter:before {
    content: "\e805";
}

.lnr-poop:before {
    content: "\e806";
}

.lnr-sun:before {
    content: "\e807";
}

.lnr-moon:before {
    content: "\e808";
}

.lnr-cloud:before {
    content: "\e809";
}

.lnr-cloud-upload:before {
    content: "\e80a";
}

.lnr-cloud-download:before {
    content: "\e80b";
}

.lnr-cloud-sync:before {
    content: "\e80c";
}

.lnr-cloud-check:before {
    content: "\e80d";
}

.lnr-database:before {
    content: "\e80e";
}

.lnr-lock:before {
    content: "\e80f";
}

.lnr-cog:before {
    content: "\e810";
}

.lnr-trash:before {
    content: "\e811";
}

.lnr-dice:before {
    content: "\e812";
}

.lnr-heart:before {
    content: "\e813";
}

.lnr-star:before {
    content: "\e814";
}

.lnr-star-half:before {
    content: "\e815";
}

.lnr-star-empty:before {
    content: "\e816";
}

.lnr-flag:before {
    content: "\e817";
}

.lnr-envelope:before {
    content: "\e818";
}

.lnr-paperclip:before {
    content: "\e819";
}

.lnr-inbox:before {
    content: "\e81a";
}

.lnr-eye:before {
    content: "\e81b";
}

.lnr-printer:before {
    content: "\e81c";
}

.lnr-file-empty:before {
    content: "\e81d";
}

.lnr-file-add:before {
    content: "\e81e";
}

.lnr-enter:before {
    content: "\e81f";
}

.lnr-exit:before {
    content: "\e820";
}

.lnr-graduation-hat:before {
    content: "\e821";
}

.lnr-license:before {
    content: "\e822";
}

.lnr-music-note:before {
    content: "\e823";
}

.lnr-film-play:before {
    content: "\e824";
}

.lnr-camera-video:before {
    content: "\e825";
}

.lnr-camera:before {
    content: "\e826";
}

.lnr-picture:before {
    content: "\e827";
}

.lnr-book:before {
    content: "\e828";
}

.lnr-bookmark:before {
    content: "\e829";
}

.lnr-user:before {
    content: "\e82a";
}

.lnr-users:before {
    content: "\e82b";
}

.lnr-shirt:before {
    content: "\e82c";
}

.lnr-store:before {
    content: "\e82d";
}

.lnr-cart:before {
    content: "\e82e";
}

.lnr-tag:before {
    content: "\e82f";
}

.lnr-phone-handset:before {
    content: "\e830";
}

.lnr-phone:before {
    content: "\e831";
}

.lnr-pushpin:before {
    content: "\e832";
}

.lnr-map-marker:before {
    content: "\e833";
}

.lnr-map:before {
    content: "\e834";
}

.lnr-location:before {
    content: "\e835";
}

.lnr-calendar-full:before {
    content: "\e836";
}

.lnr-keyboard:before {
    content: "\e837";
}

.lnr-spell-check:before {
    content: "\e838";
}

.lnr-screen:before {
    content: "\e839";
}

.lnr-smartphone:before {
    content: "\e83a";
}

.lnr-tablet:before {
    content: "\e83b";
}

.lnr-laptop:before {
    content: "\e83c";
}

.lnr-laptop-phone:before {
    content: "\e83d";
}

.lnr-power-switch:before {
    content: "\e83e";
}

.lnr-bubble:before {
    content: "\e83f";
}

.lnr-heart-pulse:before {
    content: "\e840";
}

.lnr-construction:before {
    content: "\e841";
}

.lnr-pie-chart:before {
    content: "\e842";
}

.lnr-chart-bars:before {
    content: "\e843";
}

.lnr-gift:before {
    content: "\e844";
}

.lnr-diamond:before {
    content: "\e845";
}

.lnr-linearicons:before {
    content: "\e846";
}

.lnr-dinner:before {
    content: "\e847";
}

.lnr-coffee-cup:before {
    content: "\e848";
}

.lnr-leaf:before {
    content: "\e849";
}

.lnr-paw:before {
    content: "\e84a";
}

.lnr-rocket:before {
    content: "\e84b";
}

.lnr-briefcase:before {
    content: "\e84c";
}

.lnr-bus:before {
    content: "\e84d";
}

.lnr-car:before {
    content: "\e84e";
}

.lnr-train:before {
    content: "\e84f";
}

.lnr-bicycle:before {
    content: "\e850";
}

.lnr-wheelchair:before {
    content: "\e851";
}

.lnr-select:before {
    content: "\e852";
}

.lnr-earth:before {
    content: "\e853";
}

.lnr-smile:before {
    content: "\e854";
}

.lnr-sad:before {
    content: "\e855";
}

.lnr-neutral:before {
    content: "\e856";
}

.lnr-mustache:before {
    content: "\e857";
}

.lnr-alarm:before {
    content: "\e858";
}

.lnr-bullhorn:before {
    content: "\e859";
}

.lnr-volume-high:before {
    content: "\e85a";
}

.lnr-volume-medium:before {
    content: "\e85b";
}

.lnr-volume-low:before {
    content: "\e85c";
}

.lnr-volume:before {
    content: "\e85d";
}

.lnr-mic:before {
    content: "\e85e";
}

.lnr-hourglass:before {
    content: "\e85f";
}

.lnr-undo:before {
    content: "\e860";
}

.lnr-redo:before {
    content: "\e861";
}

.lnr-sync:before {
    content: "\e862";
}

.lnr-history:before {
    content: "\e863";
}

.lnr-clock:before {
    content: "\e864";
}

.lnr-download:before {
    content: "\e865";
}

.lnr-upload:before {
    content: "\e866";
}

.lnr-enter-down:before {
    content: "\e867";
}

.lnr-exit-up:before {
    content: "\e868";
}

.lnr-bug:before {
    content: "\e869";
}

.lnr-code:before {
    content: "\e86a";
}

.lnr-link:before {
    content: "\e86b";
}

.lnr-unlink:before {
    content: "\e86c";
}

.lnr-thumbs-up:before {
    content: "\e86d";
}

.lnr-thumbs-down:before {
    content: "\e86e";
}

.lnr-magnifier:before {
    content: "\e86f";
}

.lnr-cross:before {
    content: "\e870";
}

.lnr-menu:before {
    content: "\e871";
}

.lnr-list:before {
    content: "\e872";
}

.lnr-chevron-up:before {
    content: "\e873";
}

.lnr-chevron-down:before {
    content: "\e874";
}

.lnr-chevron-left:before {
    content: "\e875";
}

.lnr-chevron-right:before {
    content: "\e876";
}

.lnr-arrow-up:before {
    content: "\e877";
}

.lnr-arrow-down:before {
    content: "\e878";
}

.lnr-arrow-left:before {
    content: "\e879";
}

.lnr-arrow-right:before {
    content: "\e87a";
}

.lnr-move:before {
    content: "\e87b";
}

.lnr-warning:before {
    content: "\e87c";
}

.lnr-question-circle:before {
    content: "\e87d";
}

.lnr-menu-circle:before {
    content: "\e87e";
}

.lnr-checkmark-circle:before {
    content: "\e87f";
}

.lnr-cross-circle:before {
    content: "\e880";
}

.lnr-plus-circle:before {
    content: "\e881";
}

.lnr-circle-minus:before {
    content: "\e882";
}

.lnr-arrow-up-circle:before {
    content: "\e883";
}

.lnr-arrow-down-circle:before {
    content: "\e884";
}

.lnr-arrow-left-circle:before {
    content: "\e885";
}

.lnr-arrow-right-circle:before {
    content: "\e886";
}

.lnr-chevron-up-circle:before {
    content: "\e887";
}

.lnr-chevron-down-circle:before {
    content: "\e888";
}

.lnr-chevron-left-circle:before {
    content: "\e889";
}

.lnr-chevron-right-circle:before {
    content: "\e88a";
}

.lnr-crop:before {
    content: "\e88b";
}

.lnr-frame-expand:before {
    content: "\e88c";
}

.lnr-frame-contract:before {
    content: "\e88d";
}

.lnr-layers:before {
    content: "\e88e";
}

.lnr-funnel:before {
    content: "\e88f";
}

.lnr-text-format:before {
    content: "\e890";
}

.lnr-text-format-remove:before {
    content: "\e891";
}

.lnr-text-size:before {
    content: "\e892";
}

.lnr-bold:before {
    content: "\e893";
}

.lnr-italic:before {
    content: "\e894";
}

.lnr-underline:before {
    content: "\e895";
}

.lnr-strikethrough:before {
    content: "\e896";
}

.lnr-highlight:before {
    content: "\e897";
}

.lnr-text-align-left:before {
    content: "\e898";
}

.lnr-text-align-center:before {
    content: "\e899";
}

.lnr-text-align-right:before {
    content: "\e89a";
}

.lnr-text-align-justify:before {
    content: "\e89b";
}

.lnr-line-spacing:before {
    content: "\e89c";
}

.lnr-indent-increase:before {
    content: "\e89d";
}

.lnr-indent-decrease:before {
    content: "\e89e";
}

.lnr-pilcrow:before {
    content: "\e89f";
}

.lnr-direction-ltr:before {
    content: "\e8a0";
}

.lnr-direction-rtl:before {
    content: "\e8a1";
}

.lnr-page-break:before {
    content: "\e8a2";
}

.lnr-sort-alpha-asc:before {
    content: "\e8a3";
}

.lnr-sort-amount-asc:before {
    content: "\e8a4";
}

.lnr-hand:before {
    content: "\e8a5";
}

.lnr-pointer-up:before {
    content: "\e8a6";
}

.lnr-pointer-right:before {
    content: "\e8a7";
}

.lnr-pointer-down:before {
    content: "\e8a8";
}

.lnr-pointer-left:before {
    content: "\e8a9";
}




/* =====================================================================
   BASE — HTML y BODY
   ===================================================================== */
html,
body {
    height: 100%;
    font-family: 'Effra', sans-serif;
}

p {
    margin-top: 0;
    margin-bottom: 1rem;
    font-size: 14px;
}

a:hover {
    color: inherit;
    text-decoration: none;
}


/* =====================================================================
   LAYOUT — CONTENEDOR PRINCIPAL
   ===================================================================== */
#containers {
    min-height: 100%;
    margin-bottom: -20px;
    position: relative;
}

body .navbar-dark .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='%23003479' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

    #containers nav.navbar {
        position: fixed !important;
        top: 0px;
        margin-top: 0px;
    }

.layout-body {
    padding-top: 0;
    padding-bottom: 65px;
}

.clear {
    height: 50px;
    clear: both;
}

.DivSecc:after {
    display: block;
    content: " ";
    margin-top: -500px;
    height: 500px;
    visibility: hidden;
}


/* =====================================================================
   NAVBAR
   ===================================================================== */
.navbar {
    padding: 0rem;
}

    .navbar .nav-link {
        font-family: 'Aptos Black', sans-serif;
        font-weight: 700;
        text-align: center;
    }

.navbar-brand {
    padding-top: 0rem;
    padding-bottom: 0rem;
    margin-right: 2rem;
    padding: 0.5rem 0rem;
}

.logo {
    width: auto;
    height: 48px;
}

ul.navbar-nav {
    margin-top: 1px;
}

.navbar-dark .navbar-nav .nav-link {
    color: #000;
    display: flex;
    align-items: center;
    font-size: 23px;
    padding: 20px;
    height: 57px;
    cursor: pointer;
}

    .navbar-dark .navbar-nav .nav-link .nav-link-icon {
        color: #000;
        font-size: 1.1rem;
        width: 30px;
        text-align: center;
        opacity: .75;
        margin-left: -10px;
    }

    .navbar-dark .navbar-nav .nav-link:hover,
    .navbar-dark .navbar-nav .nav-link:focus,
    .navbar-dark .navbar-nav .nav-link a:hover,
    .navbar-dark .navbar-nav .nav-link a:focus {
        color: #003479;
    }

.navbar-nav .nav-item.active .nav-link {
    color: #003479 !important;
    border-bottom: 3px solid #003479;
    padding-bottom: calc(0.5rem - 3px);
}

.navbar-nav .nav-link:hover {
    color: #0080D6 !important;
}

#navbarCollapse .dropdown a.nav-link:hover,
#navbarCollapse .nav-item a.nav-link:hover,
#navbarCollapse .nav-item a.nav-link:active {
    color: rgb(0 0 0) !important;
    background: rgb(255 255 255 / 75%);
}

    #navbarCollapse .dropdown a.nav-link:hover i,
    #navbarCollapse .nav-item a.nav-link:hover i,
    #navbarCollapse .nav-item a.nav-link:active i {
        color: rgb(0 0 0) !important;
    }

.bg-dark {
    background-color: #ffff !important;
}

.bg-shop {
    color: rgb(255 255 255);
    display: flex;
    align-items: center;
    font-weight: 300;
    font-size: 13.3333px;
    text-align: center;
}

    .bg-shop a {
        color: #ffffff;
    }

.bg-search {
    color: rgb(255 255 255);
    display: flex;
    align-items: center;
    font-weight: 300;
    font-size: 13.3333px;
    text-align: center;
}

    .bg-search a {
        color: #ffffff;
    }

.bg-redosel {
    color: rgb(255 255 255);
}

.bg-phone {
    background-color: rgb(19 68 148 / 90%);
    color: rgb(255 255 255);
    display: flex;
    align-items: center;
    font-weight: 300;
    font-size: 13.3333px;
    text-align: center;
}

    .bg-phone a {
        color: #ffffff;
    }

.navbar-dark .navbar-nav .bg-shop .nav-link,
.navbar-dark .navbar-nav .bg-search .nav-link,
.navbar-dark .navbar-nav .bg-phone .nav-link {
    padding: 10px;
}

.btn .nav-link-icon {
    margin-right: 15px;
}

.bg-search .btn-nav {
    color: #fff;
    background: rgb(2 39 113);
    border-radius: 100px;
    height: 45px !important;
    width: 45px !important;
    border: 2px solid #043598;
}

.bg-phone .btn-nav {
    color: #fff;
}

.btn-nav {
    height: 75px !important;
    width: 100% !important;
    margin: auto;
    display: flex !important;
    align-items: center !important;
    justify-content: center;
}

.btn-navbar {
    width: auto !important;
}

.btn-nav i.lnr {
    width: auto !important;
    font-size: 22px !important;
}

.icon-control {
    margin-top: 0px;
    float: right;
    font-size: 2rem;
}

.ubica-tienda .btn-nav {
    height: auto !important;
    width: auto !important;
    display: flex !important;
    flex-direction: row;
    align-items: center;
    padding: 0 8px;
    gap: 4px;
}

.ubica-tienda span {
    font-size: 13px;
    max-width: 70px;
    white-space: normal;
    line-height: 1.2;
    text-align: left;
    color: #636569;
}

.icono-mapa {
    font-size: 22px;
    width: auto;
    height: auto;
    margin-left: 0;
    color: #003479;
}

.btn-red-osel {
    background-color: #003479;
    color: #fff !important;
    border-radius: 8px !important;
    padding: 6px 14px !important;
    width: auto;
    height: auto;
    margin-left: 10px;
    margin-right: 10px;
    font-size: 15px;
    font-weight: 600;
    gap: 6px;
    transition: background-color 0.3s ease;
    display: flex !important;
    align-items: center;
    justify-content: center;
    align-self: center;
    white-space: nowrap;
}

    .btn-red-osel i {
        font-size: 18px;
    }

    .btn-red-osel:hover {
        background-color: #006bb5;
        color: #fff;
        text-decoration: none;
    }


/* =====================================================================
   DROPDOWN
   ===================================================================== */
.dropdown-toggle:after {
    display: inline-block;
    margin-left: 5px;
    vertical-align: 5px;
    content: "";
    border-top: 4px solid;
    border-right: 4px solid transparent;
    border-bottom: 0;
    border-left: 4px solid transparent;
}

.dropdown:hover .dropdown-menu {
    display: block;
    margin-top: 0px;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
}

.dropdown-menu {
    background-color: transparent;
}

    .dropdown-menu.multi-column {
        width: max-content;
        background: rgb(255 255 255 / 98%);
    }

        .dropdown-menu.multi-column .dropdown-menu {
            display: block !important;
            position: static !important;
            margin: 0 !important;
            border: none !important;
            box-shadow: none !important;
            min-width: 90px;
            padding-top: 0px;
        }

    .dropdown-menu a:hover {
        background-color: #e2e2e2;
        color: black;
        border-radius: 10px;
    }

.dropdown-item {
    text-align: center;
    padding: 0.75rem;
    color: #6b6b6b;
    font-size: 12px;
}

a.dropdown-item p {
    margin-top: 0.50rem;
    margin-bottom: 0.25rem;
    font-size: 14px;
}


/* =====================================================================
   CAROUSEL — HEADER / SLIDE PRINCIPAL
   ===================================================================== */
#header-slide {
    margin-top: 0;
    padding: 0 !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    overflow: hidden;
}

    #header-slide .carousel-item {
        position: relative;
    }

        #header-slide .carousel-item > div {
            height: 100%;
        }

        #header-slide .carousel-item img {
            width: 100%;
            height: 100%;
            display: block;
        }

        #header-slide .carousel-item iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

    #header-slide.container-fluid {
        padding-right: 0 !important;
        padding-left: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    #header-slide .carousel-indicators-new {
        position: absolute !important;
        bottom: 14px !important;
        left: 0 !important;
        right: 0 !important;
        margin: 0 auto !important;
        z-index: 20;
        justify-content: center;
        display: flex !important;
    }

        #header-slide .carousel-indicators-new li {
            width: 12px !important;
            height: 12px !important;
            border-radius: 50% !important;
            background-color: #aac2dd !important;
            border-top: none !important;
            border-bottom: none !important;
            opacity: 1 !important;
            margin: 0 4px !important;
            cursor: pointer;
        }

            #header-slide .carousel-indicators-new li.active {
                background-color: #003479 !important;
            }

.fondo-slide {
    background-color: #fff;
}

.slider-media {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
}


/* =====================================================================
   CAROUSEL — CAPTION / SLIDE
   ===================================================================== */
.carousel-caption {
    bottom: 3rem;
    z-index: 10;
}

.carousel-indicators li {
    width: 15px;
    height: 15px;
    border-radius: 100%;
    display: inline-flex !important;
    background-color: #0080D6;
}

.carousel-indicators {
    margin-right: auto;
    margin-left: auto;
    left: 0;
    right: 0;
}

.carousel-control-prev,
.carousel-control-next {
    width: 5%;
}

.caption-slide {
    font-size: 28px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 200;
    font-style: italic;
    word-spacing: 7px;
    text-shadow: 2px 2px 1px #00000080;
}

.carousel-caption-medium {
    top: 100px;
    width: 600px;
    text-align: right;
    left: 52%;
    padding-left: 1rem;
}

.carousel-caption-top {
    top: 31%;
    left: 25%;
    text-align: right;
    box-shadow: inset 1px 4px 6px #b3b3b3;
}

.slide-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}

.carousel-caption-left {
    position: absolute;
    top: 50%;
    left: 4%;
    transform: translateY(-50%);
    width: 40%;
    z-index: 10;
    text-align: left;
    padding: 0;
}

.caption-slide-title {
    font-size: 32px;
    font-weight: 700;
    color: #003479;
    font-family: 'Effra', sans-serif;
    line-height: 1.25;
    margin-bottom: 14px;
    text-shadow: none;
}

.caption-slide-desc {
    font-size: 14px;
    color: #444;
    line-height: 1.6;
    margin-bottom: 22px;
    font-family: 'Montserrat', sans-serif;
}

.caption-slide-btns {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.btn-slide-primary {
    background-color: #003479;
    color: #fff !important;
    border: 2px solid #003479;
    padding: 9px 22px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.2s;
}

    .btn-slide-primary:hover {
        background-color: #0055a5;
        border-color: #0055a5;
        color: #fff !important;
        text-decoration: none;
    }

.btn-slide-outline {
    background-color: transparent;
    color: #003479 !important;
    border: 2px solid #003479;
    padding: 9px 22px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.2s, color 0.2s;
}

    .btn-slide-outline:hover {
        background-color: #003479;
        color: #fff !important;
        text-decoration: none;
    }

/* =====================================================================
   SECCIÓN PROMOCIONES
   ===================================================================== */
#section-promociones {
    width: 100%;
    background: transparent;
    padding: 0 8px;
}

#row-promociones {
    gap: 8px;
    padding: 0 8px;
    flex-wrap: wrap; 
}

.col-promo {
    padding: 0;
    /*flex: 1 1 100%;*/
    width: 100%;
}

    .col-promo:first-child {
        padding-left: 0;
    }

    .col-promo:last-child {
        padding-right: 0;
    }


.card-promo {
    border-radius: 12px;
    display: block;
    position: relative;
    overflow: hidden;
    text-decoration: none;
    color: #fff;
    cursor: pointer;
    height: 130px;
}

    .card-promo:hover {
        color: #fff;
        text-decoration: none;
    }

    .card-promo img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        display: block;
        transition: transform 0.3s ease;
    }

    .card-promo:hover img {
        transform: scale(1.06);
    }

.col-promo + .col-promo .card-promo {
    border-left: 1px solid rgba(255, 255, 255, 0.15);
}

.card-promo-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 10px 12px 10px;
}

.card-promo-title {
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 6px;
    line-height: 1.3;
    font-family: 'Aptos Black', sans-serif;
}

.card-promo-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.card-promo-ver {
    font-size: 11px;
    color: #9bb9e8;
}

.card-promo-play {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.2);
    flex-shrink: 0;
    transition: background 0.2s;
}

.card-promo:hover .card-promo-play {
    background: rgba(255, 255, 255, 0.35);
}

.card-promo-play .lnr {
    font-size: 12px;
    color: #fff;
    margin-left: 2px;
}


/* =====================================================================
   SECCIÓN ¿QUÉ ESTÁS BUSCANDO HOY?
   ===================================================================== */
.section-qbh {
    padding: 10px 0 50px;
    background: #fff;
}

.titulo-qbh {
    font-size: 26px;
    font-weight: 700;
    color: #003479;
    margin-bottom: 28px;
    margin-top: 28px;
}

.row-qbh {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.card-qbh {
    flex: 1 1 200px;
    min-width: 180px;
    background: #fff;
    border-radius: 14px;
    border: 1.5px solid #e2e8f2;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    transition: box-shadow .2s, transform .2s;
    box-shadow: 0 2px 8px rgba(0,52,121,.06);
}

    .card-qbh:hover {
        box-shadow: 0 6px 22px rgba(0,52,121,.13);
        transform: translateY(-3px);
        text-decoration: none;
        color: inherit;
    }

.card-qbh-content {
    padding: 18px 14px 16px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.card-qbh-icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #003479;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
    flex-shrink: 0;
}

    .card-qbh-icon .lnr {
        color: #fff;
        font-size: 20px;
    }

.card-qbh-title {
    font-size: 15px;
    font-weight: 700;
    color: #003479;
    line-height: 1.25;
}

.card-qbh-desc {
    font-size: 12px;
    color: #636569;
    line-height: 1.4;
    flex: 1;
}

.card-qbh-arrow {
    font-size: 18px;
    color: #003479;
    font-weight: 700;
    margin-top: 8px;
    display: block;
}

.card-qbh-img {
    width: 110px;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: 0 12px 12px 0;
}

    .card-qbh-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }


/* =====================================================================
   SECCIÓN EXPLORA POR ESPACIO
   ===================================================================== */
.explora-section {
    background: #fff;
    padding-bottom: 60px;
    overflow: hidden;
}

.explora-banner {
    background-image: url('../images/carousel-ideas/banner/fondo_explora_espacio.png');
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
    min-height: 15rem;
    width: 100%;
    position: relative;
}

.explora-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding-top: 20px;
    position: relative;
    z-index: 2;
}

.explora-header {
    max-width: 420px;
    padding-top: 2.5rem 0;
}

.explora-titulo {
    font-size: 42px;
    font-weight: 700;
    color: #003479;
    margin-bottom: 12px;
    line-height: 1.15;
}

.explora-desc {
    font-size: 14px;
    color: #636569;
    line-height: 1.7;
    margin-bottom: 16px;
}

.explora-linea {
    width: 40px;
    height: 3px;
    background-color: #003479;
}

.explora-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    position: relative;
    z-index: 3;
    margin-top: -95px;
}

.explora-card {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    display: block;
    text-decoration: none;
    color: #fff;
    cursor: pointer;
    height: 190px;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    box-shadow: 0 2px 10px rgba(0,52,121,0.10);
}

    .explora-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 24px rgba(0,52,121,0.18);
        text-decoration: none;
        color: #fff;
    }

    .explora-card > img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        display: block;
        transition: transform 0.3s ease;
    }

    .explora-card:hover > img {
        transform: scale(1.05);
    }

.explora-card-body {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 14px;
}

.explora-card-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.explora-card-nombre {
    font-size: 17px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 3px;
    line-height: 1.2;
    font-family: 'Aptos Black', sans-serif;
}

.explora-card-desc {
    font-size: 11px;
    color: rgba(255,255,255,0.85);
    margin: 0 0 6px;
    line-height: 1.4;
}

.explora-card-arrow {
    position: absolute;
    bottom: 12px;
    right: 12px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1.5px solid rgba(255,255,255,0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #fff;
    background: rgba(255,255,255,0.15);
    transition: background 0.2s;
}

.explora-card:hover .explora-card-arrow {
    background: rgba(255,255,255,0.30);
}


/* =====================================================================
   SECCIÓN IDEAS — TENDENCIAS
   ===================================================================== */
.bg-ideas-tendencias {
    background: #c4eeff;
}

.bg-ideas-sucursales {
    background: #eee6d4;
}

.tags-text-right p {
    position: absolute;
    width: 300px;
    z-index: 2;
    top: 53px;
    left: -14px;
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    padding: 7px;
    padding-left: 34px;
    background-color: #343a40 !important;
    box-shadow: 4px 4px 8px 0px #1010107d;
}

.tags-text-left p {
    position: absolute;
    width: 300px;
    z-index: 2;
    top: 53px;
    right: -14px;
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    padding: 7px;
    padding-left: 34px;
    background-color: #343a40 !important;
    box-shadow: 4px 4px 8px 0px #1010107d;
}

.contenedor-tendencias-banner {
    width: 100%;
}

.banner-text-ideas {
    width: 351px;
    text-align: justify;
    margin-top: 3rem;
}

#section-tendencias .tendencia-item {
    text-decoration: none;
    color: #000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: transparent;
    border-radius: 0;
    padding: 10px 5px;
    box-shadow: none;
    border: none;
    transition: all 0.25s ease;
}

    #section-tendencias .tendencia-item:hover {
        transform: translateY(-5px);
    }

    #section-tendencias .tendencia-item img {
        width: 70%;
        max-width: 240px;
        height: 140px;
        object-fit: fill;
        margin-bottom: 25px;
        transition: transform 0.3s ease;
    }

    #section-tendencias .tendencia-item:hover img {
        transform: scale(1.08);
    }

    #section-tendencias .tendencia-item p {
        font-family: 'Effra', Arial, sans-serif;
        font-size: 16px;
        font-weight: 500;
        color: black;
        margin: 0;
    }


/* =====================================================================
   SECCIÓN IDEAS — COLORES / CAROUSEL IDEAS
   ===================================================================== */
#carousel-ideas ul.nav-tabs {
    padding-top: 85px;
}

#carousel-ideas .container-fluid .tab-content {
    height: auto;
    position: relative;
    margin-bottom: 20px;
}

#carousel-ideas div.btn-info {
    width: 200px;
    margin-left: 8%;
}

#carousel-ideas.pagination {
    display: -ms-flexbox;
    display: flex;
    padding-left: 0;
    list-style: none;
    border-radius: 0.25rem;
}

.bg-ideas {
    background: transparent;
    text-align: center;
    background-image: url(../images/beneficios-productos/bg-cont.jpg);
    background-size: 95% 100%;
    background-repeat: no-repeat;
    background-position: center;
}

    .bg-ideas a.nav-link:hover,
    .bg-ideas a.nav-link.active {
        color: #ffffff;
    }

    .bg-ideas a.nav-link {
        display: block;
        justify-content: center;
        align-items: center;
        height: 70px;
        border: 1px solid #4a4a4a1a;
        color: #fff;
        padding: 3.5% 5%;
        text-transform: uppercase;
        font-size: 12px;
    }

    .bg-ideas a.bg-color-1 {
        background-color: #e91e63 !important;
        opacity: .75;
    }

    .bg-ideas a.bg-color-2 {
        background-color: #e91e63 !important;
        opacity: .75;
    }

    .bg-ideas a.bg-color-3 {
        background-color: #00bcd4 !important;
        opacity: .75;
    }

    .bg-ideas a.bg-color-4 {
        background-color: #9c27b0 !important;
        opacity: .75;
    }

#carousel-ideas-color.carousel-inner {
    position: relative;
    width: 92%;
    overflow: hidden;
    margin: auto;
    margin-right: 0px;
}

.bg-ideas-color {
    position: relative;
    width: 100%;
    align-items: center;
    justify-content: center;
    background-image: url(../images/beneficios-productos/bg-cont.jpg);
    background-size: cover;
    z-index: 1;
    padding-top: 5px;
}

    .bg-ideas-color::before {
        content: "";
        position: absolute;
        top: 0px;
        right: 0px;
        bottom: -100px;
        left: 0px;
        background-color: rgb(255 255 255 / 90%);
    }

.bg-color-ideas {
    cursor: pointer;
    padding: 0px;
    font-size: 13px;
    text-align: center;
    margin: 0px 0px 5px;
    width: 80px !important;
    height: 80px !important;
    border-radius: 60px;
    background-size: 100px 100px;
}

    .bg-color-ideas img {
        cursor: pointer;
        padding: 0px;
        font-size: 13px;
        text-align: center;
        margin: 0px 0px 5px;
        width: 90px;
        height: 90px;
        border-radius: 60px;
        background-size: 100px 100px;
    }

    .bg-color-ideas input[type=radio] {
        display: none;
    }

.contenedor-colors {
    position: absolute;
    left: 0%;
    top: 85px;
    width: 7%;
    padding-bottom: 0px;
    padding-top: 0px;
    text-align: center;
    z-index: 15;
}

.contenedor-colores {
    position: absolute;
    left: 0%;
    top: 85px;
    width: 7%;
    padding-bottom: 0px;
    padding-top: 0px;
    text-align: center;
    z-index: 15;
}

.circle {
    height: 25px;
    width: 25px;
    background: #6f6f6f;
    color: #ffffff;
    padding: 5px 10px;
    border-radius: 100%;
    text-align: center;
    line-height: 13px;
    margin: 5px;
}

.img-ideas-thumb {
    width: 100%;
    height: 60px;
    object-fit: cover;
    border: #a24c03 solid;
}

.img-ideas-section {
    width: 100% !important;
    height: 360px;
    object-fit: cover;
    object-position: center center;
    text-align: center;
}

.img-ideas-menu {
    width: 75%;
    height: 50px;
    object-fit: cover;
}

.carousel-thumbnails .carousel-indicators {
    margin-top: 20px;
    position: relative;
}

    .carousel-thumbnails .carousel-indicators li::before {
        position: absolute;
        top: -10px;
        left: 0;
        display: inline-block;
        width: 100%;
        height: 10px;
        content: "";
    }

.carousel-thumbnails a {
    width: 100px;
    height: 100%;
    background: transparent;
    padding-left: 2.5px;
    padding-right: 2.5px;
    border: none;
    border-radius: 0px !important;
    margin: auto;
    margin-left: 0 !important;
}

.carousel-thumbnails .page-link:hover {
    z-index: 2;
    color: #0056b3;
    text-decoration: none;
    background-color: #a24c03;
    border-color: #dee2e6;
}

#IdeasColor .dropdown-menu.multi-column {
    width: 500px;
    background: rgb(255 255 255 / 98%);
}

#IdeasColor.dropdown.show,
#IdeasColor.dropdown.show a.nav-link,
#IdeasColor.dropdown.show a.nav-link i,
#IdeasColor.dropdown.show:hover,
#IdeasColor.dropdown:hover #IdeasColor.dropdown:focus {
    background: #fff;
    color: #000;
}

#nav-pages {
    z-index: 5;
    margin-top: 0;
    background: #000;
}

#recipeCarousel .carousel-control-prev,
#recipeCarousel .carousel-control-next {
    background: transparent;
    opacity: 1;
    width: auto;
    top: 0;
    text-align: center;
}

.div-col-4 {
    -ms-flex: 0 0 11.11%;
    flex: 0 0 11.11%;
    max-width: 11.11%;
    padding-left: 3.5px;
    padding-right: 3.5px;
    position: relative;
    width: 100%;
}

.icons {
    width: auto;
    height: 40px;
    display: block;
    margin: auto;
    filter: invert(1);
}

.icons-cocina::before {
    background-image: url(../images/icons-ideas/cocina.png);
    content: "";
    display: inline-block;
    width: 30px;
    height: 30px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.icons-comedor::before {
    background-image: url(../images/icons-ideas/comedor.png);
    content: "";
    display: inline-block;
    width: 30px;
    height: 30px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.icons-bebe::before {
    background-image: url(../images/icons-ideas/cuarto-bebe01.png);
    content: "";
    display: inline-block;
    width: 30px;
    height: 30px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    filter: inherit;
}

.icons-ninio::before {
    background-image: url(../images/icons-ideas/cuarto-ninios.png);
    content: "";
    display: inline-block;
    width: 30px;
    height: 30px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.icons-recamara::before {
    background-image: url(../images/icons-ideas/recamara.png);
    content: "";
    display: inline-block;
    width: 30px;
    height: 30px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.icons-fachada::before {
    background-image: url(../images/icons-ideas/fachada.png);
    content: "";
    display: inline-block;
    width: 30px;
    height: 30px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.icons-banio::before {
    background-image: url(../images/icons-ideas/banio.png);
    content: "";
    display: inline-block;
    width: 30px;
    height: 30px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.icons-sala::before {
    background-image: url(../images/icons-ideas/sala.png);
    content: "";
    display: inline-block;
    width: 30px;
    height: 30px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.icons-oficina::before {
    background-image: url(../images/icons-ideas/oficina.png);
    content: "";
    display: inline-block;
    width: 30px;
    height: 30px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.lnr-whatsapp::before {
    content: url("../images/svg/whatsapp.svg");
    display: inline-block;
    width: 24px;
    height: 24px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    filter: opacity(0.5);
}


/* =====================================================================
   SECCIÓN PRODUCTOS CALIDAD
   ===================================================================== */
#productos-calidad .container-fluid .row .col {
    background: url('../images/productos-calidad/productos-calidad-0-top-banner.gif');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: right center;
    background-color: #0d1926;
    height: 500px;
    padding: 5%;
}

    #productos-calidad .container-fluid .row .col span.btn-cta {
        margin-top: 3rem;
    }

    #productos-calidad .container-fluid .row .col h2 {
        font-size: 45px;
        font-weight: 300;
        padding-top: 7%;
    }

#productos-secction {
    background-color: #fff;
}

    #productos-secction #title-productos.col-sm-12 {
        height: 100%;
        padding: 3% 0% 0% 0%;
        color: #0d1926;
    }

    #productos-secction .DivSecc:after {
        display: block;
        content: " ";
        margin-top: -24px;
        height: 73px;
        visibility: hidden;
    }

    #productos-secction .DivSeccBottom:after {
        display: block;
        content: " ";
        margin-top: 0;
        height: 42px;
        visibility: hidden;
    }

.titulo-soluciones {
    font-size: 35px;
    font-weight: 300;
    color: #000;
}

.text-prod {
    color: #043387;
    font-size: 0.85rem;
    height: 85px;
    margin-bottom: 0px;
    content-visibility: auto;
}

.text-filtro {
    padding: 5px 25px;
    font-style: normal;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 14px;
    font-weight: 500;
    display: block;
    width: 100%;
    text-align: left;
}

.btn-style {
    padding: 3px 8px;
}

    .btn-style i {
        font-size: 20px;
        line-height: 26px;
    }

a.btn-style:hover, a.btn-style:focus {
    color: #ffffff !important;
}

.btn-detalles {
    color: #fff;
    background-color: #092b67;
    border-color: #0a2452;
    border-top-left-radius: 10px;
    border-top-right-radius: 0px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 20px;
    position: relative;
    padding: 7px 5px;
    font-size: 12px;
    width: 100px;
}

    .btn-detalles:hover {
        color: #fff;
        background-color: #0c3d94;
        border-color: #0d2d67;
    }

.bg-card-producto {
    height: 300px;
    border-radius: 22px;
    box-shadow: 0px 3px 6px 1px #f1f1f1;
    margin-bottom: 10px !important;
}

.cont-text {
    height: 85px;
}

.effect-card {
    transition: transform .2s;
    margin: 0 auto;
}

    .effect-card:hover {
        transform: scale(1.05);
        border: 2px solid rgb(0 0 0 / 4%) !important;
    }

#productos-secction .cont-productos > .tab-content > .tab-pane {
    opacity: 1;
}

.cont-productos {
    height: 400px;
    overflow: auto;
    overflow-x: hidden;
}

.lista-productos {
    height: 35vh;
    overflow-x: initial;
    overflow-y: initial;
    padding-top: 0px;
}

.halscroll {
    height: 60vh !important;
    overflow-y: scroll !important;
}

.title-productos-lista {
    font-size: 16px;
    color: #757575;
    padding: 0px;
}

.bd-example {
    padding-top: 1px;
    height: auto;
    position: relative;
    z-index: 1;
    margin-bottom: 30px;
}

#section-productos .nav-item, #section-productos .nav-item a {
    color: #fff;
    background-color: transparent;
    height: 55px;
    border-radius: 0rem;
    align-items: center;
    display: grid;
    text-shadow: 4px 2px 8px rgb(90 6 0 / 61%);
    border-top-right-radius: 20px;
    border-bottom-left-radius: 20px;
}

#section-productos .nav-item {
    width: 100%;
}

    #section-productos .nav-item.active,
    #section-productos .show > .nav-item {
        color: #fff;
        background-color: #007bff;
        height: 55px;
        border-radius: 0rem;
        align-items: center;
        display: grid;
    }

.caption-prod {
    text-align: center;
    z-index: 3;
    position: absolute;
    padding: 3% 15%;
    font-size: 28px;
    background: #e0e0e04d;
    width: 100%;
    top: 5%;
    font-weight: 400;
    color: #ffffff;
    text-shadow: 2px 2px 9px rgb(64 63 63 / 84%);
}

.wh-100 {
    height: 300px;
    width: 100%;
    padding: 0px;
}

    .wh-100 img {
        height: 300px;
        width: 100%;
        padding: 0px;
        object-fit: cover;
    }


/* =====================================================================
   SECCIÓN MODAL DE PRODUCTOS
   ===================================================================== */
.ProductosModal .modal-dialog {
    max-width: 1200px;
    margin: 1.75rem auto;
}

.ProductosModal .modal-footer {
    width: 65%;
    bottom: 0px;
    padding-left: 2%;
}

.ProductosModal .modal-dialog .modal-content .modal-header {
    color: #fff;
    background: rgb(9, 9, 121);
    background: linear-gradient(0deg, rgba(9, 9, 121, 1) 0%, rgba(3, 143, 209, 1) 100%);
}

.ProductosModal .modal-header .close {
    padding: 1rem 1rem;
    margin: -1rem -1rem -1rem auto;
    color: #fff;
}

#especificaciones p {
    font-size: 12px;
    color: grey;
    line-height: 23px;
}

.ProductosModal .modal-body .bg-default {
    background: #d8d7d7;
    padding: 2%;
    position: absolute;
    right: 0px;
    height: 100%;
    bottom: 0px;
    top: 0px;
}

.bg-default {
    background: #f9f9f9;
    padding: 2%;
}

.ProductosModal .modal-body {
    padding: 0px;
    padding-top: 15px;
}

.p-top {
    padding: 1rem 0 1rem 2rem;
}

.p-small {
    color: #868686;
}

.text-title {
    font-weight: bolder;
    color: #0080D6;
}

.btn-custom {
    width: 100%;
}

    .btn-custom img {
        width: 35px;
        padding-bottom: 10px;
    }

.list-group-item {
    color: #9a9a9a;
    padding: 5px 10px 0px 30px;
    border: 0px;
}

.border-top {
    border-top-left-radius: 0px !important;
    border-top-right-radius: 0px !important;
}

.img-sol {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: right center;
}

.img-sol-modal {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: right center;
}

#Resultado {
    height: auto;
    margin-bottom: 60px;
}


/* =====================================================================
   SECCIÓN VIDEO PRODUCTOS
   ===================================================================== */
.bg-prod-video {
    background: #D6D6D6;
    box-shadow: inset 1px 4px 6px #c5c5c5;
}

    .bg-prod-video .row {
        padding: 3.5em 5em;
    }

.bg-video {
    background: #000a40;
    color: #fff;
}

#VideoDistModal .modal-header {
    padding: 0px;
    border-bottom: none;
}


/* =====================================================================
   SECCIÓN DISTRIBUIDORES
   ===================================================================== */
.cont-card-distr {
    width: 70% !important;
    text-align: left;
    margin: auto;
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
    font-size: 15px;
}

.bg-card-distr {
    background: #fff;
    padding: 3.5em 0em;
    box-shadow: inset 0px 4px 6px #c5c5c5;
}

.btn.btn-info-email,
.btn.btn-info-whatsapp,
.btn.btn-info-video {
    height: 60px;
    width: 60px;
    display: flex;
    align-items: center;
    border-radius: 100px;
    padding: 0.4rem;
}

.img-contact {
    text-align: center;
    margin: auto;
}

.form-group span.text-danger {
    color: #dc3545 !important;
    position: absolute;
    left: 10px;
    top: 8px;
}

.btn-info-whatsapp {
    color: #fff;
    background-color: #46c254;
    border: 4px solid #149c22;
    box-shadow: 2px 3px 11px 0px #021731;
}

.btn-info-email {
    color: #fff;
    background-color: #dc3545;
    border: 4px solid #a71220;
    box-shadow: 2px 3px 11px 0px #021731;
}

.btn-info-video {
    color: #fff;
    background-color: #17a2b8;
    border: 4px solid #0e7b8c;
    box-shadow: 2px 3px 11px 0px #021731;
}


/* =====================================================================
   SECCIÓN SOLUCIONES 
   ===================================================================== */
#section-solution {
    padding: 0 !important;
    max-width: 100% !important;
}

.sol-banner {
    position: relative;
    width: 100%;
    min-height: 200px;
    overflow: hidden;
    display: flex;
    align-items: center;
}

.sol-banner-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.sol-banner-content {
    position: relative;
    z-index: 2;
    padding: 50px 60px;
    max-width: 600px;
}

.sol-banner-eyebrow {
    font-size: 12px;
    font-weight: 700;
    color: #003479;
    letter-spacing: 1px;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.sol-banner-titulo {
    font-size: 40px;
    font-weight: 700;
    color: #003479;
    line-height: 1.2;
    margin-bottom: 14px;
    font-family: 'Montserrat', sans-serif;
}

.sol-banner-desc {
    font-size: 14px;
    color: #444;
    line-height: 1.6;
    margin-bottom: 0;
}

.sol-cards-wrap {
    background: #fff;
    padding: 40px 0 60px;
}

.sol-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.sol-card {
    background: #fff;
    border: 1px solid #e2e8f2;
    border-radius: 14px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.25s ease, transform 0.25s ease;
    box-shadow: 0 2px 8px rgba(0,52,121,0.06);
    cursor: pointer;
}

    .sol-card:hover {
        box-shadow: 0 8px 28px rgba(0,52,121,0.14);
        transform: translateY(-4px);
        text-decoration: none;
        color: inherit;
    }

.sol-card-img-wrap {
    width: 100%;
    height: 200px;
    overflow: hidden;
    border-radius: 14px 14px 0 0;
}

.sol-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    margin-left: auto;
    margin-right: auto;
    border-radius: 0;
    border: none;
}

.sol-card-body {
    padding: 20px 24px 24px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.sol-card-titulo {
    font-size: 19px;
    font-weight: 700;
    color: #003479;
    margin-bottom: 8px;
    line-height: 1.25;
}

.sol-card-linea {
    width: 36px;
    height: 3px;
    background-color: #003479;
    margin-bottom: 14px;
    border-radius: 2px;
}

.sol-card-desc {
    font-size: 13px;
    color: #555;
    line-height: 1.6;
    flex: 1;
    margin-bottom: 14px;
}

.sol-card-link {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #003479;
    font-weight: 600;
    margin-bottom: 20px;
}

.sol-card-link-icon {
    font-size: 16px;
}

.sol-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid #e2e8f2;
    padding-top: 14px;
    margin-top: auto;
}

.sol-card-ver {
    font-size: 13px;
    font-weight: 700;
    color: #003479;
}

.sol-card-arrow {
    font-size: 18px;
    color: #003479;
    font-weight: 700;
}


/* =====================================================================
   SECCIÓN SOLUCIONES — CAROUSEL 
   ===================================================================== */
/*#carousel-soluciones {
    margin-top: 85px;
}

    #carousel-soluciones.container-fluid {
        width: 100%;
        padding-right: 0px;
        padding-left: 0px;
        margin-right: 0px;
        margin-left: 0px;
    }*/

.card-radio {
    border-radius: 30px;
    width: 95%;
    margin: auto;
    height: auto;
}

.card-style {
    background: #fff;
    width: 83%;
    height: 230px;
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 30px;
    margin: auto;
}

#contenedor input {
    height: auto;
}

/*#carousel-soluciones input[type="radio"] {
    box-sizing: border-box;
    padding: 0;
    display: none;
}*/

#contenedor label {
    cursor: pointer;
    text-align: center;
    margin: 0px 44px 0px 44px;
}

.content {
    position: relative;
    width: 100%;
    padding: 0px;
    z-index: 1;
    margin: 3% 0 0 0;
    display: block;
}

    .content div #carouselSolutionIndicators {
        display: none;
        position: absolute;
        z-index: -100;
        opacity: 0;
        transition: all linear 0.1s;
    }

    .content div #carouselSolutionIndicators2 {
        display: none;
        position: absolute;
        z-index: -100;
        opacity: 0;
        transition: all linear 0.1s;
    }

#contenedor input.tab-selector-1:checked ~ .content .content-1 #carouselSolutionIndicators,
#contenedor input.tab-selector-2:checked ~ .content .content-2 #carouselSolutionIndicators2 {
    height: 350px;
    width: 100%;
    position: inherit;
    display: block;
    opacity: 1;
    -webkit-transition: all ease-out 0.2s 0.1s;
    -moz-transition: all ease-out 0.2s 0.1s;
    -o-transition: all ease-out 0.2s 0.1s;
    -ms-transition: all ease-out 0.2s 0.1s;
}

.content-1 {
    width: 100%;
}

.content-2 {
    width: 100%;
}

#contenedor input.tab-selector-1:checked ~ .content .content-1 .carousel-item.active,
#contenedor input.tab-selector-1:checked ~ .content .content-1 .carousel-item-next,
#contenedor input.tab-selector-1:checked ~ .content .content-1 .carousel-item-prev {
    display: flex;
}

#contenedor input.tab-selector-2:checked ~ .content .content-2 .carousel-item.active,
#contenedor input.tab-selector-2:checked ~ .content .content-2 .carousel-item-next,
#contenedor input.tab-selector-2:checked ~ .content .content-2 .carousel-item-prev {
    display: flex;
}

#carouselSolutionIndicators .carousel-inner.row {
    margin-right: 0px;
    margin-left: 0px;
}

#carouselSolutionIndicators .carousel-inner .carousel-item .col-sm-6 {
    margin-right: 0px;
    margin-left: 0px;
    padding-right: 0px;
    padding-left: 0px;
}

    #carouselSolutionIndicators .carousel-inner .carousel-item .col-sm-6 .carousel-caption {
        position: absolute;
        height: 140px;
        right: 10px;
        bottom: 10px;
        left: 10px;
        z-index: 2;
        padding-top: 20px;
        padding-bottom: 0px;
        color: #fff;
        text-align: center;
        background: rgb(6 78 171 / 81%);
    }

#carouselSolutionIndicators2 .carousel-inner.row {
    margin-right: 0px;
    margin-left: 0px;
}

#carouselSolutionIndicators2 .carousel-inner .carousel-item .col-sm-6 {
    margin-right: 0px;
    margin-left: 0px;
    padding-right: 0px;
    padding-left: 0px;
}

    #carouselSolutionIndicators2 .carousel-inner .carousel-item .col-sm-6 .carousel-caption {
        position: absolute;
        height: 150px;
        right: 10px;
        bottom: 10px;
        left: 10px;
        z-index: 2;
        padding-top: 20px;
        padding-bottom: 0px;
        color: #fff;
        text-align: center;
        background: rgb(6 78 171 / 81%);
    }

#carouselSolutionIndicators .carousel-inner,
#carouselSolutionIndicators2 .carousel-inner {
    height: calc(100vh - 100px);
}

#header-slide .carousel-inner {
    height: 100%;
}

#carouselSolutionIndicators .carousel-control-prev-icon,
#carouselSolutionIndicators2 .carousel-control-prev-icon {
    background-color: rgb(255 255 255 / 67%);
    padding: 32px;
    background-size: 20px;
    border-radius: 100px;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5L4.25 4l2.5-2.5L5.25 0z'/%3e%3c/svg%3e");
}

#carouselSolutionIndicators .carousel-control-next-icon,
#carouselSolutionIndicators2 .carousel-control-next-icon {
    background-color: rgb(255 255 255 / 67%);
    padding: 32px;
    background-size: 20px;
    border-radius: 100px;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5L3.75 4l-2.5-2.5L2.75 8l4-4-4-4z'/%3e%3c/svg%3e");
}

#carouselSolutionIndicators .carousel-inner .carousel-item .col-sm-6 .carousel-caption p {
    padding: 2% 8%;
}

#carouselSolutionIndicators2 .carousel-inner .carousel-item .col-sm-6 .carousel-caption p {
    padding: 2% 8%;
}

#SolucionModal .modal-dialog {
    max-width: 900px;
    margin: 1.75rem auto;
}

#SolucionModal .modal-footer {
    background: rgb(6 78 171 / 81%);
    color: #fff;
    padding: 1% 5%;
}

    #SolucionModal .modal-footer strong,
    #SolucionModal .modal-footer p {
        font-size: 10px !important;
        font-style: italic;
    }

#productos-destacados {
    margin-top: 30px;
    height: 500px;
}

    #productos-destacados .caption-prod {
        text-align: center;
        z-index: 3;
        position: absolute;
        font-size: 23px;
        background: #ffffff87;
        bottom: auto;
        font-weight: 400;
        color: #04364e;
        text-shadow: 2px 2px 9px rgb(64 63 63 / 84%);
        top: 0%;
        left: 0;
        right: 0;
    }

    #productos-destacados .carousel-item.active,
    .carousel-item-next,
    .carousel-item-prev {
        display: flex;
    }

    #productos-destacados .content div #carouselSolutionIndicators {
        display: block;
        position: relative;
        z-index: 10;
        opacity: 1;
        transition: all linear 0.1s;
    }

.control-icons {
    border: solid;
    background: black;
    height: 50px;
    width: 50px;
    border-radius: 100px;
    margin: auto;
}

.img-destacados {
    width: 100%;
    height: 250px;
}


/* =====================================================================
   SECCIÓN MAPA / SUCURSALES
   ===================================================================== */
#map {
    position: relative;
    width: 100%;
    align-items: center;
    justify-content: center;
    background-size: cover;
}

#mapGoogle {
    border-radius: 15px;
    box-shadow: 2px 3px 6px 2px #949292;
    height: 350px !important;
    width: auto !important;
}

#map .container-fluid {
    padding: 0px;
    margin: 0px;
}

    #map .container-fluid .row {
        padding: 0px;
        margin: 0px;
    }

    #map .container-fluid .col-md-6 {
        padding: 0px;
        margin: 0px;
    }

        #map .container-fluid .col-md-6 iframe {
            width: 100%;
            height: 586px;
        }

#maps {
    background: url(../images/cta-1/Sucursales.jpg) no-repeat;
    background-size: cover;
    background-position: bottom;
}

.maps {
    background: #f5f5f5;
}

.text-map {
    padding: 5%;
}

    .text-map p {
        color: #333333 !important;
    }

.container-info {
    max-height: 400px;
    overflow-y: scroll;
    overflow-x: hidden;
    padding: 0px 10px;
}

.main-cards {
    background: transparent;
    border-radius: 4px;
    margin-top: 24px;
    height: 350px;
}

    .main-cards .card {
        border: none;
        background: transparent;
    }

.card-custom {
    padding: 5px 10px;
    text-align: left;
    font-weight: bold;
    border-bottom: 1px solid #e6e6e6;
}

.card-items {
    background: #fff !important;
    border-radius: 5px;
}

.text-custom {
    font-size: 13px;
    font-weight: bold;
    margin-top: 10px;
    padding-bottom: 1px;
    border-bottom: 1px solid #d6d6d6;
    margin-bottom: 5px;
    text-align: left;
}

.text-custom-small {
    font-size: 12px;
    margin-bottom: 3px;
    text-align: left;
}

.text-phone-small {
    font-size: 12px;
    text-align: left;
}

.btn-localizar {
    background: #002dab;
    border: 1px solid #0800d9;
}

.bg-select-tienda {
    background-color: #dadada !important;
    box-shadow: 1px 1px 3px 1px !important;
}


/* =====================================================================
   GALERÍA DE COLOR
   ===================================================================== */
#gallery-colors {
    margin-top: 45px;
}

.list-color-gallery {
    display: block;
    position: relative;
    z-index: 0;
    height: 270px;
    border: none;
}

#menu-gallery.card {
    height: 95px;
}

#menu-gallery .card-body {
    padding: 9px 16px;
}

#GalleryColor.dropdown.show,
#GalleryColor.dropdown.show a.nav-link,
#GalleryColor.dropdown.show a.nav-link i,
#GalleryColor.dropdown.show:hover,
#GalleryColor.dropdown:hover #GalleryColor.dropdown:focus {
    background: #fff;
    color: #000;
}

#menu-gallery .card-footer {
    padding: 2px;
    font-size: 9px;
}

.title-gallery {
    color: white !important;
    background: #929292;
    font-size: 11px;
    padding: 2px 7px;
    top: 7px;
    display: none;
    white-space: nowrap;
}

.cont-colors:hover .title-gallery {
    color: white !important;
    background: #929292;
    font-size: 6px;
    padding: 0;
    top: 4px;
    display: block;
    position: absolute;
    white-space: normal;
    width: 83%;
}

.bg-blacks {
    background: #000000;
}

.inline-send {
    display: inline-flex;
    text-align: right;
}

    .inline-send dd {
        margin: 5px;
    }

.cont-colors {
    height: 20px;
    width: 100%;
    border-bottom: 1px solid rgb(255, 255, 255);
}

.cont-gallery {
    height: 60px;
    width: 100%;
    border-bottom: 1px solid rgb(255, 255, 255);
}

    .cont-gallery:hover .title-gallery {
        color: white !important;
        background: #929292;
        font-size: 11px;
        padding: 2px 7px;
        top: 0px;
        display: block;
        position: relative;
        white-space: normal !important;
    }

.modal-body p {
    font-size: 12px;
    color: grey;
}

#GalleryModal .modal-dialog .modal-content .row .col-12 .card .card-body {
    height: 246px;
}

#GalleryModal .modal-dialog .modal-content .row .col-12 .card:hover {
    background: #d9dadc;
}

#GalleryColor .col-sm-3 {
    padding-left: 7.5px;
    padding-right: 7.5px;
}

#GalleryColor #menu-gallery .p-1 {
    padding: 0.01rem 0.04rem !important;
}

#GalleryColor #menu-gallery.card {
    height: 77px;
}

#GalleryColor #menu-gallery .card-body {
    padding: 9px 16px;
    margin: 0px 2px;
}

#GalleryColor a.zoom {
    padding: 0px;
    transition: transform .2s;
    margin: 0 auto;
}

#GalleryColor .cont-colors:hover .title-gallery {
    color: white !important;
    background: #929292;
    font-size: 6px;
    padding: 0;
    top: 0px;
    display: block;
    position: absolute;
    white-space: normal;
    width: 97%;
    height: 19px;
    line-height: 19px;
}

.modal-dialog-scrollable {
    max-height: calc(100% - 0.20rem);
    border-bottom: 1px solid #f3f3f3;
    padding-top: 0px;
}

#Comb-1 .row.card-body,
#Comb-2 .row.card-body {
    padding: 0px 15px;
}

.brs-top {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

.brb-left {
    border-bottom-left-radius: 4px;
}

.brb-right {
    border-bottom-right-radius: 4px;
}

.bg-galeria {
    background: transparent;
    text-align: center;
    width: 100%;
    height: 100px;
    display: table;
}

    .bg-galeria a.nav-link {
        display: table-cell;
        vertical-align: middle;
        border: 1px solid #4a4a4a1a;
        color: #fff !important;
        text-shadow: 2px 2px 2px black;
        padding-top: 3.5%;
        padding-bottom: 3.5%;
        text-transform: uppercase;
    }

.color1 {
    background-color: rgb(185, 183, 173) !important;
}

.color2 {
    background-color: rgb(0, 107, 157) !important;
}

.color3 {
    background-color: rgb(142, 24, 27) !important;
}

.color4 {
    background-color: rgb(158, 86, 129) !important;
}

.color5 {
    background-color: rgb(28, 98, 32) !important;
}

.color6 {
    background-color: rgb(216, 164, 38) !important;
}

.color7 {
    background-color: rgb(135, 70, 30) !important;
}

.color8 {
    background-color: rgb(203, 190, 188) !important;
}

.color9 {
    background-color: rgb(31, 37, 42) !important;
}

#gallery-rgb {
    width: 70%;
    margin: auto;
}

a.itemColor {
    float: left;
    width: 100%;
    height: auto;
    background-color: white;
    text-decoration: none;
}

#MuestrarioColores ul li div p {
    float: left;
    clear: both;
    text-align: center;
    width: 100%;
}

a.itemColor ul li {
    float: left;
    height: 10px;
    width: 14.5px;
    text-decoration: none;
    list-style: none;
}

#MuestrarioColores ul.pixel-color li {
    width: 15px;
    padding: 7.5px;
    height: 15px;
    border-radius: 0px;
}

    #MuestrarioColores ul.pixel-color li:hover {
        transform: scale(1.1,1.1) !important;
        box-shadow: inset 0px 0px 1px 1px !important;
    }

.colors-gallery {
    height: 60px;
    width: 100%;
    border-bottom: 1px solid rgb(255, 255, 255);
}


/* =====================================================================
   COLORES DE FONDO — UTILIDADES
   ===================================================================== */
.bg-color-1 {
    background-color: #00bcd4 !important;
}

.bg-color-2 {
    background-color: #FFC107 !important;
}

.bg-color-3 {
    background-color: #ff9800 !important;
}

.bg-color-4 {
    background-color: #ff5722 !important;
}

a.bg-color-1:hover, a.bg-color-1.active {
    background-color: #0298ab !important;
}

a.bg-color-2:hover, a.bg-color-2.active {
    background-color: #e6b41f !important;
}

a.bg-color-3:hover, a.bg-color-3.active {
    background-color: #e08704 !important;
}

a.bg-color-4:hover, a.bg-color-4.active {
    background-color: #d6481a !important;
}

.bg-eco {
    color: #fff;
    background-color: #47ab45;
}

    .bg-eco:hover,
    .bg-eco:focus {
        color: #fff;
        background-color: #399e37;
    }

.bg-aqua {
    color: #fff;
    background-color: #007bffa6;
}

    .bg-aqua:hover,
    .bg-aqua:focus {
        color: #fff;
        background-color: #007bff;
    }

.bg-chemical {
    color: #fff;
    background-color: #b3b1b1;
}

    .bg-chemical:hover,
    .bg-chemical:focus {
        color: #fff;
        background-color: #808080;
    }

.bg-madera {
    color: #fff;
    background-color: #c14d28;
}

    .bg-madera:hover,
    .bg-madera:focus {
        color: #fff;
        background-color: #943c20;
    }

.bg-impermeable {
    color: #fff;
    background-color: #bf1111ba;
}

    .bg-impermeable:hover,
    .bg-impermeablea:focus {
        color: #fff;
        background-color: #bf1111;
    }

.bg-industrial {
    color: #fff;
    background-color: #000000ba;
}

    .bg-industrial:hover,
    .bg-industrial:focus {
        color: #fff;
        background-color: #000000;
    }

.bg-sellador {
    color: #fff;
    background-color: #b59552ba;
}

    .bg-sellador:hover,
    .bg-sellador:focus {
        color: #fff;
        background-color: #b59552;
    }

.btn-outline-light {
    color: #6c757d;
    border-color: #f1f1f1;
}

.btn-dark {
    background-color: #1a1a1a;
    font-family: 'Montserrat', sans-serif;
}

.btn-dark, .btn-light {
    padding: 5px 25px;
    font-style: normal;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 14px;
    font-weight: 500;
}

.input-group-append .btn {
    width: auto;
}

.border-color {
    border: 2px solid darkblue;
}


/* =====================================================================
   QUIÉNES SOMOS
   ===================================================================== */
.qs-hero {
    position: relative;
    width: 100%;
    background: #fff;
    overflow: hidden;
}

.qs-hero-bg {
    width: 100%;
    height: auto;
    display: block;
}

.qs-hero-overlay {
    position: absolute;
    top: 50%;
    left: 4%;
    transform: translateY(-50%);
    width: 38%;
    z-index: 2;
}

.qs-eyebrow {
    font-size: 12px;
    font-weight: 700;
    color: #003479;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 14px;
}

.qs-titulo {
    font-size: 2.4vw;
    font-weight: 700;
    color: #003479;
    line-height: 1.2;
    margin-bottom: 18px;
}

.qs-linea {
    width: 40px;
    height: 4px;
    background-color: #003479;
    margin-bottom: 20px;
    border-radius: 2px;
}

.qs-descripcion {
    font-size: 0.9vw;
    color: #636569;
    line-height: 1.8;
}

.qs-cards-section {
    background: #F1F6FC;
    padding: 40px 20px;
    border-top: 1px solid #e0e9f5;
}

.qs-item-col {
    border-right: 1px solid #dce6f0;
    padding: 10px 24px;
}

    .qs-item-col:last-child {
        border-right: none;
    }

.qs-item {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 16px;
    cursor: pointer;
    padding: 10px 0;
    transition: opacity 0.2s;
}

    .qs-item:hover {
        opacity: 0.85;
    }

.qs-item-isotipo {
    flex-shrink: 0;
    width: 110px;
}

    .qs-item-isotipo img {
        width: 100%;
        height: auto;
        display: block;
        mix-blend-mode: multiply;
    }

.qs-item-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding-top: 8px;
}

.qs-item-titulo {
    font-size: 18px;
    font-weight: 700;
    color: #003479;
    margin-bottom: 8px;
}

.qs-item-texto {
    font-size: 13px;
    color: #555;
    line-height: 1.6;
    margin-bottom: 12px;
    flex: 1;
}

.qs-linea-small {
    width: 30px;
    height: 3px;
    background-color: #003479;
    border-radius: 2px;
    margin-bottom: 12px;
}

.qs-item-link {
    font-size: 13px;
    font-weight: 700;
    color: #003479;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.qs-item:hover .qs-item-link {
    text-decoration: underline;
}

.qs-valores-section {
    background: #fff;
    padding: 36px 0 44px;
    border-top: 1px solid #e0e9f5;
}

.qs-valores-titulo {
    font-size: 26px;
    font-weight: 700;
    color: #003479;
    line-height: 1.25;
}

.qs-valor-col {
    /*border-right: 1px solid #dce6f0;*/
    padding: 0 20px;
}

    .qs-valor-col:last-child {
        border-right: none;
    }

.qs-valor-item {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 12px;
    text-align: left;
    padding: 0;
}

.qs-valor-icon {
    font-size: 26px;
    color: #003479;
    flex-shrink: 0;
    margin-top: 2px;
}

.qs-valor-nombre {
    font-size: 13px;
    font-weight: 700;
    color: #003479;
    margin-bottom: 4px;
}

.qs-valor-desc {
    font-size: 11px;
    color: #636569;
    line-height: 1.4;
    margin-bottom: 0;
}


/* =====================================================================
   PLAN RECOMPENSA
   ===================================================================== */
#plan_recompensa {
    min-height: 100vh;
    display: flex;
    align-items: center;
}

.recompensa-titulo {
    font-family: 'Effra', Arial, sans-serif;
    font-size: 58px;
    font-weight: 700;
    color: #003479;
}

.recompensa-subtitulo {
    font-family: 'Effra', Arial, sans-serif;
    font-size: 25px;
    font-weight: 600;
    color: #003479;
}

.recompensa-img {
    width: 80%;
    height: auto;
    object-fit: contain;
    border-radius: 12px;
    transition: opacity 0.2s;
    cursor: pointer;
}

    .recompensa-img:hover {
        opacity: 0.85;
    }

.recompensa-pregunta {
    font-family: 'Effra', Arial, sans-serif;
    font-size: 50px;
    font-weight: 700;
    color: #0080d6;
    text-decoration: none;
}

    .recompensa-pregunta:hover {
        text-decoration: underline;
    }

.col-contenido {
    overflow: hidden;
    min-width: 0;
}

    .col-contenido img {
        max-width: 100%;
    }

    .col-contenido .contenido-scroll {
        max-height: 400px;
        overflow-y: auto;
        overflow-x: hidden;
        word-wrap: break-word;
        padding: 1rem;
        padding-left: 2rem;
        margin-left: 1rem;
    }


/* =====================================================================
   QUIÉNES SOMOS — ISOTIPO / BANDERAS
   ===================================================================== */
.img-oselito {
    max-height: 190px;
    margin-top: 0;
}

.isotipo-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
}

.bandera {
    position: absolute;
    cursor: pointer;
    transition: opacity 0.2s;
}

    .bandera:hover {
        opacity: 0.8;
    }

.isotipo-clip {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.bandera span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-family: 'Effra', Arial, sans-serif;
    font-weight: 700;
    font-size: clamp(13px, 1.8vw, 22px);
    text-align: center;
    text-shadow: 0 1px 4px rgba(0,0,0,0.8);
    width: 80%;
    z-index: 2;
}

.bandera-top {
    top: 4%;
    left: 24%;
    width: 60%;
}

.bandera-left {
    bottom: 7%;
    left: 1%;
    width: 60%;
}

.bandera-right {
    bottom: 7%;
    left: 53%;
    width: 60%;
}

.img-sin-productos {
    width: 50%;
    height: auto;
    margin-top: -100px;
}


/* =====================================================================
   FOOTER FIJO
   ===================================================================== */

.footer-oselito {
    margin-top: 16px;
    text-align: center;
}

.footer-oselito-img {
    max-width: 250px;
    width: 100%;
}

#footer-fijo {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 998;
    background-color: #d0e0f4;
    border-top: 1px solid #dce6f0;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.08);
}

.footer-fijo-item {
    gap: 12px;
}

.footer-fijo-icon {
    font-size: 24px;
    color: #003479;
    flex-shrink: 0;
}

.footer-fijo-titulo {
    font-size: 13px;
    font-weight: 700;
    color: #003479;
}

.footer-fijo-subtitulo {
    font-size: 11px;
    color: #636569;
}

.footer-fijo-border {
    border-left: 1px solid #dce6f0;
    border-right: 1px solid #dce6f0;
}

#btn-wsp-fijo {
    position: fixed;
    bottom: 0px;
    right: 20px;
    z-index: 999;
    width: 40px;
    height: 40px;
    background-color: #25D366;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s ease, background-color 0.2s ease;
    text-decoration: none;
}

    #btn-wsp-fijo:hover {
        background-color: #1ebe5d;
        transform: scale(1.1);
        color: #fff;
        text-decoration: none;
    }


/* =====================================================================
   FOOTER PRINCIPAL
   ===================================================================== */
#footer {
    width: 100%;
    margin-bottom: 65px;
}

.footer-principal {
    background-color: #F1F6FC;
    padding: 50px 0 40px;
    border-top: 1px solid #e0e9f5;
}

.footer-col {
    padding: 0 30px;
    border-right: 1px solid #e0e9f5;
}

    .footer-col:last-child {
        border-right: none;
    }

.footer-titulo {
    font-size: 16px;
    font-weight: 700;
    color: #003479;
    margin-bottom: 10px;
}

.footer-linea {
    width: 35px;
    height: 3px;
    background-color: #003479;
    margin-bottom: 20px;
}

.footer-lista li {
    margin-bottom: 4px;
}

.footer-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    color: #333;
    text-decoration: none;
    font-size: 14px;
    border-bottom: 1px solid #F1F6FC;
    transition: color 0.2s;
}

    .footer-link:hover {
        color: #0080D6;
        text-decoration: none;
    }

.footer-link-icon {
    color: #003479;
    font-size: 16px;
    flex-shrink: 0;
}

.footer-link-arrow {
    margin-left: auto;
    color: #000;
    font-size: 12px;
}

.footer-app-texto {
    font-size: 14px;
    color: #555;
    margin-bottom: 16px;
    line-height: 1.5;
}

.footer-app-badge {
    max-width: 180px;
    border-radius: 8px;
}

.footer-redes {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    margin-top: 5px;
}

.footer-red-link {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 2px solid #003479;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #003479;
    font-size: 18px;
    text-decoration: none;
    transition: all 0.2s;
}

    .footer-red-link:hover {
        background-color: #0080D6;
        color: #fff;
        text-decoration: none;
    }

.footer-red-icon-svg {
    width: 18px;
    height: 18px;
    filter: invert(14%) sepia(94%) saturate(1200%) hue-rotate(200deg) brightness(80%) contrast(110%);
    transition: filter 0.2s;
}

.footer-red-link:hover .footer-red-icon-svg {
    filter: brightness(0) invert(1);
}

.footer-valores {
    background-color: #f0f5fb;
    padding: 18px 0;
    border-top: 1px solid #dce6f0;
    border-bottom: 1px solid #dce6f0;
}

.footer-valor-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 20px;
}

.footer-valor-border {
    border-left: 1px solid #dce6f0;
}

.footer-valor-icon {
    font-size: 28px;
    color: #003479;
    flex-shrink: 0;
}

.footer-valor-titulo {
    font-size: 13px;
    font-weight: 700;
    color: #003479;
    margin-bottom: 2px;
}

.footer-valor-subtitulo {
    font-size: 11px;
    color: #6c757d;
    margin-bottom: 0;
}

.footer-bottom-azul {
    background-color: #003479;
    padding: 70px 0;
}

.footer-logo-bottom {
    height: 35px;
    width: auto;
    filter: brightness(0) invert(1);
}

.footer-copyright {
    color: #ffffff;
    font-size: 13px;
}

.footer-links-bottom a {
    color: #ffffff;
    font-size: 13px;
    text-decoration: none;
}

    .footer-links-bottom a:hover {
        text-decoration: underline;
        color: #ffffff;
    }

.footer-sep {
    color: #ffffff;
    margin: 0 8px;
}

.icono-social {
    width: 28px;
    height: 28px;
    transition: transform 0.2s;
}

    .icono-social:hover {
        transform: scale(1.1);
    }

.logo-osel {
    height: 55px;
}

.hecho-mexico {
    height: 85px;
}

.icono-wsp {
    height: 55px;
}

.texto-footer {
    font-size: 14px;
}

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


/* =====================================================================
   LOADER / ANIMACIÓN
   ===================================================================== */
#loader {
    position: fixed;
    background: #000000a8;
    width: 100%;
    height: 100%;
    z-index: 10000;
    bottom: 0px;
    top: 0px;
    left: 0px;
    right: 0px;
}

    #loader .tetromino {
        top: 44%;
        left: 43.5%;
        right: 45%;
    }

.tetrominos {
    margin: auto;
    padding: 20% 44.2%;
}

.tetromino {
    width: 48px;
    height: 56px;
    position: absolute;
    transition: all ease 0.3s;
    background: url(loader.svg);
    background-repeat: no-repeat;
    margin-left: 0;
}

.box1 {
    animation: tetromino1 1.25s ease-out infinite;
}

.box2 {
    animation: tetromino2 1.25s ease-out infinite;
}

.box3 {
    animation: tetromino3 1.25s ease-out infinite;
}

@keyframes tetromino1 {
    0%, 40% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(24px, -13.5px);
    }

    60%, 100% {
        transform: translate(48px, 0);
    }
}

@keyframes tetromino2 {
    0%, 20% {
        transform: translate(48px, 0px);
    }

    40%, 100% {
        transform: translate(72px, 13.5px);
    }
}

@keyframes tetromino3 {
    0%, 60% {
        transform: translate(24px, 13.5px);
    }

    90%, 100% {
        transform: translate(0, 0);
    }
}

.icon-anim-pulse {
    -webkit-animation: pulse_animation;
    animation: pulse_animation;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
}


/* =====================================================================
   ALERTAS / MODALES
   ===================================================================== */
.alerts {
    -ms-flex-preferred-size: 350px;
    flex-basis: 350px;
    max-width: 350px;
    font-size: .875rem;
    background-color: rgba(255, 255, 255, .85);
    background-clip: padding-box;
    border: 1px solid rgba(0, 0, 0, .1);
    box-shadow: 0 0.25rem 0.75rem rgb(0 0 0 / 10%);
    opacity: 0;
    border-radius: .25rem;
}

.alerts-header {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    padding: .25rem .75rem;
    color: #6c757d;
    background-color: rgba(255, 255, 255, .85);
    background-clip: padding-box;
    border-bottom: 1px solid rgba(0, 0, 0, .05);
    border-top-left-radius: calc(.25rem - 1px);
    border-top-right-radius: calc(.25rem - 1px);
}

.alerts.show {
    display: block;
    opacity: 1;
}

.alerts-body {
    padding: .75rem;
}

.divAlerta {
    color: #444444;
    background-color: #fcfeff;
    text-align: center;
    font-size: 16px;
    left: 40%;
    max-width: 500px;
    flex-basis: 500px;
    border: 1px solid #adcafd;
    border-radius: 10px;
}

#divMensaje p {
    margin-bottom: 0px;
}

.divAlerta .alerts-header {
    background-color: transparent;
    color: #fff;
    border: 0px;
}

.divAlerta .toast-header button.close {
    color: #bdbdbd;
}

.icon {
    display: inline-block;
    font-size: inherit;
    text-rendering: auto;
    height: 80px;
    width: 80px;
}

.icon-roja:before {
    content: url(../Archivos/Imagenes/icon/icon-danger.svg);
    color: #ff3547;
}

.icon-verde:before {
    content: url(../Archivos/Imagenes/icon/icon-success.svg);
    color: #00E097;
}

.icon-azul:before {
    content: url(../Archivos/Imagenes/icon/icon-info.svg);
    color: #33b5e5;
}

.icon-amarilla:before {
    content: url(../Archivos/Imagenes/icon/icon-warning.svg);
    color: #ffbb33;
}

.alerts-footer {
    padding: .75rem 1.25rem;
}

.divAlerta .alerts-body {
    padding-bottom: 4%;
}

.alerts-title p {
    color: #3f51b5;
    font-weight: 600;
    text-transform: none;
    position: relative;
    display: block;
    padding: 13px 16px;
    font-size: 27px;
    line-height: normal;
    text-align: center;
    margin-bottom: 0;
}

.btn-outline-secondary {
    width: 180px;
    color: #7C7C7C;
    font-weight: 700;
    border: 2px solid #7C7C7C;
    background-color: #fff;
}

.btn-alerta-aceptar {
    width: 180px;
    color: #3f51b5;
    font-weight: 700;
    border: 2px solid #3f51b5;
    background-color: #fff;
}

    .btn-alerta-aceptar:hover,
    .btn-alerta-aceptar:focus {
        color: #3f51b5;
        border: 2px solid #3f51b5;
        background-color: #fff;
        box-shadow: 0 0 0 0.2rem #3f51b580;
    }

    .btn-alerta-aceptar:hover {
        color: #fff;
        background-color: #3f51b5;
        border-color: #3f51b5;
    }

.btn-alerta-ok {
    width: 80px;
    color: #33b4e4;
    font-weight: 700;
    border: 2px solid #33b4e4;
    background-color: #fff;
}

    .btn-alerta-ok:hover,
    .btn-alerta-ok:focus {
        color: #33b4e4;
        border: 2px solid #33b4e4;
        background-color: #fff;
        box-shadow: 0 0 0 0.2rem #33b4e480;
    }

.close {
    float: right;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    color: #3f51b5;
    text-shadow: 0 1px 0 #fff;
    opacity: .5;
}

.modal-radious {
    border-radius: 25px !important;
    box-shadow: 0px 0px 5px 1px;
}


/* =====================================================================
   UTILIDADES GENERALES
   ===================================================================== */
.zoom {
    padding: 5px;
    transition: transform .2s;
    margin: 0 auto;
}

    .zoom:hover {
        transform: scale(1.1);
    }

.bd-placeholder-img {
    font-size: 1.125rem;
    text-anchor: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.btn-cta {
    width: 220px;
    height: 70px;
    position: relative;
}

.text-cta {
    margin: 0;
    position: absolute;
    top: 31%;
    width: 100%;
    left: 0px;
    font-size: 18px;
}

button:disabled {
    cursor: not-allowed !important;
}

.cursor-pointer {
    cursor: pointer !important;
}

#divBusqueda {
    background: url(../images/bg-busqueda.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 100vh;
    padding-top: 90px !important;
    margin-bottom: -50px;
}

.warning {
    background: url("../images/error.png");
    background-size: cover;
    background-repeat: no-repeat;
}


/* =====================================================================
   COLORARIO OSEL — PÁGINA PRINCIPAL
   ===================================================================== */

/* =====================================================================
   COLORARIO — HERO / BANNER
   ===================================================================== */
.colorario-hero {
    position: relative;
    width: 100%;
    overflow: hidden;
    min-height: 340px;
    display: flex;
    align-items: center;
}

.colorario-hero-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.colorario-hero-overlay {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: 60px 0;
}

.colorario-hero-content {
    max-width: 520px;
    padding-left: 60px;
}

.colorario-hero-titulo {
    font-size: 56px;
    font-weight: 700;
    color: #003479;
    line-height: 1.1;
    margin-bottom: 12px;
    font-family: 'Aptos Black', sans-serif;
}

.colorario-hero-subtitulo {
    font-size: 18px;
    font-weight: 600;
    color: #003479;
    margin-bottom: 10px;
}

.colorario-hero-desc {
    font-size: 14px;
    color: #444;
    line-height: 1.7;
    margin-bottom: 24px;
}

.btn-colorario-primary {
    display: inline-flex;
    align-items: center;
    background-color: #003479;
    color: #fff !important;
    border: 2px solid #003479;
    padding: 10px 24px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.2s, border-color 0.2s;
}

    .btn-colorario-primary:hover {
        background-color: #0055a5;
        border-color: #0055a5;
        color: #fff !important;
        text-decoration: none;
    }


/* =====================================================================
   COLORARIO — SECCIÓN CATEGORÍAS
   ===================================================================== */
.colorario-categorias-section {
    background: #fff;
    padding: 50px 0 60px;
}

.colorario-sec-header {
    margin-bottom: 32px;
}

.colorario-sec-titulo {
    font-size: 26px;
    font-weight: 700;
    color: #003479;
    margin-bottom: 10px;
}

.colorario-sec-linea {
    width: 40px;
    height: 3px;
    background-color: #003479;
    border-radius: 2px;
}

/* Cards de categoría */
.colorario-card {
    display: flex;
    flex-direction: column;
    border: 1.5px solid #e2e8f2;
    border-radius: 14px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    background: #fff;
    transition: box-shadow 0.25s ease, transform 0.25s ease;
    box-shadow: 0 2px 8px rgba(0, 52, 121, 0.06);
    cursor: pointer;
    height: 100%;
}

    .colorario-card:hover {
        box-shadow: 0 8px 24px rgba(0, 52, 121, 0.15);
        transform: translateY(-4px);
        text-decoration: none;
        color: inherit;
    }

.colorario-card-img-wrap {
    width: 100%;
    height: 160px;
    overflow: hidden;
}

.colorario-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 0.3s ease;
}

.colorario-card:hover .colorario-card-img {
    transform: scale(1.05);
}

.colorario-card-body {
    padding: 14px 14px 16px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.colorario-card-icon-wrap {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-bottom: 2px;
}

.colorario-card-icon {
    color: #fff;
    font-size: 18px;
}

.colorario-card-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.colorario-card-nombre {
    font-size: 15px;
    font-weight: 700;
    color: #003479;
    line-height: 1.2;
}

.colorario-card-desc {
    font-size: 11px;
    color: #636569;
    line-height: 1.4;
}

.colorario-card-arrow {
    font-size: 17px;
    color: #003479;
    font-weight: 700;
    margin-top: 6px;
    align-self: flex-end;
}


/* =====================================================================
   COLORARIO — REGLA 60-30-10
   ===================================================================== */
.colorario-regla-section {
    background: #FFF;
    padding: 40px 0 50px;
}

/* Card contenedora horizontal de los 3 bloques */
.colorario-regla-card {
    background: #F1F6FC;
    border: 1px solid #e2e8f2;
    border-radius: 14px;
    box-shadow: 0 2px 10px rgba(0, 52, 121, 0.07);
    display: flex;
    align-items: center;
    padding: 28px 32px;
    gap: 0;
}

/* Divisor vertical entre bloques */
.colorario-regla-divider {
    width: 1px;
    background-color: #dce6f0;
    align-self: stretch;
    margin: 0 32px;
    flex-shrink: 0;
}

/* Bloque 1: círculo + texto regla */
.colorario-regla-bloque {
    display: flex;
    align-items: center;
    gap: 18px;
    flex: 1.2;
}

.colorario-circulo-img {
    width: 110px;
    height: auto;
    object-fit: contain;
    flex-shrink: 0;
}

.colorario-regla-titulo {
    font-size: 20px;
    font-weight: 700;
    color: #003479;
    margin-bottom: 8px;
}

.colorario-regla-desc {
    font-size: 13px;
    color: #555;
    line-height: 1.6;
    margin-bottom: 0;
}

/* Bloques 2 y 3: ícono + texto */
.colorario-beneficio-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    flex: 1;
}

.colorario-beneficio-icon-wrap {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 20px;
    color: #fff;
}

.colorario-beneficio-titulo {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: #003479;
    margin-bottom: 4px;
}

.colorario-beneficio-desc {
    display: block;
    font-size: 12px;
    color: #636569;
    line-height: 1.5;
}

#regla-60-30-10 {
    scroll-margin-top: 100px; 
}

/* =====================================================================
   COLORARIO DETALLE — estilos para la vista secundaria de cada categoría
   ===================================================================== */


/* =====================================================================
   HERO / BANNER
   ===================================================================== */
.cdet-hero {
    position: relative;
    width: 100%;
    background: #FFF;
    overflow: hidden;
}

/* Imagen de fondo difuminada (decorativa, solo en desktop) */
.cdet-hero-img {
    display: none; /* se usa como fondo decorativo vía overlay en desktop */
}

.cdet-hero-overlay {
    position: relative;
    z-index: 2;
    padding: 40px 0 3px;
}

/* Eyebrow */
.cdet-hero-eyebrow {
    font-size: 12px;
    font-weight: 700;
    color: #636569;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
    text-transform: uppercase;
}

/* Título principal */
.cdet-hero-titulo {
    font-size: 44px;
    font-weight: 700;
    color: #003479;
    line-height: 1.1;
    margin-bottom: 10px;
    font-family: 'Aptos Black', sans-serif;
}

/* Subtítulo */
.cdet-hero-subtitulo {
    font-size: 15px;
    font-weight: 600;
    color: #003479;
    margin-bottom: 6px;
}

/* Descripción corta */
.cdet-hero-desc {
    font-size: 13px;
    color: #555;
    line-height: 1.6;
    margin-bottom: 20px;
}

/* Contenedor imagen derecha */
.cdet-hero-img-col {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding-left: 24px;
}

.cdet-hero-imgbox {
    position: relative;
    width: 100%;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 6px 28px rgba(0, 52, 121, 0.13);
}

.cdet-hero-photo {
    width: 100%;
    height: 384px;
    object-fit: cover;
    object-position: center;
    display: block;
    border-radius: 16px;
}

/* Botón "Guardar en favoritos" sobre imagen */
.cdet-btn-favorito {
    position: absolute;
    bottom: 16px;
    right: 16px;
    background: #fff;
    color: #003479;
    border: 2px solid #003479;
    border-radius: 8px;
    padding: 7px 16px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: background 0.2s, color 0.2s;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

    .cdet-btn-favorito:hover {
        background: #003479;
        color: #fff;
    }

    .cdet-btn-favorito i {
        font-size: 15px;
    }


/* =====================================================================
   CONSEJO OSEL (card dentro del hero)
   ===================================================================== */
.cdet-consejo {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: #F1F6FC;
    border: 1.5px solid #e2e8f2;
    border-radius: 12px;
    padding: 16px 18px;
    box-shadow: 0 2px 8px rgba(0, 52, 121, 0.07);
    max-width: 380px;
}

.cdet-consejo-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #003479;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .cdet-consejo-icon i {
        color: #fff;
        font-size: 18px;
    }

.cdet-consejo-titulo {
    font-size: 13px;
    font-weight: 700;
    color: #003479;
    margin-bottom: 4px;
}

.cdet-consejo-texto {
    font-size: 12px;
    color: #555;
    margin-bottom: 6px;
}

.cdet-consejo-lista {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}

    .cdet-consejo-lista li {
        font-size: 12px;
        color: #555;
        line-height: 1.6;
    }

        .cdet-consejo-lista li strong {
            color: #003479;
        }


/* =====================================================================
   TABS (Combinaciones / Inspiración)
   ===================================================================== */
.cdet-tabs-wrap {
    background: #fff;
    border-bottom: 2px solid #e2e8f2;
    margin-top: 0;
}
    .cdet-tabs-wrap .container .cdet-tabs {
        padding-left: calc(33% + 24px); 
    }

.cdet-tabs {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 0;
}

.cdet-tab {
    display: block;
    padding: 14px 22px;
    font-size: 14px;
    font-weight: 600;
    color: #636569;
    text-decoration: none;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
    margin-bottom: -2px;
}

    .cdet-tab:hover {
        color: #003479;
        text-decoration: none;
    }

    .cdet-tab.active {
        color: #003479;
        border-bottom-color: #003479;
    }


/* =====================================================================
   CONTENIDO PRINCIPAL (filtros + grid)
   ===================================================================== */
.cdet-content-wrap {
    padding-top: 28px;
    padding-bottom: 40px;
}


/* =====================================================================
   FILTRO LATERAL
   ===================================================================== */
.cdet-filtro-titulo {
    font-size: 13px;
    font-weight: 700;
    color: #003479;
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.cdet-filtro-lista {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .cdet-filtro-lista li {
        margin-bottom: 4px;
    }

.cdet-filtro-btn {
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 13px;
    color: #003479;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

    .cdet-filtro-btn:hover {
        background: #e8f0fb;
        color: #003479;
    }

    .cdet-filtro-btn.active {
        background: #003479;
        color: #fff;
        font-weight: 600;
    }

.cdet-filtro-lista .cdet-filtro-btn {
    background: #F1F6FC;
    border: 1px solid #e2e8f2;
    color: #003479;
    margin-bottom: 4px;
}

.cdet-filtro-btn:hover {
    background: #dce8f5;
    color: #003479;
    border-color: #c5d8ee;
}

.cdet-filtro-btn.active {
    background: #003479;
    color: #fff;
    border-color: #003479;
}


/* =====================================================================
   ORDENAR POR
   ===================================================================== */
.cdet-orden-label {
    font-size: 13px;
    color: #636569;
}

.cdet-orden-btn {
    background: #fff;
    border: 1.5px solid #e2e8f2;
    border-radius: 8px;
    padding: 6px 14px;
    font-size: 13px;
    color: #003479;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s;
}

    .cdet-orden-btn:hover,
    .cdet-orden-btn:focus {
        border-color: #003479;
        outline: none;
    }


/* =====================================================================
   CARDS DE COMBINACIÓN
   ===================================================================== */
.cdet-card {
    position: relative;
    background: #fff;
    border: 1.5px solid #e2e8f2;
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 8px rgba(0, 52, 121, 0.06);
    transition: box-shadow 0.25s ease, transform 0.25s ease;
    height: 100%;
}

    .cdet-card:hover {
        box-shadow: 0 8px 28px rgba(0, 52, 121, 0.15);
        transform: translateY(-4px);
    }

/* Botón favorito flotante */
.cdet-card-fav {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 5;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    border: 1.5px solid #e2e8f2;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #636569;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}

    .cdet-card-fav:hover {
        color: #e74c3c;
        border-color: #e74c3c;
        background: #fff;
    }

    .cdet-card-fav.activo {
        color: #e74c3c;
        border-color: #e74c3c;
    }

/* Imagen de la combinación */
.cdet-card-img-wrap {
    width: 100%;
    height: 170px;
    overflow: hidden;
}

.cdet-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 0.3s ease;
}

.cdet-card:hover .cdet-card-img {
    transform: scale(1.04);
}

/* Body de la card */
.cdet-card-body {
    padding: 14px 16px 16px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.cdet-card-nombre {
    font-size: 15px;
    font-weight: 700;
    color: #003479;
    margin-bottom: 4px;
}

.cdet-card-desc {
    font-size: 12px;
    color: #636569;
    line-height: 1.5;
    flex: 1;
    margin-bottom: 10px;
}

.cdet-card-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 700;
    color: #003479;
    text-decoration: none;
    transition: gap 0.15s;
}

    .cdet-card-link:hover {
        text-decoration: none;
        color: #0055a5;
        gap: 8px;
    }


/* =====================================================================
   SECCIÓN SOLUCIONES 
   ===================================================================== */

/* Reset del margen top */
#carousel-soluciones {
    margin-top: 0 !important;
}

/* BANNER HERO */
.sol-hero-banner {
    position: relative;
    width: 100%;
    min-height: 220px;
    overflow: hidden;
    display: flex;
    align-items: center;
}

.sol-hero-banner-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.sol-hero-banner-overlay {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: 48px 0 40px;
}

.sol-breadcrumb {
    font-size: 13px;
    color: #555;
    margin-bottom: 14px;
}

    .sol-breadcrumb a {
        color: #003479;
        text-decoration: none;
        font-weight: 600;
    }

.sol-breadcrumb-sep {
    margin: 0 6px;
    color: #999;
}

.sol-hero-titulo {
    font-size: 40px;
    font-weight: 700;
    color: #003479;
    line-height: 1.15;
    margin-bottom: 14px;
    font-family: 'Montserrat', sans-serif;
}

.sol-hero-desc {
    font-size: 14px;
    color: #444;
    line-height: 1.65;
    margin-bottom: 0;
}

/* TABS */
.sol-tabs-wrap {
    background: #fff;
    border-bottom: 2px solid #e2e8f2;
    padding: 12px 0;
    position: static; 
    z-index: 100;
}

.sol-tabs-inner {
    display: flex;
    align-items: center;
    justify-content: center; /* centra los botones */
    padding: 0;
    gap: 0;
    background: #f0f4fa; /* fondo del contenedor */
    border-radius: 100px;
    width: fit-content;
    margin: 0 auto;
    padding: 4px;
}

/* Ocultar los radio buttons */
#carousel-soluciones input[type="radio"].tab-selector-1,
#carousel-soluciones input[type="radio"].tab-selector-2 {
    display: none !important;
}

.sol-tab-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 28px;
    font-size: 15px;
    font-weight: 600;
    color: #636569;
    cursor: pointer;
    border-bottom: none;
    margin-bottom: 0;
    transition: color 0.15s, background-color 0.15s;
    background: transparent;
    border-radius: 100px;
    border: none;
}

    .sol-tab-label:hover {
        color: #003479;
    }

.sol-tab-label-active {
    color: #fff !important;
    background-color: #003479 !important;
    border-bottom: none !important;
    border-radius: 100px !important;
}

/* Tab activo — Interiores */
#carousel-soluciones input.tab-selector-1:checked ~ .sol-tabs-wrap .sol-tab-label-1,
.tab-selector-1:checked + .sol-tab-label-1 {
    color: #003479;
    border-bottom-color: #003479;
}

/* Tab activo — Exteriores */
#carousel-soluciones input.tab-selector-2:checked ~ .sol-tabs-wrap .sol-tab-label-2,
.tab-selector-2:checked + .sol-tab-label-2 {
    color: #003479;
    border-bottom-color: #003479;
}

/* SECCIÓN DE CONTENIDO*/
.sol-content-section {
    background: #fff;
    padding: 36px 0 60px;
}

.sol-section-header {
    margin-bottom: 20px;
}

.sol-section-titulo {
    font-size: 22px;
    font-weight: 700;
    color: #003479;
}

/* Tab panes — show/hide por radio */
.sol-tab-content {
    position: relative;
}

.sol-tab-pane {
    display: none;
}

/* Mostrar interiores por defecto si tab-1 está checked */
#carousel-soluciones input.tab-selector-1:checked ~ .sol-content-section .sol-tab-pane-1,
.sol-tab-pane-1 {
    display: block;
}

#carousel-soluciones input.tab-selector-2:checked ~ .sol-content-section .sol-tab-pane-2 {
    display: block;
}

/* Cuando tab-2 está activo, ocultar tab-1 */
#carousel-soluciones input.tab-selector-2:checked ~ .sol-content-section .sol-tab-pane-1 {
    display: none;
}

/* BLOQUE DE SECCIÓN */
.sol-section-block {
    display: flex;
    gap: 32px;
    align-items: flex-start;
    margin-bottom: 40px;
}

.sol-section-label-col {
    width: 180px;
    flex-shrink: 0;
    padding-top: 4px;
}

.sol-block-titulo {
    font-size: 22px;
    font-weight: 700;
    color: #003479;
    margin-bottom: 8px;
}

.sol-block-linea {
    width: 36px;
    height: 3px;
    background-color: #003479;
    border-radius: 2px;
    margin-bottom: 12px;
}

.sol-block-desc {
    font-size: 13px;
    color: #636569;
    line-height: 1.55;
    margin-bottom: 0;
}

/* GRID DE CARDS */
.sol-cards-row {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.sol-new-card {
    background: #fff;
    border: 1.5px solid #e2e8f2;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.25s ease, transform 0.25s ease;
    box-shadow: 0 2px 8px rgba(0,52,121,0.06);
}

    .sol-new-card:hover {
        box-shadow: 0 8px 24px rgba(0,52,121,0.14);
        transform: translateY(-4px);
    }

.sol-new-card-img-wrap {
    position: relative;
    width: 100%;
    height: 170px;
    overflow: hidden;
}

.sol-new-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 0.3s ease;
}

.sol-new-card:hover .sol-new-card-img {
    transform: scale(1.05);
}

.sol-new-card-body {
    padding: 14px 16px 16px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.sol-new-card-titulo {
    font-size: 15px;
    font-weight: 700;
    color: #003479;
    margin-bottom: 6px;
    line-height: 1.25;
}

.sol-new-card-desc {
    font-size: 12px;
    color: #636569;
    line-height: 1.5;
    flex: 1;
    margin-bottom: 10px;
}

.sol-new-card-link {
    font-size: 12px;
    font-weight: 700;
    color: #003479;
    cursor: pointer;
}

/* CTA BAR */
.sol-cta-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #F1F6FC;
    border: 1.5px solid #e2e8f2;
    border-radius: 12px;
    padding: 20px 28px;
    gap: 20px;
    margin-top: 10px;
}

.sol-cta-bar-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.sol-cta-icon {
    font-size: 30px;
    color: #003479;
    flex-shrink: 0;
}

.sol-cta-titulo {
    font-size: 16px;
    font-weight: 700;
    color: #003479;
    margin-bottom: 2px;
}

.sol-cta-sub {
    font-size: 13px;
    color: #636569;
    margin-bottom: 0;
}

.btn-sol-cta {
    display: inline-flex;
    align-items: center;
    background-color: #003479;
    color: #fff !important;
    border: 2px solid #003479;
    padding: 11px 24px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.2s;
}

    .btn-sol-cta:hover {
        background-color: #0055a5;
        border-color: #0055a5;
        color: #fff !important;
        text-decoration: none;
    }


/* =====================================================================
   PLAN RECOMPENSA 
   ===================================================================== */

.pr-section {
    position: relative;
    min-height: 100vh;
    width: 100%;
    overflow: hidden;
    display: flex;
    align-items: flex-start;
}

.pr-fondo {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
    z-index: 0;
}

.pr-contenido {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: 36px 0 60px;
}

/* Breadcrumb */
.pr-breadcrumb {
    font-size: 13px;
    color: #555;
    margin-bottom: 20px;
}

    .pr-breadcrumb a {
        color: #003479;
        text-decoration: none;
        font-weight: 600;
    }

.pr-breadcrumb-sep {
    margin: 0 6px;
    color: #999;
}

/* Header */
.pr-header {
    margin-bottom: 36px;
}

.pr-titulo {
    font-size: 52px;
    font-weight: 700;
    color: #003479;
    line-height: 1.1;
    margin-bottom: 10px;
    font-family: 'Aptos Black', sans-serif;
}

.pr-subtitulo {
    font-size: 16px;
    color: #444;
    font-weight: 400;
    margin-bottom: 0;
}

/* Fila de tarjetas */
.pr-tarjetas-row {
    gap: 0;
    margin-bottom: 32px;
}

.pr-tarjeta-col {
    padding: 0 16px;
    margin-bottom: 24px;
}

.pr-tarjeta-link {
    display: block;
    text-decoration: none;
}

.pr-tarjeta-img {
    width: 100%;
    height: auto;
    border-radius: 16px;
    display: block;
    box-shadow: 0 8px 32px rgba(0, 52, 121, 0.18);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

    .pr-tarjeta-img:hover {
        transform: translateY(-4px) scale(1.01);
        box-shadow: 0 14px 40px rgba(0, 52, 121, 0.24);
    }

/* Bloque tipo (pintor / contratista) */
.pr-tipo-bloque {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-top: 20px;
    padding: 0 4px;
}

.pr-tipo-icon-wrap {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 22px;
    border: 2px solid transparent;
}

.pr-tipo-icon-pintor {
    background-color: transparent;
    border-color: #003479;
    color: #003479;
}

    .pr-tipo-icon-pintor i {
        color: #003479;
    }

.pr-tipo-icon-contratista {
    background-color: #7a4520;
    border-color: #7a4520;
    color: #fff;
}

    .pr-tipo-icon-contratista i {
        color: #fff;
    }

.pr-tipo-body {
    flex: 1;
}

.pr-tipo-titulo {
    font-size: 20px;
    font-weight: 700;
    color: #003479;
    margin-bottom: 6px;
}

.pr-tipo-contratista .pr-tipo-titulo {
    color: #7a4520;
}

.pr-tipo-desc {
    font-size: 13px;
    color: #555;
    line-height: 1.5;
    margin-bottom: 14px;
}

.pr-tipo-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 22px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.2s, border-color 0.2s;
}

.pr-tipo-btn-pintor {
    background-color: #003479;
    color: #fff !important;
    border: 2px solid #003479;
}

    .pr-tipo-btn-pintor:hover {
        background-color: #0055a5;
        border-color: #0055a5;
        color: #fff !important;
        text-decoration: none;
    }

.pr-tipo-btn-contratista {
    background-color: #7a4520;
    color: #fff !important;
    border: 2px solid #7a4520;
}

    .pr-tipo-btn-contratista:hover {
        background-color: #9a5a2c;
        border-color: #9a5a2c;
        color: #fff !important;
        text-decoration: none;
    }

/* Beneficios */
.pr-beneficios-row {
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid #e2e8f2;
    border-radius: 14px;
    padding: 18px 8px;
    margin-top: 8px;
    backdrop-filter: blur(4px);
}

.pr-beneficio-col {
    padding: 10px 16px;
}

.pr-beneficio-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.pr-beneficio-icon {
    font-size: 26px;
    color: #003479;
    flex-shrink: 0;
    margin-top: 2px;
}

.pr-beneficio-titulo {
    font-size: 13px;
    font-weight: 700;
    color: #003479;
    margin-bottom: 2px;
}

.pr-beneficio-desc {
    font-size: 12px;
    color: #636569;
    line-height: 1.4;
    margin-bottom: 0;
}

/* =====================================================================
   FAVORITOS
   ===================================================================== */

.fav-header {
    color: #003479;
    padding: 32px 0 28px;
    margin-bottom: 24px;
}

.fav-header-titulo {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 6px;
}

    .fav-header-titulo i {
        color: #e30613;
        margin-right: 8px;
    }

.fav-header-subtitulo {
    font-size: 15px;
    opacity: .85;
    margin-bottom: 0;
}

.fav-estado {
    text-align: center;
    padding: 60px 20px;
    color: #555;
}

    .fav-estado i {
        font-size: 48px;
        color: #cfd4da;
        display: block;
        margin-bottom: 16px;
    }

.fav-estado-titulo {
    font-size: 18px;
    font-weight: 600;
    color: #222;
    margin-bottom: 6px;
}

.fav-estado-texto {
    font-size: 14px;
    color: #777;
    margin-bottom: 20px;
}

.fav-btn {
    min-width: 180px;
    width: auto !important;
    display: inline-flex !important;
    justify-content: center;
    align-items: center;
    padding: 10px 24px;
}

.fav-estado {
    text-align: center;
}

    .fav-estado .fav-btn {
        margin: 0 auto;
    }

/* =====================================================================
   SECCIÓN PRODUCTOS — REDISEÑO
   ===================================================================== */


/* =====================================================================
   LAYOUT GENERAL
   ===================================================================== */
#productos-secction {
    background: #fff;
    min-height: 80vh;
}

.prod-layout {
    display: flex;
    align-items: flex-start;
    gap: 0;
    min-height: 80vh;
}


/* =====================================================================
   SIDEBAR
   ===================================================================== */
.prod-sidebar {
    width: 280px;
    min-width: 260px;
    flex-shrink: 0;
    background: #fff;
    border-right: 1px solid #e2e8f2;
    padding: 24px 20px 40px;
    min-height: 80vh;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Breadcrumb */
.prod-breadcrumb {
    font-size: 13px;
    color: #636569;
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

    .prod-breadcrumb a {
        color: #003479;
        text-decoration: none;
        font-weight: 600;
    }

        .prod-breadcrumb a:hover {
            text-decoration: underline;
        }

.prod-breadcrumb-sep {
    color: #aaa;
    font-size: 15px;
}

/* Título sidebar */
.prod-sidebar-header {
    padding-bottom: 4px;
}

.prod-sidebar-titulo {
    font-size: 30px;
    font-weight: 700;
    color: #003479;
    line-height: 1.15;
    margin-bottom: 8px;
    font-family: 'Aptos Black', sans-serif;
}

.prod-sidebar-subtitulo {
    font-size: 13px;
    color: #636569;
    line-height: 1.5;
    margin-bottom: 0;
}

/* Buscador */
.prod-search-wrap .input-group {
    border: 1.5px solid #e2e8f2;
    border-radius: 10px;
    overflow: hidden;
}

.prod-search-input {
    border: none !important;
    box-shadow: none !important;
    font-size: 13px;
    color: #444;
    padding: 10px 14px;
    background: #f8fafd;
}

    .prod-search-input:focus {
        background: #fff;
    }

    .prod-search-input::placeholder {
        color: #aab;
    }

.prod-search-btn {
    background: #003479 !important;
    color: #fff !important;
    border: none;
    padding: 0 16px;
    border-radius: 0 !important;
    font-size: 15px;
    transition: background 0.2s;
}

    .prod-search-btn:hover {
        background: #0055a5 !important;
    }

/* Filtro base agua/solvente */
.prod-base-filter {
    background: #F1F6FC;
    border: 1px solid #e2e8f2;
    border-radius: 10px;
    padding: 12px 14px;
}

.prod-base-label {
    font-size: 12px;
    font-weight: 700;
    color: #003479;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
}

.prod-base-options {
    display: flex;
    justify-content: center;
    gap: 30px;
}

.prod-base-option {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #444;
    cursor: pointer;
    margin-bottom: 0;
}

    .prod-base-option input[type="radio"] {
        accent-color: #003479;
        width: 15px;
        height: 15px;
        cursor: pointer;
    }

/* Categorías */
.prod-categorias-titulo {
    font-size: 13px;
    font-weight: 700;
    color: #003479;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.prod-categorias-lista {
    margin: 0;
    padding: 0;
}

.prod-categoria-item {
    margin-bottom: 2px;
    border-radius: 8px;
    transition: background 0.15s;
}

    .prod-categoria-item.active > .prod-categoria-btn {
        background: #003479;
        color: #fff;
    }

    .prod-categoria-item.active .prod-categoria-icon,
    .prod-categoria-item.active .prod-categoria-nombre,
    .prod-categoria-item.active .prod-categoria-arrow {
        color: #fff;
    }

.prod-categoria-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    margin-bottom: 0;
    position: relative;
}

    .prod-categoria-btn:hover {
        background: #e8f0fb;
        color: #003479;
    }

/* Ocultar el checkbox real pero mantenerlo funcional */
.prod-cat-checkbox {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.prod-categoria-icon {
    color: #003479;
    font-size: 15px;
    flex-shrink: 0;
    width: 20px;
    text-align: center;
}

.prod-categoria-nombre {
    font-size: 13px;
    color: #444;
    flex: 1;
    line-height: 1.3;
    transition: color 0.15s;
}

.prod-categoria-btn:hover .prod-categoria-nombre {
    color: #003479;
}

.prod-categoria-arrow {
    font-size: 11px;
    color: #bbb;
    flex-shrink: 0;
    transition: color 0.15s;
}

.prod-categoria-btn:hover .prod-categoria-arrow {
    color: #003479;
}

/* Card asesor */
.prod-asesor-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: #F1F6FC;
    border: 1.5px solid #e2e8f2;
    border-radius: 12px;
    padding: 16px 14px;
    margin-top: auto;
}

.prod-asesor-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #003479;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 18px;
    color: #fff;
}

.prod-asesor-body {
    flex: 1;
}

.prod-asesor-titulo {
    font-size: 13px;
    font-weight: 700;
    color: #003479;
    margin-bottom: 4px;
}

.prod-asesor-desc {
    font-size: 12px;
    color: #636569;
    line-height: 1.45;
    margin-bottom: 10px;
}

.prod-asesor-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #003479;
    color: #fff !important;
    border: none;
    border-radius: 6px;
    padding: 7px 14px;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s;
    width: auto !important;
    height: auto !important;
}

    .prod-asesor-btn:hover {
        background: #0055a5;
        color: #fff !important;
        text-decoration: none;
    }


/* =====================================================================
   CONTENIDO PRINCIPAL
   ===================================================================== */
.prod-main {
    flex: 1;
    min-width: 0;
    padding: 24px 28px 40px;
    background: #fff;
}

/* Cabecera categoría seleccionada */
.prod-cat-header {
    display: flex;
    align-items: center;
    gap: 16px;
    background: #F1F6FC;
    border: 1px solid #e2e8f2;
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 24px;
}

.prod-cat-header-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #003479;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #fff;
    flex-shrink: 0;
}

.prod-cat-header-label {
    font-size: 12px;
    color: #636569;
    margin-bottom: 2px;
    display: block;
}

.prod-cat-header-nombre {
    font-size: 22px;
    font-weight: 700;
    color: #003479;
    margin-bottom: 0;
    line-height: 1.2;
}


/* =====================================================================
   GRID & CARDS DE PRODUCTOS
   ===================================================================== */
.prod-grid {
    margin: 0 -8px;
}

.prod-card-col {
    padding: 0 8px;
    margin-bottom: 16px;
}

.prod-card-link {
    display: block;
    text-decoration: none;
    color: inherit;
    height: 100%;
}

    .prod-card-link:hover {
        text-decoration: none;
        color: inherit;
    }

.prod-card {
    background: #fff;
    border: 1.5px solid #e2e8f2;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
    box-shadow: 0 2px 8px rgba(0,52,121,0.05);
    transition: box-shadow 0.25s ease, transform 0.25s ease;
    cursor: pointer;
}

    .prod-card:hover {
        box-shadow: 0 8px 24px rgba(0,52,121,0.13);
        transform: translateY(-3px);
    }

/* Imagen */
.prod-card-img-wrap {
    width: 100%;
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8fafd;
    overflow: hidden;
    padding: 12px;
}

.prod-card-img {
    max-height: 110px;
    max-width: 100%;
    width: auto !important;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.prod-card:hover .prod-card-img {
    transform: scale(1.06);
}

/* Body */
.prod-card-body {
    padding: 10px 12px 6px;
    flex: 1;
    text-align: center;
}

.prod-card-codigo {
    font-size: 13px;
    font-weight: 700;
    color: #003479;
    margin-bottom: 4px;
    line-height: 1.3;
}

.prod-card-nombre {
    font-size: 12px;
    color: #636569;
    line-height: 1.4;
    margin-bottom: 0;
}

/* Footer / botón */
.prod-card-footer {
    padding: 8px 12px 12px;
    text-align: center;
}

.prod-card-btn {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    background: #003479 !important;
    color: #fff !important;
    border: none;
    border-radius: 6px;
    padding: 7px 14px !important;
    font-size: 12px;
    font-weight: 600;
    width: auto !important;
    height: auto !important;
    transition: background 0.2s;
}

    .prod-card-btn:hover {
        background: #0055a5 !important;
        color: #fff !important;
    }

/* Sin resultados */
.prod-empty {
    text-align: center;
    padding: 40px 0;
}


/* =====================================================================
   PAGINACIÓN
   ===================================================================== */
.prod-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-top: 28px;
}

.prod-page-btn {
    min-width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1.5px solid #e2e8f2;
    background: #fff;
    color: #003479;
    font-size: 13px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    padding: 0 4px;
}

    .prod-page-btn:hover:not([disabled]) {
        background: #e8f0fb;
        border-color: #003479;
    }

    .prod-page-btn.prod-page-active,
    .prod-page-btn:disabled.prod-page-active {
        background: #003479 !important;
        color: #fff !important;
        border-color: #003479 !important;
        cursor: default;
    }

    .prod-page-btn:disabled {
        opacity: 0.4;
        cursor: not-allowed;
    }

.prod-page-prev,
.prod-page-next {
    font-size: 14px;
}


/* =====================================================================
   OVERRIDE: limpiar estilos viejos que puedan colisionar
   ===================================================================== */
#productos-secction .bd-example {
    padding-top: 0;
    margin-bottom: 0;
    position: static;
    z-index: auto;
}

#productos-secction #section-productos {
    display: none; /* El bloque antiguo de filtros por nav pills ya no se usa en el nuevo layout */
}

#productos-secction #title-productos {
    display: none; /* El título ahora está en el sidebar */
}

#productos-secction .cont-productos {
    height: auto;
    overflow: visible;
}

/* Evitar que effect-card duplique la clase bg-card-producto */
#productos-secction .prod-card.effect-card:hover {
    border: 1.5px solid #e2e8f2 !important;
}

/* =====================================================================
   SUCURSALES OSEL 
   ===================================================================== */

/* ─── OVERRIDE: apagar estilos viejos del #map en esta página ─── */
.suc-page #map {
    background: none;
}

.suc-page .maps {
    background: #F4F7FD;
}

/* =====================================================================
   HERO
   ===================================================================== */
.suc-hero {
    background: linear-gradient(120deg, #EEF3FC 0%, #F4F2FB 55%, #EAF0FB 100%);
    overflow: hidden;
    position: relative;
}

.suc-hero-inner {
    display: flex;
    align-items: center;
    gap: 40px;
    padding-top: 32px;
    padding-bottom: 40px;
    position: relative;
    z-index: 2;
}

.suc-hero-text {
    flex: 1;
    min-width: 0;
    /* Asegurar que el texto NO se encime con la imagen */
    max-width: calc(100% - 460px);
}

.suc-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #7E879C;
    margin-bottom: 16px;
}

    .suc-breadcrumb a {
        color: #7E879C;
        text-decoration: none;
    }

        .suc-breadcrumb a:hover {
            color: #163A8C;
        }

.suc-breadcrumb-sep {
    color: #B9C1D4;
}

.suc-hero-eyebrow {
    font-size: 12px;
    font-weight: 700;
    color: #2C68C9;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.suc-hero-titulo {
    font-size: 48px;
    line-height: 1.06;
    font-weight: 700;
    color: #163A8C;
    letter-spacing: -.02em;
    margin: 0 0 14px;
}

.suc-hero-desc {
    font-size: 16px !important;
    line-height: 1.55;
    color: #4A5470;
    margin: 0;
}

/* Hero imagen decorativa */
.suc-hero-img-col {
    flex: none;
    width: 400px;
    height: 230px;
    position: relative;
    overflow: visible;
}

.suc-hero-img-wrap {
    position: absolute;
    inset: 0;
    /* clip-path paralelo */
    clip-path: polygon(8% 0, 100% 0, 92% 100%, 0 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Badge azul con pin — esquina inferior derecha */
.suc-hero-img-badge {
    position: absolute;
    right: -4px;
    bottom: -16px;
    width: 100px;
    height: 100px;
    clip-path: polygon(8% 0, 100% 0, 92% 100%, 0 100%);
    background: #163A8C;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

    .suc-hero-img-badge i,
    .suc-hero-img-badge svg {
        color: #fff;
        font-size: 32px;
    }

/* MAIN AREA */
.suc-main {
    background: #fff;
    padding: 36px 0 56px;
}

/* Filter label */
.suc-filter-label {
    font-size: 15px;
    font-weight: 700;
    color: #1E2A45;
    margin-bottom: 14px;
}

/* Filter bar  */
.suc-filter-bar {
    background: #fff;
    border: 1px solid #E7EBF3;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(22, 58, 140, .06);
    padding: 14px 16px;
    display: flex;
    align-items: flex-end;
    gap: 14px;
    flex-wrap: nowrap; 
    margin-bottom: 28px;
}

.suc-filter-field {
    flex: 1;
    min-width: 0; 
}

.suc-field-label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: #6B7488;
    margin-bottom: 6px;
}

.suc-select-wrap {
    position: relative;
}

.suc-select {
    width: 100%;
    appearance: none;
    -webkit-appearance: none;
    font-size: 14px;
    font-weight: 600;
    color: #1E2A45;
    background: #F6F8FC;
    border: 1.5px solid #E2E8F3;
    border-radius: 10px;
    padding: 12px 38px 12px 14px;
    cursor: pointer;
    transition: border-color .15s;
}

    .suc-select:focus {
        outline: none;
        border-color: #163A8C;
    }

.suc-select-arrow {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}

.suc-btn-locate {
    flex: none;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 9px;
    background: #163A8C;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    border: none;
    border-radius: 10px;
    padding: 13px 20px;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(22, 58, 140, .2);
    transition: background .18s, transform .15s, box-shadow .15s;
}

    .suc-btn-locate:hover {
        background: #0F2A66;
        transform: translateY(-1px);
        box-shadow: 0 10px 26px rgba(22, 58, 140, .28);
        color: #fff;
    }

.suc-btn-info {
    flex: none;
    width: 46px;
    height: 46px;
    border: 1.5px solid #CFE0F2;
    background: #EAF0FC;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}

    .suc-btn-info:hover {
        background: #D6E4F7;
        border-color: #2C68C9;
    }

/* Split layout */
.suc-split {
    display: flex;
    gap: 24px;
    align-items: flex-start;
}

/* List column  */
.suc-list-col {
    flex: none;
    width: 420px;
    min-width: 0;
}

.suc-list-hint {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #7E879C;
    margin: 0 0 14px;
}

    .suc-list-hint strong {
        color: #163A8C;
        font-weight: 700;
    }

.suc-cards-scroll {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 640px;
    overflow-y: auto;
    padding-right: 4px;
}

    .suc-cards-scroll::-webkit-scrollbar {
        width: 6px;
    }

    .suc-cards-scroll::-webkit-scrollbar-thumb {
        background: #CBD6EA;
        border-radius: 6px;
    }

    .suc-cards-scroll::-webkit-scrollbar-track {
        background: transparent;
    }

/* Branch card  */
.suc-card {
    background: #fff;
    border: 1px solid #E7EBF3;
    border-radius: 14px;
    padding: 16px;
    box-shadow: 0 4px 14px rgba(22, 58, 140, .05);
    transition: box-shadow .16s, border-color .16s, transform .16s;
}

    .suc-card:hover {
        box-shadow: 0 10px 26px rgba(22, 58, 140, .12);
        border-color: #C5D3EE;
        transform: translateY(-1px);
    }

.suc-card--active {
    border-color: #2C68C9 !important;
    box-shadow: 0 6px 22px rgba(22, 58, 140, .18) !important;
    background: #F6F9FE !important;
}

.suc-card-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
}

.suc-card-icon {
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #EAF0FC;
    display: flex;
    align-items: center;
    justify-content: center;
}

.suc-card-title-wrap {
    flex: 1;
    min-width: 0;
}

.suc-card-nombre {
    font-size: 15px;
    font-weight: 700;
    color: #163A8C;
    margin: 0 0 4px;
    line-height: 1.25;
}

.suc-card-dir {
    font-size: 12.5px;
    line-height: 1.45;
    color: #5A6377;
    margin: 0;
}

.suc-card-footer {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    padding-top: 12px;
    border-top: 1px solid #EEF1F7;
}

.suc-card-contacto {
    min-width: 0;
}

.suc-contacto-label {
    font-size: 12px;
    font-weight: 700;
    color: #1E2A45;
    margin-bottom: 6px;
}

.suc-contacto-link {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: #2C68C9;
    text-decoration: none;
    margin-bottom: 4px;
    word-break: break-all;
    transition: color .15s;
}

    .suc-contacto-link:hover {
        color: #163A8C;
        text-decoration: underline;
    }

    .suc-contacto-link:last-child {
        margin-bottom: 0;
    }

.suc-btn-localizar {
    flex: none;
    display: flex;
    align-items: center;
    gap: 7px;
    background: #163A8C;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    border: none;
    border-radius: 8px;
    padding: 10px 16px;
    cursor: pointer;
    box-shadow: 0 5px 14px rgba(22, 58, 140, .18);
    transition: background .18s, transform .15s;
    white-space: nowrap;
}

    .suc-btn-localizar:hover {
        background: #0F2A66;
        transform: translateY(-1px);
        color: #fff;
    }

/*  Map column  */
.suc-map-col {
    flex: 1;
    min-width: 0;
    position: sticky;
    top: 80px;
}

/* Override del #mapGoogle viejo */
.suc-page #mapGoogle {
    border-radius: 16px !important;
    box-shadow: 0 12px 36px rgba(22, 58, 140, .10) !important;
    height: 640px !important;
    width: 100% !important;
    margin-top: 0 !important;
    border: 1px solid #E7EBF3 !important;
}