/* =========================================================
   INTERNAL PAGES — LA CLÉ
========================================================= */

.interior-page {
    background: #f0ebe2;
    color: #171813;
}


/* =========================================================
   HEADER
========================================================= */

.inner-header {
    position: fixed;
    z-index: 100;

    top: 0;
    left: 0;
    right: 0;

    height: 82px;

    padding:
        0 clamp(26px, 5vw, 82px);

    display: flex;
    align-items: center;

    border-bottom:
        1px solid rgba(231,201,139,.14);

    background:
        rgba(8,17,13,.92);

    backdrop-filter: blur(12px);

    color: var(--ivory);
}


.inner-brand {
    display: flex;
    align-items: center;

    gap: 14px;
}


.inner-monogram {
    width: 38px;
    height: 38px;

    display: grid;
    place-items: center;

    border:
        1px solid rgba(224,194,126,.72);

    border-radius: 50%;

    font-family: var(--serif);

    font-size: 16px;

    color: var(--gold-light);
}


.inner-brand-name {
    font-family: var(--serif);

    font-size: 22px;

    letter-spacing: .08em;

    color: var(--gold-pale);
}


.inner-nav {
    margin-left: auto;

    display: flex;
    align-items: center;

    gap:
        clamp(20px, 2.3vw, 38px);
}


.inner-nav a {
    position: relative;

    font-size: 9px;

    letter-spacing: .18em;

    text-transform: uppercase;

    color:
        rgba(255,255,255,.72);

    transition:
        color .2s ease;
}


.inner-nav a::after {
    content: "";

    position: absolute;

    left: 0;
    right: 100%;

    bottom: -8px;

    height: 1px;

    background: var(--gold);

    transition:
        right .25s ease;
}


.inner-nav a:hover {
    color: var(--gold-light);
}


.inner-nav a:hover::after {
    right: 0;
}


.inner-contact {
    margin-left:
        clamp(24px, 3vw, 48px);

    padding:
        11px 17px;

    border:
        1px solid rgba(224,194,126,.56);

    font-size: 9px;

    letter-spacing: .16em;

    text-transform: uppercase;

    color: var(--gold-light);
}


/* =========================================================
   HERO CASA
========================================================= */

.casa-hero {
    position: relative;

    min-height: 100vh;
    min-height: 100svh;

    overflow: hidden;

    display: flex;
    align-items: flex-end;
}


.casa-hero-image {
    position: absolute;

    inset: 0;

    background-image: url("../img/casa/casa-1.png");

    background-size: cover;

    background-position:
        center center;

    transform: scale(1.015);
}


.casa-hero-overlay {
    position: absolute;

    inset: 0;

    background:

        linear-gradient(
            90deg,
            rgba(5,10,7,.72) 0%,
            rgba(4,8,6,.42) 45%,
            rgba(3,5,4,.14) 74%
        ),

        linear-gradient(
            0deg,
            rgba(4,7,5,.72) 0%,
            rgba(4,7,5,.08) 66%
        );
}


.casa-hero-content {
    position: relative;

    z-index: 3;

    width:
        min(930px, 78%);

    padding:
        150px
        0
        clamp(70px, 9vh, 120px)
        clamp(30px, 8vw, 135px);

    color: var(--white);
}


.page-number {
    margin-bottom: 21px;

    font-size: 10px;

    letter-spacing: .23em;

    text-transform: uppercase;

    color: var(--gold-light);
}


.casa-hero h1 {
    margin: 0;

    font-family: var(--serif);

    font-size:
        clamp(62px, 7.3vw, 120px);

    line-height: .84;

    font-weight: 400;

    letter-spacing: -.025em;

    text-shadow:
        0 4px 30px rgba(0,0,0,.3);
}


.casa-hero-content > p {
    width:
        min(620px, 100%);

    margin:
        31px 0 32px;

    font-family: var(--serif);

    font-size:
        clamp(19px, 1.65vw, 27px);

    line-height: 1.45;

    color:
        rgba(255,250,239,.87);
}


