/*
    -------------------------------------------
    SECTION 1: Root Variables and General Styles
    -------------------------------------------
*/
@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@400;700;900&family=Merriweather+Sans:wght@400;700;800&display=swap');

:root {
    /* Color Palette */
    --hom-background-color: #FDF5E6;
    --hom-accent-color: #8B4513;
    --hom-secondary-color-1: #4B3621;
    --hom-secondary-color-2: #D2B48C;
    --hom-white: #fff;
    --hom-dark: #222;

    /* Typography */
    --hom-font-family-title: 'Merriweather', serif;
    --hom-font-family-text: 'Merriweather Sans', sans-serif;

    /* Base Font Size (Responsive) */
    --hom-font-size-base: 1.1rem;
    --hom-font-size-s: 0.9rem;
    --hom-font-size-m: 1.5rem;
    --hom-font-size-l: 2rem;
    --hom-font-size-xl: 3rem;
    --hom-font-size-xxl: 4rem;

    /* Spacing */
    --hom-spacing-xxs: 0.25rem;
    --hom-spacing-xs: 0.5rem;
    --hom-spacing-s: 1rem;
    --hom-spacing-m: 2rem;
    --hom-spacing-l: 4rem;
    --hom-spacing-xl: 8rem;
    --hom-spacing-xxl: 12rem;

    /* Border Radius */
    --hom-border-radius-base: 3px;
    --hom-transition-duration: 0.4s;
    --hom-shadow-soft: 0 4px 12px rgba(0, 0, 0, 0.08);
    --hom-shadow-medium: 0 8px 24px rgba(0, 0, 0, 0.1);
    --hom-shadow-strong: 0 16px 48px rgba(0, 0, 0, 0.15);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
    line-height: 1.6;
    scroll-behavior: smooth;
}

body {
    font-family: var(--hom-font-family-text);
    font-size: var(--hom-font-size-base);
    color: var(--hom-secondary-color-1);
    background-color: var(--hom-background-color);
    line-height: 1.8;
    overflow-x: hidden;
}

.content-wrapper {
    margin: 0 1120px 0 0;
}

a {
    color: inherit;
    text-decoration: none;
    transition: color var(--hom-transition-duration) ease-in-out;
}

a:hover {
    color: var(--hom-accent-color);
}

h1, h2, h3, h4 {
    font-family: var(--hom-font-family-title);
    font-weight: 900;
    color: var(--hom-accent-color);
    line-height: 1.2;
    margin-bottom: var(--hom-spacing-xs);
}

h1 { font-size: var(--hom-font-size-xxl); }
h2 { font-size: var(--hom-font-size-xl); }
h3 { font-size: var(--hom-font-size-l); }
h4 { font-size: var(--hom-font-size-m); }

main p {
    font-size: var(--hom-font-size-base);
    color: var(--hom-secondary-color-1);
    margin-bottom: var(--hom-spacing-s);
}

/*
    -------------------------------------------
    SECTION 2: Button Components
    -------------------------------------------
*/
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--hom-spacing-xxs);
    cursor: pointer;
    border: none;
    padding: var(--hom-spacing-s) var(--hom-spacing-m);
    border-radius: var(--hom-border-radius-base);
    font-family: var(--hom-font-family-text);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all var(--hom-transition-duration) ease-in-out;
    text-decoration: none;
    box-shadow: var(--hom-shadow-soft);
}

.btn:active {
    transform: translateY(1px);
    box-shadow: none;
}

.btn-primary {
    background-color: var(--hom-accent-color);
    color: var(--hom-white);
}

.btn-primary:hover {
    background-color: var(--hom-secondary-color-1);
    box-shadow: var(--hom-shadow-medium);
}

.btn-secondary {
    background-color: var(--hom-secondary-color-2);
    color: var(--hom-accent-color);
}

.btn-secondary:hover {
    background-color: var(--hom-white);
    color: var(--hom-accent-color);
    box-shadow: var(--hom-shadow-medium);
}

