@charset "UTF-8";

@media (max-width: 1100px) {
    :root {
        --nav-height: 94px;
    }

    .section-limit,
    .nav-inner {
        width: min(100% - 56px, 980px);
    }

    .site-nav {
        height: calc(var(--nav-height) - 6px);
    }

    .hero::after {
        top: calc(var(--nav-height) - 6px);
        height: 6px;
    }

    .nav-logo img {
        width: 220px;
    }

    #nav-menu {
        gap: 22px;
    }

    #nav-menu a {
        font-size: 11px;
    }

    #nav-menu>a:first-child {
        margin-top: calc(-1ch - 12vh - 12dvh);
    }

    .nav-contact {
        min-height: 44px;
        padding: 10px 18px;
        font-size: 11px;
    }

    .hero {
        min-height: 820px;
        padding-bottom: 72px;
    }

    .benefits-heading {
        gap: 40px;
    }

    .Membresias-MAIN {
        grid-template-columns: 1fr 1fr;
    }

    .membership-intro-copy {
        padding: 65px 45px;
    }

    .membresias {
        max-width: 900px;
    }

    .membership-content {
        padding: 34px;
    }

    .especial-card {
        gap: 50px;
    }

    .contact-panel {
        padding: 70px 55px;
    }

    .footer-row {
        grid-template-columns: 1fr auto;
        gap: 30px;
    }

    .footer-links {
        display: none;
    }
}

@media (max-width: 900px),
(hover: none) and (pointer: coarse) and (max-width: 1100px) {
    :root {
        --nav-height: 82px;
    }

    .section-limit,
    .nav-inner {
        width: min(100% - 40px, 720px);
    }

    .nav-inner {
        display: flex;
        justify-content: space-between;
    }

    /*
     * backdrop-filter creates a containing block for fixed descendants in
     * mobile browsers. Removing it lets the open menu cover the viewport.
     */
    .site-nav {
        backdrop-filter: none;
    }

    body.menu-open .site-nav {
        height: 100dvh;
        background: var(--blue-dark);
    }

    body.menu-open .nav-inner {
        align-items: flex-start;
        height: var(--nav-height);
        padding-top: 18px;
    }

    .nav-logo img {
        width: 205px;
    }

    .nav-logo {
        position: relative;
        z-index: 2;
    }

    .nav-contact {
        display: none;
    }

    .nav-close {
        position: relative;
        z-index: 2;
        display: flex;
        flex-direction: column;
        gap: 5px;
        width: 42px;
        height: 42px;
        align-items: center;
        justify-content: center;
        border: 1px solid var(--gold);
        background: transparent;
        cursor: pointer;
    }

    .nav-close span {
        display: block;
        width: 20px;
        height: 1px;
        background: var(--cream);
        transition: transform 0.25s ease, opacity 0.25s ease;
    }

    .nav-close[aria-expanded="true"] span:nth-child(1) {
        transform: translateY(6px) rotate(45deg);
    }

    .nav-close[aria-expanded="true"] span:nth-child(2) {
        opacity: 0;
    }

    .nav-close[aria-expanded="true"] span:nth-child(3) {
        transform: translateY(-6px) rotate(-45deg);
    }

    #nav-menu {
        position: fixed;
        inset: 0;
        z-index: 1;
        display: none;
        flex-direction: column;
        justify-content: center;
        gap: 12px;
        width: 100%;
        height: 100dvh;
        padding: calc(var(--nav-height) + 28px) 28px 42px;
        overflow-y: auto;
        background: var(--blue-dark);
    }

    #nav-menu a {
        display: flex;
        width: min(100%, 360px);
        min-height: 54px;
        align-items: center;
        justify-content: center;
        border-bottom: 1px solid rgba(198, 161, 91, 0.28);
        color: var(--cream);
        font-family: "Jost", Arial, sans-serif;
        font-size: clamp(16px, 4.8vw, 20px);
        font-weight: 400;
        letter-spacing: 0.14em;
        line-height: 1.2;
        text-align: center;
        text-transform: uppercase;
    }

    #nav-menu a:last-child {
        border-bottom: 0;
    }

    .hero {
        min-height: 760px;
        padding: calc(var(--nav-height) + 70px) 0 60px;
        background-position: 43% center;
    }

    .eyebrow-box {
        font-size: 12px !important;
    }

    .hero h1 {
        max-width: 100%;
        font-size: clamp(48px, 9vw, 70px);
    }

    .hero-copy {
        max-width: 630px;
        font-size: 16px;
    }

    .cover-grid {
        grid-template-columns: repeat(2, 1fr);
        width: 100%;
    }

    .statement {
        min-height: 270px;
    }

    .statement h2 {
        font-size: 34px;
    }

    .Beneficios-MAIN {
        padding: 80px 0;
    }

    .benefits-heading {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .benefits-heading p {
        max-width: 580px;
        margin: 0;
        text-align: left;
    }

    .Membresias-MAIN {
        grid-template-columns: 1fr;
    }

    .membership-intro-copy {
        width: min(100% - 40px, 720px);
        margin: auto;
        padding: 75px 0;
    }

    .membership-intro-image {
        min-height: 460px;
    }

    .Elige-MAIN {
        padding: 100px 0;
    }

    .membresias {
        grid-template-columns: 1fr;
        max-width: 570px;
    }

    .membership-card .membership-content>p:not(.eyebrow, .price) {
        min-height: 0;
    }

    .Especial-MAIN {
        padding: 95px 0;
    }

    .especial-card {
        grid-template-columns: 1fr;
        gap: 28px;
        margin-bottom: 75px;
    }

    .especial-card>div {
        padding: 0;
    }

    .especial-card-reverse>div,
    .especial-card-reverse>img {
        order: initial;
    }

    .especial-card img {
        height: 430px;
    }

    .Images-MAIN {
        grid-template-columns: 1fr;
        height: auto;
    }

    .Images-MAIN article {
        height: 340px;
    }

    .Form-main {
        grid-template-columns: 1fr;
    }

    .contact-image {
        min-height: 520px;
    }

    .contact-panel {
        padding: 80px max(28px, calc((100vw - 720px) / 2));
    }
}

