/* CSS mínimo del header de Impressline, adaptado al markup del blog. */
@font-face {
    font-family: "Gotham-Book";
    src: url("https://www.impressline.com.mx/assets/fonts/Gotham-Book.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

.sticky-header,
.main-navbar {
    font-family: "Gotham-Book", "Montserrat", "Helvetica Neue", Arial, sans-serif !important;
}

.sticky-header a,
.main-navbar a { text-decoration: none !important; transition: all .3s ease }
.header-links a,
.sticky-header .btn-header,
.main-navbar .nav-link { font-weight: 400 !important }
.sticky-header a:focus:not(:focus-visible),
.main-navbar a:focus:not(:focus-visible) { outline: 0; box-shadow: none }
.sticky-header a:focus-visible,
.main-navbar a:focus-visible { outline: 2px solid #dc3545; outline-offset: 2px; box-shadow: none }
.sticky-header .fa,
.main-navbar .fa {
    display: inline-block;
    min-width: 1.28571429em;
    text-align: center;
    font-style: normal;
    line-height: 1;
    vertical-align: middle;
}

.header-links a { font-size: 11.5px !important; letter-spacing: 1px }
.navbar-logo { width: 300px; max-width: 100%; height: 40px }
.navbar-logo svg { display: block; width: 100%; height: 100% }
.sticky-header .btn-header { display: inline-flex; align-items: center; gap: 5px; padding: .375rem .625rem; line-height: 1 }
.sticky-header .btn-header span { line-height: 1 }
.sticky-header .btn-header .fa { display: block; flex-shrink: 0; width: 1em; height: 1em; vertical-align: 0 }
.btn-header:focus,
.btn-header:hover { border-color: #dc3545 !important }

.main-navbar { padding: 0; background: linear-gradient(180deg, rgb(247 247 247) 0, #fff 10%) }
.main-navbar .navbar-collapse { flex-grow: 1; align-items: stretch; min-width: 0 }
.main-navbar ul.navbar-nav { display: flex; flex-wrap: nowrap; align-items: stretch; justify-content: flex-start; margin-bottom: 0; text-align: center }
.main-navbar ul.navbar-nav li.nav-item { display: flex; align-items: center; text-align: center; flex: 0 0 auto }
.main-navbar ul.navbar-nav > li.nav-item + li.nav-item { border-left: 1px solid rgb(0 0 0 / 10%) }
.main-navbar .nav-link,
.main-navbar .dropdown-item { text-transform: uppercase }
.main-navbar .nav-link {
    color: #000;
    padding: 8px clamp(.35rem, .72vw, .8rem) !important;
    white-space: nowrap;
}
.main-navbar .nav-link.active,
.main-navbar .nav-link:focus,
.main-navbar .nav-link:hover { color: var(--bs-danger) }
.main-navbar .nav-link .fa { width: 1.28571429em; flex-shrink: 0 }
.main-navbar .nav-link.show .fa.fa-chevron-down { transform: rotate(-180deg) }
.main-navbar .dropdown-toggle::after { content: none !important }
.main-navbar .dropdown-menu { border-radius: 0 0 .5rem .5rem }

.btn-distribuidor {
    display: flex;
    align-items: center;
    justify-content: center;
    height: auto;
    padding: .5rem clamp(.65rem, 1.1vw, 1rem);
    color: #fff !important;
    border-radius: 0;
    background-color: rgba(var(--bs-danger-rgb), 1) !important;
    font-weight: 700;
    text-align: center;
}
.btn-distribuidor.active { color: #fff !important; background-color: #b02a37 !important }
.btn-distribuidor:focus,
.btn-distribuidor:hover { color: #fff !important; background-color: #bb2d3b !important }

.dropdown-mega-menu {
    --mega-menu-width: 1080px;
    --mega-menu-min-height: 340px;
    --bs-dropdown-link-active-bg: rgb(3 3 3 / 5%);
    position: absolute;
    top: 100% !important;
    left: 0 !important;
    right: auto !important;
    width: var(--mega-menu-width);
    max-width: calc(100vw - 1.5rem);
    min-height: var(--mega-menu-min-height);
    padding: 0;
    overflow: hidden;
    border-top: 5px solid var(--bs-danger) !important;
    border-radius: 0 0 .5rem .5rem;
    box-shadow: 0 8px 20px rgb(0 0 0 / 15%);
    transform: none !important;
}
.dropdown-mega-menu .p-3,
.dropdown-mega-menu .col { padding: 1rem !important }
.dropdown-mega-menu .row { min-height: var(--mega-menu-min-height); margin: 0; flex-wrap: nowrap; align-items: stretch }
.dropdown-mega-menu .col-5,
.dropdown-mega-menu .col-6,
.dropdown-mega-menu .col-7 { min-width: 0; min-height: var(--mega-menu-min-height) }
.dropdown-mega-menu .tabs { max-height: var(--mega-menu-min-height); overflow-x: hidden; overflow-y: auto }
.dropdown-mega-menu .col-6,
.dropdown-mega-menu .col-7 { overflow-y: auto }
.menu-tab-content { display: none; min-height: calc(var(--mega-menu-min-height) - 2rem); padding: 0; border-left: 0 }
.menu-tab-content .menu-image-container {
    --image-background: '';
    height: 150px;
    border-radius: 20px;
    background: var(--image-background) right center / cover no-repeat;
    box-shadow: 0 4px 10px rgb(0 0 0 / 30%);
}
.dropdown-mega-menu .dropdown-item {
    position: relative;
    padding-top: .4rem !important;
    padding-bottom: .4rem !important;
    color: #333 !important;
    border-left: .3125rem solid transparent;
    font-weight: 500;
    text-transform: capitalize;
    white-space: normal;
}
.dropdown-mega-menu .tab-link { padding-right: 2.25rem !important }
.dropdown-mega-menu .dropdown-item:active,
.dropdown-mega-menu .dropdown-item:focus,
.dropdown-mega-menu .dropdown-item:hover { border-color: var(--bs-danger) }
.dropdown-mega-menu .tab-link .fa.fa-chevron-right { position: absolute; top: 50%; right: 1rem; transform: translateY(-50%) }
.dropdown-mega-menu .tab-link.active { color: rgba(var(--bs-danger-rgb), 1) !important; border-color: var(--bs-danger) !important; background-color: #f3f3f3 !important }
.menu-tab-content[data-visible=true] .dropdown-item:first-of-type { color: #c0392b !important; font-weight: 500 !important; text-decoration: underline !important }
.menu-tab-content[data-visible=true] .dropdown-item:first-of-type:not(:hover) { background-color: #fff3f3 }

/* Franja del blog que vive en header.php. */
.back-space { position: relative; height: 125px; margin-bottom: 25px; background-position: bottom center; background-repeat: no-repeat; background-size: cover }
.back-space.auto-height { height: auto }
.breadcrumbs { float: left; margin-top: 25px; padding: 0 10px; list-style: none; background: #000 }
.fixclear { zoom: 1 }
.fixclear::after,
.fixclear::before { display: block; width: 0; height: 0; overflow: hidden; visibility: hidden; content: '\0020' }
.breadcrumbs li { float: left; margin-left: 10px; padding-left: 10px; color: #eee; background: url(https://www.impressline.com.mx/public/frontend/images/icons/breadcrumbs-arr.png) left center no-repeat; font-size: 13px; font-weight: 700; line-height: 1.9; text-transform: uppercase }
.breadcrumbs li:first-child { margin-left: 0; padding-left: 0; background: transparent }
.breadcrumbs li a { color: #fff }
.header-titles { text-align: right }
.header-titles h2 { margin-top: 5px; color: #fff; font-weight: 700; line-height: 1.3; text-transform: uppercase; text-shadow: 1px 1px 0 rgb(0 0 0 / 50%) }
.header-titles h4 { display: inline-block; margin: 0; padding: 0 10px; color: #fff; background: #000; font-weight: 500; line-height: 1.8 }

@media (min-width: 768px) {
    /* El blog no tiene el buscador central de la app; los extremos permanecen anclados. */
    .sticky-header .navbar > .container-fluid { display: flex; align-items: center; padding-inline: 1.25rem }
    .sticky-header .navbar .navbar-brand { order: 1; flex-shrink: 0 }
    .sticky-header .navbar .flex-grow-1 { order: 2; min-width: 0 }
    .sticky-header .navbar .navbar-buttons { display: flex; order: 3 !important; flex-shrink: 0; margin-left: auto }
    .sticky-header .navbar-buttons .fa { display: inline-block; width: 1.28571429em; text-align: center }
    .main-navbar > .container-fluid { padding-inline: 1.25rem }
}
@media (min-width: 1024px) { .main-navbar .dropdown-item, .main-navbar .nav-link { font-size: clamp(12px, calc(11px + (20 - 12) * ((100vw - 400px) / (2500 - 400))), 14px) !important } }
@media (max-width: 1324px) { .main-navbar .navbar-nav.ms-auto { display: none } }
@media (max-width: 1023px) { .main-navbar .dropdown-item, .main-navbar .nav-link { font-size: 12px !important } }
@media (max-width: 991px) and (min-width: 768px) { .navbar-logo { width: 180px; height: auto } }
@media (max-width: 767.98px) {
    .back-space.hidden-xs { display: none !important }
    .sticky-header { position: sticky; top: 0; z-index: 1052; border: 1px solid rgba(var(--bs-light-rgb), 1) }
    .sticky-header .navbar > .container-fluid { flex-wrap: nowrap; align-items: center; gap: .25rem }
    .sticky-header .navbar .navbar-brand { order: 1; flex-shrink: 0; padding-right: 0 }
    .sticky-header .navbar .flex-grow-1 { order: 2; min-width: 0 }
    .sticky-header .navbar .navbar-buttons { display: flex; order: 3; flex-shrink: 0; margin-left: auto }
    .navbar-logo { width: 40px !important; height: 40px !important }
}