/* ==========================================================================
   HOJA DE ESTILOS - OVERRIDES COMPLETO
   ========================================================================== */
/* --------------------------------------------------------------------------
   -1. DEPENDENCIAS EXTERNAS
   -------------------------------------------------------------------------- */
@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css");
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css");

/* --------------------------------------------------------------------------
   0. VARIABLES DE DISEÑO (COLOR PALETTE)
   -------------------------------------------------------------------------- */
:root {
    /* Text Colors */
    --fc-white: #ffffff;
    --fc-black: #000000;
    --fc-gray: #CCCCCC;
    --fc-blue: #01affa;
    --fc-green: #c1dd45;
    --fc-orange: #fba740;
    --fc-pink: #f7b4cd;
    --fc-red: #de5e64;
    
    --fc-l-gray: #EEEEEE;
    --fc-l-blue: #4cc7fb;
    --fc-l-green: #ebff9c;
    --fc-l-orange: #ffcc8e;
    --fc-l-pink: #ff6da4;
    --fc-l-red: #ffb8bc;
    
    --fc-d-gray: #999999;
    --fc-d-blue: #00547b;
    --fc-d-green: #5b5e1d;
    --fc-d-orange: #ad6e1b;
    --fc-d-pink: #aa6b83;
    --fc-d-red: #912f34;
    --fc-m-orange: #fa8b00;

    /* Background & Border Colors */
    --bg-gray: #CCCCCC;
    --bg-blue: #01affa;
    --bg-green: #acd112;
    --bg-orange: #fba740;
    --bg-pink: #f6c2b4;
    --bg-red: #de5e65;
    --bg-yellow: #fff600;
    
    --bg-l-gray: #EEEEEE;
    --bg-l-blue: #4cc7fb;
    --bg-l-green: #ebff9c;
    --bg-l-orange: #ffdeab;
    --bg-l-pink: #ff6da4;
    --bg-l-red: #ffb8bc;
    --bg-l-yellow: #fcf75a;
    --bg-l-brown: #c6b6a6;
    
    --bg-d-gray: #999999;
    --bg-d-blue: #385a88;
    --bg-d-green: #5b5e1d;
    --bg-d-orange: #ad6e1b;
    --bg-d-pink: #a96b82;
    --bg-d-red: #912f34;
    --bg-d-yellow: #FFCD00;
    --bg-mother: #b87086;
}

/* --------------------------------------------------------------------------
   1. FUENTES
   -------------------------------------------------------------------------- */

/* Nexa Regular */
@font-face {
    font-family: 'Nexa';
    font-style: normal;
    font-weight: normal;
    font-display: swap;
    src: url('../fonts/nexa/Nexa-Regular.eot');
    src: local(''),
         url('../fonts/nexa/Nexa-Regular.eot?#iefix') format('embedded-opentype'),
         url('../fonts/nexa/Nexa-Regular.woff2') format('woff2'),
         url('../fonts/nexa/Nexa-Regular.woff') format('woff'),
         url('../fonts/nexa/Nexa-Regular.ttf') format('truetype'),
         url('../fonts/nexa/Nexa-Regular.svg#Nexa') format('svg');
}

/* Nexa Bold */
@font-face {
    font-family: 'Nexa';
    font-style: normal;
    font-weight: bold;
    font-display: swap;
    src: url('../fonts/nexa/Nexa-Bold.eot');
    src: local(''),
         url('../fonts/nexa/Nexa-Bold.eot?#iefix') format('embedded-opentype'),
         url('../fonts/nexa/Nexa-Bold.woff2') format('woff2'),
         url('../fonts/nexa/Nexa-Bold.woff') format('woff'),
         url('../fonts/nexa/Nexa-Bold.ttf') format('truetype'),
         url('../fonts/nexa/Nexa-Bold.svg#Nexa') format('svg');
}

/* Nexa Black */
@font-face {
    font-family: 'Nexa';
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url('../fonts/nexa/Nexa-Black.eot');
    src: local(''),
         url('../fonts/nexa/Nexa-Black.eot?#iefix') format('embedded-opentype'),
         url('../fonts/nexa/Nexa-Black.woff2') format('woff2'),
         url('../fonts/nexa/Nexa-Black.woff') format('woff'),
         url('../fonts/nexa/Nexa-Black.ttf') format('truetype'),
         url('../fonts/nexa/Nexa-Black.svg#Nexa') format('svg');
}

/* --------------------------------------------------------------------------
   2. RESET & BASE ESTILOS
   -------------------------------------------------------------------------- */
* {
    box-sizing: border-box;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Nexa', arial, sans-serif;
    font-weight: normal;
    font-size: 1.0rem;
}

a {
    color: #000;
    font-weight: bold;
    text-decoration: none;
}

a:hover {
    color: #444;
    text-decoration: underline;
}

[data-wk-open] {
    cursor: pointer;
}

/* --------------------------------------------------------------------------
   3. HELPERS & UTILITIES (Sizing, Shadows, Text)
   -------------------------------------------------------------------------- */
.box-shadow { box-shadow: 0 2px 10px -2px rgba(0,0,0,.3); }
.box-shadow-none { box-shadow: none; }
.toast-container { z-index: 1999; }