@media (max-width: 600px) {

    .section-limit,
    .nav-inner {
        width: calc(100% - 36px);
    }

    .nav-logo img {
        width: 170px;
    }

    .hero {
        min-height: 760px;
        padding-top: 135px;
        background-position: 48% center;
    }

    .eyebrow-box {
        display: flex;
        width: fit-content;
        max-width: 100%;
        font-size: 10px;
        letter-spacing: 0.14em;
    }

    .hero h1 {
        font-size: clamp(44px, 13vw, 60px);
        line-height: 0.98;
    }

    .hero-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .hero-actions .sand-btn {
        width: 100%;
    }

    .cover-grid {
        gap: 24px 12px;
    }

    .cover-grid>div {
        gap: 10px;
    }

    .cover-grid svg {
        width: 30px;
    }

    .cover-grid p {
        font-size: 14px;
    }

    .statement {
        padding: 55px 0;
    }

    .statement h2 {
        font-size: 28px;
        line-height: 1.35;
    }

    .benefits-heading h2 {
        font-size: 36px;
    }

    .benefits-heading p {
        font-size: 17px;
    }

    .beneficios-grid article {
        padding: 25px 10px;
    }

    .beneficios-grid article:last-child {
        grid-column: 1 / -1;
        display: flex;
        justify-content: center;
        border-right: none;
    }

    .beneficios-grid article:last-child>div {
        flex: 0 0 auto;
        max-width: 75%;
    }

    .center-action .sand-btn {
        width: 100%;
    }

    .membership-intro-copy {
        width: calc(100% - 36px);
        padding: 65px 0;
    }

    .membership-intro-copy h2,
    .plans-heading h2 {
        font-size: 40px;
    }

    .membership-intro-image {
        min-height: 370px;
    }

    .Elige-MAIN {
        padding: 75px 0;
    }

    .plans-heading,
    .experience-heading {
        margin-bottom: 52px;
    }

    .membership-card>img {
        height: 200px;
    }

    .membership-content {
        padding: 30px 24px;
    }

    .membership-card h3 {
        font-size: 36px;
    }

    .membership-features li {
        font-size: 15px;
    }

    .Especial-MAIN {
        padding: 75px 0;
    }

    .experience-heading h2 {
        font-size: 34px;
    }

    .especial-card img {
        height: 330px;
    }

    .especial-card h3 {
        font-size: 27px;
    }

    .Images-MAIN article {
        height: 290px;
    }

    .contact-image {
        min-height: 400px;
    }

    .contact-panel {
        padding: 70px 24px;
    }

    .contact-panel h2 {
        font-size: 38px;
    }

    .contact-panel .sand-btn {
        width: 100%;
    }

    .NosVemos-MAIN {
        min-height: 580px;
        padding-inline: 20px;
    }

    .closing-content>img {
        width: 82px;
        height: 102px;
    }

    .closing-content h2 {
        font-size: 38px;
    }

    .footer-row {
        display: flex;
        flex-direction: column;
        gap: 25px;
        margin-bottom: 28px;
        text-align: center;
    }

    .social-links {
        justify-self: auto;
    }
}