.text-link {
    display: inline-flex;
    align-items: center;

    gap: 14px;

    font-size: 10px;

    letter-spacing: .18em;

    text-transform: uppercase;

    color: var(--gold-light);
}


.text-link span {
    font-family: var(--serif);

    font-size: 25px;
}


.hero-side-note {
    position: absolute;

    z-index: 3;

    right:
        clamp(22px, 3vw, 48px);

    bottom:
        clamp(33px, 5vh, 65px);

    display: flex;
    align-items: center;

    gap: 13px;

    font-size: 8px;

    letter-spacing: .2em;

    text-transform: uppercase;

    color:
        rgba(255,255,255,.62);
}


.hero-side-note i {
    width: 28px;
    height: 1px;

    background:
        rgba(224,194,126,.65);
}


/* =========================================================
   COMMON
========================================================= */

.section-label {
    font-size: 9px;

    letter-spacing: .24em;

    text-transform: uppercase;

    color: var(--gold-dark);
}


.section-label.light {
    color: var(--gold-light);
}


/* =========================================================
   INTRO
========================================================= */

.casa-intro {
    padding:
        clamp(95px, 12vw, 185px)
        clamp(30px, 8vw, 140px);

    display: grid;

    grid-template-columns:
        .55fr 1.4fr 1fr;

    gap:
        clamp(28px, 5vw, 85px);

    background: #f0ebe2;
}


.intro-heading h2 {
    margin: 0;

    font-family: var(--serif);

    font-size:
        clamp(48px, 5vw, 80px);

    line-height: .93;

    font-weight: 400;

    letter-spacing: -.025em;
}


.intro-copy {
    padding-top: 10px;
}


.intro-copy p {
    margin:
        0 0 25px;

    font-size:
        clamp(13px, 1vw, 16px);

    line-height: 1.85;

    color: #655e55;
}


.intro-copy .intro-lead {
    font-family: var(--serif);

    font-size:
        clamp(19px, 1.55vw, 25px);

    line-height: 1.45;

    color: #292a24;
}


/* =========================================================
   STORY / PISCINA
========================================================= */

.image-story {
    display: grid;

    grid-template-columns:
        1.45fr .8fr;

    min-height: 780px;

    background: #111b15;

    color: var(--ivory);
}


.story-image {
    min-height: 760px;

    overflow: hidden;
}


.story-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


.story-copy {
    padding:
        clamp(75px, 9vw, 145px)
        clamp(38px, 6vw, 95px);

    display: flex;
    flex-direction: column;

    justify-content: center;
}


.story-copy h2 {
    margin:
        18px 0 28px;

    font-family: var(--serif);

    font-size:
        clamp(46px, 4.5vw, 74px);

    line-height: .92;

    font-weight: 400;
}


.story-copy > p {
    margin:
        0 0 20px;

    font-size: 13px;

    line-height: 1.9;

    color:
        rgba(240,235,225,.64);
}


.story-points {
    margin-top: 39px;

    border-top:
        1px solid rgba(225,193,128,.25);
}


.story-points > div {
    padding: 19px 0;

    border-bottom:
        1px solid rgba(225,193,128,.2);

    display: grid;

    grid-template-columns:
        .85fr 1.2fr;

    gap: 20px;
}


.story-points strong {
    font-family: var(--serif);

    font-size: 19px;

    font-weight: 400;

    color: var(--gold-light);
}


.story-points span {
    font-size: 11px;

    line-height: 1.65;

    color:
        rgba(240,235,225,.56);
}


/* =========================================================
   PHILOSOPHY
========================================================= */

.philosophy-section {
    min-height: 650px;

    padding:
        clamp(90px, 11vw, 170px)
        clamp(30px, 9vw, 150px);

    display: grid;

    grid-template-columns:
        .45fr 1.6fr;

    align-items: center;

    background:
        linear-gradient(
            145deg,
            #173326,
            #091710
        );

    color: var(--ivory);
}