/* Min Width Utilities */
.min-vw-5  { min-width: 5vw; }
.min-vw-10 { min-width: 10vw; }
.min-vw-15 { min-width: 15vw; }
.min-vw-20 { min-width: 20vw; }
.min-vw-25 { min-width: 25vw; }
.min-vw-50 { min-width: 50vw; }
.min-vw-75 { min-width: 75vw; }

/* Min Height Utilities */
.min-vh-5  { min-height: 5vh; }
.min-vh-10 { min-height: 10vh; }
.min-vh-15 { min-height: 15vh; }
.min-vh-20 { min-height: 20vh; }
.min-vh-25 { min-height: 25vh; }
.min-vh-50 { min-height: 50vh; }
.min-vh-75 { min-height: 75vh; }

/* Typography Helpers */
.fw-n  { font-weight: normal !important; }
.fw-l  { font-weight: 100 !important; }
.fw-b  { font-weight: bold !important; }
.fw-eb { font-weight: 900 !important; }
.fs-7  { font-size: 0.85rem !important; }

/* Text Colors Application */
.fc-white    { color: var(--fc-white) !important; }
.fc-black    { color: var(--fc-black) !important; }
.fc-gray     { color: var(--fc-gray) !important; }
.fc-blue     { color: var(--fc-blue) !important; }
.fc-green    { color: var(--fc-green) !important; }
.fc-orange   { color: var(--fc-orange) !important; }
.fc-pink     { color: var(--fc-pink) !important; }
.fc-red      { color: var(--fc-red) !important; }
.fc-l-gray   { color: var(--fc-l-gray) !important; }
.fc-l-blue   { color: var(--fc-l-blue) !important; }
.fc-l-green  { color: var(--fc-l-green) !important; }
.fc-l-orange { color: var(--fc-l-orange) !important; }
.fc-l-pink   { color: var(--fc-l-pink) !important; }
.fc-l-red    { color: var(--fc-l-red) !important; }
.fc-d-gray   { color: var(--fc-d-gray) !important; }
.fc-d-blue   { color: var(--fc-d-blue) !important; }
.fc-d-green  { color: var(--fc-d-green) !important; }
.fc-d-orange { color: var(--fc-d-orange) !important; }
.fc-d-pink   { color: var(--fc-d-pink) !important; }
.fc-d-red    { color: var(--fc-d-red) !important; }
.fc-m-orange { color: var(--fc-m-orange) !important; }

/* Flex & Scroll Utilities */
.flex-scroll {
    flex-wrap: nowrap;
    overflow-x: scroll;
}
.flex-scroll-item {
    display: flex;
    flex-flow: column;
}

/* --------------------------------------------------------------------------
   4. BACKGROUNDS & BUTTONS SYSTEM
   -------------------------------------------------------------------------- */
.button {
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    font-weight: 900;
    border-radius: 0.5rem;
}

.btn {
    font-weight: 700;
    border-radius: 0.5rem;
    border: 1px solid transparent;
}

a.btn {
    text-decoration: none;
}

/* Background Color Assignments */
.bg-transparent, .btn-transparent { background: transparent; }
.bg-white, .btn-white             { background: white; }
.bg-gray, .btn-gray               { background: var(--bg-gray); }
.bg-black, .btn-black             { background: black; }
.bg-blue, .btn-blue               { background: var(--bg-blue); }
.bg-green, .btn-green             { background: var(--bg-green); }
.bg-orange, .btn-orange           { background: var(--bg-orange); }
.bg-pink, .btn-pink               { background: var(--bg-pink); }
.bg-red, .btn-red                 { background: var(--bg-red); }
.bg-yellow, .btn-yellow           { background: var(--bg-yellow); }
.bg-l-gray, .btn-l-gray           { background: var(--bg-l-gray); }
.bg-l-blue, .btn-l-blue           { background: var(--bg-l-blue); }
.bg-l-green, .btn-l-green         { background: var(--bg-l-green); }
.bg-l-orange, .btn-l-orange       { background: var(--bg-l-orange); }
.bg-l-pink, .btn-l-pink           { background: var(--bg-l-pink); }
.bg-l-red, .btn-l-red             { background: var(--bg-l-red); }
.bg-l-yellow, .btn-l-yellow       { background: var(--bg-l-yellow); }
.bg-l-brown, .btn-l-brown         { background: var(--bg-l-brown); }
.bg-d-gray, .btn-d-gray           { background: var(--bg-d-gray); }
.bg-d-blue, .btn-d-blue           { background: var(--bg-d-blue); }
.bg-d-green, .btn-d-green         { background: var(--bg-d-green); }
.bg-d-orange, .btn-d-orange       { background: var(--bg-d-orange); }
.bg-d-pink, .btn-d-pink           { background: var(--bg-d-pink); }
.bg-d-red, .btn-d-red             { background: var(--bg-d-red); }
.bg-d-yellow, .btn-d-yellow       { background: var(--bg-d-yellow); }
.bg-mother                        { background: var(--bg-mother); }

/* Theme Smart Contrast Contrast */
.bg-transparent, .btn-transparent, .bg-white, .btn-white, .bg-gray, .btn-gray, 
.bg-l-gray, .btn-l-gray, .bg-l-blue, .btn-l-blue, .bg-l-green, .btn-l-green, 
.bg-l-orange, .btn-l-orange, .bg-l-pink, .btn-l-pink, .bg-l-red, .btn-l-red {
    color: black;
}

