/* Colores de marca */
:root {
    --primary-color: #3498db;
    /* Azul */
    --secondary-color: #2ecc71;
    /* Verde */
    --success-color: #28a745;
    /* Verde éxito */
    --danger-color: #e74c3c;
    /* Rojo */
    --warning-color: #f39c12;
    /* Naranja */
    --info-color: #17a2b8;
    /* Cian */
    --light-color: #f8f9fa;
    /* Gris claro */
    --dark-color: #343a40;
    /* Gris oscuro */
    --completed-bg-color: #ffffff;
    /* Blanco */
    --completed-text-color: #EA2346;
    /* Rojo */
    --in-progress-bg-color: #F0C5CC;
    /* Rosa claro */
    --in-progress-text-color: #EA2346;
    /* Rojo */
    --ongoing-bg-color: #EA2346;
    /* Rojo */
    --ongoing-text-color: #ffffff;
    /* Blanco */
    --light-gray-color: #F6F6F6;
    /* Gris claro */
}

body {
    min-height: 100vh;
    display: flex;
    width: 100%;
    flex-flow: column;
    justify-content: space-between;
}

/* Estilos para la sección de Próximamente */
.upcoming-exhibition {
    width: 100%;
}

.upcoming-exhibition-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.upcoming-exhibition-content img {
    max-width: 100%;
    height: auto;
    margin-bottom: 20px;
}

.upcoming-exhibition-details {
    max-width: 800px;
}

.upcoming-exhibition-details h3 {
    font-size: 2em;
    margin-bottom: 20px;
}

.upcoming-exhibition-details p {
    font-size: 1.2em;
    margin-bottom: 20px;
}

.upcoming-exhibition-details .btn {
    font-size: 1.2em;
}

/* Estilos para la sección de Exposiciones Anteriores */
.past-exhibitions .card {
    height: 100%;
}

.past-exhibitions .card-img-top,
#otras-exposiciones div.card img {
    max-height: 200px;
    height: 200px;
    object-fit: cover;
}


.past-exhibitions .card-body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.past-exhibitions .card-title {
    font-size: 1.5em;
    margin-bottom: 10px;
}

.past-exhibitions .card-text {
    flex-grow: 1;
    margin-bottom: 20px;
}

.past-exhibitions .btn {
    align-self: flex-start;
}


#scroll-to-top {
    display: none;
    position: fixed;
    width: 42px;
    height: 42px;
    padding: 11px 12px;
    gap: 10px;
    border-radius: 6px;
    background: #EA2346B2;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
    cursor: pointer;
    animation-timing-function: ease-out;
    animation-duration: 300ms;
}

#scroll-to-top i {
    color: white;
    font-size: 20px;
}

#float-wa {
    display: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Toyota Type" !important;
}

h1 {
    line-height: 26px !important;
    font-size: 26px !important;
    font-weight: 600 !important;
    margin: 10px 0;
}

h2 {
    line-height: 22px !important;
    font-size: 22px !important;
    font-weight: 500 !important;
    margin: 9px 0;
}

h3 {
    line-height: 20px !important;
    font-size: 20px !important;
    font-weight: 400 !important;
    margin: 8px 0;
}

h4 {
    line-height: 18px !important;
    font-size: 18px !important;
    font-weight: 300 !important;
    margin: 7px 0;
}

h5 {
    line-height: 16px !important;
    font-size: 16px !important;
    font-weight: 200 !important;
    margin: 6px 0;
}

h6 {
    line-height: 14px !important;
    font-size: 14px !important;
    font-weight: 100 !important;
    margin: 5px 0;
}

.titulo-secundario {}

#post-content p {
    font-family: 'Raleway';
    font-weight: 400;
    font-size: 14px;
    line-height: 29px;
    letter-spacing: 0%;
}

#post-content ul,
#post-content ol {
    padding-left: 30px !important;
    margin-bottom: 0.7em !important;
    list-style: unset !important;
}

#post-content ol {
    list-style: decimal !important;
}

#post-content li {
    text-align: -webkit-match-parent !important;
    margin-top: 0.5em !important;
    line-height: 29px;
}

li {
    font-size: 14px;
    line-height: 20px;
    list-style: initial !important;
}

#lista-posts .escritor {
    font-family: 'Toyota Type' !important;
    font-weight: 300 !important;
    font-size: 12px !important;
    line-height: 18px !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
}


#lista-posts .titulo {
    font-family: 'Toyota Type' !important;
    font-weight: 600 !important;
    font-size: 18px !important;
    line-height: 26px !important;
    letter-spacing: 1px !important;
}

#lista-posts .post-descripcion {
    font-family: 'raleway' !important;
    font-weight: 400;
    font-size: 14px;
    line-height: 23.8px;
    letter-spacing: 0%;

}

#post-content #post-title-main {
    font-family: 'Toyota Type' !important;
    font-size: 42px !important;
    font-weight: 600 !important;
    line-height: 52px !important;
}

#post-content #post-writer {
    font-family: 'Toyota Type' !important;
    font-weight: 300;
    font-size: 16px;
    line-height: 22.82px;
    letter-spacing: 2px !important;
}

#post-content #writer-heading {
    font-family: 'Toyota Type' !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    line-height: 22.82px !important;
    letter-spacing: 2px !important;
}

/* Estilos personalizados para botones */
.btn {
    font-family: 'Toyota Type' !important;
}

.btn-conocer-mas {
    font-family: 'Toyota Type' !important;
    display: flex !important;
    align-items: center !important;
    font-weight: 400 !important;
    font-size: 14px !important;
    line-height: 17.5px !important;
    letter-spacing: 0% !important;
    color: inherit !important;
    text-decoration: none !important;
    transition: border-bottom 0.3s ease;
    width: fit-content !important;
    border-bottom: 2px solid transparent;
    padding-bottom: 0.5em !important;
}