.btn-alt {
    background-color: var(--hom-white);
    color: var(--hom-secondary-color-1);
}

.btn-alt:hover {
    background-color: var(--hom-secondary-color-2);
    color: var(--hom-accent-color);
    box-shadow: var(--hom-shadow-medium);
}

.btn-large {
    padding: var(--hom-spacing-m) var(--hom-spacing-l);
    font-size: var(--hom-font-size-m);
}

.btn-icon-right i {
    margin-left: var(--hom-spacing-xxs);
}

.btn-icon-left i {
    margin-right: var(--hom-spacing-xxs);
}

/*
    -------------------------------------------
    SECTION 3: Animations (Keyframes & Classes)
    -------------------------------------------
*/
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(50px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes scaleUp {
    from { transform: scale(0.9); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.fade-in {
    opacity: 0;
    transition: opacity 1s ease-in;
}
.fade-in.is-visible {
    opacity: 1;
}

.fade-in-up {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.fade-in-up.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.scale-up {
    transform: scale(0.9);
    opacity: 0;
    transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.8s ease-in;
}
.scale-up.is-visible {
    transform: scale(1);
    opacity: 1;
}

/*
    -------------------------------------------
    SECTION 4: Hero Section
    -------------------------------------------
*/
.hero-section {
	padding-bottom: 80px;
    position: relative;
    height: 93.5vh;
    min-height: 600px;
    display: flex;
    align-items: end;
    justify-content: flex-end;
    overflow: hidden;
    margin-bottom: var(--hom-spacing-l);
}

.hero-image-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
}

.hero-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    animation: fadeIn 2s forwards;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.4) 100%);
    z-index: -1;
}

.hero-content-container {
    position: relative;
    z-index: 1;
    max-width: 600px;
    padding-right: var(--hom-spacing-l);
}

.hero-text-content {
    color: var(--hom-white);
    background-color: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(5px);
    padding: var(--hom-spacing-m) var(--hom-spacing-l);
    border-radius: var(--hom-border-radius-base);
    animation: fadeInUp 1.2s forwards;
    transform: translateY(50px);
    opacity: 0;
    animation-delay: 0.5s;
}

.hero-text-content h1, .hero-text-content p {
    color: var(--hom-white);
}

.btn-enter-now {
    margin-top: var(--hom-spacing-s);
}

/*
    -------------------------------------------
    SECTION 5: Main Content Utilities
    -------------------------------------------
*/
.section-container {
    padding: var(--hom-spacing-xl) 5%;
}

.section-title {
    text-align: center;
    margin-bottom: var(--hom-spacing-l);
    position: relative;
    display: block;
}

.section-title::after {
    content: '';
    display: block;
    width: 100px;
    height: 5px;
    background-color: var(--hom-accent-color);
    margin: var(--hom-spacing-s) auto 0;
    border-radius: 2.5px;
}

.section-title-alt {
    color: var(--hom-secondary-color-1);
    margin-bottom: var(--hom-spacing-s);
}

.section-title-light {
    color: var(--hom-white);
    margin-bottom: var(--hom-spacing-s);
}

/*
    -------------------------------------------
    SECTION 6: Community Memories (Grid Layout)
    -------------------------------------------
*/
.community-memories {
    background-color: var(--hom-background-color);
    padding: var(--hom-spacing-xl) 5%;
}

.community-memories-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: var(--hom-spacing-m);
}

.card {
    background-color: var(--hom-white);
    border: 1px solid var(--hom-secondary-color-2);
    border-radius: var(--hom-border-radius-base);
    overflow: hidden;
    box-shadow: var(--hom-shadow-soft);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: var(--hom-shadow-medium);
}

.card-album {
    grid-row: 1 / 3;
    display: flex;
    flex-direction: column;
}

.card-album-image-container {
    position: relative;
    width: 100%;
    height: 300px;
}