.bg-black, .btn-black, .bg-blue, .btn-blue, .bg-green, .btn-green, 
.bg-orange, .btn-orange, .bg-pink, .btn-pink, .bg-red, .btn-red, 
.bg-d-gray, .btn-d-gray, .bg-d-blue, .btn-d-blue, .bg-d-green, .btn-d-green, 
.bg-d-orange, .btn-d-orange, .bg-d-pink, .btn-d-pink, .bg-d-red, .btn-d-red {
    color: white;
}

/* Buttons Hover States */
.btn-white:hover    { border-color: white !important; }
.btn-gray:hover     { border-color: var(--bg-gray) !important; }
.btn-black:hover    { border-color: black !important; }
.btn-blue:hover     { border-color: var(--bg-blue) !important; }
.btn-green:hover    { border-color: var(--bg-green) !important; }
.btn-orange:hover   { border-color: var(--bg-orange) !important; }
.btn-pink:hover     { border-color: var(--bg-pink) !important; }
.btn-red:hover      { border-color: var(--bg-red) !important; }
.btn-yellow:hover   { border-color: var(--bg-yellow) !important; }
.btn-l-gray:hover   { border-color: var(--bg-l-gray) !important; }
.btn-l-blue:hover   { border-color: var(--bg-l-blue) !important; }
.btn-l-green:hover  { border-color: var(--bg-l-green) !important; }
.btn-l-orange:hover { border-color: var(--bg-l-orange) !important; }
.btn-l-pink:hover   { border-color: var(--bg-l-pink) !important; }
.btn-l-red:hover    { border-color: var(--bg-l-red) !important; }
.btn-l-yellow:hover { border-color: var(--bg-l-yellow) !important; }
.btn-d-gray:hover   { border-color: var(--bg-d-gray) !important; }
.btn-d-blue:hover   { border-color: var(--bg-d-blue) !important; }
.btn-d-green:hover  { border-color: var(--bg-d-green) !important; }
.btn-d-orange:hover { border-color: var(--bg-d-orange) !important; }
.btn-d-pink:hover   { border-color: var(--bg-d-pink) !important; }
.btn-d-red:hover    { border-color: var(--bg-d-red) !important; }
.btn-d-yellow:hover { border-color: var(--bg-d-yellow) !important; }

.btn-link {
    color: #000;
    font-weight: 900;
}

.btn-transparent.active {
    background: white;
    color: black;
    border-color: white;
}

/* --------------------------------------------------------------------------
   5. BORDERS UTILITIES
   -------------------------------------------------------------------------- */
/* Border Colors */
.border-gray     { border-color: var(--bg-gray) !important; }
.border-black    { border-color: black !important; }
.border-blue     { border-color: var(--bg-blue) !important; }
.border-green    { border-color: var(--bg-green) !important; }
.border-orange   { border-color: var(--bg-orange) !important; }
.border-pink     { border-color: var(--bg-pink) !important; }
.border-red      { border-color: var(--bg-red) !important; }
.border-yellow   { border-color: var(--bg-yellow) !important; }
.border-l-gray   { border-color: var(--bg-l-gray) !important; }
.border-l-blue   { border-color: var(--bg-l-blue) !important; }
.border-l-green  { border-color: var(--bg-l-green) !important; }
.border-l-orange { border-color: var(--bg-l-orange) !important; }
.border-l-pink   { border-color: var(--bg-l-pink) !important; }
.border-l-red    { border-color: var(--bg-l-red) !important; }
.border-l-yellow { border-color: var(--bg-l-yellow) !important; }
.border-d-gray   { border-color: var(--bg-d-gray) !important; }
.border-d-blue   { border-color: var(--bg-d-blue) !important; }
.border-d-green  { border-color: var(--bg-d-green) !important; }
.border-d-orange { border-color: var(--bg-d-orange) !important; }
.border-d-pink   { border-color: var(--bg-d-pink) !important; }
.border-d-red    { border-color: var(--bg-d-red) !important; }
.border-d-yellow { border-color: var(--bg-d-yellow) !important; }

.border-6 { border-width: 15px !important; }

/* Border Radius Utilities */
.br-1 { border-radius: 1rem !important; }
.br-2 { border-radius: 2rem !important; }
.br-3 { border-radius: 3rem !important; }
.br-4 { border-radius: 4rem !important; }
.br-5 { border-radius: 5rem !important; }

.brt-1 { border-radius: 1rem 1rem 0 0; }
.brt-2 { border-radius: 2rem 2rem 0 0; }
.brt-3 { border-radius: 3rem 3rem 0 0; }
.brt-4 { border-radius: 4rem 4rem 0 0; }
.brt-5 { border-radius: 5rem 5rem 0 0; }

.brb-1 { border-radius: 0 0 1rem 1rem; }
.brb-2 { border-radius: 0 0 2rem 2rem; }
.brb-3 { border-radius: 0 0 3rem 3rem; }
.brb-4 { border-radius: 0 0 4rem 4rem; }
.brb-5 { border-radius: 0 0 5rem 5rem; }

