.hero--chale-chales .hero__bg {
    position: absolute;
    inset: 0;

    background:
        url("/assets/img/IMG_8729.webp")
        center center / cover no-repeat;

    transform: scale(1.05);
}

/* =========================================================
   CHALÉS PAGE
========================================================= */

.landin-chales {
    padding: var(--landin-space-xxl) 0;
    background: #f8f6f3;
}

/* =========================================================
   CARD
========================================================= */

.landin-chale-card {
    display: flex;

    overflow: hidden;

    height: 100%;

    background: var(--bs-white);

    border-radius: var(--landin-radius-xl);

    border: 1px solid rgba(0,0,0,.05);

    box-shadow: 0 20px 50px rgba(0,0,0,.06);

    transition:
        transform .4s ease,
        box-shadow .4s ease;
}

.landin-chale-card:hover {
    transform: translateY(-8px);

    box-shadow: 0 30px 70px rgba(0,0,0,.10);
}

/* =========================================================
   IMAGE
========================================================= */

.landin-chale-image {
    width: 42%;
    position: relative;
    overflow: hidden;
}

.landin-chale-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform .8s ease;
}

.landin-chale-card:hover .landin-chale-image img {
    transform: scale(1.08);
}

/* =========================================================
   CONTENT
========================================================= */

.landin-chale-content {
    width: 58%;

    padding: 2rem;

    display: flex;
    flex-direction: column;
}

.landin-chale-content h3 {
    margin-bottom: .75rem;

    font-family: var(--landin-font-accent);

    font-size: clamp(1.6rem, 2vw, 2rem);
}

.landin-chale-tagline {
    margin-bottom: 1rem;

    color: var(--landin-text-muted);

    font-size: .95rem;

    line-height: 1.7;
}

/* =========================================================
   META
========================================================= */

.landin-chale-meta {
    display: flex;
    flex-wrap: wrap;

    gap: 1rem;

    margin-bottom: 1.5rem;
}

.landin-chale-meta span {
    display: inline-flex;
    align-items: center;
    gap: .5rem;

    font-size: .9rem;

    color: var(--landin-text-muted);
}

.landin-chale-meta i {
    color: var(--landin-primary);
}

/* =========================================================
   FEATURES
========================================================= */

.landin-chale-features {
    display: flex;
    flex-wrap: wrap;

    gap: .75rem;

    padding: 0;
    margin: 0 0 2rem;

    list-style: none;
}

.landin-chale-features li {
    display: flex;
    align-items: center;
    gap: .5rem;

    padding: .65rem .9rem;

    font-size: .85rem;

    background: rgba(198,164,108,.08);

    border: 1px solid rgba(198,164,108,.12);

    border-radius: 999px;
}

.landin-chale-features i {
    color: var(--landin-primary);
}

/* =========================================================
   BUTTON
========================================================= */

.landin-chale-content .landin-btn-primary {
    margin-top: auto;

    width: fit-content;
}

/* =========================================================
   BADGE
========================================================= */

.landin-chale-badge {
    display: inline-block;

    margin-bottom: 1rem;

    padding: .4rem .85rem;

    background: rgba(198,164,108,.12);

    border: 1px solid rgba(198,164,108,.2);

    border-radius: 999px;

    font-size: .75rem;
    font-weight: 600;

    letter-spacing: .08em;
    text-transform: uppercase;

    color: var(--landin-primary);
}

/* =========================================================
   RESPONSIVO
========================================================= */

@media (max-width: 991.98px) {

    .landin-chale-card {
        flex-direction: column;
    }

    .landin-chale-image,
    .landin-chale-content {
        width: 100%;
    }

    .landin-chale-image {
        height: 320px;
    }
}

@media (max-width: 767.98px) {

    .landin-chale-image {
        height: 260px;
    }

    .landin-chale-content {
        padding: 1.5rem;
    }

    .landin-chale-meta {
        flex-direction: column;
        gap: .5rem;
    }

    .landin-chale-content .landin-btn-primary {
        width: 100%;
        text-align: center;
    }
}