/* DEFAULT */
* {
    scrollbar-color: var(--ct) var(--cp);
}

:root {
    --cp: #262626;
    --cs: #fff;
    --ct: #d4af37;
    --cf: rgb(83, 83, 83);
}

#page {
    display: flex;
    flex-direction: column;
    font-family: "Lato", sans-serif;
    font-weight: 300;
}

a {
    font-weight: 400;
}

p, li {
    color: var(--cf);
}

h1 {
    font-family: "Playfair Display SC", serif;
    font-weight: 900;
}

h2, h3, h4, h5, h6 { 
  font-family: "Montserrat", sans-serif;
}
/* DEFAULT END */

/* HEADER */
/* NAV */
#nav {
    display: flex;
    justify-content: end;
    height: 57px;
    position: fixed;
    top: 0;
    width: 100%;
    background: var(--cp);
    padding: 1em;
    z-index: 20;
}

#check {
    display: none;
}

.menu-cont {
    font-size: 1.7em;
    color: var(--cs);
}

.menu-btn {
    cursor: pointer;
}

#check:not(:checked) ~ .menu-cont > .menu-btn--close {
    display: none;
}

#check:is(:checked) ~ .menu-cont > .menu-btn--open {
    display: none;
}

#check:is(:checked) ~ .menu-cont > .menu-btn--close {
    display: block;
}

.nav-list {
    position: fixed;
    left: 0;
    top: 57px;
    width: 100%;
    height: calc(100vh - 57px);
    background: var(--cp);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2em;
    font-size: 1.2em;
    translate: 110%;
    opacity: 0;
    visibility: hidden;
    transition-property: opacity, visibility, translate;
    transition-timing-function: ease;
    transition-duration: 500ms;
    padding-top: 4em;
}

.nav-link {
    color: var(--cs);
}

.nav-link--modified {
    color: var(--ct);
}

#check:is(:checked) ~ .nav-list {
    opacity: 1;
    visibility: visible;
    translate: 0;
}
/* NAV MEDIAQUERIES */
@media only screen and (min-width: 768px) {
    #nav {
        display: flex;
        justify-content: start;
    }

    .menu-cont {
        display: none;
    }

    .nav-list {
        position: static;
        width: 100%;
        height: auto;
        background: transparent;
        display: flex;
        flex-direction: row;
        justify-content: center;
        gap: 7em;
        font-size: 1em;
        translate: 0;
        opacity: 1;
        visibility: visible;
        transition: none;
        padding-top: 0;
    }

    .nav-link {
        transition: color 200ms ease;
    }

    .nav-link:hover {
        color: var(--ct);
    }
}
/* NAV MEDIAQUERIES END */
/* NAV END */

.header-content {
    width: 100%;
    min-height: 70vh;
    background: url("../images/header-bg.avif") top / cover;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: var(--cs);
    position: relative;
    z-index: 0;
}

.header-content::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: -1;
}

.header-details {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-height: 100%;
    gap: .6em;
}

.header-cont-title {
    display: grid;
    grid-template-columns: auto max-content auto;
    align-items: center;
    gap: .5em;
}

.header-icon {
    width: 2.5em;
}

.icon-1 {
    justify-self: end;
}

.icon-2 {
    transform: rotate(180deg);
    justify-self: start;
}

.header__text-1 {
    font-size: 1.7em;
    font-family: "Great Vibes", cursive;
    font-weight: 400;
}

.header__text-2 {
    letter-spacing: 2px;
    font-weight: bold;
}

.header-title {
    font-size: 2.7em;
    margin: 0;
}

.header-btn {
    position: absolute;
    bottom: 5em;
}

.btn-first {
    width: 155px;
    height: 40px;
    border: 2px solid var(--cp);
    background: var(--cs);
    color: var(--cp);
    padding: 12px 1.8em;
    transition: background, color;
    transition-duration: 300ms;
    transition-timing-function: ease;
}

.btn-first:hover {
    background: var(--cp);
    color: var(--cs);
}
/* HEADER MEDIAQUARIES */
@media only screen and (min-width: 768px) {
    .header-content {
        min-height: 100vh;
        background: url("../images/header-bg.avif") center / cover fixed;
    }

    .header-icon {
        width: 3.5em;
    }

    .header__text-1 {
        font-size: 2.7em;
    }

    .header-title {
        font-size: 5em;
    }

    .header-btn {
        bottom: 6em;
    }
}

@media only screen and (min-width: 1024px) {
    .header-icon {
        width: 4.5em;
    }

    .header__text-1 {
        font-size: 3vw;
    }

    .header-title {
        font-size: 7vw;
    }

    .header__text-2 {
        font-size: 1.2vw;
    }

    .header-btn {
        bottom: 6em;
    }
}
/* HEADER MEDIAQUARIES END */
/* HEADER END */

/* MAIN */
/* ARTICLE */
.article {
    border-top: .5em solid var(--cp);
}

.article-title {
    width: 90vw;
    max-width: 350px;
    background: var(--cp);
    color: var(--cs);
    padding: .5em 0;
    text-align: center;
    margin: 0 auto;
    translate: 0 -1px;
}

.article-card {
    margin: 0 auto;
    width: 100%;
    min-height: calc(100vh - 3.7em);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    padding: 1em;
}

.article-card__title {
    font-size: 2em;
    text-align: center;
}

.article-card__img {
    width: 100%;
    max-width: 600px;
}