.brl-1 { border-radius: 1rem 0 0 1rem; }
.brl-2 { border-radius: 2rem 0 0 2rem; }
.brl-3 { border-radius: 3rem 0 0 3rem; }
.brl-4 { border-radius: 4rem 0 0 4rem; }
.brl-5 { border-radius: 5rem 0 0 5rem; }

.brr-1 { border-radius: 0 1rem 1rem 0; }
.brr-2 { border-radius: 0 2rem 2rem 0; }
.brr-3 { border-radius: 0 3rem 3rem 0; }
.brr-4 { border-radius: 0 4rem 4rem 0; }
.brr-5 { border-radius: 0 5rem 5rem 0; }

/* --------------------------------------------------------------------------
   6. UI COMPONENTS (Navbar, Menus, Forms)
   -------------------------------------------------------------------------- */
/* Navbar Desktop */
#navbar-desktop {
    transition: all .5s;
    background-color: #fff;
}

#navbar-desktop a { color: #111; }
#navbar-desktop .btn { border: 2px solid; }

#navbar-desktop .navbar-cta-login {
    border: 2px solid #111;
    color: #111;
    background: transparent;
    font-size: 0.95rem;
    border-radius: 0.5rem;
}

#navbar-desktop .navbar-cta-fastprint {
    border: 2px solid #111;
    font-size: 0.95rem;
    border-radius: 0.5rem;
    background-color: #111;
    color: #fff;
}

#navbar-desktop .navbar-cta-login:hover {
    background-color: #111;
    color: #fff !important;
    border-color: #111;
}

#navbar-desktop .navbar-cta-fastprint:hover {
    background-color: #fff;
    color: #111 !important;
    border-color: #111;
}

#navbar-desktop .navbar-toggler i { color: #111; }

/* Main Menu List */
#main-menu-list { font-size: 1rem; }
#main-menu-list a, #main-menu-list .nav-link { color: #111 !important; }
#main-menu-list a.dropdown-item:hover { color: #333 !important; }
#main-menu-list .dropdown-item { font-size: 0.95rem; }

/* Mobile Menu */
#main-menu-list-mobile {
    align-items: center;
    text-align: center;
}
#main-menu-list-mobile .nav-item { width: 100%; }
#main-menu-list-mobile a, #main-menu-list-mobile .nav-link {
    color: #111 !important;
    text-align: center;
}
#main-menu-list-mobile a:hover, #main-menu-list-mobile .nav-link:hover { color: #555 !important; }
#main-menu-list-mobile a.dropdown-item:hover { color: #333 !important; }
#main-menu-list-mobile .dropdown-item {
    font-size: 0.95rem;
    text-align: center;
}
#main-menu-list-mobile .dropdown-menu {
    position: static !important;
    float: none;
    width: 100%;
    text-align: center;
    border: none;
    box-shadow: none;
    margin: 0;
}
#main-menu-list-mobile .mega-menu__view-all-item {
    border-top: 1px solid #eee;
    margin-top: 0.25rem;
    padding-top: 0.25rem;
}
#main-menu-list-mobile .mega-menu__view-all-link {
    font-weight: 600;
    color: #111 !important;
}
#main-menu-list-mobile .mega-menu__view-all-link:hover { color: #555 !important; }

/* Forms & Inputs */
.form-label {
    font-size: 0.9rem;
    color: #666;
}

.form-control, .form-select {
    border-radius: 0.5rem;
    border: 1px solid #CCC;
    font-weight: 700;
    font-size: 1.15rem;
}

.form-check { padding-left: 2.5rem; }
.form-check-input {
    padding: 8px;
    position: relative;
    border: 2px solid #bebebe;
}
.form-check-input[type=radio] { border-radius: 0.2rem !important; }
.form-check-input:checked[type=radio] {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
}

.form-check-label {
    margin-left: 10px;
    font-size: 0.9rem;
    cursor: pointer;
}

.password-toggle {
    float: right;
    position: relative;
    z-index: 5;
    margin-top: -32px;
    margin-right: 35px;
    cursor: pointer;
}

/* --------------------------------------------------------------------------
   7. SECTIONS & LAYOUT BLOCKS (Hero, Carousels, Products, Corporate)
   -------------------------------------------------------------------------- */
/* Hero Grid */
.hero-grid {
    padding-top: 9.5rem;
    padding-bottom: 1rem;
}
.hero-grid__inner {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: 1fr;
}
.hero-grid__tile {
    min-height: 300px;
    position: relative;
    height: 100%;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
}
.hero-grid__media {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}
.hero-grid__media picture {
    display: block;
    width: 100%;
    height: 100%;
}
.hero-grid__img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center 35%;
}
.hero-grid__overlay {
    z-index: 2;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.12) 50%, rgba(0, 0, 0, 0.62) 100%);
}
.hero-grid__overlay h2 {
    font-size: 1.25rem !important;
    line-height: 1.2;
}
.hero-grid__overlay p {
    font-size: 0.85rem !important;
    line-height: 1.35;
    margin-bottom: 0.75rem !important;
}

.hero-grid__tile .btn {
    position: relative;
    z-index: 3;
    border-radius: 0.5rem;
    border: 2px solid;
    font-size: 0.95rem;
    text-decoration: none;
}
.hero-grid__tile .btn-white {
    background-color: #fff;
    color: #111;
    border-color: #fff;
}
.hero-grid__tile .btn-white:hover {
    background-color: transparent;
    color: #fff !important;
    border-color: #fff;
}