.card-album-image-container img {
    width: 100%;
    height: 125%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.card-album-image-container .image-label {
    position: absolute;
    top: var(--hom-spacing-m);
    left: var(--hom-spacing-m);
    background-color: rgba(255, 255, 255, 0.8);
    padding: var(--hom-spacing-xxs) var(--hom-spacing-xs);
    font-size: var(--hom-font-size-s);
    border-radius: var(--hom-border-radius-base);
    font-weight: 700;
}


.card-album:hover .card-album-image-container img {
    transform: scale(1.05);
}

.card-body {
    padding: var(--hom-spacing-m);
    padding-top: 7rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex-grow: 1;
}

.card-body h3 {
    margin-top: 0;
    margin-bottom: var(--hom-spacing-s);
}

.card-center {
    grid-row: 1 / 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: var(--hom-secondary-color-2);
    text-align: center;
}

.card-center-content {
    display: flex;
    align-items: center;
}

.card-center-content h3 {
    color: var(--hom-white);
    margin-bottom: var(--hom-spacing-s);
}

.card-image-person {
    height: 330px;
    width: 42%;
    object-fit: cover;
    border-radius: var(--hom-border-radius-base);
}

.card-biography {
    grid-row: 2 / 3;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.card-biography-body {
    padding: var(--hom-spacing-m);
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex-grow: 1;
}

.card-biography-body h3 {
    margin-top: 0;
    margin-bottom: var(--hom-spacing-s);
    color: var(--hom-accent-color);
}

.card-biography-body p {
    margin-bottom: var(--hom-spacing-m);
}

/*
    -------------------------------------------
    SECTION 7: Full-width Slider (IMPROVED)
    -------------------------------------------
*/
.full-width-slider {
    /* Corrected to ensure true full-width without side gaps */
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    padding: var(--hom-spacing-l) 0;
    overflow: hidden;
}

.slick-slider {
    /* Removed horizontal padding to allow full-width images */
    padding: 0;
}

.slick-list {
    /* Adjusted margins to handle the space between images */
    margin: 0;
}

.slick-slide {
    display: flex;
    justify-content: center;
    align-items: center;
}

.slick-slide > div {
    /* Added spacing between images and fixed height for consistency */
    padding: 0 var(--hom-spacing-s);
    height: 400px;
}

.slick-slide img {
    /* Images will now correctly fill the container with a consistent height */
    width: 100%;
    height: 400px;
    object-fit: cover;
}

.slick-prev, .slick-next {
    width: 50px;
    height: 50px;
    z-index: 10;
}

.slick-prev:before, .slick-next:before {
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    color: var(--hom-accent-color);
    font-size: 2.5rem;
    opacity: 1;
}

.slick-prev {
    left: 30px;
}

.slick-prev:before {
    content: '\f053'; /* fa-chevron-left */
}

.slick-next {
    right: 30px;
}

.slick-next:before {
    content: '\f054'; /* fa-chevron-right */
}

.slick-dots {
    /* This rule hides the navigation dots */
    display: none !important;
}

/*
    -------------------------------------------
    SECTION 8: Moment in the park
    -------------------------------------------
*/
.moment-in-park {
    background-color: var(--hom-secondary-color-2);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--hom-spacing-l);
    padding: var(--hom-spacing-xl) 18.5%;
}

.moment-content {
    flex: 1;
}

.moment-content h3 {
    color: var(--hom-secondary-color-1);
}

.moment-image {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--hom-spacing-m);
}

.moment-image img {
    width: 100%;
    height: 350px;
    object-fit: cover;
    border-radius: var(--hom-border-radius-base);
    box-shadow: var(--hom-shadow-strong);
}

/*
    -------------------------------------------
    SECTION 9: Become a member
    -------------------------------------------
*/
.become-a-member {
    background-image: url('https://midaticket-cdn.midaticket.cloud/uploads/2022/01/Cripta-1920x890-1.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    position: relative;
    height: 500px;
    width: 100vw;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    padding: 0;
}

.member-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(75, 54, 33, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
}

.member-card-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1600px;
    width: 90%;
    padding: var(--hom-spacing-l) var(--hom-spacing-xl);
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: var(--hom-border-radius-base);
    box-shadow: var(--hom-shadow-strong);
    transition: background-color 0.4s ease;
}

