/* -------- ADMINISTRATION --------- */

div#block-catalogo-primary-local-tasks {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 99;
    width: fit-content;
}

/* -------- ADMINISTRATION END --------- */

:root{
    font-family: "Roboto", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    font-variation-settings:
        "wdth" 100;

    --color-primary: #C20120;
    --color-secondary: #FFB300;
    --color-black: #000;
    --color-white: #fff;
    --color-text: var(--color-black);
    --color-bg: var(--color-black);
}

body{
    background-color: #fff;
    background-image: none;
}

.container{
    width: 100%;
    max-width: 1200px;
    margin-inline: auto;
}

.page-wrapper {
    max-width: 100%;
}

.main-content__container {
    margin-inline: auto;
}

.site-header__inner {
    background-color: var(--color-bg);
}

.header-nav {
    background-color: transparent;
}


.header-nav li .primary-nav__menu-link {
    color: var(--color-white);
    font-weight: 300;
    font-size: 1.15rem;
    padding-inline: 0.5rem;

    &:hover{
        background-color: var(--color-primary);
    }
}

body .site-header__inner .header-nav {
    margin-block-start: 0;
}

.site-header__inner__container {
    max-width: 100%;
    align-items: center;
}

.site-header {
    @media (min-width: 75rem) {
        min-height: 0;
    }
}

.site-branding {
    min-height: 0;
    padding: 0.5rem 0;
    margin: 0;
    min-width: fit-content;
}

@media (min-width: 75rem) {
    body:not(.is-always-mobile-nav) {
        & .site-header__fixable.is-fixed {
            inset-block-start: 0;
            max-width: 100%;
        }
    }
}

.mobile-nav-button__icon {
    border-top: solid 3px var(--color-white);
}

.mobile-nav-button__icon {
    &::before, &::after {
        border-top: solid 3px var(--color-white);
    }
}

.block-search-wide__button {
    color: var(--color-white);
}

nav#block-catalogo-visitbogotaboton {
    display: flex;
    align-items: center;
}

@media screen and (max-width: 767px) {
    .main-content__container {
        padding-block: 1rem;
    }

    .header-nav {
        background-color: var(--color-bg);
        border-color: var(--color-bg);
    }
}

body:not(.is-always-mobile-nav) {
    @media (min-width: 75rem) {
        & .primary-nav__menu-item--level-1 {
            &:not(:last-child) {
                margin-inline-end: 1rem;
            }
        }
    }
}

@media screen and (max-width: 1366px){
    .header-nav li .primary-nav__menu-link {
        font-size: 1rem;
    }

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

.mobile-buttons{
    display: flex;
    align-items: center;
    margin: 0;
}

.mobile-nav-button__label {
    color: var(--color-white);
}

@media screen and (max-width: 1200px){
    body .site-header__inner .header-nav {
        background-color: var(--color-bg);
        border-top: 4rem solid var(--color-bg);
    }
}

.layout--content-medium, .layout--pass--content-medium > * {
    @media (min-width: 62.5rem) {
        grid-column: 1 / 14;
    }
}

.main-content {
    @media (min-width: 75rem) {
        margin-inline-end: 0;
    }
}

h1, h2, h3, h4, h5, h5, p, li, blockquote, input{
    font-family: "Roboto", sans-serif !important;
}

p {
    font-size: 1.33rem;
    line-height: 1.5;
}

a{
    color: var(--color-primary);
}

.block.block-system.block-system-breadcrumb-block {
    position: absolute;
    top: 0;
    left: 0;
    padding: 1rem;
}

.breadcrumb__item {
    font-size: 1rem;
    &:nth-child(n + 2)::before {
        content: "»";
        transform: rotate(0);
        font-size: 1.25em;
        border: none;
        margin-inline: 0.5rem .75rem;
    }

    &:last-child {
        font-weight: 400;
    }

    & a:hover{
        color: var(--color-primary);
    }
}

@media screen and (max-width: 767px) {
    .block.block-system.block-system-breadcrumb-block {
        position: relative;
        top: 0;
        left: 0;
    }
}

.button {
    margin: 0;
    background-color: var(--color-primary);
    color: var(--color-white);
    border: none;
    border-radius: 2rem;
    font-weight: 400;
    padding: 1rem 2rem;
    line-height: 1em;
    height: fit-content;
    cursor: pointer;
    transition: background-color .3s ease;
    &:hover{
        background-color: var(--color-secondary);
        color: var(--color-black);
        font-weight: 400;
        border: 0;
    }
}

.button.button--secondary{
    background-color: var(--color-secondary);
    color: var(--color-black);
    &:hover{
        background-color: var(--color-primary);
        color: var(--color-white);
    }
}

.social-bar {
    background-color: transparent;
}

.title.title--primary{
    color: var(--color-primary);
}

.swiper {
  width: 100%;
  height: fit-content;
  --swiper-theme-color: var(--color-primary)
}

@media screen and (min-width: 768px) {
    .swiper {
        width: 110%;
        margin-left: -5% !important;
    }
}


.teaser{
    height: 300px;
    position: relative;
    border-radius: 1rem;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    padding: 2rem;

    & img{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        z-index: 0;
    }

    &::before{
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: linear-gradient(45deg, black, transparent);
        mix-blend-mode: multiply;
        z-index: 1;
    }

    & .teaser__content{
        position: relative;
        z-index: 5;

        & .teaser__title{
            color: var(--color-white);
            margin-bottom: 1rem;
            line-height: 1.25em;
        }
    }
}

.swiper-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin-top: 1rem;

    & .swiper-pagination, & .swiper-button-next, & .swiper-button-prev {
        position: relative;
        top: auto !important;
        left: auto !important;
        bottom: auto !important;
        right: auto !important;
        margin: 0 !important;
    }

    & .swiper-button-next, & .swiper-button-prev{
        background-color: var(--color-primary);
        color: var(--color-white);
        padding: 0.75rem;
        border-radius: 2rem;
    }
}

.swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction{
    width: fit-content !important;
    margin: 0 !important;
}


footer.site-footer {
    background: var(--color-bg);
}

.site-footer__inner.container {
    margin-inline: auto;
    padding-bottom: 0;
}

.site-footer__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}


.site-footer .text-content {
    & a {
        -webkit-text-decoration: none;
        text-decoration: none;

        &:hover{
            -webkit-text-decoration: underline;
            text-decoration: underline;
        }
    }
}

.site-footer .text-content {
    & p, & li, & a{
        color: #fff;
        font-size: 1rem;
    }
}

.region.region--footer-second {
    border-inline: 1px solid;
    padding-inline: 1rem;
}

.region.region--footer-third {
    text-align: center;
}

#block-catalogo-redesfooter .social-icons{
    display: flex;
    justify-content: center;
    gap: 0.5rem;

    & .social-icons__icon {
        font-size: 2rem;
        display: flex;
        background-color: var(--color-white);
        color: var(--color-text);
        border-radius: 50%;
        padding: 0.5rem;
        &:hover{
            color: var(--color-text);
            opacity: 0.8;
        }
    }
}


.region--footer-bottom {
    padding-block: 4rem;
}

div#block-catalogo-copyright {
    margin: 0;
}

@media screen and (max-width: 767px) {
    .site-footer__grid {
        grid-template-columns: repeat(1, 1fr);
    }
    .region.region--footer-second {
        border-inline: none;
        padding-inline: none;
        border-block: 1px solid;
        padding-block: 1rem;
    }
}

h1 {
    color: #FF465D;
}

.view-categorias h2 {
    font-size: 3rem;
    max-width: 600px;
    word-break: auto-phrase;
    margin-inline: auto;
}

.preload-overlay {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    background-color: #000;
    z-index: 100;
    opacity: 0;
    pointer-events: none;
}

.site-branding__inner,
.primary-nav__menu li,
.button--secondary {
  will-change: transform, opacity;
}

/* Contenido relacionado */

.content.content--related {
    overflow: hidden;
    & .title {
        text-align: center;
    }
}

@media screen and (max-width: 767px) {
    .content.content--related {
        padding: 0 1rem;
    }

    .view-categorias h2 {
        font-size: 2rem;
    }
}

/* --------- RESULTS --------- */

.path-search .main-content__container {
    padding: 1rem;
    width: 100%;
    max-width: 1200px;
}

/* --------- END RESULTS --------- */


.pager__items {
    justify-content: center;
    border-radius: 1rem;
    overflow: hidden;
    width: fit-content;
    margin: 0 auto;
}