/* Carousels */
#landing-carousel .carousel-item {
    padding-top: 11vh;
    height: 70vh;
}

.carousel-after {
    top: -25px;
    position: relative;
    z-index: 3;
}
.carousel-after a {
    text-decoration: none;
    background-color: white;
    border-radius: 0.375rem;
    color: #000;
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15) !important;
    padding: 0.25rem !important;
    margin-bottom: 1rem !important;
    height: 100% !important;
}

.carousel-indicators button {
    width: 40px !important;
    height: 7px !important;
    border-top: 0 !important;
    border-bottom: 0 !important;
    border-radius: 3rem;
}

#carousel-product .carousel-inner, .carousel-cards-inner {
    min-height: auto;
    border-radius: 0;
}
#carousel-product .carousel-item, .carousel-cards-inner .carousel-item {
    height: auto;
}
.carousel-cards-inner .carousel-item.active,
.carousel-cards-inner .carousel-item-start,
.carousel-cards-inner .carousel-item-next,
.carousel-cards-inner .carousel-item-prev {
    display: flex;
}
.carousel-cards .carousel-control-prev, .carousel-cards .carousel-control-next {
    width: 10%;
    z-index: 2;
    height: 30%;
    top: 33%;
    border-radius: 0.5rem;
}
.carousel-cards-inner .carousel-item > div { display: none; }
.carousel-cards-inner .carousel-item > div:first-child { display: block; }

/* Sections Block */
.sections {
    background: transparent;
    position: relative;
    width: 100%;
    margin: auto;
    padding: 40px;
    top: -50px;
    border-radius: 0.5rem;
    overflow-x: scroll;
    box-shadow: none;
    z-index: 2;
}
.sections-recogida { top: 0; }
.sections-item {
    background-color: #FFF;
    text-decoration: none;
    font-size: 0.95rem;
    box-shadow: 0 2px 5px -2px rgba(0,0,0,.3);
    border-radius: 1rem;
}
.sections-item:hover {
    text-decoration: none;
    cursor: pointer;
}