.article-card__parrafo {
    font-size: 1.2em;
    text-align: center;
    text-wrap: pretty;
    max-width: 600px;
    line-height: 1.5em;
}
/* ARTICLE MEDIAQUARIES */
@media only screen and (min-width: 768px) {
    .article-card__title {
        font-size: 3.2em;
    }
}

@media only screen and (min-width: 1024px) {
    .article-title {
        padding: .8em 0;
    }
    
    .article-card__title {
        font-size: 3.6em;
    }
}
/* ARTICLE MEDIAQUARIES END */
/* ARTICLE END */
/* COMER AQUI */

.comer-aqui {
    width: 100%;
    min-height: 70vh;
    background: url("../images/comer-aqui-bg.avif") center / cover;
    display: flex;
    justify-content: center;
    align-items: center;
}

.comer-aqui__diamond {
    width: 250px;
    height: 250px;
    border: .8em solid var(--cs);
    transform: rotate(45deg);
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0003;
}

.comer-aqui__details {
    transform: rotate(-45deg);
    color: var(--cs);
    text-align: center;
}

.comer-aqui__title {
    font-size: 2.3em;
}

.comer-aqui__link {
    font-size: 1.3em;
}
/* COMER AQUI MEDIAQUARIES */
@media only screen and (min-width: 768px) {
    .comer-aqui {
        min-height: calc(100vh - 57px);
        background: url("../images/comer-aqui-bg.avif") center / cover fixed;
    }
}
/* COMER AQUI MEDIAQUARIES END */
/* COMER AQUI END */
/* EVENTOS PRIVADOS */
.eventos .article-card {
    min-height: max-content;
}

.--card-eventos {
    justify-content: start;
    gap: 3em;
}

.--card-eventos .article-card__title {
    margin-top: 1em;
}

.eventos-btn {
    text-align: center;
}
/* EVENTOS PRIVADOS END */
/* SLIDER MANUAL */
.slider-wrapper {
    width: 100%;
    max-width: 1000px;
    margin: 2em auto;
}

.slider {
    display: flex;
    overflow-x: hidden;
    height: 50vh;
}

.slider-img {
    object-fit: cover;
    object-position: bottom;
    flex: 1 0 100%;
}

.slider-nav {
    display: flex;
    justify-content: center;
    gap: 1em;
    padding: 1em;
}

.slider-btn {
    transition: 130ms ease-in;
    color: var(--cp);
}

.slider-btn:hover {
    translate: 0 -3px;
}

.slider:has(#img-1:target) ~ .slider-nav > a[href="#img-1"],
.slider:has(#img-2:target) ~ .slider-nav > a[href="#img-2"],
.slider:has(#img-3:target) ~ .slider-nav > a[href="#img-3"],
.slider:has(#img-4:target) ~ .slider-nav > a[href="#img-4"],
.slider:has(#img-5:target) ~ .slider-nav > a[href="#img-5"] {
    color: var(--ct);
    translate: 0 -3px;
}
/* SLIDER MANUAL MEDIAQUARIES */
@media only screen and (min-width: 768px) {
    .slider {
        height: 70vh;
    }
}
/* SLIDER MANUAL MEDIAQUARIES END */
/* SLIDER MANUAL END */
/* UBICACIÓN & HORARIOS */
.ubicacion-horarios {
    position: relative;
}

.article-details {
    text-align: center;
}

.article-details__title {
    font-size: 1.5em;
    margin: 1em 0;
    color: var(--cp);
}

.article-details__item {
    font-size: 1.2em;
    margin: .5em 0;
}
/* UBICACIÓN & HORARIOS MEDIAQUARIES */
@media only screen and (min-width: 768px) {
    .container-direccion-horarios {
        display: flex;
        gap: 5em;
    }
}

@media only screen and (min-width: 1024px) {
    .container-direccion-horarios {
        display: flex;
        gap: 10em;
    }
}
/* UBICACIÓN & HORARIOS MEDIAQUARIES END */
/* UBICACIÓN & HORARIOS END */
/* BOTON ARRIBA */
.container-up-btn {
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: center;
    padding: 2em;
}

#up-btn {
    width: 1.7em;
    transform: rotate(180deg);
}
/* BOTON ARRIBA END */
/* MAIN END */

/* FOOTER */
#footer {
    background: var(--cp);
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    min-height: 300px;
}

#line {
    width: 100%;
    height: .2em;
    background: var(--cf);
}

.enlaces {
    display: flex;
    justify-content: space-evenly;
    font-size: 2em;
    color: var(--ct);
}

.f-author {
    text-align: center;
}
/* FOOTER MEDIAQUARIES */
@media only screen and (min-width: 768px) {
    .enlaces {
        justify-content: center;
        gap: 1em;
    }

    .enlaces-link {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 25px;
        border: 2px solid var(--ct);
        width: 2em;
        height: 2em;
        border-radius: 50%;
        text-decoration: none;
        position: relative;
        overflow: hidden;
    }

    .enlaces-icon {
        position: relative;
        z-index: 50;
        transition-property: color, transform;
        transition: 400ms ease-in;
    }

    .enlaces-link:hover > .enlaces-icon {
        color: var(--cp);
        transform: rotateY(360deg);
    }

    .enlaces-link::before {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        background: var(--ct);
        transform: translateY(100%);
        transition: transform 300ms ease-in;
    }

    .enlaces-link:hover::before {
        transform: translateY(0);
    }
}
/* FOOTER MEDIAQUARIES END */
/* FOOTER END */