.philosophy-number {
    align-self: start;

    font-family: var(--serif);

    font-size:
        clamp(130px, 17vw, 260px);

    line-height: .72;

    color:
        rgba(207,171,95,.085);
}


.philosophy-content {
    width:
        min(800px, 100%);
}


.philosophy-content blockquote {
    margin:
        24px 0 36px;

    font-family: var(--serif);

    font-size:
        clamp(42px, 5vw, 78px);

    line-height: .98;

    font-weight: 400;

    color: #f3ead7;
}


.philosophy-content > p {
    width:
        min(600px, 100%);

    margin: 0;

    font-size: 13px;

    line-height: 1.9;

    color:
        rgba(241,235,222,.61);
}


/* =========================================================
   ROOMS
========================================================= */

.rooms-section {
    padding:
        clamp(95px, 11vw, 170px)
        clamp(28px, 6vw, 100px);

    background: #e9e2d8;
}


.rooms-heading {
    width:
        min(720px, 100%);

    margin:
        0 auto
        clamp(60px, 8vw, 110px);

    text-align: center;
}


.rooms-heading h2 {
    margin:
        17px 0 25px;

    font-family: var(--serif);

    font-size:
        clamp(55px, 6vw, 92px);

    line-height: .87;

    font-weight: 400;
}


.rooms-heading p {
    width:
        min(560px, 100%);

    margin: auto;

    font-size: 13px;

    line-height: 1.8;

    color: #6f665b;
}


.room-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0,1fr));

    gap:
        clamp(18px, 2vw, 32px);

    max-width: 1500px;

    margin: auto;
}


.room-card {
    background: #111611;

    color: var(--ivory);
}


.room-image {
    height:
        clamp(400px, 47vw, 710px);

    overflow: hidden;
}


.room-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform 1s cubic-bezier(.2,.7,.2,1);
}


.room-card:hover img {
    transform: scale(1.035);
}


.room-info {
    position: relative;

    padding:
        clamp(25px, 3vw, 45px);
}


.room-index {
    position: absolute;

    right:
        clamp(25px, 3vw, 45px);

    top:
        clamp(28px, 3vw, 47px);

    font-family: var(--serif);

    color: var(--gold);
}


.room-info h3 {
    margin: 0 0 12px;

    font-family: var(--serif);

    font-size:
        clamp(42px, 4vw, 66px);

    line-height: 1;

    font-weight: 400;

    color: var(--gold-light);
}


.room-info p {
    width:
        min(500px, 85%);

    margin: 0;

    font-size: 12px;

    line-height: 1.8;

    color:
        rgba(242,235,220,.57);
}


/* =========================================================
   SALON
========================================================= */

.salon-section {
    position: relative;

    min-height: 100vh;
    min-height: 900px;

    display: flex;
    align-items: flex-end;

    overflow: hidden;
}


.salon-image {
    position: absolute;

    inset: 0;
}


.salon-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}


.salon-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(8,7,7,.77) 0%,
            rgba(7,6,6,.48) 43%,
            rgba(5,5,5,.15) 77%
        ),

        linear-gradient(
            0deg,
            rgba(5,5,5,.7),
            transparent 56%
        );
}


.salon-copy {
    position: relative;

    z-index: 3;

    width:
        min(690px, 80%);

    margin:
        0 0
        clamp(65px, 9vh, 120px)
        clamp(30px, 8vw, 135px);

    color: var(--white);
}


.salon-copy h2 {
    margin:
        18px 0 29px;

    font-family: var(--serif);

    font-size:
        clamp(58px, 6vw, 100px);

    line-height: .88;

    font-weight: 400;
}


.salon-copy p {
    width:
        min(570px, 100%);

    margin:
        0 0 33px;

    font-size: 13px;

    line-height: 1.9;

    color:
        rgba(255,247,232,.69);
}