/* Our Products */
.our_products-menu {
    display: flex;
    flex-flow: row;
    justify-content: space-between;
    margin-top: 50px;
}
.our_products-menu-item {
    color: black;
    text-decoration: none;
    font-weight: bold;
    font-size: 0.5rem;
}
.our_products-menu-item.active { color: #f8900f; }
.our_products-product {
    display: flex;
    flex-flow: row;
    margin-top: 20px;
}
.our_products-product-text { margin-right: 100px; }
.our_products-product-text h3 { font-size: 36px; }
.our_products-product-text p {
    font-size: 0.5rem;
    margin: 20px 0;
}

/* Popular Products */
.popular_products-product {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    margin-top: 15px;
    border-radius: 0.5rem;
    height: 150px;
}
.popular_products-product-first {
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: flex-start;
}
.popular_products-product h3 {
    position: absolute;
    font-weight: 900;
    font-size: 1.2rem;
    z-index: 10;
    bottom: 15px;
    left: 10px;
}
.popular_products-product-single { height: 125px; }
.popular_products-product-double {
    height: 265px;
    align-items: flex-start;
}
.popular_products-product-double img { margin-top: 20px; }
.popular_products-product-double span { left: 10px; }

/* Companies & Overview */
.companies {
    display: flex;
    flex-flow: row;
    justify-content: space-between;
    align-items: center;
    background-image: linear-gradient(to left, #63d7fd, #01aefa);
}
.companies-text { color: white; }
.overview p { margin: 25px 0; }
.overview-card {
    display: flex;
    flex-flow: column;
    align-items: flex-start;
    border-radius: 1rem;
    padding: 1rem !important;
    box-shadow: 0 2px 10px -3px rgba(0,0,0,.3);
}
.overview-card .title { border-radius: 0.5rem; }
.overview-card .title, .overview-card .subtitle {
    display: flex;
    flex-flow: row;
    align-items: center;
}
.overview-card .title img {
    height: auto;
    width: 32px;
    margin: 0 15px;
}
.overview-card .subtitle {
    margin-top: 15px;
    color: #646d71;
    font-size: 0.5rem;
}

/* Campaign Backgrounds */
.bg-christmas {
    background-color: #154d33;
    background-image: url(../images/backgrounds/demo_20231114.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    color: white;
}

/* Product Lists & Tabs */
.list-products {
    display: flex;
    flex-flow: row;
    flex-wrap: wrap;
    justify-content: space-between;
}
.list-product {
    position: relative;
    border-radius: 0.5rem;
    box-shadow: 0 2px 5px -2px rgba(0,0,0,.5);
    margin: 25px 0;
}
.list-product-image {
    text-align: center;
    border-radius: 0.5rem 0.5rem 0 0;
    min-height: 300px;
}
.list-product-image .img-product { margin-top: 2.5rem; }
.list-product-image .badge {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    font-weight: 900;
    color: black;
}
.list-product-text { padding: 10px; }

.nav-link {
    color: #444;
    white-space: nowrap;
}
.nav-link.active {
    background: transparent !important;
    font-weight: 900;
    position: relative;
    color: #020101 !important;
}
.nav-link:hover {
    text-decoration: none;
    color: #020101;
}
.tab-pane p { font-weight: 100; }
.tab-pane p a {
    color: black;
    text-decoration: none;
    font-weight: 900;
}

/* Configurator Buttons */
.btn-config, .btn-interface-config {
    border-width: 2px;
    background-color: #efefef;
    border-color: #e3e3e3;
    padding: 0.25rem;
    color: #444;
}
.btn-config.active, .btn-interface-config.active {
    font-weight: 700;
    background-color: #198754;
    color: white;
}
.btn-config.active, .btn-interface-config.active, 
.btn-config:hover, .btn-interface-config:hover, 
.btn-config.active:active, .btn-interface-config.active:active {
    border-color: #198754 !important;
}
.btn-config.recommended:after { content: '*'; }
.dropdown-toggle::after { display: none; }

.delivery-button-box {
    border: 2px solid #CCC;
    margin: 1.5rem 0;
    padding-top: 1rem;
    padding-bottom: 1rem;
    border-radius: 1rem !important;
}
.delivery-button-box.active, .delivery-button-box:hover { border-color: black; }

/* Miscellaneous Blocks */
.breadcrumb { margin-top: 6rem; }
.breadcrumb a, .breadcrumb span {
    font-size: 0.87rem;
    color: #777;
    text-decoration: none;
}
.breadcrumb a:hover { text-decoration: underline; }

.copy {
    width: 100%;
    background: #FFF url(../images/backgrounds/grey_background.png) top center no-repeat;
    background-size: cover;
    padding: 3rem 0 2rem;
}

.footer { background-color: black; }
.footer hr { color: #979797; }
.footer-link {
    margin-top: 5px;
    color: white;
    text-decoration: none;
    font-size: 14px;
}
.footer-link:hover {
    color: #4cc7fb;
    text-decoration: none;
}
.footer-bottom-copy { color: #969c9e; }

#uploader-container {
    display: none;
    background: rgba(0,0,0,.6);
    color: white;
    width: 100%;
    padding: 1rem;
    height: 100%;
    position: fixed;
    top: 0;
    z-index: 1111;
}
.uploader-close-btn {
    font-size: 1.2rem;
    color: black;
    cursor: pointer;
}

#cart-list, #cart-list .btn { font-size: .85rem; }
#cart-list .card { border-radius: 1rem; }
#cart-list .card-header:first-child { border-radius: 1rem 1rem 0 0; }
#cart-list .card-footer:last-child { border-radius: 0 0 1rem 1rem; }
#cart-list .card-footer { border-top: medium none; }
.card-footer h3 {
    font-size: 1rem;
    font-weight: bold;
}

a.card-corporate {
    box-shadow: 0 2px 10px -2px rgba(0,0,0,.3);
    border-radius: 1rem;
    margin-bottom: 1.5rem !important;
    text-decoration: none !important;
}
a.card-corporate:hover { color: inherit !important; }

#resume-xs {
    position: fixed;
    bottom: 0;
    width: 96%;
    margin: 2%;
    z-index: 999;
    border-radius: 15px;
}

/* Fabric Gift Canvas */
.canvas-container {
    width: 100%;
    height: 0;
    padding-bottom: 50%;
    padding-top: 15%;
    position: relative;
}
#canvas-fabric {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* --------------------------------------------------------------------------
   8. RESPONSIVE DESIGN (Media Queries organizados de menor a mayor)
   -------------------------------------------------------------------------- */

/* --- Mobile specific (Max-width) --- */
@media only screen and (max-width: 767.98px) {
    .hero-grid__overlay { padding: 0.65rem 0.85rem !important; }
    .hero-grid__overlay h2 { font-size: 1.1rem !important; }
    .hero-grid__overlay p { margin-bottom: 0.5rem !important; }
    .hero-grid__tile .btn {
        font-size: 0.85rem;
        padding: 0.25rem 0.75rem;
    }
}

/* --- SM Breakpoint (>= 576px) --- */
@media only screen and (min-width: 576px) {
    #landing-carousel .carousel-item { height: 75vh; }
}

/* --- MD Breakpoint (>= 768px) --- */
@media only screen and (min-width: 768px) {
    #landing-carousel .carousel-item { height: 80vh; }
    .hero-grid { padding-top: 10rem; }
    .hero-grid__tile { min-height: 240px; }

    /* Cards Carousel Desktop Mechanics */
    .carousel-cards-inner .carousel-item-right.active,
    .carousel-cards-inner .carousel-item-next,
    .carousel-cards-inner .carousel-item-next:not(.carousel-item-start) {
        transform: translateX(25%) !important;
    }
    .carousel-cards-inner .carousel-item-left.active,
    .carousel-cards-inner .carousel-item-prev:not(.carousel-item-end),
    .carousel-cards-inner .active.carousel-item-start {
        transform: translateX(-25%) !important;
    }
    .carousel-cards-inner .carousel-item-next.carousel-item-start,
    .carousel-cards-inner .active.carousel-item-end {
        transform: translateX(0) !important;
    }
    .carousel-cards-inner .carousel-item-prev,
    .carousel-cards-inner .carousel-item-prev:not(.carousel-item-end) {
        transform: translateX(-25%) !important;
    }
    .carousel-cards-inner .carousel-item > div { display: block; }
    .carousel-cards .carousel-control-prev, .carousel-cards .carousel-control-next { width: 5%; }
}

/* --- MD Specific range (Tablet Grid) --- */
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
    .hero-grid__inner {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: minmax(280px, auto) repeat(2, minmax(220px, auto)) minmax(240px, auto);
        grid-auto-flow: row;
        align-items: stretch;
    }
    .hero-grid__tile {
        min-height: 0;
        height: 100%;
    }
    .hero-grid__tile--producto      { grid-column: 1 / -1; grid-row: 1; }
    .hero-grid__tile--click-collect { grid-column: 1 / -1; grid-row: 4; }
    .hero-grid__tile--fotos         { grid-column: 2; grid-row: 2; }
    .hero-grid__tile--empresa       { grid-column: 1; grid-row: 3; }
    .hero-grid__tile--campana       { grid-column: 2; grid-row: 3; }
    .hero-grid__tile--marketing     { grid-column: 1; grid-row: 2; }
}

/* --- LG Breakpoint (>= 992px) --- */
@media only screen and (min-width: 992px) {
    #navbar-desktop { background-color: #fff; }
    #navbar-desktop.navbar, #main-menu, #main-menu-list { overflow: visible !important; }
    #main-menu { position: relative; }
    #pills-tab, #main-menu-list { flex-flow: row; }
    
    #main-menu-list .nav-item .dropdown-menu:not(.mega-menu) { display: none; }
    #main-menu-list .nav-item:hover .dropdown-menu:not(.mega-menu) { display: block; }
    #main-menu-list .nav-item--mega { position: static; }

    #main-menu-list > .nav-item > .nav-link {
        position: relative;
        z-index: 2;
        border-bottom: none !important;
        padding-bottom: 0.75rem;
        margin-bottom: 0;
        font-weight: 400;
        transition: font-weight 0.15s ease, color 0.15s ease;
    }
    #main-menu-list > .nav-item > .nav-link::after {
        content: '';
        display: block !important;
        position: absolute;
        left: 0; right: 0; bottom: 0;
        height: 3px; width: auto;
        background-color: transparent;
        border: none; margin: 0;
        z-index: 3;
        pointer-events: none;
        transition: background-color 0.2s ease;
    }

    #main-menu-list > .nav-item:hover > .nav-link,
    #main-menu-list > .nav-item:focus-within > .nav-link {
        color: #111 !important;
        font-weight: 600;
    }
    #main-menu-list > .nav-item:hover > .nav-link::after,
    #main-menu-list > .nav-item:focus-within > .nav-link::after {
        background-color: #111;
    }

    /* Mega Menu Panels */
    #main-menu-list .nav-item--mega .mega-menu {
        display: block;
        position: fixed;
        left: 0; right: 0;
        top: var(--wk-navbar-height, 7.5rem);
        width: 100%;
        margin: 0 !important;
        padding: 1.5rem 0 1.25rem;
        border: none;
        border-radius: 0;
        border-top: 1px solid #eee;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
        z-index: 1020;
        background-color: #fff;
        max-height: calc(100vh - var(--wk-navbar-height, 7.5rem));
        overflow-y: auto;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(-8px);
        transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s ease;
    }

    #main-menu-list .nav-item--mega.is-mega-open .mega-menu {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0);
    }
    #main-menu-list .nav-item--mega.is-mega-open .mega-menu::before {
        content: '';
        position: fixed;
        left: 0; right: 0;
        top: calc(var(--wk-navbar-height, 7.5rem) - 1.25rem);
        height: 1.25rem;
        z-index: 1019;
        pointer-events: none;
    } 

    #main-menu-list .nav-item--mega:hover > .nav-link,
    #main-menu-list .nav-item--mega:focus-within > .nav-link,
    #main-menu-list .nav-item--mega.is-mega-open > .nav-link {
        color: #111 !important;
        font-weight: 600;
    }
    #main-menu-list .nav-item--mega:hover > .nav-link::after,
    #main-menu-list .nav-item--mega:focus-within > .nav-link::after,
    #main-menu-list .nav-item--mega.is-mega-open > .nav-link::after {
        background-color: #111;
    }
    #main-menu-list .nav-item--mega .mega-menu.show {
        display: block;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }

    #main-menu-list .mega-menu__panel {
        max-width: 1320px;
        margin: 0 auto;
        padding: 0 1.5rem;
    }
    #main-menu-list .mega-menu__grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1.25rem 1rem;
    }
    #main-menu-list .mega-menu__card {
        display: flex;
        flex-direction: column;
        padding: 0;
        color: #111 !important;
        text-decoration: none;
        background: transparent;
        border-radius: 0;
        white-space: normal;
    }
    #main-menu-list .mega-menu__card:hover, #main-menu-list .mega-menu__card:focus {
        background: transparent;
        color: #111 !important;
    }
    #main-menu-list .mega-menu__card:hover .mega-menu__label { text-decoration: underline; }
    #main-menu-list .mega-menu__thumb {
        display: block;
        width: 100%;
        aspect-ratio: 4 / 3;
        border-radius: 0.75rem;
        margin-bottom: 0.65rem;
        overflow: hidden;
    }
    #main-menu-list .mega-menu__thumb--empty { background-color: #e5e5e5; }
    #main-menu-list .mega-menu__thumb picture, #main-menu-list .mega-menu__thumb .mega-menu__img {
        display: block;
        width: 100%;
        height: 100%;
    }
    #main-menu-list .mega-menu__thumb .mega-menu__img {
        object-fit: cover;
        border-radius: 0.75rem;
    }
    #main-menu-list .mega-menu__meta {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem;
    }
    #main-menu-list .mega-menu__label {
        font-size: 0.95rem;
        font-weight: 400;
        line-height: 1.3;
    }
    #main-menu-list .mega-menu__arrow {
        flex-shrink: 0;
        width: 2rem;
        height: 2rem;
        border-radius: 50%;
        background-color: #111;
        color: #fff;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 0.85rem;
    }
    #main-menu-list .mega-menu__card--view-all .mega-menu__thumb--view-all {
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #f5f5f5;
        border: 1px dashed #d0d0d0;
    }
    #main-menu-list .mega-menu__view-all-icon {
        width: 2.75rem;
        height: 2.75rem;
        border-radius: 50%;
        background-color: #111;
        color: #fff;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 1.1rem;
    }
    #main-menu-list .mega-menu__card--view-all:hover .mega-menu__thumb--view-all,
    #main-menu-list .mega-menu__card--view-all:focus .mega-menu__thumb--view-all {
        background-color: #ebebeb;
        border-color: #111;
    }
    #main-menu-list .mega-menu__card--view-all:hover .mega-menu__label,
    #main-menu-list .mega-menu__card--view-all:focus .mega-menu__label {
        font-weight: 600;
    }

    #main-menu-list .mega-menu__footer {
        margin-top: 1.25rem;
        padding-top: 1rem;
        border-top: 1px solid #eee;
        font-size: 0.9rem;
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 0.35rem 0;
    }
    #main-menu-list .mega-menu__footer-label {
        font-weight: 700;
        margin-right: 0.35rem;
        color: #111;
    }
    #main-menu-list .mega-menu__footer-links {
        display: inline-flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0;
    }
    #main-menu-list .mega-menu__footer-links a {
        color: #111 !important;
        text-decoration: none;
        padding: 0;
        font-size: 0.9rem;
    }
    #main-menu-list .mega-menu__footer-links a:hover { text-decoration: underline; }
    #main-menu-list .mega-menu__footer-links a + a::before {
        content: '|';
        margin: 0 0.65rem;
        color: #bbb;
        font-weight: 300;
        display: inline-block;
    }

    /* Hero Grid Mosaic Desktop */
    .hero-grid { padding-top: 8.5rem; }
    .hero-grid__inner {
        grid-template-columns: repeat(6, 1fr);
        grid-template-rows: minmax(280px, 1fr) minmax(220px, 1fr);
        gap: 1rem;
    }
    .hero-grid__tile { min-height: 0; }
    .hero-grid__tile--producto      { grid-column: 1 / 3; grid-row: 1 / 3; min-height: 100%; }
    .hero-grid__tile--click-collect { grid-column: 3 / 5; grid-row: 1; }
    .hero-grid__tile--empresa       { grid-column: 3;     grid-row: 2; }
    .hero-grid__tile--campana       { grid-column: 4;     grid-row: 2; }
    .hero-grid__tile--fotos         { grid-column: 5 / 7; grid-row: 1; }
    .hero-grid__tile--marketing     { grid-column: 5 / 7; grid-row: 2; }

    #landing-carousel .carousel-item { padding-top: 16vh; height: 55vh; }
    #landing-carousel .carousel-indicators { display: flex; bottom: 0; }
    
    .sections { overflow-x: hidden; }
    .popular_products-product {
        height: 250px;
        margin-top: 50px;
        padding-bottom: 25px;
    }
    
    .brand-products, .photo_reveal-products {
        flex-wrap: nowrap;
        overflow-x: unset;
    }
    .brand-products::before { width: 75%; left: 12.5%; }
    .overview-card { margin: 0 0 25px; }
    
    .breadcrumb { margin-top: 9rem; margin-bottom: 0; }
    .footer-links-title { margin-bottom: 5px !important; }
}

/* --- XL Breakpoint (>= 1200px) --- */
@media only screen and (min-width: 1200px) {
    #main-menu-list .mega-menu__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    #landing-carousel .carousel-item { height: 47vh; }
    .flex-scroll {
        flex-wrap: nowrap;
        overflow-x: unset;
    }
}

/* --- XXL Breakpoint (>= 1440px) --- */
@media only screen and (min-width: 1440px) {
    #pills-tab, #main-menu-list { overflow-x: unset; }
}

/* --- Ultra Wide Breakpoint (>= 1700px) --- */
@media only screen and (min-width: 1700px) {
    .menu { padding: 0; }
}

/* --- Reduced Motion Accessiblity --- */
@media (prefers-reduced-motion: reduce) {
    #main-menu-list .nav-item--mega .mega-menu {
        transition: none;
        transform: none;
    }
}

/* --- Fixed Classes --- */
.video-container {
    --bs-aspect-ratio: 69.8%;
}