.member-card-content:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

.member-text-column {
    display: flex;
    flex-direction: column;
    color: var(--hom-white);
    text-align: left;
}

.member-text-column h2 {
    color: var(--hom-white);
    margin-bottom: var(--hom-spacing-xs);
    font-size: var(--hom-font-size-xl);
}

.member-text-column .slogan {
    font-style: italic;
    font-weight: 400;
    font-size: var(--hom-font-size-m);
    margin: 0;
    color: rgba(255, 255, 255, 0.85);
}

.member-button-column {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.btn-large.btn-alt {
    min-width: 250px;
    text-align: center;
}

/*
    -------------------------------------------
    SECTION 10: Explore Rooms
    -------------------------------------------
*/
.explore-rooms {
    background-color: var(--hom-background-color);
}

.rooms-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--hom-spacing-m);
}

.room-card {
    background-color: var(--hom-accent-color);
    color: var(--hom-white);
    height: 350px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: var(--hom-border-radius-base);
    padding: var(--hom-spacing-m);
    box-shadow: var(--hom-shadow-soft);
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}

.room-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--hom-shadow-medium);
    background-color: var(--hom-secondary-color-1);
}

.room-icon {
    font-size: 5rem;
    margin-bottom: var(--hom-spacing-s);
    transition: color 0.3s ease;
}

.room-card:hover .room-icon {
    color: var(--hom-white);
}

.room-card h3 {
    color: var(--hom-white);
    margin-bottom: var(--hom-spacing-s);
}

.room-card p {
    color: rgba(255, 255, 255, 0.8);
    font-size: var(--hom-font-size-s);
}

/*
    -------------------------------------------
    SECTION 11: Responsive Design (Media Queries)
    -------------------------------------------
*/

/* Laptops y Desktops grandes (1200px a 1600px) */
@media (max-width: 1600px) {
    .content-wrapper {
        padding: 0 4%;
    	margin: 0 900px 0 0;
    
    }
}

/* Tablets grandes (992px a 1200px) */
@media (max-width: 1199px) {
    h1 { font-size: var(--hom-font-size-xl); }
    h2 { font-size: var(--hom-font-size-l); }
    h3 { font-size: var(--hom-font-size-m); }

	.content-wrapper {
        padding: 0 1rem;
    	margin: 0 500px 0 0;
    }

    .hero-section {
        height: 70vh;
        min-height: 500px;
    }

    .hero-text-content {
        max-width: 450px;
        padding: var(--hom-spacing-m);
    }
    .hero-text-content h1 {
        font-size: var(--hom-font-size-xl);
    }
    
    .community-memories-container {
        grid-template-columns: 1fr;
    }

    .card-album, .card-center, .card-biography {
        grid-row: auto;
    }
    
    .moment-in-park {
        flex-direction: column;
        text-align: center;
        gap: var(--hom-spacing-m);
        padding: var(--hom-spacing-l) 5%;
    }

    .moment-content {
        padding: 0;
    }

    .section-container {
        padding: var(--hom-spacing-l) 3%;
    }

    .member-card-content {
        flex-direction: column;
        text-align: center;
        padding: var(--hom-spacing-m);
    }
    
    .member-text-column {
        text-align: center;
        margin-bottom: var(--hom-spacing-m);
    }

    .member-button-column {
        justify-content: center;
    }

    .rooms-container {
        grid-template-columns: repeat(2, 1fr);
    }

    .btn-large {
        padding: var(--hom-spacing-s) var(--hom-spacing-m);
        font-size: var(--hom-font-size-s);
    }

    .full-width-slider .slick-slide img {
        height: 350px;
    }
}