.salon-note {
    font-size: 9px;

    letter-spacing: .19em;

    text-transform: uppercase;

    color: var(--gold-light);
}


/* =========================================================
   STAY
========================================================= */

.stay-section {
    padding:
        clamp(95px, 11vw, 175px)
        clamp(30px, 8vw, 135px);

    background: #f0ebe2;
}


.stay-copy {
    display: grid;

    grid-template-columns:
        .55fr 1.4fr 1fr;

    gap:
        clamp(30px, 5vw, 80px);

    align-items: start;
}


.stay-copy h2 {
    grid-column: 2;

    margin: 0;

    font-family: var(--serif);

    font-size:
        clamp(48px, 5vw, 80px);

    line-height: .92;

    font-weight: 400;
}


.stay-copy > p {
    grid-column: 3;

    margin: 7px 0 0;

    font-size: 13px;

    line-height: 1.85;

    color: #696158;
}


.stay-grid {
    margin-top:
        clamp(65px, 8vw, 110px);

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    border-top:
        1px solid #cbc2b5;
}


.stay-item {
    min-height: 220px;

    padding:
        31px
        clamp(22px, 3vw, 42px);

    border-right:
        1px solid #cbc2b5;
}


.stay-item:last-child {
    border-right: 0;
}


.stay-item > span {
    display: block;

    margin-bottom: 38px;

    font-family: var(--serif);

    font-size: 16px;

    color: var(--gold-dark);
}


.stay-item strong {
    display: block;

    margin-bottom: 12px;

    font-family: var(--serif);

    font-size: 28px;

    font-weight: 400;
}


.stay-item p {
    margin: 0;

    font-size: 11px;

    line-height: 1.7;

    color: #746d63;
}


/* =========================================================
   CTA
========================================================= */

.page-cta {
    min-height: 650px;

    padding:
        90px 30px;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    text-align: center;

    background:
        radial-gradient(
            circle at 50% 40%,
            rgba(198,155,74,.12),
            transparent 34%
        ),
        linear-gradient(
            145deg,
            #173126,
            #07130e
        );

    color: var(--ivory);
}


.cta-keyline {
    margin-bottom: 22px;

    font-size: 9px;

    letter-spacing: .25em;

    text-transform: uppercase;

    color: var(--gold-light);
}


.page-cta h2 {
    margin: 0;

    font-family: var(--serif);

    font-size:
        clamp(57px, 6vw, 95px);

    line-height: .92;

    font-weight: 400;
}


.page-cta p {
    margin:
        25px auto 32px;

    width:
        min(520px, 100%);

    font-size: 13px;

    line-height: 1.8;

    color:
        rgba(240,233,219,.62);
}


.gold-button {
    width:
        min(390px, 100%);

    min-height: 65px;

    padding:
        0 28px;

    display: flex;

    align-items: center;
    justify-content: space-between;

    border:
        1px solid rgba(238,211,153,.9);

    background:
        linear-gradient(
            108deg,
            #9f7130,
            #c69e56 52%,
            #94662a
        );

    font-family: var(--serif);

    font-size: 15px;

    letter-spacing: .15em;

    text-transform: uppercase;

    color: #fff0cc;
}


.gold-button strong {
    font-size: 28px;

    font-weight: 300;
}


/* =========================================================
   FOOTER
========================================================= */

.inner-footer {
    min-height: 125px;

    padding:
        30px
        clamp(30px, 6vw, 100px);

    display: grid;

    grid-template-columns:
        1fr 1.5fr 1fr;

    align-items: center;

    background: #050906;

    color:
        rgba(236,227,207,.48);

    font-size: 9px;

    letter-spacing: .13em;

    text-transform: uppercase;
}


.inner-footer > a {
    font-family: var(--serif);

    font-size: 22px;

    text-transform: none;

    letter-spacing: .08em;

    color: var(--gold-light);
}


.inner-footer div {
    display: flex;

    gap: 25px;
}


.inner-footer div:last-child {
    justify-content: flex-end;
}