.btn-conocer-mas:hover {
    border-bottom: 2px solid currentColor;
}

.btn-conocer-mas:hover,
.btn-conocer-mas:active,
.btn-conocer-mas:focus {
    color: inherit;
    text-decoration: inherit;
}

.btn-conocer-mas .fas {
    margin-top: 3px !important;
    margin-left: 3px !important;
}

.btn-sobre-proyecto {
    text-decoration: none !important;
    background-color: #000;
    color: #fff !important;
    width: fit-content;
    top: -5em;
    border: 2px solid transparent;
    transition: border 0.3s ease, background-color 0.3s ease;
}

.btn-sobre-proyecto:hover {
    color: black !important;
    border: 2px solid #000;
    background-color: transparent;
}

/* Estilos personalizados para badges */
.badge-fecha {
    font-family: 'Toyota Type' !important;
    font-weight: 600 !important;
    font-size: 11px !important;
    line-height: 24.11px !important;
    letter-spacing: 2px !important;
    width: fit-content;
    height: 27px;
    padding: 0px 20px;
    gap: 10px;
    border-radius: 33px;
    border: 1px solid #212529;
    text-transform: uppercase;
}

.badge-posts-status {
    font-family: 'Toyota Type' !important;
    position: absolute !important;
    left: 10px !important;
    top: 10px !important;
    font-weight: 400 !important;
    font-size: 12px !important;
    line-height: 15px !important;
    letter-spacing: 2px !important;
    border-radius: 4px !important;
}

.badge-completed {
    padding: 0.4em 1em 0.6em !important;
    background-color: var(--completed-bg-color) !important;
    color: var(--completed-text-color) !important;
    border: 1px solid var(--completed-text-color) !important;
}

.badge-in-progress {
    padding: 0.4em 1em 0.6em !important;
    background-color: var(--in-progress-bg-color) !important;
    color: var(--in-progress-text-color) !important;
}

.badge-ongoing {
    padding: 0.4em 1em 0.6em !important;
    background-color: var(--ongoing-bg-color) !important;
    color: var(--ongoing-text-color) !important;
}

/* Estilos personalizados para backgrounds */
.bg-light-gray {
    background-color: var(--light-gray-color) !important;
}

.bg-dark-gray {
    background-color: var(--dark-color) !important;
}

.bg-primary {
    background-color: var(--primary-color) !important;
}

.bg-success {
    background-color: var(--success-color) !important;
}

.bg-danger {
    background-color: var(--danger-color) !important;
}

.bg-warning {
    background-color: var(--warning-color) !important;
}

.bg-info {
    background-color: var(--info-color) !important;
}

.bg-black {
    background-color: #000000 !important;
}

/* Breakpoints used in Bootstrap */
@media (max-width: 575.98px) {
    div#post-content {
        margin-top: 1em;
    }

    img.card-img-top.h-100.w-100.rounded-lg {
        height: 200px !important;
        object-fit: cover;
    }


    .upcoming-exhibition-content {
        flex-direction: column;
    }

    .upcoming-exhibition-details {
        max-width: 100%;
    }

    .past-exhibitions .card {
        margin-bottom: 20px;
    }

    #scroll-to-top {
        display: block;
    }

    .past-exhibitions .posts-past-exhibitions,
    .past-exhibitions .card {
        background: var(--light-gray-color);
    }

    .btn-conocer-mas {
        border-bottom: 2px solid currentColor;
    }
}

@media (min-width: 576px) and (max-width: 767.98px) {
    div#post-content {
        margin-top: -3em;
    }

    #scroll-to-top {
        display: block;
    }

    .past-exhibitions .posts-past-exhibitions,
    .past-exhibitions .card {
        background: var(--light-gray-color);
    }

    .btn-conocer-mas {
        border-bottom: 2px solid currentColor;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    div#post-content {
        margin-top: -5em;
    }

    .upcoming-exhibition-content {
        flex-direction: column;
    }

    .upcoming-exhibition-details {
        max-width: 100%;
    }

    .past-exhibitions .card {
        margin-bottom: 20px;
    }

    img.card-img-top.h-100.w-100.rounded-lg {
        height: 200px !important;
        object-fit: cover;
    }

    #scroll-to-top {
        display: block;
    }

}

@media (min-width: 992px) and (max-width: 1199.98px) {
    div#post-content {
        margin-top: -7em;
    }

    .banner-index {
        width: 100%;
    }

    .btn-sobre-proyecto {
        top: -2em !important;
    }

    .px-md-10 {
        padding-left: 10em !important;
        padding-right: 10em !important;
    }
}

@media (min-width: 1200px) {
    div#post-content {
        margin-top: -10em;
    }

    .btn-sobre-proyecto {
        top: -5em;
    }

    .px-md-10 {
        padding-left: 10em !important;
        padding-right: 10em !important;
    }
}

@media (min-width: 1400px) {
    div#post-content {
        margin-top: -13em;
    }

    .px-md-10 {
        padding-left: 10em !important;
        padding-right: 10em !important;
    }
}

/*Slider*/

ul.splide__list#gallery-list {
    padding-left: 0 !important;
}

#image-modal .modal-dialog {
    max-width: 1200px;
    width: fit-content;
}

div#post-description-main img {
    margin: 1.2em 0;
    width: 100% !important;
    height: auto !important;
}

div#post-description-main h2 {
    margin-top: 1em !important;
    margin-bottom: 0.5em !important;
}

#overflow-post-image img {
    width: 100%;
    height: auto;
}

@media (min-width: 768px) {
    #overflow-post-image img {
        transform: scale(1.2);
        margin: 100px 0 !important;
    }
}