/* Tablets (768px a 991px) */
@media (max-width: 991px) {
    :root {
        --hom-font-size-base: 1rem;
        --hom-font-size-m: 1.25rem;
        --hom-font-size-l: 1.5rem;
    }

    h1 { font-size: var(--hom-font-size-xl); }
    h2 { font-size: var(--hom-font-size-l); }

	.content-wrapper {
        padding: 0 1rem;
    	margin: 0 auto;
    }

    .hero-section {
        height: 60vh;
        justify-content: center;
        align-items: center;
    }
    
    .hero-content-container {
        padding-right: 0;
        text-align: center;
    }
    
    .hero-text-content {
        padding: var(--hom-spacing-m);
        max-width: 90%;
    }
    
    .community-memories-container {
        gap: var(--hom-spacing-m);
    }

    .card-biography-body {
        padding: var(--hom-spacing-m);
    }

    .become-a-member {
        height: auto;
        min-height: 400px;
        background-attachment: scroll;
        /* Restoring parallax effect with a fallback */
        @supports (background-attachment: fixed) {
            background-attachment: fixed;
        }
    }

    .member-card-content {
        padding: var(--hom-spacing-l) var(--hom-spacing-m);
        flex-direction: column;
    }

    .member-text-column {
        text-align: center;
        margin-bottom: var(--hom-spacing-m);
    }
    
    .member-text-column h2 {
        font-size: var(--hom-font-size-l);
    }

    .member-button-column {
        justify-content: center;
    }
    
    .full-width-slider .slick-slide img {
        height: 300px;
    }

    .slick-prev, .slick-next {
        width: 40px;
        height: 40px;
    }
    .slick-prev { left: 10px; }
    .slick-next { right: 10px; }
    
    .rooms-container {
        grid-template-columns: 1fr;
    }
    .room-card {
        padding: var(--hom-spacing-m);
    }
}

/* Móviles (menos de 768px) */
@media (max-width: 767px) {
    h1 { font-size: 2.2rem; }
    h2 { font-size: 1.8rem; }
    h3 { font-size: 1.3rem; }
    
    .content-wrapper {
        padding: 0 1rem;
    	margin: 0 auto;
    }

    .hero-section {
        height: 50vh;
        padding: var(--hom-spacing-s);
    }

    .hero-text-content {
        padding: var(--hom-spacing-s);
    }

    .community-memories-container {
        grid-template-columns: 1fr;
    }
    
    .card-body, .card-biography-body {
        padding: var(--hom-spacing-s);
    }

    .card-album-image-container img {
        height: 250px;
    }

    .card-image-person {
        height: 250px;
        width: 100%;
        object-fit: cover; /* Back to cover for mobile */
        border-radius: var(--hom-border-radius-base);
    }

    .card-center-content {
        flex-direction: column;
    }

    .card-center-content img {
        height: 220px;
        width: 100%;
        margin-bottom: var(--hom-spacing-s);
    }
    
    .moment-in-park {
        padding: var(--hom-spacing-m) var(--hom-spacing-s);
    }
    
    .moment-image img {
        height: 250px;
    }

    .become-a-member {
        min-height: 300px;
        background-attachment: scroll;
        @supports (background-attachment: fixed) {
            background-attachment: fixed;
        }
    }

    .member-card-content {
        padding: var(--hom-spacing-s);
        width: 95%;
    }
    
    .member-text-column h2 {
        font-size: var(--hom-font-size-m);
    }

    .member-text-column .slogan {
        font-size: var(--hom-font-size-base);
    }

    .btn-large {
        padding: 1rem 2rem;
        font-size: 1rem;
    }
    
    .full-width-slider {
        padding: var(--hom-spacing-m) 0;
    }

    .full-width-slider .slick-slide img {
        height: 250px;
    }
    
    .slick-prev, .slick-next {
        display: none !important;
    }

    .slick-dots li button {
        width: 10px;
        height: 10px;
    }

    .rooms-container {
        grid-template-columns: 1fr;
        gap: var(--hom-spacing-s);
    }
    
    .room-card {
        height: 250px;
        padding: var(--hom-spacing-s);
    }

    .room-icon {
        font-size: 3rem;
    }
}