/* =========================================================
   ROOT
========================================================= */

:root {

    --bg:
        #080808;

    --bg-soft:
        #0d0d0d;

    --surface:
        #111111;

    --surface-soft:
        #161616;

    --surface-raised:
        #1b1b1b;

    --text:
        #f5f5f5;

    --text-soft:
        rgba(255, 255, 255, .68);

    --text-muted:
        rgba(255, 255, 255, .48);

    --border-dark:
        rgba(255, 255, 255, .10);

    --line-dark:
        rgba(255, 255, 255, .08);

    --glass:
        rgba(255, 255, 255, .04);

    --glass-strong:
        rgba(255, 255, 255, .075);

    --white:
        #ffffff;

    --black:
        #111111;

    --soft-black:
        #191919;

    --gray:
        #727272;

    --light-gray:
        #f5f4f1;

    --border:
        #e7e5e1;

    --gold:
        #b58a45;

    --gold-dark:
        #947039;

    --gold-soft:
        #c7a870;

    --serif:
        "Playfair Display",
        Georgia,
        serif;

    --sans:
        "DM Sans",
        Arial,
        sans-serif;

    --safe-top:
        env(
            safe-area-inset-top,
            0px
        );

    --safe-right:
        env(
            safe-area-inset-right,
            0px
        );

    --safe-bottom:
        env(
            safe-area-inset-bottom,
            0px
        );

    --safe-left:
        env(
            safe-area-inset-left,
            0px
        );

}

/* =========================================================
   RESET
========================================================= */

* {

    margin:
        0;

    padding:
        0;

    box-sizing:
        border-box;

}

/* =========================================================
   DOCUMENT
========================================================= */

html {

    width:
        100%;

    min-width:
        100%;

    min-height:
        100%;

    margin:
        0;

    padding:
        0;

    background:
        transparent;

    

    scroll-behavior:
        smooth;

}

body {

    width:
        100%;

    min-width:
        100%;

    min-height:
        100%;

    margin:
        0;

    padding:
        0;

    background:
        transparent;

    color:
        var(--text);

    font-family:
        var(--sans);

    overflow-x:
        hidden;

    -webkit-font-smoothing:
        antialiased;

}

/* =========================================================
   REAL PAGE BACKGROUND
========================================================= */

main {

    position:
        relative;

    background:
        var(--bg);

}

img {

    display:
        block;

    width:
        100%;

}

a {

    color:
        inherit;

    text-decoration:
        none;

}

button {

    font:
        inherit;

}

::selection {

    background:
        var(--gold);

    color:
        var(--bg);

}

/* =========================================================
   KEYBOARD ACCESSIBILITY
========================================================= */

.skip-link {

    position:
        fixed;

    z-index:
        2000;

    top:
        calc(12px + var(--safe-top));

    left:
        calc(12px + var(--safe-left));

    padding:
        11px 16px;

    border-radius:
        999px;

    background:
        var(--gold);

    color:
        var(--bg);

    font-size:
        13px;

    font-weight:
        600;

    transform:
        translateY(-180%);

    transition:
        transform .2s ease;

}

.skip-link:focus {

    transform:
        translateY(0);

}

:where(a, button, input, select):focus-visible {

    outline:
        2px solid var(--gold);

    outline-offset:
        4px;

}

/* =========================================================
   LAYOUT
========================================================= */

.container {

    width:
        min(
            92%,
            1420px
        );

    margin:
        auto;

}

.section {

    padding:
        150px 0;

}

.eyebrow {

    display:
        block;

    margin-bottom:
        35px;

    font-size:
        12px;

    font-weight:
        600;

    letter-spacing:
        0.18em;

    color:
        var(--gold);

}

.section-heading {

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        flex-end;

    gap:
        80px;

    margin-bottom:
        80px;

}

.section-heading h2 {

    font-family:
        var(--serif);

    font-size:
        clamp(
            46px,
            5vw,
            76px
        );

    line-height:
        .98;

    font-weight:
        500;

    letter-spacing:
        -0.04em;

}

.section-heading > p {

    width:
        380px;

    color:
        var(--gray);

    font-size:
        16px;

    line-height:
        1.7;

}

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

.header {

    position:
        fixed;

    z-index:
        1000;

    top:
        0;

    left:
        0;

    width:
        100%;

    background:
        transparent;

    -webkit-backdrop-filter:
        none;

    backdrop-filter:
        none;

    transition:
        background-color .35s ease,
        backdrop-filter .35s ease,
        box-shadow .3s ease;

}

.header.scrolled {

    background:
        rgba(
            255,
            255,
            255,
            .78
        );

    -webkit-backdrop-filter:
        blur(18px)
        saturate(150%);

    backdrop-filter:
        blur(18px)
        saturate(150%);

    box-shadow:
        0 1px 0
        rgba(
            0,
            0,
            0,
            .07
        );

}

.header-container {

    height:
        68px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

}

.brand {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    line-height:
        .85;

}

.brand-main {

    font-family:
        var(--serif);

    font-size:
        25px;

    letter-spacing:
        .05em;

}

.brand-sub {

    margin-top:
        7px;

    font-size:
        8px;

    letter-spacing:
        .5em;

    transform:
        translateX(2px);

}

.nav {

    display:
        flex;

    align-items:
        center;

    gap:
        38px;

}

.nav a {

    position:
        relative;

    font-size:
        13px;

    color:
        #000000;

}

.nav a::after {

    content:
        "";

    position:
        absolute;

    left:
        0;

    bottom:
        -6px;

    width:
        0;

    height:
        1px;

    background:
        var(--black);

    transition:
        width .25s ease;

}

.nav a:hover::after {

    width:
        100%;

}

.header-book {

    height:
        45px;

    padding:
        0 18px;

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    border:
        1px solid
        var(--black);

    font-size:
        13px;

    transition:
        .25s ease;

}

.header-book svg {

    width:
        15px;

}

.header-book:hover {

    background:
        var(--black);

    color:
        white;

}

.menu-button {

    display:
        none;

    width:
        44px;

    height:
        44px;

    padding:
        0;

    border:
        0;

    outline:
        none;

    background:
        transparent;

    color:
        #111111;

    cursor:
        pointer;

    -webkit-tap-highlight-color:
        transparent;

}

.menu-button svg {

    width:
        28px;

    height:
        28px;

    display:
        block;

    color:
        #111111;

    stroke:
        currentColor;

    stroke-width:
        1.8;

}

/* =========================================================
   NICOLAU HERO
========================================================= */

.ns-hero {

    position:
        relative;

    height:
        230vh;

    background:
        #ffffff;

    color:
        #111111;

    isolation:
        isolate;

}

/* =========================================================
   STICKY VIEWPORT
========================================================= */

.ns-hero-sticky {

    position:
        sticky;

    top:
        0;

    width:
        100%;

    height:
        100vh;

    overflow:
        hidden;

    background:
        #ffffff;

}

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

.ns-hero-image-layer {

    position:
        absolute;

    z-index:
        1;

    inset:
        0;

    overflow:
        hidden;

    background:
        #111111;

    opacity:
        0;

    visibility:
        hidden;

    will-change:
        opacity;

}

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

.ns-hero-image {

    position:
        absolute;

    inset:
        0;

    width:
        100%;

    height:
        100%;

    display:
        block;

    object-fit:
        cover;

    object-position:
        center center;

    transform:
        scale(1.08);

    transform-origin:
        center center;

    will-change:
        transform;

    backface-visibility:
        hidden;

    -webkit-backface-visibility:
        hidden;

    user-select:
        none;

    -webkit-user-drag:
        none;

}

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

.ns-hero-image-overlay {

    position:
        absolute;

    z-index:
        2;

    inset:
        0;

    pointer-events:
        none;

    background:
        linear-gradient(
            180deg,

            rgba(
                0,
                0,
                0,
                .04
            ) 0%,

            rgba(
                0,
                0,
                0,
                .08
            ) 45%,

            rgba(
                0,
                0,
                0,
                .70
            ) 100%
        );

}

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

.ns-hero-intro {

    position:
        absolute;

    z-index:
        5;

    inset:
        0;

    background:
        #ffffff;

    color:
        #111111;

    will-change:
        opacity;

}

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

.ns-hero-meta {

    position:
        absolute;

    z-index:
        2;

    top:
        50%;

    left:
        clamp(
            28px,
            5vw,
            90px
        );

    right:
        clamp(
            28px,
            5vw,
            90px
        );

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    transform:
        translateY(-50%);

    color:
        #a47a3d;

    font-size:
        20px;

    font-weight:
        600;

    letter-spacing:
        .24em;

    pointer-events:
        none;

    will-change:
        transform,
        opacity;

}

/* =========================================================
   BRAND
========================================================= */

.ns-hero-brand {

    position:
        absolute;

    z-index:
        3;

    top:
        47%;

    left:
        50%;

    width:
        100%;

    transform:
        translate(
            -50%,
            -50%
        );

    pointer-events:
        none;

}

/* =========================================================
   BRAND LINE
========================================================= */

.ns-hero-brand-line {

    width:
        100%;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    overflow:
        visible;

    padding:
        .035em
        0
        .07em;

    font-family:
        var(--serif);

    font-size:
        clamp(
            110px,
            16.5vw,
            310px
        );

    font-weight:
        500;

    line-height:
        .78;

    color:
        #111111;

    white-space:
        nowrap;

    will-change:
        transform,
        opacity;

}

.ns-hero-brand-line span {

    display:
        block;

}

/* =========================================================
   NICOLAU
========================================================= */

.ns-hero-brand-top {

    letter-spacing:
        -.052em;

}

/* =========================================================
   STUDIO
========================================================= */

.ns-hero-brand-bottom {

    margin-top:
        -.045em;

    letter-spacing:
        -.028em;

}

/* =========================================================
   ACTIONS
========================================================= */

.ns-hero-actions {

    position:
        absolute;

    z-index:
        4;

    left:
        50%;

    bottom:
        95px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        12px;

    transform:
        translateX(-50%);

    will-change:
        transform,
        opacity;

}

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

.ns-hero-action {

    min-width:
        155px;

    height:
        54px;

    padding:
        0
        25px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        999px;

    font-size:
        13px;

    font-weight:
        600;

    letter-spacing:
        .01em;

    transition:
        transform .3s ease,
        background-color .3s ease,
        color .3s ease,
        border-color .3s ease;

}

/* =========================================================
   PRIMARY
========================================================= */

.ns-hero-action-primary {

    background:
        #111111;

    color:
        #ffffff;

    box-shadow:
        0
        15px
        35px
        rgba(
            0,
            0,
            0,
            .14
        );

}

/* =========================================================
   SECONDARY
========================================================= */

.ns-hero-action-secondary {

    border:
        1px solid
        rgba(
            17,
            17,
            17,
            .14
        );

    background:
        #ffffff;

    color:
        #111111;

}

.ns-hero-final-link-icon svg {

    width:
        18px;

    height:
        18px;

    display:
        block;

    stroke-width:
        1.8;

}

/* =========================================================
   HOVER
========================================================= */

@media (
    hover: hover
) {

    .ns-hero-action:hover {

        transform:
            translateY(-3px);

    }

    .ns-hero-action-primary:hover {

        background:
            #292929;

    }

    .ns-hero-action-secondary:hover {

        border-color:
            rgba(
                17,
                17,
                17,
                .32
            );

    }

}

/* =========================================================
   SCROLL
========================================================= */

.ns-hero-scroll {

    position:
        absolute;

    z-index:
        4;

    left:
        50%;

    bottom:
        18px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    gap:
        9px;

    transform:
        translateX(-50%);

    will-change:
        transform,
        opacity;

}

/* =========================================================
   SCROLL TEXT
========================================================= */

.ns-hero-scroll > span {

    font-size:
        9px;

    font-weight:
        700;

    letter-spacing:
        .16em;

    text-transform:
        uppercase;

    color:
        rgba(
            17,
            17,
            17,
            .68
        );

}

/* =========================================================
   SCROLL LINE
========================================================= */

.ns-hero-scroll-line {

    position:
        relative;

    width:
        1px;

    height:
        42px;

    overflow:
        hidden;

    background:
        rgba(
            17,
            17,
            17,
            .14
        );

}

.ns-hero-scroll-line > div {

    position:
        absolute;

    top:
        -100%;

    left:
        0;

    width:
        100%;

    height:
        100%;

    background:
        #111111;

    animation:
        nsHeroScroll
        1.6s
        ease-in-out
        infinite;

}

/* =========================================================
   SCROLL KEYFRAMES
========================================================= */

@keyframes nsHeroScroll {

    from {

        transform:
            translateY(0);

    }

    to {

        transform:
            translateY(200%);

    }

}

/* =========================================================
   FINAL MESSAGE
========================================================= */

.ns-hero-final {

    position:
        absolute;

    z-index:
        4;

    left:
        clamp(
            28px,
            6vw,
            100px
        );

    bottom:
        clamp(
            45px,
            8vh,
            95px
        );

    width:
        min(
            700px,
            80vw
        );

    color:
        #ffffff;

    opacity:
        0;

    transform:
        translateY(45px);

    will-change:
        transform,
        opacity;

}

/* =========================================================
   FINAL LABEL
========================================================= */

.ns-hero-final-label {

    display:
        block;

    margin-bottom:
        21px;

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

    font-size:
        10px;

    font-weight:
        600;

    letter-spacing:
        .22em;

}

/* =========================================================
   FINAL TITLE
========================================================= */

.ns-hero-final h2 {

    margin:
        0;

    font-family:
        var(--serif);

    font-size:
        clamp(
            58px,
            6.4vw,
            112px
        );

    font-weight:
        500;

    line-height:
        .88;

    letter-spacing:
        -.055em;

    color:
        #ffffff;

}

.ns-hero-final h2 em {

    display:
        block;

    color:
        #d4b174;

    font-weight:
        500;

    font-style:
        italic;

}

/* =========================================================
   FINAL LINK
========================================================= */

.ns-hero-final-link {

    width:
        fit-content;

    margin-top:
        32px;

    padding:
        6px
        7px
        6px
        23px;

    display:
        flex;

    align-items:
        center;

    gap:
        20px;

    border-radius:
        999px;

    background:
        #ffffff;

    color:
        #111111;

    font-size:
        13px;

    font-weight:
        600;

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

    transition:
        transform .3s ease;

}

.ns-hero-final-link:hover {

    transform:
        translateY(-3px);

}

/* =========================================================
   FINAL LINK ICON
========================================================= */

.ns-hero-final-link-icon {

    width:
        44px;

    height:
        44px;

    display:
        grid;

    place-items:
        center;

    flex-shrink:
        0;

    border-radius:
        50%;

    background:
        #111111;

    color:
        #ffffff;

    font-size:
        17px;

}

/* =========================================================
   TABLET
========================================================= */

@media (
    max-width: 1000px
) {

    .ns-hero {

        height:
            215vh;

    }

    .ns-hero-brand-line {

        font-size:
            clamp(
                90px,
                18vw,
                205px
            );

    }

    .ns-hero-meta {

        left:
            4vw;

        right:
            4vw;

    }

}

/* =========================================================
   MOBILE
========================================================= */

@media (
    max-width: 650px
) {

    .ns-hero {

        height:
            195lvh;

    }

    .ns-hero-sticky {

        height:
            100lvh;

        min-height:
            100lvh;

    }

    .ns-hero-intro,
    .ns-hero-image-layer {

        position:
            absolute;

        inset:
            -8px 0;

        width:
            100%;

        height:
            auto;

    }

    /* =====================================================
       BRAND
    ===================================================== */

    .ns-hero-brand {

        top:
            45%;

    }

    .ns-hero-brand-line {

        padding:
            .05em
            0
            .09em;

        font-size:
            clamp(
                61px,
                22vw,
                110px
            );

        line-height:
            .82;

    }

    .ns-hero-brand-top {

        letter-spacing:
            -.04em;

    }

    .ns-hero-brand-bottom {

        letter-spacing:
            -.016em;

    }

    /* =====================================================
    META — DEBAJO DE NICOLAU STUDIO
    ===================================================== */

    .ns-hero-meta {

        /*
            El título está centrado aproximadamente al 45%.
            Movemos EST. / 2024 debajo de STUDIO.
        */

        top:
            calc(
                45% +
                clamp(
                    105px,
                    29vw,
                    132px
                )
            );

        left:
            20px;

        right:
            20px;

        font-size:
            8px;

        letter-spacing:
            .14em;

        transform:
            none;

    }

    /* =====================================================
    BOTONES — DEBAJO DE EST. / 2024
    ===================================================== */

    .ns-hero-actions {

        width:
            calc(
                100% - 36px
            );

        left:
            50%;

        top:
            calc(
                45% +
                clamp(
                    145px,
                    39vw,
                    178px
                )
            );

        bottom:
            auto;

        gap:
            9px;

        transform:
            translateX(-50%);

    }

    .ns-hero-action {

        flex:
            1;

        min-width:
            0;

        height:
            50px;

        padding:
            0 14px;

        font-size:
            12px;

    }

    /* =====================================================
    DESLIZÁ — MÁS ABAJO
    ===================================================== */

    .ns-hero-scroll-line {

        height:
            38px;

    }

    .ns-hero-scroll {

        top:
            calc(
                45% +
                clamp(
                    260px,
                    68vw,
                    305px
                )
            );

        bottom:
            auto;

    }

    /* =====================================================
       FINAL MESSAGE
    ===================================================== */

    .ns-hero-final {

        left:
            22px;

        bottom:
            7svh;

        width:
            calc(
                100% - 44px
            );

    }

    .ns-hero-final-label {

        margin-bottom:
            15px;

        font-size:
            8px;

    }

    .ns-hero-final h2 {

        font-size:
            clamp(
                50px,
                14vw,
                76px
            );

        line-height:
            .91;

    }

    .ns-hero-final-link {

        margin-top:
            25px;

    }

}

/* =========================================================
   SMALL MOBILE
========================================================= */

@media (
    max-width: 400px
) {

    .ns-hero-brand-line {

        font-size:
            clamp(
                53px,
                21.5vw,
                86px
            );

    }

    .ns-hero-final h2 {

        font-size:
            clamp(
                46px,
                13.5vw,
                65px
            );

    }

}

/* =========================================================
   MARQUEE
========================================================= */

.marquee {

    position:
        relative;

    width:
        100%;

    overflow:
        hidden;

    padding:
        24px 0;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fbfaf8 50%,
            #ffffff 100%
        );

}

/* =========================================================
   PREMIUM TOP / BOTTOM LINES
========================================================= */

.marquee::before,
.marquee::after {

    content:
        "";

    position:
        absolute;

    z-index:
        3;

    left:
        4vw;

    right:
        4vw;

    height:
        1px;

    pointer-events:
        none;

    background:
        linear-gradient(
            90deg,

            transparent 0%,

            rgba(
                17,
                17,
                17,
                .07
            ) 12%,

            rgba(
                17,
                17,
                17,
                .14
            ) 50%,

            rgba(
                17,
                17,
                17,
                .07
            ) 88%,

            transparent 100%
        );

}

.marquee::before {

    top:
        0;

}

.marquee::after {

    bottom:
        0;

}

/* =========================================================
   INNER
========================================================= */

.marquee-inner {

    position:
        relative;

    width:
        100%;

    overflow:
        hidden;

    /*
        Fade premium en ambos laterales.
    */

    -webkit-mask-image:
        linear-gradient(
            90deg,

            transparent 0%,

            #000000 5%,

            #000000 95%,

            transparent 100%
        );

    mask-image:
        linear-gradient(
            90deg,

            transparent 0%,

            #000000 5%,

            #000000 95%,

            transparent 100%
        );

}

/* =========================================================
   TRACK

   NO tiene animation CSS.

   JavaScript / GSAP controla el desplazamiento.
========================================================= */

.marquee-track {

    display:
        flex;

    align-items:
        center;

    width:
        max-content;

    transform:
        translate3d(
            0,
            0,
            0
        );

    will-change:
        transform;

}

/* =========================================================
   GROUP

   Cada grupo es exactamente una repetición completa.
========================================================= */

.marquee-group {

    flex:
        0 0 auto;

    display:
        flex;

    align-items:
        center;

    gap:
        clamp(
            22px,
            2vw,
            38px
        );

    /*
        Este padding forma parte del ancho del grupo
        y mantiene la separación entre el final de una
        copia y el principio de la siguiente.
    */

    padding-right:
        clamp(
            22px,
            2vw,
            38px
        );

}

/* =========================================================
   NORMAL ITEM
========================================================= */

.marquee-item {

    flex:
        0 0 auto;

    color:
        #242424;

    font-family:
        var(--sans);

    font-size:
        11px;

    font-weight:
        600;

    line-height:
        1;

    letter-spacing:
        .22em;

    text-transform:
        uppercase;

    white-space:
        nowrap;

}

/* =========================================================
   SYMBOL
========================================================= */

.marquee-symbol {

    flex:
        0 0 auto;

    color:
        var(--gold);

    font-size:
        9px;

    line-height:
        1;

    opacity:
        .9;

}

/* =========================================================
   NICOLAU STUDIO
========================================================= */

.marquee-brand {

    position:
        relative;

    flex:
        0 0 auto;

    padding:
        9px
        16px;

    border:
        1px solid
        rgba(
            181,
            138,
            69,
            .24
        );

    border-radius:
        100px;

    background:
        linear-gradient(
            135deg,

            rgba(
                181,
                138,
                69,
                .07
            ),

            rgba(
                181,
                138,
                69,
                .015
            )
        );

    color:
        #161616;

    font-family:
        var(--serif);

    font-size:
        12px;

    font-weight:
        500;

    line-height:
        1;

    letter-spacing:
        .12em;

    white-space:
        nowrap;

}

/* =========================================================
   NICOLAU DETAIL
========================================================= */

.marquee-brand::before {

    content:
        "";

    position:
        absolute;

    top:
        50%;

    left:
        8px;

    width:
        3px;

    height:
        3px;

    transform:
        translateY(-50%);

    border-radius:
        50%;

    background:
        var(--gold);

    opacity:
        .8;

}

/* =========================================================
   DESKTOP HOVER
========================================================= */

@media (
    hover: hover
) {

    .marquee-item {

        transition:
            color .25s ease;

    }

    .marquee-item:hover {

        color:
            var(--gold);

    }

}

/* =========================================================
   TABLET
========================================================= */

@media (
    max-width: 900px
) {

    .marquee {

        padding:
            21px 0;

    }

    .marquee-inner {

        -webkit-mask-image:
            linear-gradient(
                90deg,
                transparent 0%,
                #000000 3%,
                #000000 97%,
                transparent 100%
            );

        mask-image:
            linear-gradient(
                90deg,
                transparent 0%,
                #000000 3%,
                #000000 97%,
                transparent 100%
            );

    }

    .marquee-item {

        font-size:
            10px;

    }

}

/* =========================================================
   MOBILE
========================================================= */

@media (
    max-width: 650px
) {

    .marquee {

        padding:
            18px 0;

    }

    .marquee-group {

        gap:
            20px;

        padding-right:
            20px;

    }

    .marquee-item {

        font-size:
            9px;

        letter-spacing:
            .18em;

    }

    .marquee-symbol {

        font-size:
            7px;

    }

    .marquee-brand {

        padding:
            8px
            14px;

        font-size:
            10px;

        letter-spacing:
            .1em;

    }

    .marquee::before,
    .marquee::after {

        left:
            2vw;

        right:
            2vw;

    }

}

/* =========================================================
   SERVICES
========================================================= */

.services {

    position:
        relative;

    isolation:
        isolate;

    overflow:
        clip;

    padding:
        clamp(
            110px,
            10vw,
            165px
        )
        0;

    background:
        #ffffff;

}

/* =========================================================
   MAIN LAYOUT
========================================================= */

.services-layout {

    display:
        grid;

    grid-template-columns:
        minmax(
            330px,
            .78fr
        )
        minmax(
            0,
            1.22fr
        );

    gap:
        clamp(
            55px,
            7vw,
            115px
        );

    align-items:
        start;

}

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

.services-intro {

    position:
        sticky;

    top:
        115px;

}

/* =========================================================
   TITLE
========================================================= */

.services-intro h2 {

    margin-top:
        18px;

    font-family:
        var(--serif);

    font-size:
        clamp(
            64px,
            6.6vw,
            108px
        );

    font-weight:
        500;

    line-height:
        .88;

    letter-spacing:
        -.055em;

}

/* =========================================================
   TITLE ACCENT
========================================================= */

.services-intro h2 em {

    display:
        block;

    margin-top:
        7px;

    color:
        var(--gold);

    font-weight:
        500;

}

/* =========================================================
   DESCRIPTION
========================================================= */

.services-description {

    max-width:
        450px;

    margin-top:
        32px;

    color:
        #64615d;

    font-size:
        17px;

    line-height:
        1.7;

}

/* =========================================================
   SIGNATURE
========================================================= */

.services-signature {

    max-width:
        440px;

    margin-top:
        60px;

    padding-top:
        22px;

}

/* =========================================================
   SIGNATURE TOP
========================================================= */

.services-signature-top {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        30px;

    color:
        #272727;

    font-size:
        12px;

    font-weight:
        600;

    letter-spacing:
        .13em;

}

/* =========================================================
   SIGNATURE LINE
========================================================= */

.services-signature-line {

    width:
        100%;

    height:
        1px;

    margin:
        15px 0;

    background:
        linear-gradient(
            90deg,
            var(--gold),
            rgba(
                181,
                138,
                69,
                .2
            ) 45%,
            transparent
        );

}

/* =========================================================
   SIGNATURE TEXT
========================================================= */

.services-signature p {

    max-width:
        380px;

    color:
        #77736d;

    font-size:
        14px;

    line-height:
        1.6;

}

/* =========================================================
   SERVICES PANEL
========================================================= */

.services-panel {

    display:
        flex;

    flex-direction:
        column;

    gap:
        14px;

}

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

.service-card {

    position:
        relative;

    min-height:
        160px;

    display:
        grid;

    grid-template-columns:
        62px
        minmax(
            0,
            1fr
        )
        165px
        58px;

    align-items:
        center;

    gap:
        22px;

    padding:
        26px
        28px;

    overflow:
        hidden;

    border:
        1px solid
        rgba(
            17,
            17,
            17,
            .065
        );

    border-radius:
        28px;

    background:
        rgba(
            255,
            255,
            255,
            .86
        );

    box-shadow:
        0 12px 36px
        rgba(
            32,
            27,
            20,
            .045
        ),
        inset
        0
        1px
        0
        rgba(
            255,
            255,
            255,
            .9
        );

    transition:
        transform .55s
        cubic-bezier(
            .16,
            1,
            .3,
            1
        ),
        border-color .4s ease,
        box-shadow .4s ease;

}

/* =========================================================
   DARK HOVER BACKGROUND
========================================================= */

.service-card-bg {

    position:
        absolute;

    z-index:
        0;

    inset:
        0;

    background:
        linear-gradient(
            120deg,
            #161616 0%,
            #0f0f0f 65%,
            #1c1812 100%
        );

    transform:
        scaleX(0);

    transform-origin:
        right center;

    transition:
        transform .65s
        cubic-bezier(
            .16,
            1,
            .3,
            1
        );

}

/* =========================================================
   HOVER
========================================================= */

@media (
    hover: hover
) {

    .service-card:hover {

        transform:
            translateX(8px);

        border-color:
            rgba(
                17,
                17,
                17,
                .12
            );

        box-shadow:
            0 22px 60px
            rgba(
                27,
                22,
                17,
                .12
            );

    }

    .service-card:hover
    .service-card-bg {

        transform:
            scaleX(1);

        transform-origin:
            left center;

    }

}

/* =========================================================
   EVERYTHING ABOVE BACKGROUND
========================================================= */

.service-number,
.service-content,
.service-price,
.service-icon {

    position:
        relative;

    z-index:
        2;

}

/* =========================================================
   NUMBER
========================================================= */

.service-number {

    align-self:
        start;

    padding-top:
        8px;

    color:
        var(--gold);

    font-family:
        var(--serif);

    font-size:
        18px;

    font-weight:
        500;

}

/* =========================================================
   CATEGORY
========================================================= */

.service-category {

    display:
        block;

    margin-bottom:
        8px;

    color:
        #9a958e;

    font-size:
        12px;

    font-weight:
        600;

    letter-spacing:
        .13em;

    transition:
        color .4s ease;

}

/* =========================================================
   SERVICE NAME
========================================================= */

.service-content h3 {

    color:
        #111111;

    font-family:
        var(--serif);

    font-size:
        clamp(
            31px,
            2.4vw,
            39px
        );

    font-weight:
        500;

    line-height:
        1;

    letter-spacing:
        -.025em;

    transition:
        color .4s ease;

}

/* =========================================================
   SERVICE DESCRIPTION
========================================================= */

.service-content p {

    max-width:
        480px;

    margin-top:
        10px;

    color:
        #77736e;

    font-size:
        15px;

    line-height:
        1.55;

    transition:
        color .4s ease;

}

/* =========================================================
   PRICE
========================================================= */

.service-price {

    min-width:
        0;

    padding:
        13px
        16px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-start;

    gap:
        3px;

    border:
        1px solid
        #ece7dd;

    border-radius:
        16px;

    background:
        #f8f5ef;

    transition:
        background-color .4s ease,
        border-color .4s ease,
        color .4s ease;

}

/* =========================================================
   PRICE LABEL
========================================================= */

.service-price span {

    color:
        #8e8880;

    font-size:
        12px;

    font-weight:
        500;

}

/* =========================================================
   PRICE VALUE
========================================================= */

.service-price strong {

    color:
        #181818;

    font-size:
        16px;

    font-weight:
        600;

    white-space:
        nowrap;

}

/* =========================================================
   CONSULT
========================================================= */

.service-price-consult strong {

    color:
        var(--gold-dark);

}

/* =========================================================
   ICON
========================================================= */

.service-icon {

    width:
        56px;

    height:
        56px;

    display:
        grid;

    place-items:
        center;

    border:
        1px solid
        rgba(
            17,
            17,
            17,
            .09
        );

    border-radius:
        18px;

    background:
        #ffffff;

    color:
        #171717;

    box-shadow:
        0 7px 20px
        rgba(
            0,
            0,
            0,
            .045
        );

    transition:
        transform .45s
        cubic-bezier(
            .16,
            1,
            .3,
            1
        ),
        background-color .4s ease,
        border-color .4s ease,
        color .4s ease;

}

/* =========================================================
   ICON SVG
========================================================= */

.service-icon svg {

    width:
        20px;

    height:
        20px;

    stroke-width:
        1.5;

}

/* =========================================================
   CARD HOVER CONTENT
========================================================= */

@media (
    hover: hover
) {

    .service-card:hover
    .service-content h3 {

        color:
            #ffffff;

    }

    .service-card:hover
    .service-content p {

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

    }

    .service-card:hover
    .service-category {

        color:
            rgba(
                212,
                177,
                116,
                .9
            );

    }

    .service-card:hover
    .service-price {

        border-color:
            rgba(
                255,
                255,
                255,
                .13
            );

        background:
            rgba(
                255,
                255,
                255,
                .075
            );

    }

    .service-card:hover
    .service-price span {

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

    }

    .service-card:hover
    .service-price strong {

        color:
            #ffffff;

    }

    .service-card:hover
    .service-icon {

        transform:
            rotate(
                6deg
            )
            scale(
                1.04
            );

        border-color:
            var(--gold);

        background:
            var(--gold);

        color:
            #ffffff;

    }

}

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

.services-help {

    margin-top:
        8px;

    padding:
        24px
        26px;

    display:
        grid;

    grid-template-columns:
        50px
        minmax(
            0,
            1fr
        )
        auto;

    align-items:
        center;

    gap:
        18px;

    border:
        1px solid
        rgba(
            181,
            138,
            69,
            .20
        );

    border-radius:
        24px;

    background:
        linear-gradient(
            135deg,
            rgba(
                181,
                138,
                69,
                .09
            ),
            rgba(
                255,
                255,
                255,
                .72
            )
        );

}

/* =========================================================
   HELP ICON
========================================================= */

.services-help-icon {

    width:
        48px;

    height:
        48px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        15px;

    background:
        #ffffff;

    color:
        var(--gold-dark);

    box-shadow:
        0 8px 24px
        rgba(
            40,
            32,
            20,
            .06
        );

}

.services-help-icon svg {

    width:
        19px;

    height:
        19px;

}

/* =========================================================
   HELP LABEL
========================================================= */

.services-help
> div:nth-child(2)
> span {

    color:
        var(--gold-dark);

    font-size:
        12px;

    font-weight:
        600;

    letter-spacing:
        .12em;

}

/* =========================================================
   HELP TEXT
========================================================= */

.services-help p {

    margin-top:
        5px;

    color:
        #65615b;

    font-size:
        15px;

    line-height:
        1.5;

}

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

.services-help > a {

    display:
        flex;

    align-items:
        center;

    gap:
        14px;

    color:
        #171717;

    font-size:
        14px;

    font-weight:
        600;

}

/* =========================================================
   HELP CTA ICON
========================================================= */

.services-help-arrow {

    width:
        42px;

    height:
        42px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        50%;

    background:
        #111111;

    color:
        #ffffff;

    transition:
        transform .3s ease,
        background-color .3s ease;

}

.services-help-arrow svg {

    width:
        16px;

    height:
        16px;

}

/* =========================================================
   HELP HOVER
========================================================= */

.services-help > a:hover
.services-help-arrow {

    transform:
        translate(
            2px,
            -2px
        );

    background:
        var(--gold-dark);

}

/* =========================================================
   SMALL DESKTOP
========================================================= */

@media (
    max-width: 1200px
) {

    .services-layout {

        grid-template-columns:
            minmax(
                290px,
                .7fr
            )
            minmax(
                0,
                1.3fr
            );

        gap:
            50px;

    }

    .service-card {

        grid-template-columns:
            50px
            minmax(
                0,
                1fr
            )
            145px
            52px;

        gap:
            16px;

        padding:
            24px;

    }

    .service-icon {

        width:
            50px;

        height:
            50px;

    }

}

/* =========================================================
   TABLET
========================================================= */

@media (
    max-width: 950px
) {

    .services {

        padding:
            105px 0;

    }

    .services-layout {

        grid-template-columns:
            1fr;

        gap:
            60px;

    }

    .services-intro {

        position:
            relative;

        top:
            auto;

    }

    .services-intro h2 {

        max-width:
            760px;

        font-size:
            clamp(
                62px,
                10vw,
                92px
            );

    }

    .services-description {

        max-width:
            560px;

    }

    .services-signature {

        max-width:
            560px;

        margin-top:
            40px;

    }

}

/* =========================================================
   MOBILE
========================================================= */

@media (
    max-width: 700px
) {

    .services {

        padding:
            85px 0;

    }

    .services::after {

        font-size:
            78vw;

        bottom:
            -4vw;

    }

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

    .services-intro h2 {

        margin-top:
            14px;

        font-size:
            clamp(
                51px,
                15vw,
                70px
            );

        line-height:
            .91;

    }

    .services-description {

        margin-top:
            23px;

        font-size:
            15px;

        line-height:
            1.65;

    }

    .services-signature {

        margin-top:
            34px;

    }

    .services-signature-top {

        font-size:
            11px;

    }

    .services-signature p {

        font-size:
            14px;

    }

    /* =====================================================
       PANEL
    ===================================================== */

    .services-panel {

        gap:
            11px;

    }

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

    .service-card {

        min-height:
            0;

        grid-template-columns:
            38px
            minmax(
                0,
                1fr
            )
            48px;

        grid-template-rows:
            auto
            auto;

        gap:
            10px
            13px;

        padding:
            21px
            18px;

        border-radius:
            22px;

    }

    .service-number {

        grid-column:
            1;

        grid-row:
            1;

        padding-top:
            3px;

        font-size:
            16px;

    }

    .service-content {

        grid-column:
            2;

        grid-row:
            1;

    }

    .service-icon {

        grid-column:
            3;

        grid-row:
            1 / span 2;

        align-self:
            center;

        width:
            46px;

        height:
            46px;

        border-radius:
            15px;

    }

    .service-category {

        margin-bottom:
            6px;

        font-size:
            11px;

    }

    .service-content h3 {

        font-size:
            28px;

    }

    .service-content p {

        margin-top:
            8px;

        font-size:
            14px;

        line-height:
            1.5;

    }

    .service-price {

        grid-column:
            2;

        grid-row:
            2;

        width:
            fit-content;

        margin-top:
            3px;

        padding:
            8px
            12px;

        flex-direction:
            row;

        align-items:
            baseline;

        gap:
            7px;

        border-radius:
            12px;

    }

    .service-price span {

        font-size:
            11px;

    }

    .service-price strong {

        font-size:
            14px;

    }

    /* =====================================================
       HELP
    ===================================================== */

    .services-help {

        margin-top:
            5px;

        grid-template-columns:
            44px
            1fr;

        gap:
            14px;

        padding:
            19px;

        border-radius:
            21px;

    }

    .services-help-icon {

        width:
            43px;

        height:
            43px;

        border-radius:
            14px;

    }

    .services-help
    > div:nth-child(2)
    > span {

        font-size:
            11px;

    }

    .services-help p {

        font-size:
            14px;

    }

    .services-help > a {

        grid-column:
            1 / -1;

        margin-top:
            6px;

        padding-top:
            15px;

        justify-content:
            space-between;

        border-top:
            1px solid
            rgba(
                181,
                138,
                69,
                .17
            );

        font-size:
            14px;

    }

}

/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (
    max-width: 390px
) {

    .service-card {

        grid-template-columns:
            32px
            minmax(
                0,
                1fr
            )
            43px;

        padding:
            18px
            15px;

    }

    .service-icon {

        width:
            42px;

        height:
            42px;

    }

    .service-content h3 {

        font-size:
            26px;

    }

    .service-content p {

        font-size:
            13.5px;

    }

}





/* =========================================================
   ABOUT
========================================================= */

.about {

    position:
        relative;

    isolation:
        isolate;

    overflow:
        hidden;

    padding:
        clamp(
            110px,
            10vw,
            165px
        )
        0;

    background:
        #ffffff;

}

/* =========================================================
   SUBTLE BACKGROUND DETAIL
========================================================= */

.about::before {

    content:
        "";

    position:
        absolute;

    z-index:
        -1;

    right:
        -280px;

    top:
        15%;

    width:
        680px;

    height:
        680px;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(
                181,
                138,
                69,
                .07
            ) 0%,
            rgba(
                181,
                138,
                69,
                .02
            ) 35%,
            transparent 70%
        );

    pointer-events:
        none;

}

/* =========================================================
   MAIN LAYOUT
========================================================= */

.about-layout {

    display:
        grid;

    grid-template-columns:
        minmax(
            0,
            1.05fr
        )
        minmax(
            420px,
            .95fr
        );

    gap:
        clamp(
            65px,
            8vw,
            125px
        );

    align-items:
        center;

}

/* =========================================================
   VISUAL
========================================================= */

.about-visual {

    position:
        relative;

    min-height:
        790px;

}

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

.about-image-main {

    position:
        absolute;

    top:
        0;

    left:
        0;

    width:
        82%;

    height:
        88%;

    overflow:
        hidden;

    border-radius:
        34px;

    background:
        #dddddd;

    box-shadow:
        0 32px 90px
        rgba(
            32,
            26,
            20,
            .13
        );

}

/* =========================================================
   MAIN IMAGE CONTENT
========================================================= */

.about-image-main img {

    width:
        100%;

    height:
        100%;

    display:
        block;

    object-fit:
        cover;

    object-position:
        center;

    transform:
        scale(1.02);

    transition:
        transform 1.1s
        cubic-bezier(
            .16,
            1,
            .3,
            1
        );

}

/* =========================================================
   ABOUT — SALON GALLERY
========================================================= */

.about-gallery-track {

    position:
        absolute;

    inset:
        0;

    width:
        100%;

    height:
        100%;

    display:
        flex;

    transform:
        translate3d(
            0,
            0,
            0
        );

    transition:
        transform
        .85s
        cubic-bezier(
            .22,
            .61,
            .36,
            1
        );

    will-change:
        transform;

}


/* =========================================================
   SLIDES
========================================================= */

.about-image-main
.about-gallery-slide {

    width:
        100%;

    height:
        100%;

    flex:
        0 0
        100%;

    display:
        block;

    object-fit:
        cover;

    object-position:
        center;

    transform:
        scale(1.02);

    transition:
        transform
        1.1s
        cubic-bezier(
            .16,
            1,
            .3,
            1
        );

    user-select:
        none;

    -webkit-user-drag:
        none;

}


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

.about-gallery-next {

    position:
        absolute;

    z-index:
        8;

    top:
        50%;

    right:
        20px;

    width:
        54px;

    height:
        54px;

    padding:
        0;

    display:
        grid;

    place-items:
        center;

    transform:
        translateY(-50%);

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .28
        );

    border-radius:
        50%;

    background:
        rgba(
            8,
            8,
            8,
            .42
        );

    -webkit-backdrop-filter:
        blur(15px)
        saturate(135%);

    backdrop-filter:
        blur(15px)
        saturate(135%);

    color:
        #ffffff;

    cursor:
        pointer;

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

    transition:
        transform .3s ease,
        background-color .3s ease,
        border-color .3s ease;

}


/* =========================================================
   ARROW
========================================================= */

.about-gallery-next svg {

    width:
        20px;

    height:
        20px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.7;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;

}


/* =========================================================
   HOVER
========================================================= */

@media (
    hover: hover
) {

    .about-gallery-next:hover {

        transform:
            translateY(-50%)
            scale(1.08);

        background:
            rgba(
                181,
                138,
                69,
                .90
            );

        border-color:
            var(--gold);

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (
    max-width: 650px
) {

    .about-gallery-next {

        right:
            13px;

        width:
            46px;

        height:
            46px;

    }


    .about-gallery-next svg {

        width:
            17px;

        height:
            17px;

    }

}

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

@media (
    hover: hover
) {

    .about-visual:hover
    .about-gallery-slide {

        transform:
            scale(1.055);

    }

}

/* =========================================================
   MAIN IMAGE OVERLAY
========================================================= */

.about-image-overlay {

    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            180deg,
            transparent 50%,
            rgba(
                0,
                0,
                0,
                .4
            ) 100%
        );

    pointer-events:
        none;

}

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

.about-image-badge {

    position:
        absolute;

    left:
        24px;

    bottom:
        24px;

    display:
        flex;

    align-items:
        center;

    gap:
        14px;

    padding:
        11px
        16px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .25
        );

    border-radius:
        100px;

    background:
        rgba(
            255,
            255,
            255,
            .13
        );

    backdrop-filter:
        blur(16px)
        saturate(120%);

    -webkit-backdrop-filter:
        blur(16px)
        saturate(120%);

    color:
        #ffffff;

}

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

.about-image-badge span {

    font-size:
        12px;

    font-weight:
        600;

    letter-spacing:
        .11em;

}

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

.about-image-badge strong {

    padding-left:
        14px;

    border-left:
        1px solid
        rgba(
            255,
            255,
            255,
            .25
        );

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

    font-size:
        12px;

    font-weight:
        500;

}

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

.about-image-secondary {

    position:
        absolute;

    z-index:
        3;

    right:
        0;

    bottom:
        0;

    width:
        42%;

    height:
        42%;

    padding:
        9px;

    overflow:
        hidden;

    border-radius:
        26px;

    background:
        rgba(
            255,
            255,
            255,
            .93
        );

    box-shadow:
        0 28px 70px
        rgba(
            27,
            22,
            17,
            .18
        );

}

/* =========================================================
   SECONDARY IMAGE CONTENT
========================================================= */

.about-image-secondary img {

    width:
        100%;

    height:
        100%;

    display:
        block;

    object-fit:
        cover;

    border-radius:
        19px;

}

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

.about-content {

    position:
        relative;

    z-index:
        3;

}

/* =========================================================
   TITLE
========================================================= */

.about-content h2 {

    max-width:
        720px;

    margin-top:
        18px;

    font-family:
        var(--serif);

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

    line-height:
        .9;

    letter-spacing:
        -.052em;

    font-weight:
        500;

}

/* =========================================================
   TITLE ACCENT
========================================================= */

.about-content h2 em {

    display:
        block;

    margin-top:
        4px;

    color:
        var(--gold);

    font-weight:
        500;

}

/* =========================================================
   MANIFESTO
========================================================= */

.about-manifesto {

    position:
        relative;

    max-width:
        590px;

    margin-top:
        52px;

    padding-left:
        25px;

}

/* =========================================================
   MANIFESTO LINE
========================================================= */

.about-manifesto-line {

    position:
        absolute;

    top:
        3px;

    bottom:
        2px;

    left:
        0;

    width:
        2px;

    border-radius:
        100px;

    background:
        linear-gradient(
            180deg,
            var(--gold),
            rgba(
                181,
                138,
                69,
                .18
            )
        );

}

/* =========================================================
   MANIFESTO FIRST TEXT
========================================================= */

.about-manifesto p {

    color:
        #5f5b56;

    font-size:
        17px;

    line-height:
        1.55;

}

/* =========================================================
   MANIFESTO STRONG TEXT
========================================================= */

.about-manifesto strong {

    display:
        block;

    margin-top:
        7px;

    color:
        #171717;

    font-family:
        var(--serif);

    font-size:
        clamp(
            23px,
            2vw,
            31px
        );

    font-weight:
        500;

    line-height:
        1.25;

}

/* =========================================================
   DESCRIPTION
========================================================= */

.about-description {

    max-width:
        590px;

    margin-top:
        32px;

    color:
        #77736e;

    font-size:
        16px;

    line-height:
        1.7;

}

/* =========================================================
   VALUES
========================================================= */

.about-values {

    margin-top:
        48px;

    display:
        grid;

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

    gap:
        12px;

}

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

.about-value {

    position:
        relative;

    min-height:
        190px;

    padding:
        18px;

    overflow:
        hidden;

    border:
        1px solid
        rgba(
            17,
            17,
            17,
            .07
        );

    border-radius:
        22px;

    background:
        linear-gradient(
            145deg,
            #ffffff 0%,
            #f7f4ef 100%
        );

    box-shadow:
        0 12px 35px
        rgba(
            34,
            28,
            21,
            .055
        ),
        inset
        0
        1px
        0
        rgba(
            255,
            255,
            255,
            1
        );

    transition:
        transform .45s
        cubic-bezier(
            .16,
            1,
            .3,
            1
        ),
        box-shadow .4s ease,
        border-color .4s ease;

}

/* =========================================================
   VALUE LIGHT
========================================================= */

.about-value::before {

    content:
        "";

    position:
        absolute;

    top:
        -80px;

    right:
        -70px;

    width:
        150px;

    height:
        150px;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(
                181,
                138,
                69,
                .11
            ),
            transparent 68%
        );

    pointer-events:
        none;

}

/* =========================================================
   VALUE HOVER
========================================================= */

@media (
    hover: hover
) {

    .about-value:hover {

        transform:
            translateY(-6px);

        border-color:
            rgba(
                181,
                138,
                69,
                .22
            );

        box-shadow:
            0 20px 45px
            rgba(
                34,
                28,
                21,
                .09
            );

    }

}

/* =========================================================
   VALUE TOP
========================================================= */

.about-value-top {

    position:
        relative;

    z-index:
        2;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

}

/* =========================================================
   VALUE NUMBER
========================================================= */

.about-value-top > span {

    color:
        var(--gold);

    font-family:
        var(--serif);

    font-size:
        18px;

}

/* =========================================================
   VALUE ICON
========================================================= */

.about-value-icon {

    width:
        40px;

    height:
        40px;

    display:
        grid;

    place-items:
        center;

    border:
        1px solid
        rgba(
            17,
            17,
            17,
            .07
        );

    border-radius:
        13px;

    background:
        #ffffff;

    color:
        #171717;

    transition:
        background-color .3s ease,
        color .3s ease,
        transform .3s ease;

}

.about-value-icon svg {

    width:
        17px;

    height:
        17px;

    stroke-width:
        1.5;

}

/* =========================================================
   VALUE ICON HOVER
========================================================= */

@media (
    hover: hover
) {

    .about-value:hover
    .about-value-icon {

        transform:
            rotate(5deg);

        background:
            #111111;

        color:
            #ffffff;

    }

}

/* =========================================================
   VALUE TITLE
========================================================= */

.about-value h3 {

    position:
        relative;

    z-index:
        2;

    margin-top:
        30px;

    font-family:
        var(--serif);

    font-size:
        24px;

    font-weight:
        500;

}

/* =========================================================
   VALUE TEXT
========================================================= */

.about-value p {

    position:
        relative;

    z-index:
        2;

    margin-top:
        8px;

    color:
        #77736e;

    font-size:
        14px;

    line-height:
        1.5;

}

/* =========================================================
   SIGNATURE
========================================================= */

.about-signature {

    margin-top:
        44px;

    padding-top:
        21px;

    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        30px;

    border-top:
        1px solid
        rgba(
            17,
            17,
            17,
            .10
        );

}

/* =========================================================
   SIGNATURE BRAND
========================================================= */

.about-signature > div {

    display:
        flex;

    flex-direction:
        column;

}

.about-signature > div > span {

    font-family:
        var(--serif);

    font-size:
        23px;

    line-height:
        1;

}

.about-signature small {

    margin-top:
        5px;

    color:
        var(--gold);

    font-size:
        9px;

    font-weight:
        600;

    letter-spacing:
        .42em;

}

/* =========================================================
   SIGNATURE TEXT
========================================================= */

.about-signature > p {

    max-width:
        310px;

    color:
        #77736e;

    font-size:
        14px;

    line-height:
        1.55;

}

/* =========================================================
   SMALL DESKTOP
========================================================= */

@media (
    max-width: 1150px
) {

    .about-layout {

        grid-template-columns:
            minmax(
                0,
                1fr
            )
            minmax(
                380px,
                .9fr
            );

        gap:
            60px;

    }

    .about-visual {

        min-height:
            690px;

    }

    .about-value {

        padding:
            15px;

    }

    .about-value h3 {

        font-size:
            22px;

    }

}

/* =========================================================
   TABLET
========================================================= */

@media (
    max-width: 900px
) {

    .about {

        padding:
            105px 0;

    }

    .about-layout {

        grid-template-columns:
            1fr;

        gap:
            75px;

    }

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

    .about-visual {

        min-height:
            690px;

        max-width:
            680px;

    }

    .about-image-main {

        width:
            82%;

        height:
            88%;

    }

    .about-image-secondary {

        width:
            39%;

        height:
            39%;

    }

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

    .about-content {

        max-width:
            760px;

    }

    .about-content h2 {

        font-size:
            clamp(
                60px,
                10vw,
                88px
            );

    }

    .about-description,
    .about-manifesto {

        max-width:
            620px;

    }

}

/* =========================================================
   MOBILE
========================================================= */

@media (
    max-width: 650px
) {

    .about {

        padding:
            85px 0;

    }

    /* =====================================================
       LAYOUT
    ===================================================== */

    .about-layout {

        gap:
            55px;

    }

    /* =====================================================
       VISUAL
    ===================================================== */

    .about-visual {

        min-height:
            520px;

    }

    .about-image-main {

        width:
            88%;

        height:
            88%;

        border-radius:
            25px;

    }

    .about-image-secondary {

        width:
            42%;

        height:
            37%;

        padding:
            6px;

        border-radius:
            20px;

    }

    .about-image-secondary img {

        border-radius:
            15px;

    }

    .about-image-badge {

        left:
            15px;

        bottom:
            15px;

        gap:
            9px;

        padding:
            9px
            11px;

    }

    .about-image-badge span,
    .about-image-badge strong {

        font-size:
            10px;

    }

    .about-image-badge strong {

        padding-left:
            9px;

    }

    .about-visual-number {

        top:
            22px;

        font-size:
            24vw;

    }

    /* =====================================================
       TITLE
    ===================================================== */

    .about-content h2 {

        margin-top:
            14px;

        font-size:
            clamp(
                51px,
                15vw,
                70px
            );

        line-height:
            .91;

    }

    /* =====================================================
       MANIFESTO
    ===================================================== */

    .about-manifesto {

        margin-top:
            35px;

        padding-left:
            18px;

    }

    .about-manifesto p {

        font-size:
            15px;

    }

    .about-manifesto strong {

        font-size:
            24px;

    }

    .about-description {

        margin-top:
            25px;

        font-size:
            15px;

        line-height:
            1.65;

    }

    /* =====================================================
       VALUES
    ===================================================== */

    .about-values {

        margin-top:
            35px;

        grid-template-columns:
            1fr;

        gap:
            10px;

    }

    /*
        En móvil las cards quedan horizontales
        para ocupar bastante menos espacio.
    */

    .about-value {

        min-height:
            0;

        padding:
            17px;

        display:
            grid;

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

        column-gap:
            16px;

        align-items:
            center;

        border-radius:
            19px;

    }

    .about-value-top {

        grid-row:
            1 / span 2;

        grid-column:
            1;

        flex-direction:
            column;

        gap:
            9px;

    }

    .about-value-top > span {

        font-size:
            15px;

    }

    .about-value-icon {

        width:
            39px;

        height:
            39px;

    }

    .about-value h3 {

        grid-column:
            2;

        margin-top:
            0;

        font-size:
            23px;

    }

    .about-value p {

        grid-column:
            2;

        margin-top:
            4px;

        font-size:
            13px;

    }

    /* =====================================================
       SIGNATURE
    ===================================================== */

    .about-signature {

        margin-top:
            35px;

        flex-direction:
            column;

        gap:
            16px;

    }

    .about-signature > p {

        max-width:
            100%;

        font-size:
            13px;

    }

}

/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (
    max-width: 390px
) {

    .about-visual {

        min-height:
            455px;

    }

    .about-image-secondary {

        width:
            44%;

    }

    .about-manifesto strong {

        font-size:
            22px;

    }

    .about-value {

        padding:
            15px;

    }

}


/* =========================================================
   CREDENTIALS / DIPLOMAS
========================================================= */

.credentials {

    position:
        relative;

    isolation:
        isolate;

    padding:
        clamp(
            100px,
            10vw,
            160px
        )
        0;

    overflow:
        hidden;

    background:
        #f6f4f0;

    color:
        #171717;

}


/* =========================================================
   BACKGROUND DETAIL
========================================================= */

.credentials::before {

    content:
        "";

    position:
        absolute;

    z-index:
        -1;

    top:
        -300px;

    right:
        -250px;

    width:
        700px;

    height:
        700px;

    border-radius:
        50%;

    pointer-events:
        none;

    background:
        radial-gradient(
            circle,

            rgba(
                181,
                138,
                69,
                .11
            ),

            transparent
            68%
        );

}


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

.credentials-header {

    margin-bottom:
        clamp(
            50px,
            7vw,
            90px
        );

    text-align:
        center;

}


.credentials-header .eyebrow {

    color:
        var(--gold);

}


.credentials-heading {

    

    grid-template-columns:
        minmax(0, 1fr)
        minmax(270px, 390px);

    

    gap:
        clamp(
            45px,
            8vw,
            120px
        );

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    width:
        100%;

}


.credentials-heading h2 {

    

    

    font-family:
        var(--serif);

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

    font-weight:
        500;

    line-height:
        .90;

    letter-spacing:
        -.052em;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    

    width:
        100%;

    max-width:
        100%;

    margin:
        0 auto;

    text-align:
        center;

}


.credentials-heading h2 em {

    display:
        block;

    margin-top:
        4px;

    color:
        var(--gold);

    font-weight:
        500;

    font-style:
        italic;

}


.credentials-heading p {

    margin:
        0 0 8px;

    color:
        #77736e;

    font-size:
        15px;

    line-height:
        1.7;

}


/* =========================================================
   CAROUSEL
========================================================= */

.credentials-carousel {

    position:
        relative;

    width:
        100%;

}


/* =========================================================
   STAGE
========================================================= */

.credentials-stage {

    position:
        relative;

    width:
        min(
            100%,
            1050px
        );

    height:
        clamp(
            440px,
            52vw,
            690px
        );

    margin:
        0 auto;

    cursor:
        grab;

    touch-action:
        pan-y;

    user-select:
        none;

    -webkit-user-select:
        none;

    -webkit-tap-highlight-color:
        transparent;

}


.credentials-stage.is-dragging {

    cursor:
        grabbing;

}


/* =========================================================
   SLIDE
========================================================= */

.credential-slide {

    position:
        absolute;

    top:
        50%;

    left:
        50%;

    width:
        min(
            88%,
            880px
        );

    opacity:
        0;

    pointer-events:
        none;

    transform:
        translate(
            -50%,
            -50%
        )
        scale(.82);

    transform-origin:
        center;

    transition:
        transform .72s
        cubic-bezier(
            .16,
            1,
            .3,
            1
        ),
        opacity .45s ease,
        filter .55s ease;

    will-change:
        transform,
        opacity;

}


/* =========================================================
   ACTIVE
========================================================= */

.credential-slide.is-active {

    z-index:
        10;

    opacity:
        1;

    pointer-events:
        auto;

    transform:
        translate(
            -50%,
            -50%
        )
        translateX(0)
        scale(1);

    filter:
        none;

}


/* =========================================================
   PREVIOUS
========================================================= */

.credential-slide.is-prev {

    z-index:
        7;

    opacity:
        .24;

    transform:
        translate(
            -53%,
            -50%
        )
        translateX(-8%)
        scale(.88)
        rotate(-1.5deg);

    filter:
        saturate(.75)
        brightness(.92);

}


/* =========================================================
   NEXT
========================================================= */

.credential-slide.is-next {

    z-index:
        8;

    opacity:
        .62;

    transform:
        translate(
            -43%,
            -50%
        )
        translateX(12%)
        scale(.92)
        rotate(1.25deg);

    filter:
        saturate(.82)
        brightness(.96);

}


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

.credential-card {

    position:
        relative;

    overflow:
        hidden;

    padding:
        12px;

    border:
        1px solid
        rgba(
            17,
            17,
            17,
            .10
        );

    border-radius:
        30px;

    background:
        #ffffff;

    box-shadow:

        0
        35px
        100px
        rgba(
            43,
            35,
            26,
            .16
        ),

        inset
        0
        1px
        0
        rgba(
            255,
            255,
            255,
            .90
        );

}


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

.credential-image {

    position:
        relative;

    aspect-ratio:
        1.414 / 1;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    overflow:
        hidden;

    border-radius:
        21px;

    background:
        #ece9e3;

}


.credential-image img {

    width:
        100%;

    height:
        100%;

    display:
        block;

    object-fit:
        contain;

    object-position:
        center;

    pointer-events:
        none;

    user-select:
        none;

    -webkit-user-drag:
        none;

}


/* =========================================================
   SUBTLE GLASS REFLECTION
========================================================= */

.credential-image::after {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    pointer-events:
        none;

    background:
        linear-gradient(
            135deg,

            rgba(
                255,
                255,
                255,
                .10
            ),

            transparent
            35%
        );

}


/* =========================================================
   INFO
========================================================= */

.credential-info {

    min-height:
        74px;

    padding:
        16px
        10px
        6px;

    display:
        flex;

    align-items:
        center;

    gap:
        18px;

}


.credential-info > span {

    color:
        var(--gold);

    font-family:
        var(--serif);

    font-size:
        25px;

    line-height:
        1;

}


.credential-info > div {

    display:
        flex;

    flex-direction:
        column;

    gap:
        4px;

}


.credential-info strong {

    color:
        #171717;

    font-family:
        var(--serif);

    font-size:
        20px;

    font-weight:
        500;

}


.credential-info small {

    color:
        #88827a;

    font-size:
        10px;

    font-weight:
        600;

    letter-spacing:
        .10em;

    text-transform:
        uppercase;

}


/* =========================================================
   CONTROLS
========================================================= */

.credentials-controls {

    width:
        min(
            88%,
            880px
        );

    margin:
        24px auto 0;

    display:
        grid;

    grid-template-columns:
        48px
        1fr
        48px;

    align-items:
        center;

    gap:
        22px;

}


/* =========================================================
   ARROWS
========================================================= */

.credentials-arrow {

    width:
        48px;

    height:
        48px;

    padding:
        0;

    display:
        grid;

    place-items:
        center;

    border:
        1px solid
        rgba(
            17,
            17,
            17,
            .13
        );

    border-radius:
        50%;

    background:
        rgba(
            255,
            255,
            255,
            .55
        );

    color:
        #171717;

    cursor:
        pointer;

    transition:
        background-color .3s ease,
        color .3s ease,
        transform .3s
        cubic-bezier(
            .2,
            .7,
            .2,
            1
        );

}


.credentials-arrow svg {

    width:
        18px;

    height:
        18px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.6;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;

}


@media (
    hover: hover
) {

    .credentials-arrow:hover {

        background:
            #171717;

        color:
            #ffffff;

        transform:
            scale(1.06);

    }

}


/* =========================================================
   PAGINATION
========================================================= */

.credentials-pagination {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        7px;

}


.credentials-dot {

    width:
        6px;

    height:
        6px;

    padding:
        0;

    border:
        0;

    border-radius:
        999px;

    background:
        rgba(
            17,
            17,
            17,
            .22
        );

    cursor:
        pointer;

    transition:
        width .35s
        cubic-bezier(
            .2,
            .7,
            .2,
            1
        ),
        background-color .3s ease;

}


.credentials-dot.is-active {

    width:
        30px;

    background:
        var(--gold);

}


/* =========================================================
   TABLET
========================================================= */

@media (
    max-width: 900px
) {

    .credentials-heading {

        grid-template-columns:
            1fr;

        gap:
            22px;

    }


    .credentials-heading p {

        max-width:
            560px;

    }


    .credentials-stage {

        height:
            580px;

    }


    .credential-slide {

        width:
            92%;

    }


    .credentials-controls {

        width:
            92%;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (
    max-width: 650px
) {

    .credentials {

        padding:
            85px
            0
            95px;

    }


    .credentials-header {

        margin-bottom:
            42px;

    }


    .credentials-heading h2 {

        font-size:
            clamp(
                49px,
                14.2vw,
                68px
            );

        line-height:
            .91;

    }


    .credentials-heading p {

        font-size:
            14px;

        line-height:
            1.6;

    }


    .credentials-stage {

        width:
            calc(
                100% + 12px
            );

        height:
            420px;

        margin-left:
            -6px;

    }


    .credential-slide {

        width:
            92%;

    }


    .credential-card {

        padding:
            7px;

        border-radius:
            23px;

    }


    .credential-image {

        border-radius:
            17px;

    }


    .credential-info {

        min-height:
            64px;

        padding:
            13px
            8px
            5px;

        gap:
            13px;

    }


    .credential-info > span {

        font-size:
            21px;

    }


    .credential-info strong {

        font-size:
            17px;

    }


    .credential-info small {

        font-size:
            8px;

    }


    .credential-slide.is-prev {

        transform:
            translate(
                -54%,
                -50%
            )
            translateX(-6%)
            scale(.90)
            rotate(-1deg);

    }


    .credential-slide.is-next {

        transform:
            translate(
                -44%,
                -50%
            )
            translateX(8%)
            scale(.93)
            rotate(1deg);

    }


    .credentials-controls {

        width:
            92%;

        margin-top:
            15px;

        grid-template-columns:
            42px
            1fr
            42px;

        gap:
            12px;

    }


    .credentials-arrow {

        width:
            42px;

        height:
            42px;

    }

}


/* =========================================================
   BEFORE / AFTER — SECTION
========================================================= */

.compare-section {

    position:
        relative;

    isolation:
        isolate;

    padding:
        clamp(
            95px,
            9vw,
            145px
        )
        0
        clamp(
            115px,
            11vw,
            175px
        );

    overflow:
        hidden;

    background:
        var(--bg);

    color:
        var(--text);

}


/* =========================================================
   SUBTLE TOP LINE
========================================================= */

.compare-section::before {

    content:
        "";

    position:
        absolute;

    top:
        0;

    left:
        8%;

    right:
        8%;

    height:
        1px;

    pointer-events:
        none;

    background:
        linear-gradient(
            90deg,

            transparent,

            rgba(
                255,
                255,
                255,
                .10
            ),

            transparent
        );

}



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

.compare-header {

    width:
        100%;

    margin-bottom:
        clamp(
            42px,
            5vw,
            72px
        );

}


.compare-header .eyebrow {

    color:
        var(--gold-soft);

}


.compare-heading {

    display:
        grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(260px, 390px);

    align-items:
        flex-end;

    gap:
        clamp(
            40px,
            7vw,
            105px
        );

}


.compare-heading h2 {

    max-width:
        720px;

    margin:
        0;

    font-family:
        var(--serif);

    font-size:
        clamp(
            58px,
            6.7vw,
            105px
        );

    font-weight:
        500;

    line-height:
        .88;

    letter-spacing:
        -.055em;

}


.compare-heading h2 em {

    display:
        block;

    margin-top:
        5px;

    color:
        var(--gold);

    font-weight:
        500;

    font-style:
        italic;

}


.compare-heading p {

    margin:
        0 0 7px;

    color:
        var(--text-soft);

    font-size:
        15px;

    line-height:
        1.65;

}


/* =========================================================
   SLIDER
========================================================= */

.compare-slider {

    --compare-position:
        50%;

    position:
        relative;

    width:
        100%;

    aspect-ratio:
        16 / 9;

    overflow:
        hidden;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .11
        );

    border-radius:
        34px;

    background:
        #111111;

    box-shadow:

        0
        35px
        95px
        rgba(
            0,
            0,
            0,
            .32
        ),

        inset
        0
        1px
        0
        rgba(
            255,
            255,
            255,
            .06
        );

    cursor:
        col-resize;

    touch-action:
        pan-y;

    user-select:
        none;

    -webkit-user-select:
        none;

    -webkit-tap-highlight-color:
        transparent;

}


/* =========================================================
   INNER VIGNETTE
========================================================= */

.compare-slider::after {

    content:
        "";

    position:
        absolute;

    z-index:
        8;

    inset:
        0;

    pointer-events:
        none;

    box-shadow:

        inset
        0
        0
        90px
        rgba(
            0,
            0,
            0,
            .14
        );

}


/* =========================================================
   LAYERS
========================================================= */

.compare-layer {

    position:
        absolute;

    inset:
        0;

    overflow:
        hidden;

}


.compare-layer img {

    position:
        absolute;

    inset:
        0;

    width:
        100%;

    height:
        100%;

    display:
        block;

    object-fit:
        cover;

    object-position:
        center;

    pointer-events:
        none;

    user-select:
        none;

    -webkit-user-drag:
        none;

}


/* =========================================================
   AFTER
========================================================= */

.compare-after {

    z-index:
        1;

}


/* =========================================================
   BEFORE CLIP
========================================================= */

.compare-before {

    z-index:
        2;

    clip-path:
        inset(
            0
            calc(
                100% -
                var(--compare-position)
            )
            0
            0
        );

    will-change:
        clip-path;

}


/* =========================================================
   SUBTLE IMAGE OVERLAY
========================================================= */

.compare-layer::after {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    pointer-events:
        none;

    background:
        linear-gradient(
            to bottom,

            rgba(
                0,
                0,
                0,
                .04
            ),

            transparent
            42%,

            rgba(
                0,
                0,
                0,
                .35
            )
        );

}


/* =========================================================
   LABELS
========================================================= */

.compare-label {

    position:
        absolute;

    z-index:
        4;

    top:
        22px;

    padding:
        9px
        13px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .13
        );

    border-radius:
        999px;

    background:
        rgba(
            8,
            8,
            8,
            .45
        );

    -webkit-backdrop-filter:
        blur(15px)
        saturate(135%);

    backdrop-filter:
        blur(15px)
        saturate(135%);

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

    font-size:
        9px;

    font-weight:
        600;

    letter-spacing:
        .16em;

}


.compare-label-before {

    left:
        22px;

}


.compare-label-after {

    right:
        22px;

}


/* =========================================================
   DIVIDER
========================================================= */

.compare-divider {

    position:
        absolute;

    z-index:
        6;

    top:
        0;

    bottom:
        0;

    left:
        var(--compare-position);

    width:
        1px;

    transform:
        translateX(-50%);

    pointer-events:
        none;

    background:
        rgba(
            255,
            255,
            255,
            .90
        );

    box-shadow:
        0
        0
        14px
        rgba(
            0,
            0,
            0,
            .35
        );

    will-change:
        left;

}


/* =========================================================
   HANDLE
========================================================= */

.compare-handle {

    position:
        absolute;

    top:
        50%;

    left:
        50%;

    width:
        54px;

    height:
        54px;

    transform:
        translate(
            -50%,
            -50%
        );

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        1px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .90
        );

    border-radius:
        50%;

    background:
        rgba(
            255,
            255,
            255,
            .94
        );

    color:
        #111111;

    box-shadow:

        0
        10px
        30px
        rgba(
            0,
            0,
            0,
            .30
        ),

        0
        0
        0
        5px
        rgba(
            255,
            255,
            255,
            .07
        );

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

}


.compare-handle svg {

    width:
        17px;

    height:
        17px;

    display:
        block;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.6;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;

}


/* =========================================================
   ACTIVE
========================================================= */

.compare-slider.is-active
.compare-handle {

    transform:
        translate(
            -50%,
            -50%
        )
        scale(.92);

}


/* =========================================================
   HOVER
========================================================= */

@media (
    hover: hover
) {

    .compare-slider:hover
    .compare-handle {

        transform:
            translate(
                -50%,
                -50%
            )
            scale(1.08);

    }


    .compare-slider.is-active:hover
    .compare-handle {

        transform:
            translate(
                -50%,
                -50%
            )
            scale(.94);

    }

}


/* =========================================================
   BOTTOM DETAIL
========================================================= */

.compare-bottom {

    position:
        absolute;

    z-index:
        7;

    left:
        22px;

    right:
        22px;

    bottom:
        19px;

    display:
        flex;

    align-items:
        center;

    gap:
        13px;

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

    font-size:
        8px;

    font-weight:
        600;

    letter-spacing:
        .15em;

    pointer-events:
        none;

}


.compare-bottom-line {

    flex:
        1;

    height:
        1px;

    background:
        rgba(
            255,
            255,
            255,
            .18
        );

}


/* =========================================================
   FOCUS
========================================================= */

.compare-slider:focus-visible {

    outline:
        2px solid
        var(--gold);

    outline-offset:
        5px;

}


/* =========================================================
   TABLET
========================================================= */

@media (
    max-width: 900px
) {

    .compare-heading {

        grid-template-columns:
            1fr;

        gap:
            22px;

    }


    .compare-heading p {

        max-width:
            540px;

    }


    .compare-slider {

        aspect-ratio:
            4 / 3;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (
    max-width: 650px
) {

    .compare-section {

        padding:
            82px
            0
            100px;

    }


    .compare-header {

        margin-bottom:
            40px;

    }


    .compare-heading h2 {

        font-size:
            clamp(
                49px,
                14.5vw,
                69px
            );

        line-height:
            .90;

    }


    .compare-heading p {

        font-size:
            14px;

    }


    .compare-slider {

        aspect-ratio:
            4 / 5;

        border-radius:
            25px;

        touch-action:
            pan-y;

    }


    .compare-label {

        top:
            15px;

        padding:
            7px
            10px;

        font-size:
            7px;

    }


    .compare-label-before {

        left:
            15px;

    }


    .compare-label-after {

        right:
            15px;

    }


    .compare-handle {

        width:
            48px;

        height:
            48px;

    }


    .compare-handle svg {

        width:
            15px;

        height:
            15px;

    }


    .compare-bottom {

        left:
            15px;

        right:
            15px;

        bottom:
            14px;

        font-size:
            7px;

    }

}






/* =========================================================
   EXPERIENCE
========================================================= */

.experience {

    position:
        relative;

    isolation:
        isolate;

    padding:
        clamp(
            110px,
            10vw,
            165px
        )
        0;

    overflow:
        hidden;

    background:
        linear-gradient(
            145deg,
            #0b0b0b 0%,
            #111111 48%,
            #0a0908 100%
        );

    color:
        #ffffff;

}

/* =========================================================
   BACKGROUND
========================================================= */

.experience-background {

    position:
        absolute;

    z-index:
        -1;

    inset:
        0;

    overflow:
        hidden;

    pointer-events:
        none;

}

/* =========================================================
   LARGE BACKGROUND WORD
========================================================= */

.experience-background-word {

    position:
        absolute;

    left:
        50%;

    bottom:
        -7vw;

    transform:
        translateX(-50%);

    font-family:
        var(--serif);

    font-size:
        clamp(
            180px,
            24vw,
            410px
        );

    font-weight:
        500;

    line-height:
        .75;

    letter-spacing:
        -.07em;

    white-space:
        nowrap;

    color:
        transparent;

    -webkit-text-fill-color:
        transparent;

    -webkit-text-stroke:
        1px
        rgba(
            255,
            255,
            255,
            .035
        );

}

/* =========================================================
   GLOWS
========================================================= */

.experience-glow {

    position:
        absolute;

    border-radius:
        50%;

    pointer-events:
        none;

}



/* =========================================================
   EYEBROW
========================================================= */

.experience .eyebrow {

    color:
        #c7a870;

    font-size:
        12px;

    font-weight:
        600;

    letter-spacing:
        .15em;

}

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

.experience-header {

    position:
        relative;

    z-index:
        3;

    display:
        grid;

    grid-template-columns:
        minmax(
            0,
            1.45fr
        )
        minmax(
            260px,
            .55fr
        );

    gap:
        clamp(
            40px,
            7vw,
            100px
        );

    align-items:
        end;

    margin-bottom:
        clamp(
            70px,
            8vw,
            115px
        );

}

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

.experience-header h2 {

    max-width:
        950px;

    margin-top:
        18px;

    font-family:
        var(--serif);

    font-size:
        clamp(
            60px,
            6.6vw,
            108px
        );

    font-weight:
        500;

    line-height:
        .88;

    letter-spacing:
        -.055em;

}

/* =========================================================
   TITLE ACCENT
========================================================= */

.experience-header h2 em {

    display:
        block;

    color:
        #c7a870;

    font-weight:
        500;

}

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

.experience-header-note {

    max-width:
        330px;

    padding:
        22px
        0
        4px;

    border-top:
        1px solid
        rgba(
            255,
            255,
            255,
            .16
        );

}

/* =========================================================
   NOTE LABEL
========================================================= */

.experience-header-note > span {

    color:
        #c7a870;

    font-size:
        13px;

    font-weight:
        600;

    letter-spacing:
        .15em;

}

/* =========================================================
   NOTE TEXT
========================================================= */

.experience-header-note p {

    margin-top:
        13px;

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

    font-size:
        16px;

    line-height:
        1.65;

}

/* =========================================================
   JOURNEY
========================================================= */

.experience-journey {

    position:
        relative;

    display:
        grid;

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

    gap:
        clamp(
            18px,
            2.5vw,
            34px
        );

    align-items:
        start;

}

/* =========================================================
   CONNECTING LINE
========================================================= */

.experience-line {

    position:
        absolute;

    z-index:
        0;

    top:
        64px;

    left:
        8%;

    right:
        8%;

    height:
        1px;

    background:
        rgba(
            255,
            255,
            255,
            .08
        );

    overflow:
        hidden;

}

/* =========================================================
   GOLD LINE
========================================================= */

.experience-line span {

    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(
                199,
                168,
                112,
                .45
            ) 20%,
            rgba(
                199,
                168,
                112,
                .9
            ) 50%,
            rgba(
                199,
                168,
                112,
                .45
            ) 80%,
            transparent 100%
        );

}

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

.experience-card {

    position:
        relative;

    z-index:
        2;

    min-height:
        455px;

    padding:
        28px;

    display:
        flex;

    flex-direction:
        column;

    overflow:
        hidden;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .13
        );

    border-radius:
        28px;

    background:
        linear-gradient(
            145deg,
            rgba(
                255,
                255,
                255,
                .105
            ) 0%,
            rgba(
                255,
                255,
                255,
                .055
            ) 55%,
            rgba(
                255,
                255,
                255,
                .075
            ) 100%
        );

    backdrop-filter:
        blur(24px)
        saturate(125%);

    -webkit-backdrop-filter:
        blur(24px)
        saturate(125%);

    box-shadow:
        0 28px 70px
        rgba(
            0,
            0,
            0,
            .20
        ),
        inset
        0
        1px
        0
        rgba(
            255,
            255,
            255,
            .15
        );

    transition:
        transform .55s
        cubic-bezier(
            .16,
            1,
            .3,
            1
        ),
        border-color .4s ease,
        background .4s ease,
        box-shadow .4s ease;

}

/* =========================================================
   LIQUID LIGHT
========================================================= */

.experience-card::before {

    content:
        "";

    position:
        absolute;

    top:
        -120px;

    right:
        -120px;

    width:
        260px;

    height:
        260px;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(
                255,
                255,
                255,
                .14
            ) 0%,
            rgba(
                255,
                255,
                255,
                .045
            ) 36%,
            transparent 70%
        );

    pointer-events:
        none;

}

/* =========================================================
   GOLD BOTTOM REFLECTION
========================================================= */

.experience-card::after {

    content:
        "";

    position:
        absolute;

    left:
        12%;

    right:
        12%;

    bottom:
        0;

    height:
        1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(
                199,
                168,
                112,
                .55
            ),
            transparent
        );

}

/* =========================================================
   STAGGERED POSITIONING
========================================================= */

.experience-card-two {

    margin-top:
        42px;

}

.experience-card-three {

    margin-top:
        84px;

}

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

@media (
    hover: hover
) {

    .experience-card:hover {

        transform:
            translateY(-8px);

        border-color:
            rgba(
                199,
                168,
                112,
                .45
            );

        background:
            linear-gradient(
                145deg,
                rgba(
                    255,
                    255,
                    255,
                    .15
                ),
                rgba(
                    255,
                    255,
                    255,
                    .065
                )
            );

        box-shadow:
            0 34px 90px
            rgba(
                0,
                0,
                0,
                .30
            ),
            inset
            0
            1px
            0
            rgba(
                255,
                255,
                255,
                .2
            );

    }

}

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

.experience-card-top {

    position:
        relative;

    z-index:
        2;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

}

/* =========================================================
   STEP
========================================================= */

.experience-step {

    font-family:
        var(--serif);

    font-size:
        46px;

    font-weight:
        500;

    line-height:
        1;

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

}

/* =========================================================
   ICON
========================================================= */

.experience-icon {

    width:
        56px;

    height:
        56px;

    display:
        grid;

    place-items:
        center;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .14
        );

    border-radius:
        18px;

    background:
        rgba(
            255,
            255,
            255,
            .08
        );

    color:
        #c7a870;

    box-shadow:
        inset
        0
        1px
        0
        rgba(
            255,
            255,
            255,
            .12
        );

    transition:
        transform .4s ease,
        background-color .4s ease,
        color .4s ease;

}

/* =========================================================
   ICON SVG
========================================================= */

.experience-icon svg {

    width:
        21px;

    height:
        21px;

    stroke-width:
        1.45;

}

/* =========================================================
   ICON HOVER
========================================================= */

@media (
    hover: hover
) {

    .experience-card:hover
    .experience-icon {

        transform:
            rotate(
                6deg
            )
            scale(
                1.04
            );

        background:
            #c7a870;

        color:
            #111111;

    }

}

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

.experience-card-content {

    position:
        relative;

    z-index:
        2;

    margin-top:
        auto;

    padding-top:
        95px;

}

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

.experience-card-label {

    display:
        block;

    margin-bottom:
        12px;

    color:
        #c7a870;

    font-size:
        12px;

    font-weight:
        600;

    letter-spacing:
        .15em;

}

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

.experience-card h3 {

    max-width:
        360px;

    font-family:
        var(--serif);

    font-size:
        clamp(
            31px,
            2.8vw,
            42px
        );

    font-weight:
        500;

    line-height:
        .98;

    letter-spacing:
        -.03em;

}

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

.experience-card p {

    max-width:
        360px;

    margin-top:
        16px;

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

    font-size:
        16px;

    line-height:
        1.65;

}

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

.experience-card-bottom {

    position:
        relative;

    z-index:
        2;

    margin-top:
        28px;

    padding-top:
        18px;

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        8px;

    border-top:
        1px solid
        rgba(
            255,
            255,
            255,
            .09
        );

}

/* =========================================================
   TAGS
========================================================= */

.experience-card-bottom span {

    padding:
        7px
        10px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .10
        );

    border-radius:
        100px;

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

    font-size:
        11px;

    font-weight:
        600;

    letter-spacing:
        .09em;

}

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

.experience-footer {

    margin-top:
        clamp(
            80px,
            9vw,
            130px
        );

}

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

.experience-footer-line {

    height:
        1px;

    background:
        linear-gradient(
            90deg,
            rgba(
                199,
                168,
                112,
                .75
            ),
            rgba(
                255,
                255,
                255,
                .1
            ) 45%,
            transparent 100%
        );

}

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

.experience-footer-content {

    margin-top:
        22px;

    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        40px;

}

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

.experience-footer-content > span {

    color:
        #c7a870;

    font-size:
        12px;

    font-weight:
        600;

    letter-spacing:
        .14em;

}

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

.experience-footer-content p {

    max-width:
        450px;

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

    font-size:
        15px;

    line-height:
        1.65;

}

/* =========================================================
   SMALL DESKTOP
========================================================= */

@media (
    max-width: 1150px
) {

    .experience-card {

        min-height:
            430px;

        padding:
            24px;

    }

    .experience-card-two {

        margin-top:
            32px;

    }

    .experience-card-three {

        margin-top:
            64px;

    }

    .experience-card-content {

        padding-top:
            75px;

    }

}

/* =========================================================
   TABLET
========================================================= */

@media (
    max-width: 900px
) {

    .experience {

        padding:
            105px 0;

    }

    .experience-header {

        grid-template-columns:
            1fr;

        gap:
            34px;

    }

    .experience-header h2 {

        font-size:
            clamp(
                58px,
                10vw,
                86px
            );

    }

    .experience-header-note {

        max-width:
            460px;

    }

    .experience-journey {

        grid-template-columns:
            1fr;

        gap:
            18px;

    }

    .experience-line {

        display:
            none;

    }

    .experience-card,
    .experience-card-two,
    .experience-card-three {

        min-height:
            0;

        margin-top:
            0;

    }

    .experience-card-content {

        padding-top:
            75px;

    }

    .experience-footer-content {

        flex-direction:
            column;

        gap:
            15px;

    }

}

/* =========================================================
   MOBILE
========================================================= */

@media (
    max-width: 650px
) {

    .experience {

        padding:
            85px 0;

    }

    .experience-background-word {

        font-size:
            50vw;

        bottom:
            0;

    }

    .experience-header {

        margin-bottom:
            52px;

    }

    .experience .eyebrow {

        font-size:
            11px;

    }

    .experience-header h2 {

        margin-top:
            14px;

        font-size:
            clamp(
                49px,
                14vw,
                68px
            );

        line-height:
            .91;

    }

    .experience-header-note {

        padding-top:
            17px;

    }

    .experience-header-note p {

        font-size:
            14px;

    }

    /* =====================================================
    EXPERIENCE — COMPACT MOBILE
    ===================================================== */

    .experience-journey {

        gap:
            12px;

    }

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

    .experience-card,
    .experience-card-two,
    .experience-card-three {

        min-height:
            0;

        height:
            auto;

        margin-top:
            0;

        padding:
            16px;

        border-radius:
            20px;

    }

    /* =====================================================
    TOP
    ===================================================== */

    .experience-card-top {

        min-height:
            44px;

    }

    .experience-step {

        font-size:
            32px;

    }

    .experience-icon {

        width:
            44px;

        height:
            44px;

        border-radius:
            14px;

    }

    .experience-icon svg {

        width:
            17px;

        height:
            17px;

    }

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

    ESTE ES EL CAMBIO MÁS IMPORTANTE.
    ===================================================== */

    .experience-card-content {

        margin-top:
            0;

        padding-top:
            24px;

    }

    /* =====================================================
    LABEL
    ===================================================== */

    .experience-card-label {

        margin-bottom:
            7px;

        font-size:
            10px;

    }

    /* =====================================================
    TITLE
    ===================================================== */

    .experience-card h3 {

        max-width:
            100%;

        font-size:
            clamp(
                28px,
                8.4vw,
                34px
            );

        line-height:
            1;

    }

    /* =====================================================
    TEXT
    ===================================================== */

    .experience-card p {

        max-width:
            100%;

        margin-top:
            9px;

        font-size:
            13px;

        line-height:
            1.48;

    }

    /* =====================================================
    BOTTOM
    ===================================================== */

    .experience-card-bottom {

        margin-top:
            15px;

        padding-top:
            11px;

        gap:
            6px;

    }

    .experience-card-bottom span {

        padding:
            5px 8px;

        font-size:
            9px;

    }

    .experience-footer {

        margin-top:
            60px;

    }

    .experience-footer-content p {

        font-size:
            14px;

    }

}

/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (
    max-width: 390px
) {

    .experience-card {

        padding:
            15px;

    }

    .experience-card-content {

        margin-top:
            0;

        padding-top:
            20px;

    }

    .experience-card h3 {

        font-size:
            28px;

    }

}

/* =========================================================
   CUTS SHOWCASE
========================================================= */

.cuts-showcase {

    position:
        relative;

    padding:
        140px 0 105px;

    /*
        Cortamos únicamente lo que sale horizontalmente.
        Así la sombra puede expandirse verticalmente.
    */

    overflow-x:
        clip;

    overflow-y:
        visible;

    background:
        #f5f4f2;

}

/* =========================================================
   BACKGROUND DETAIL
========================================================= */

.cuts-showcase::before {

    content:
        "";

    position:
        absolute;

    top:
        -260px;

    left:
        50%;

    width:
        900px;

    height:
        500px;

    transform:
        translateX(-50%);

    border-radius:
        50%;

    background:
        none;

    pointer-events:
        none;

}

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

.cuts-showcase-header {

    position:
        relative;

    z-index:
        4;

    margin-bottom:
        55px;

}

/* =========================================================
   HEADING
========================================================= */

.cuts-showcase-heading {

    margin-top:
        14px;

    display:
        grid;

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

    align-items:
        flex-end;

    gap:
        40px;

}

/* =========================================================
   TITLE
========================================================= */

.cuts-showcase-heading h2 {

    grid-column:
        2;

    max-width:
        850px;

    margin:
        0 auto;

    font-family:
        var(--serif);

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

    font-weight:
        500;

    line-height:
        .92;

    letter-spacing:
        -.052em;

    text-align:
        center;

}

.cuts-showcase-heading h2 em {

    color:
        var(--gold);

    font-weight:
        500;

}

/* =========================================================
   DESCRIPTION
========================================================= */

.cuts-showcase-heading p {

    grid-column:
        3;

    justify-self:
        end;

    margin-bottom:
        9px;

    color:
        #77736d;

    font-size:
        14px;

    white-space:
        nowrap;

}
/* =========================================================
   CAROUSEL
========================================================= */

.cuts-carousel-wrapper {

    position:
        relative;

    width:
        100%;

}

/* =========================================================
   VIEWPORT

   Solamente corta el exceso horizontal.

   touch-action: pan-y permite seguir haciendo scroll
   vertical normalmente desde celular.
========================================================= */

/* =========================================================
   CAROUSEL VIEWPORT
========================================================= */

.cuts-carousel-viewport {

    position:
        relative;

    width:
        100%;

    padding:
        28px
        0
        65px;

    /*
        IMPORTANTE:

        Antes:
        overflow: hidden;

        Eso cortaba la sombra de las imágenes y generaba
        la línea horizontal que se ve en tu captura.
    */

    overflow:
        visible;

    cursor:
        grab;

    user-select:
        none;

    -webkit-user-select:
        none;

    touch-action:
        pan-y;

}

.cuts-carousel-viewport.is-dragging {

    cursor:
        grabbing;

}

/* =========================================================
   TRACK

   JS genera cinco copias de la secuencia.

   Esto elimina completamente los bordes reales del
   carrusel mientras el usuario lo está viendo.
========================================================= */

.cuts-track {

    --cuts-gap:
        28px;

    display:
        flex;

    align-items:
        center;

    gap:
        var(--cuts-gap);

    width:
        max-content;

    will-change:
        transform;

}

/* =========================================================
   SLIDE
========================================================= */

.cuts-slide {

    width:
        min(
            31vw,
            455px
        );

    height:
        570px;

    flex:
        0 0
        min(
            31vw,
            455px
        );

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    opacity:
        .5;

    filter:
        saturate(.72)
        brightness(.94);

    will-change:
        opacity,
        filter;

}

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

   EL SCALE SE HACE ACÁ.

   El track solamente se ocupa del desplazamiento.
========================================================= */

.cuts-slide-image {

    position:
        relative;

    width:
        100%;

    height:
        100%;

    overflow:
        hidden;

    border-radius:
        28px;

    background:
        #e9e6e0;

    transform:
        scale(.86);

    transform-origin:
        center;

    box-shadow:
        0 18px 45px
        rgba(
            26,
            22,
            17,
            .07
        );

    will-change:
        transform,
        box-shadow;

}

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

.cuts-slide-image img {

    width:
        100%;

    height:
        100%;

    display:
        block;

    object-fit:
        cover;

    object-position:
        center;

    pointer-events:
        none;

    user-select:
        none;

    -webkit-user-select:
        none;

    -webkit-user-drag:
        none;

}

/* =========================================================
   PREMIUM BORDER
========================================================= */

.cuts-slide-image::after {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    border:
        1px solid
        rgba(
            17,
            17,
            17,
            .065
        );

    border-radius:
        inherit;

    pointer-events:
        none;

}

/* =========================================================
   PAGINATION
========================================================= */

/* =========================================================
   PAGINATION
========================================================= */

.cuts-pagination {

    position:
        relative;

    z-index:
        20;

    width:
        fit-content;

    min-height:
        30px;

    margin:
        -28px auto 0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        7px;

}

/* =========================================================
   DOT
========================================================= */

.cuts-pagination-dot {

    width:
        9px;

    height:
        9px;

    padding:
        0;

    flex:
        0 0 auto;

    border:
        0;

    border-radius:
        50%;

    background:
        #111111;

    opacity:
        .16;

    cursor:
        pointer;

    transition:
        width .42s
        cubic-bezier(
            .22,
            .61,
            .36,
            1
        ),
        border-radius .42s ease,
        background-color .32s ease,
        opacity .32s ease,
        transform .32s ease;

}

/* =========================================================
   ACTIVE DOT
========================================================= */

.cuts-pagination-dot.is-active {

    width:
        26px;

    border-radius:
        999px;

    background:
        var(--gold);

    opacity:
        1;

}

/* =========================================================
   DOT HOVER
========================================================= */

.cuts-pagination-dot:not(.is-active):hover {

    opacity:
        .48;

    transform:
        scale(1.12);

}

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

.cuts-carousel-footer {

    margin-top:
        12px;

    display:
        flex;

    justify-content:
        center;

}

/* =========================================================
   DRAG HINT
========================================================= */

.cuts-drag-hint {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        9px;

    color:
        #8b8781;

    font-size:
        11px;

    font-weight:
        500;

    letter-spacing:
        .08em;

    text-transform:
        uppercase;

}

.cuts-drag-hint svg {

    width:
        16px;

    height:
        16px;

    stroke-width:
        1.5;

}

/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (
    min-width: 1500px
) {

    .cuts-track {

        --cuts-gap:
            34px;

    }

    .cuts-slide {

        width:
            440px;

        flex-basis:
            440px;

        height:
            590px;

    }

}

/* =========================================================
   LAPTOP
========================================================= */

@media (
    max-width: 1200px
) {

    .cuts-showcase {

        padding:
            120px 0 95px;

    }

    .cuts-track {

        --cuts-gap:
            24px;

    }

    .cuts-slide {

        width:
            min(
                36vw,
                425px
            );

        flex-basis:
            min(
                36vw,
                425px
            );

        height:
            525px;

    }

}

/* =========================================================
   TABLET
========================================================= */

@media (
    max-width: 900px
) {

    .cuts-showcase {

        padding:
            100px 0 85px;

    }

    .cuts-showcase-header {

        margin-bottom:
            42px;

    }

    .cuts-showcase-heading {

        grid-template-columns:
            1fr;

        justify-items:
            center;

        gap:
            18px;

    }

    .cuts-showcase-heading h2 {

        font-size:
            clamp(
                52px,
                10vw,
                80px
            );

        grid-column:
            1;

    }

    .cuts-showcase-heading p {

        margin-bottom:
            0;
        
        grid-column:
            1;

    }

    .cuts-track {

        --cuts-gap:
            18px;

    }

    .cuts-slide {

        width:
            min(
                49vw,
                395px
            );

        flex-basis:
            min(
                49vw,
                395px
            );

        height:
            495px;

    }

    .cuts-slide-image {

        border-radius:
            24px;

    }

}

/* =========================================================
   MOBILE
========================================================= */

@media (
    max-width: 650px
) {

    .cuts-showcase {

        padding:
            85px 0 70px;

    }

    .cuts-showcase-header {

        margin-bottom:
            28px;

    }

    .cuts-showcase-heading {

        grid-template-columns:
            1fr;

        justify-items:
            center;

        margin-top:
            10px;

        gap:
            13px;

    }

    

    .cuts-showcase-heading h2 {

        max-width:
            90%;

        font-size:
            clamp(
                47px,
                14vw,
                66px
            );

        line-height:
            .93;

        grid-column:
            1;

    }

    .cuts-showcase-heading p {

        font-size:
            13px;

        grid-column:
            1;

    }

    .cuts-carousel-viewport {

        padding:
            10px 0 20px;

    }

    .cuts-track {

        --cuts-gap:
            13px;

    }

    .cuts-slide {

        width:
            min(
                70vw,
                325px
            );

        flex-basis:
            min(
                70vw,
                325px
            );

        height:
            425px;

    }

    .cuts-slide-image {

        border-radius:
            21px;

    }

    .cuts-pagination {

        margin-top:
            10px;

        gap:
            6px;

    }

    .cuts-pagination-dot {

        width:
            8px;

        height:
            8px;

    }

    .cuts-pagination-dot.is-active {

        width:
            23px;

    }

    .cuts-drag-hint {

        font-size:
            9px;

    }

}

/* =========================================================
   SMALL MOBILE
========================================================= */

@media (
    max-width: 390px
) {

    .cuts-slide {

        width:
            74vw;

        flex-basis:
            74vw;

        height:
            390px;

    }

}

/* =========================================================
   REVIEWS
========================================================= */

.reviews {

    position:
        relative;

    isolation:
        isolate;

    overflow:
        hidden;

    padding:
        clamp(
            105px,
            9vw,
            155px
        )
        0
        clamp(
            150px,
            13vw,
            220px
        );

    /*
        Conservamos el fondo claro original de Opiniones.
        El fundido dorado sucede únicamente en los últimos
        píxeles de la sección, justo antes de Reservar.
    */

    background:
        #f5f4f2;

}

/* =========================================================
   BACKGROUND
========================================================= */

.reviews-background {

    position:
        absolute;

    z-index:
        -1;

    inset:
        0;

    overflow:
        hidden;

    pointer-events:
        none;

}

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

.reviews-header {

    position:
        relative;

    z-index:
        3;

    display:
        grid;

    grid-template-columns:
        minmax(
            0,
            1.25fr
        )
        minmax(
            300px,
            .75fr
        );

    align-items:
        end;

    gap:
        clamp(
            50px,
            8vw,
            120px
        );

    margin-bottom:
        clamp(
            65px,
            7vw,
            105px
        );

}

/* =========================================================
   TITLE
========================================================= */

.reviews-heading h2 {

    max-width:
        900px;

    margin-top:
        16px;

    font-family:
        var(--serif);

    font-size:
        clamp(
            60px,
            6.5vw,
            105px
        );

    font-weight:
        500;

    line-height:
        .89;

    letter-spacing:
        -.055em;

}

.reviews-heading h2 em {

    display:
        block;

    color:
        var(--gold);

    font-weight:
        500;

}

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

.reviews-score-card {

    position:
        relative;

    min-height:
        165px;

    padding:
        24px;

    display:
        grid;

    grid-template-columns:
        auto
        1fr
        auto;

    align-items:
        center;

    gap:
        20px;

    overflow:
        hidden;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .9
        );

    border-radius:
        26px;

    background:
        linear-gradient(
            145deg,
            rgba(
                255,
                255,
                255,
                .92
            ),
            rgba(
                255,
                255,
                255,
                .92
            )
        );

    box-shadow:
        0 22px 60px
        rgba(
            37,
            30,
            22,
            .08
        ),
        inset
        0
        1px
        0
        #ffffff;

}

/* =========================================================
   SCORE NUMBER
========================================================= */

.reviews-score-number {

    position:
        relative;

    z-index:
        2;

    font-family:
        var(--serif);

    font-size:
        clamp(
            64px,
            6vw,
            90px
        );

    font-weight:
        500;

    line-height:
        .8;

    letter-spacing:
        -.05em;

}

/* =========================================================
   SCORE INFO
========================================================= */

.reviews-score-info {

    position:
        relative;

    z-index:
        2;

}

.reviews-score-info .stars {

    color:
        var(--gold);

    font-size:
        14px;

    letter-spacing:
        2px;

}

.reviews-score-info strong {

    display:
        block;

    margin-top:
        8px;

    color:
        #1d1d1d;

    font-size:
        15px;

    font-weight:
        600;

}

.reviews-score-info > span {

    display:
        block;

    margin-top:
        3px;

    color:
        #78736c;

    font-size:
        13px;

}

/* =========================================================
   GOOGLE MARK
========================================================= */

.reviews-google-mark {

    position:
        relative;

    z-index:
        2;

    width:
        44px;

    height:
        44px;

    display:
        grid;

    place-items:
        center;

    border:
        1px solid
        rgba(
            17,
            17,
            17,
            .08
        );

    border-radius:
        14px;

    background:
        #ffffff;

    box-shadow:
        0 8px 22px
        rgba(
            0,
            0,
            0,
            .05
        );

}

.reviews-google-mark span {

    font-family:
        var(--sans);

    font-size:
        18px;

    font-weight:
        600;

}

/* =========================================================
   GRID
========================================================= */

.reviews-grid {

    position:
        relative;

    z-index:
        3;

    display:
        grid;

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

    gap:
        clamp(
            16px,
            2vw,
            26px
        );

    align-items:
        start;

}

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

.review-card {

    position:
        relative;

    min-height:
        390px;

    padding:
        28px;

    display:
        flex;

    flex-direction:
        column;

    overflow:
        hidden;

    border:
        1px solid
        rgba(
            17,
            17,
            17,
            .065
        );

    border-radius:
        28px;

    background:
        linear-gradient(
            145deg,
            rgba(
                255,
                255,
                255,
                .94
            ) 0%,
            rgba(
                248,
                246,
                241,
                .92
            ) 100%
        );

    box-shadow:
        0 20px 55px
        rgba(
            34,
            28,
            21,
            .065
        ),
        inset
        0
        1px
        0
        rgba(
            255,
            255,
            255,
            1
        );

    transition:
        transform .5s
        cubic-bezier(
            .16,
            1,
            .3,
            1
        ),
        box-shadow .4s ease,
        border-color .4s ease;

}

/* =========================================================
   SUBTLE CARD LIGHT
========================================================= */

.review-card::before {

    content:
        "";

    position:
        absolute;

    top:
        -100px;

    right:
        -100px;

    width:
        230px;

    height:
        230px;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(
                255,
                255,
                255,
                .9
            ) 0%,
            rgba(
                255,
                255,
                255,
                .15
            ) 40%,
            transparent 70%
        );

    pointer-events:
        none;

}

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

.review-card-featured {

    margin-top:
        45px;

    background:
        linear-gradient(
            145deg,
            #191817 0%,
            #111111 58%,
            #211a12 100%
        );

    border-color:
        rgba(
            255,
            255,
            255,
            .10
        );

    color:
        #ffffff;

    box-shadow:
        0 28px 75px
        rgba(
            31,
            24,
            16,
            .18
        );

}

/* =========================================================
   FEATURED GOLD LIGHT
========================================================= */

.review-card-featured::before {

    background:
        radial-gradient(
            circle,
            rgba(
                181,
                138,
                69,
                .20
            ),
            transparent 70%
        );

}

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

@media (
    hover: hover
) {

    .review-card:hover {

        transform:
            translateY(-7px);

        border-color:
            rgba(
                181,
                138,
                69,
                .20
            );

        box-shadow:
            0 28px 70px
            rgba(
                34,
                28,
                21,
                .10
            );

    }

    .review-card-featured:hover {

        box-shadow:
            0 35px 90px
            rgba(
                25,
                19,
                12,
                .26
            );

    }

}

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

.review-card-top {

    position:
        relative;

    z-index:
        2;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

}

/* =========================================================
   STARS
========================================================= */

.review-card .stars {

    color:
        var(--gold);

    font-size:
        14px;

    letter-spacing:
        2px;

}

/* =========================================================
   REVIEW NUMBER
========================================================= */

.review-number {

    color:
        rgba(
            17,
            17,
            17,
            .28
        );

    font-family:
        var(--serif);

    font-size:
        16px;

}

.review-card-featured
.review-number {

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

}

/* =========================================================
   QUOTE
========================================================= */

.review-quote {

    position:
        relative;

    z-index:
        2;

    height:
        58px;

    margin-top:
        30px;

    color:
        rgba(
            181,
            138,
            69,
            .34
        );

    font-family:
        var(--serif);

    font-size:
        105px;

    font-weight:
        500;

    line-height:
        .8;

}

/* =========================================================
   REVIEW TEXT
========================================================= */

.review-card > p {

    position:
        relative;

    z-index:
        2;

    max-width:
        420px;

    margin-top:
        5px;

    color:
        #282725;

    font-family:
        var(--serif);

    font-size:
        clamp(
            22px,
            2vw,
            28px
        );

    font-weight:
        500;

    line-height:
        1.38;

    letter-spacing:
        -.015em;

}

.review-card-featured > p {

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

}

/* =========================================================
   BOTTOM
========================================================= */

.review-bottom {

    position:
        relative;

    z-index:
        2;

    margin-top:
        auto;

    padding-top:
        28px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    border-top:
        1px solid
        rgba(
            17,
            17,
            17,
            .08
        );

}

.review-card-featured
.review-bottom {

    border-top-color:
        rgba(
            255,
            255,
            255,
            .10
        );

}

/* =========================================================
   AUTHOR
========================================================= */

.review-author {

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

}

/* =========================================================
   AVATAR
========================================================= */

.review-avatar {

    width:
        42px;

    height:
        42px;

    flex-shrink:
        0;

    display:
        grid;

    place-items:
        center;

    border:
        1px solid
        rgba(
            17,
            17,
            17,
            .08
        );

    border-radius:
        14px;

    background:
        #f0ece5;

    color:
        #5a534a;

    font-size:
        11px;

    font-weight:
        600;

    letter-spacing:
        .05em;

}

.review-card-featured
.review-avatar {

    border-color:
        rgba(
            255,
            255,
            255,
            .12
        );

    background:
        rgba(
            255,
            255,
            255,
            .08
        );

    color:
        #d7ba84;

}

/* =========================================================
   AUTHOR NAME
========================================================= */

.review-author strong {

    display:
        block;

    color:
        #171717;

    font-size:
        14px;

    font-weight:
        600;

}

.review-card-featured
.review-author strong {

    color:
        #ffffff;

}

/* =========================================================
   AUTHOR TYPE
========================================================= */

.review-author span {

    display:
        block;

    margin-top:
        3px;

    color:
        #89847d;

    font-size:
        12px;

}

.review-card-featured
.review-author span {

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

}

/* =========================================================
   SOURCE
========================================================= */

.review-source {

    color:
        #aaa49b;

    font-size:
        10px;

    font-weight:
        600;

    letter-spacing:
        .12em;

}

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

.reviews-footer {

    position:
        relative;

    z-index:
        3;

    margin-top:
        clamp(
            70px,
            8vw,
            115px
        );

    padding-top:
        25px;

    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        40px;

    border-top:
        1px solid
        rgba(
            48,
            38,
            24,
            .12
        );

}

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

.reviews-footer > div > span {

    color:
        #8c6932;

    font-size:
        12px;

    font-weight:
        600;

    letter-spacing:
        .14em;

}

.reviews-footer > div > p {

    max-width:
        390px;

    margin-top:
        8px;

    color:
        #70675b;

    font-size:
        15px;

    line-height:
        1.55;

}

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

.reviews-footer-link {

    display:
        flex;

    align-items:
        center;

    gap:
        15px;

    color:
        #211d17;

    font-size:
        14px;

    font-weight:
        600;

}

/* =========================================================
   FOOTER LINK ICON
========================================================= */

.reviews-footer-link > span {

    width:
        46px;

    height:
        46px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        50%;

    background:
        #171717;

    color:
        #ffffff;

    transition:
        transform .3s ease,
        background-color .3s ease;

}

.reviews-footer-link svg {

    width:
        17px;

    height:
        17px;

}

/* =========================================================
   FOOTER LINK HOVER
========================================================= */

.reviews-footer-link:hover
> span {

    transform:
        translate(
            2px,
            2px
        );

    background:
        #8c6932;

}

/* =========================================================
   REVIEWS → BOOKING

   Ya no hacemos subir el dorado hacia Opiniones.
========================================================= */

.reviews-booking-transition {

    display:
        none;

}

/* =========================================================
   BOOKING CONNECTION

   Si Booking está inmediatamente después de Reviews,
   evitamos cualquier borde visual duro.
========================================================= */

.reviews + .booking {

    margin-top:
        -1px;

}

/* =========================================================
   SMALL DESKTOP
========================================================= */

@media (
    max-width: 1150px
) {

    .reviews-header {

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

        gap:
            55px;

    }

    .review-card {

        min-height:
            370px;

        padding:
            24px;

    }

    .review-card > p {

        font-size:
            23px;

    }

}

/* =========================================================
   TABLET
========================================================= */

@media (
    max-width: 900px
) {

    .reviews {

        padding:
            105px
            0
            170px;

    }

    .reviews-header {

        grid-template-columns:
            1fr;

        gap:
            42px;

    }

    .reviews-heading h2 {

        font-size:
            clamp(
                58px,
                10vw,
                88px
            );

    }

    .reviews-score-card {

        max-width:
            500px;

    }

    .reviews-grid {

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

    }

    .review-card-featured {

        margin-top:
            0;

    }

    .review-card:last-child {

        grid-column:
            1 / -1;

        min-height:
            320px;

    }

}

/* =========================================================
   MOBILE
========================================================= */

@media (
    max-width: 650px
) {

    .reviews {

        padding:
            85px
            0
            145px;

    }

    /* =====================================================
       TITLE
    ===================================================== */

    .reviews-heading h2 {

        margin-top:
            13px;

        font-size:
            clamp(
                50px,
                14vw,
                69px
            );

        line-height:
            .91;

    }

    /* =====================================================
       SCORE
    ===================================================== */

    .reviews-score-card {

        min-height:
            0;

        padding:
            18px;

        grid-template-columns:
            auto
            1fr
            40px;

        gap:
            14px;

        border-radius:
            22px;

    }

    .reviews-score-number {

        font-size:
            58px;

    }

    .reviews-score-info .stars {

        font-size:
            12px;

    }

    .reviews-score-info strong {

        font-size:
            14px;

    }

    .reviews-score-info > span {

        font-size:
            12px;

    }

    .reviews-google-mark {

        width:
            40px;

        height:
            40px;

        border-radius:
            13px;

    }

    /* =====================================================
       CARDS
    ===================================================== */

    .reviews-grid {

        grid-template-columns:
            1fr;

        gap:
            12px;

    }

    .review-card,
    .review-card:last-child {

        grid-column:
            auto;

        min-height:
            300px;

        padding:
            21px;

        border-radius:
            22px;

    }

    .review-quote {

        height:
            43px;

        margin-top:
            20px;

        font-size:
            78px;

    }

    .review-card > p {

        font-size:
            21px;

        line-height:
            1.4;

    }

    .review-bottom {

        margin-top:
            35px;

        padding-top:
            20px;

    }

    .review-avatar {

        width:
            39px;

        height:
            39px;

        border-radius:
            12px;

    }

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

    .reviews-footer {

        margin-top:
            60px;

        flex-direction:
            column;

        align-items:
            flex-start;

        gap:
            25px;

    }

    .reviews-footer-link {

        width:
            100%;

        justify-content:
            space-between;

    }

    /* =====================================================
       TRANSITION
    ===================================================== */

    .reviews-booking-transition {

        bottom:
            0;

        height:
            62px;

    }

}

/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (
    max-width: 390px
) {

    .review-card {

        padding:
            18px;

    }

    .review-card > p {

        font-size:
            20px;

    }

    .reviews-score-card {

        grid-template-columns:
            auto
            1fr;

    }

    .reviews-google-mark {

        display:
            none;

    }

}

/* =========================================================
   BOOKING
========================================================= */

.booking {

    position: relative;

    isolation: isolate;

    padding: 145px 0;

    overflow: hidden;

    color: #ffffff;

    background:
        radial-gradient(
            circle at 15% 10%,
            #d8bb80 0%,
            transparent 32%
        ),
        radial-gradient(
            circle at 88% 78%,
            #6c4b22 0%,
            transparent 32%
        ),
        radial-gradient(
            circle at 75% 5%,
            rgba(255, 229, 180, .22) 0%,
            transparent 30%
        ),
        linear-gradient(
            125deg,
            #b58a45 0%,
            #9d7437 34%,
            #765128 70%,
            #382819 100%
        );

}

/* =========================================================
   BOOKING → CONTACT TRANSITION

   Este degradado vive dentro del final de BOOKING.

   La parte inferior se integra con el lienzo estructural;
   la capa dark posterior define el color efectivo.
========================================================= */

.booking::after {

    content: "";

    position: absolute;

    z-index: 0;

    left: -2%;

    right: -2%;

    bottom: -1px;

    height: 155px;

    pointer-events: none;

    background:
        linear-gradient(
            to bottom,

            rgba(255, 255, 255, 0) 0%,

            rgba(255, 255, 255, .025) 15%,

            rgba(255, 255, 255, .08) 28%,

            rgba(255, 255, 255, .20) 43%,

            rgba(255, 255, 255, .42) 60%,

            rgba(255, 255, 255, .68) 75%,

            rgba(255, 255, 255, .90) 90%,

            #ffffff 100%
        );

}

/* =========================================================
   REVIEWS → BOOKING

   El color claro de Reviews entra ligeramente en Booking
   y desaparece progresivamente hacia abajo.
========================================================= */

.booking::before {

    content:
        "";

    position:
        absolute;

    z-index:
        1;

    top:
        -1px;

    left:
        0;

    right:
        0;

    height:
        95px;

    pointer-events:
        none;

    background:
        linear-gradient(
            to bottom,

            #f5f4f2 0%,

            rgba(
                245,
                244,
                242,
                .92
            ) 10%,

            rgba(
                245,
                244,
                242,
                .72
            ) 28%,

            rgba(
                245,
                244,
                242,
                .45
            ) 48%,

            rgba(
                245,
                244,
                242,
                .20
            ) 68%,

            rgba(
                245,
                244,
                242,
                .06
            ) 84%,

            transparent 100%
        );

}

/* =========================================================
   BACKGROUND
========================================================= */

.booking-background {

    position: absolute;

    z-index: -1;

    inset: 0;

    overflow: hidden;

    pointer-events: none;

}

/* =========================================================
   LARGE WORD
========================================================= */

.booking-background-word {

    position: absolute;

    top: 50%;

    left: 50%;

    transform:
        translate(
            -50%,
            -50%
        );

    font-family: var(--serif);

    font-size:
        clamp(
            180px,
            25vw,
            430px
        );

    font-weight: 500;

    line-height: 1;

    letter-spacing: -.07em;

    color: transparent;

    -webkit-text-fill-color: transparent;

    -webkit-text-stroke:
        1px
        rgba(
            255,
            255,
            255,
            .075
        );

    white-space: nowrap;

}

/* =========================================================
   BACKGROUND GLOWS
========================================================= */

.booking-glow {

    position: absolute;

    border-radius: 50%;

    filter: blur(1px);

}

.booking-glow-one {

    top: -260px;

    left: -160px;

    width: 580px;

    height: 580px;

    background:
        radial-gradient(
            circle,
            rgba(
                255,
                244,
                218,
                .28
            ),
            transparent 68%
        );

}

.booking-glow-two {

    right: -200px;

    bottom: -310px;

    width: 700px;

    height: 700px;

    background:
        radial-gradient(
            circle,
            rgba(
                20,
                13,
                7,
                .4
            ),
            transparent 68%
        );

}

.booking-glow-three {

    top: 25%;

    right: 20%;

    width: 280px;

    height: 280px;

    background:
        radial-gradient(
            circle,
            rgba(
                255,
                229,
                177,
                .17
            ),
            transparent 70%
        );

}

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

.booking-content {

    position: relative;

    z-index: 2;

    max-width: 1250px;

    margin: 0 auto;

}

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

.booking-heading {

    max-width: 950px;

    margin: 0 auto;

    text-align: center;

}

/* =========================================================
   EYEBROW
========================================================= */

.booking-eyebrow {

    display: inline-block;

    font-size: 11px;

    font-weight: 600;

    letter-spacing: .2em;

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

}

/* =========================================================
   TITLE
========================================================= */

.booking h2 {

    margin-top: 24px;

    font-family: var(--serif);

    font-size:
        clamp(
            78px,
            9vw,
            148px
        );

    line-height: .88;

    font-weight: 500;

    letter-spacing: -.06em;

}

/* =========================================================
   DESCRIPTION
========================================================= */

.booking-heading p {

    max-width: 480px;

    margin:
        30px
        auto
        0;

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

    font-size: 16px;

    line-height: 1.65;

}

/* =========================================================
   LIQUID GLASS FORM
========================================================= */

.booking-form {

    position: relative;

    margin-top: 58px;

    padding: 15px;

    display: grid;

    /*
        FILA 1:
        Nombre                  | Apellido

        FILA 2:
        Fecha | Horario | Servicio

        DERECHA:
        Reservar
    */

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

    grid-template-rows:
        auto
        auto;

    align-items: end;

    column-gap: 10px;

    row-gap: 14px;

    background:
        linear-gradient(
            135deg,

            rgba(
                255,
                255,
                255,
                .22
            ) 0%,

            rgba(
                255,
                255,
                255,
                .12
            ) 55%,

            rgba(
                255,
                255,
                255,
                .17
            ) 100%
        );

    backdrop-filter:
        blur(26px)
        saturate(130%);

    -webkit-backdrop-filter:
        blur(26px)
        saturate(130%);

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .34
        );

    border-radius: 28px;

    box-shadow:
        0 30px 80px
        rgba(
            36,
            22,
            8,
            .22
        ),
        inset 0 1px 0
        rgba(
            255,
            255,
            255,
            .38
        );

}

/* =========================================================
   DESKTOP GRID
========================================================= */

.booking-name-field {

    grid-column:
        1 / span 3;

    grid-row: 1;

}

.booking-lastname-field {

    grid-column:
        4 / span 3;

    grid-row: 1;

}

.booking-date-field {

    grid-column:
        1 / span 2;

    grid-row: 2;

}

.booking-time-field {

    grid-column:
        3 / span 2;

    grid-row: 2;

}

.booking-service-field {

    grid-column:
        5 / span 2;

    grid-row: 2;

}

.booking-submit-wrapper {

    grid-column: 7;

    grid-row:
        1 / span 2;

    align-self: center;

    min-width: 165px;

}

/* =========================================================
   LIQUID HIGHLIGHT
========================================================= */

.booking-form::before {

    content: "";

    position: absolute;

    top: 0;

    left: 5%;

    width: 42%;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(
                255,
                255,
                255,
                .8
            ),
            transparent
        );

    pointer-events: none;

}

/* =========================================================
   FIELD
========================================================= */

.booking-field {

    min-width: 0;

}

/* =========================================================
   LABEL
========================================================= */

.booking-field label {

    display: block;

    margin:
        0
        0
        9px
        8px;

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

    font-size: 11px;

    font-weight: 600;

    letter-spacing: .08em;

}

/* =========================================================
   INPUT WRAPPER
========================================================= */

.booking-input-wrapper {

    position: relative;

    height: 62px;

    display: flex;

    align-items: center;

    background:
        rgba(
            255,
            255,
            255,
            .94
        );

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .72
        );

    border-radius: 18px;

    box-shadow:
        inset
        0
        1px
        0
        #ffffff,

        0
        8px
        25px
        rgba(
            35,
            22,
            10,
            .08
        );

    transition:
        border-color .25s ease,
        box-shadow .25s ease,
        transform .25s ease;

}

/* =========================================================
   INPUT FOCUS
========================================================= */

.booking-input-wrapper:focus-within {

    border-color: #ffffff;

    box-shadow:
        0
        0
        0
        3px
        rgba(
            255,
            255,
            255,
            .16
        ),

        0
        10px
        30px
        rgba(
            35,
            22,
            10,
            .12
        );

    transform:
        translateY(-1px);

}

/* =========================================================
   FIELD ICON
========================================================= */

.booking-input-wrapper > svg:first-child {

    position: absolute;

    z-index: 2;

    left: 18px;

    width: 18px;

    height: 18px;

    color: #8d7046;

    stroke-width: 1.6;

    pointer-events: none;

}

/* =========================================================
   INPUT / SELECT
========================================================= */

.booking-input-wrapper input,
.booking-input-wrapper select {

    width: 100%;

    height: 100%;

    min-width: 0;

    padding:
        0
        18px
        0
        50px;

    border: 0;

    outline: none;

    appearance: none;

    -webkit-appearance: none;

    background: transparent;

    color: #171717;

    font-family: var(--sans);

    font-size: 14px;

    font-weight: 500;

}

/* =========================================================
   PLACEHOLDER
========================================================= */

.booking-input-wrapper
input::placeholder {

    color: #96918a;

    opacity: 1;

}

/* =========================================================
   DATE
========================================================= */

.booking-date-field input {

    letter-spacing: .02em;

}

/* =========================================================
   SELECT
========================================================= */

.booking-input-wrapper select {

    padding-right: 48px;

    cursor: pointer;

}

.booking-input-wrapper
select option {

    background: #ffffff;

    color: #111111;

}

/* =========================================================
   SELECT ARROW
========================================================= */

.booking-select-arrow {

    position: absolute;

    z-index: 3;

    right: 18px;

    width: 16px;

    height: 16px;

    color: #77716a;

    pointer-events: none;

}

/* =========================================================
   SUBMIT
========================================================= */

.booking-submit {

    width: 100%;

    height: 62px;

    padding:
        6px
        6px
        6px
        22px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 16px;

    border: 0;

    border-radius: 18px;

    background: #111111;

    color: #ffffff;

    cursor: pointer;

    font-family: var(--sans);

    font-size: 13px;

    font-weight: 500;

    box-shadow:
        0
        15px
        35px
        rgba(
            0,
            0,
            0,
            .22
        );

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        background-color .3s ease;

}

.booking-submit:hover {

    transform:
        translateY(-2px);

    background: #1c1c1c;

    box-shadow:
        0
        20px
        45px
        rgba(
            0,
            0,
            0,
            .28
        );

}

/* =========================================================
   SUBMIT ICON
========================================================= */

.booking-submit-icon {

    width: 48px;

    height: 48px;

    display: grid;

    place-items: center;

    flex-shrink: 0;

    border-radius: 14px;

    background: #ffffff;

    color: #111111;

}

.booking-submit-icon svg {

    width: 17px;

    height: 17px;

}

/* =========================================================
   FORM MESSAGE
========================================================= */

.booking-form-message {

    min-height: 18px;

    margin-top: 10px;

    padding:
        0
        8px;

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

    font-size: 12px;

}

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

.booking-footer {

    margin-top: 8px;

    padding:
        0
        8px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 25px;

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

    font-size: 12px;

}

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

.booking-footer > div {

    display: flex;

    align-items: center;

    gap: 9px;

}

.booking-footer svg {

    width: 15px;

    height: 15px;

}

/* =========================================================
   PHONE
========================================================= */

.booking-footer > a {

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

    border-bottom:
        1px solid
        rgba(
            255,
            255,
            255,
            .35
        );

    padding-bottom: 3px;

}

.booking-input-wrapper.is-invalid {

    border-color:
        rgba(
            126,
            47,
            35,
            .65
        );

    box-shadow:
        0
        0
        0
        3px
        rgba(
            126,
            47,
            35,
            .08
        ),
        inset
        0
        1px
        0
        #ffffff;

}

/* =========================================================
   TABLET
========================================================= */

@media (
    max-width: 1050px
) {

    .booking {

        padding:
            120px
            0
            135px;

    }

    .booking::after {

        height: 130px;

    }

    .booking-form {

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

        grid-template-rows: auto;

        gap: 14px;

        padding: 18px;

    }

    .booking-name-field {

        grid-column: 1;

        grid-row: 1;

    }

    .booking-lastname-field {

        grid-column: 2;

        grid-row: 1;

    }

    .booking-date-field {

        grid-column: 1;

        grid-row: 2;

    }

    .booking-time-field {

        grid-column: 2;

        grid-row: 2;

    }

    .booking-service-field {

        grid-column: 1;

        grid-row: 3;

    }

    .booking-submit-wrapper {

        grid-column: 2;

        grid-row: 3;

        align-self: end;

        min-width: 0;

    }

}

/* =========================================================
   MOBILE
========================================================= */

@media (
    max-width: 650px
) {

    /* =====================================================
    BOOKING → CONTACT
    ELIMINAR HAIRLINE EN SAFARI / IOS
    ===================================================== */

    .booking {

        position:
            relative;

        margin-bottom:
            -4px;

    }

    .booking::after {

        left:
            -5%;

        right:
            -5%;

        bottom:
            -5px;

        height:
            195px;

        background:
            linear-gradient(
                to bottom,

                rgba(
                    255,
                    255,
                    255,
                    0
                ) 0%,

                rgba(
                    255,
                    255,
                    255,
                    .04
                ) 12%,

                rgba(
                    255,
                    255,
                    255,
                    .14
                ) 28%,

                rgba(
                    255,
                    255,
                    255,
                    .34
                ) 45%,

                rgba(255, 255, 255, 0.681) 62%,

                rgba(255, 255, 255, 0.913) 77%,

                rgb(255, 255, 255) 91%,

                #ffffff 100%
            );

    }

    .contact {

        position:
            relative;

        margin-top:
            -5px;

        border-top:
            0 !important;

        outline:
            none;

    }

    .booking::before {

        height: 62px;

    }

    .booking-background-word {

        font-size: 55vw;

    }

    .booking-eyebrow {

        font-size: 9px;

        letter-spacing: .16em;

    }

    .booking-heading {

        width:
            100%;

        max-width:
            100%;

        padding:
            0 6px;

    }

    .booking h2 {

        margin-top:
            18px;

        max-width:
            100%;

        font-size:
            clamp(
                44px,
                13.6vw,
                64px
            );

        line-height:
            .92;

        letter-spacing:
            -.065em;

        white-space:
            nowrap;

        text-align:
            center;

    }

    .booking-heading p {

        margin-top: 22px;

        max-width: 340px;

        font-size: 14px;

        line-height: 1.55;

    }

    .booking-form {

        margin-top: 38px;

        grid-template-columns: 1fr;

        gap: 13px;

        padding: 14px;

        border-radius: 24px;

    }

    .booking-name-field,
    .booking-lastname-field,
    .booking-date-field,
    .booking-time-field,
    .booking-service-field,
    .booking-submit-wrapper {

        grid-column: 1;

        grid-row: auto;

        align-self: auto;

    }

    .booking-field label {

        margin-left: 5px;

        margin-bottom: 7px;

        font-size: 10px;

    }

    .booking-input-wrapper {

        height: 56px;

        border-radius: 16px;

    }

    .booking-submit {

        height: 58px;

        border-radius: 16px;

    }

    .booking-submit-icon {

        width: 46px;

        height: 46px;

        border-radius: 13px;

    }

    .booking-footer {

        margin-top: 5px;

        flex-direction: column;

        align-items: center;

        gap: 11px;

        text-align: center;

        font-size: 11px;

    }

}

/* =========================================================
   CONTACT
========================================================= */

.contact {

    position: relative;

    isolation: isolate;

    /*
        -1px elimina cualquier hairline que Chrome pueda
        producir entre ambos backgrounds.
    */

    margin-top: -1px;

    overflow: hidden;

    background: #ffffff;

}

/* =========================================================
   CONTACT TOP TRANSITION

   BOOKING y CONTACT comparten un fundido continuo.
   La capa dark posterior define sus tonos efectivos.

   Esto crea una única transición continua.
========================================================= */

.contact::before {

    content: "";

    position: absolute;

    z-index: -1;

    top: 0;

    left: 0;

    right: 0;

    height: 180px;

    pointer-events: none;

    background:
        linear-gradient(
            to bottom,

            #ffffff 0%,

            rgba(
                255,
                255,
                255,
                .99
            ) 16%,

            rgba(
                255,
                255,
                255,
                .94
            ) 32%,

            rgba(
                255,
                255,
                255,
                .70
            ) 55%,

            rgba(
                255,
                255,
                255,
                .28
            ) 78%,

            rgba(
                255,
                255,
                255,
                0
            ) 100%
        );

}

/* =========================================================
   FULL SECTION BACKGROUND
========================================================= */

.contact-background {

    position: absolute;

    z-index: -2;

    inset: 0;

    overflow: hidden;

    pointer-events: none;

}

.contact-background img {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: center;

    filter:
        saturate(.72)
        contrast(.92)
        brightness(1.06);

    opacity: .38;

    transform:
        scale(1.015);

}

/* =========================================================
   BACKGROUND EDGE FADE
========================================================= */

.contact-background-fade {

    position: absolute;

    inset: 0;

    background:

        /*
            VERTICAL

            La parte superior permanece blanca durante
            más recorrido para continuar el fade de BOOKING.
        */

        linear-gradient(
            to bottom,

            #ffffff 0%,

            rgba(
                255,
                255,
                255,
                .98
            ) 5%,

            rgba(
                255,
                255,
                255,
                .84
            ) 13%,

            rgba(
                255,
                255,
                255,
                .42
            ) 23%,

            rgba(
                255,
                255,
                255,
                .13
            ) 34%,

            rgba(
                255,
                255,
                255,
                .05
            ) 66%,

            rgba(
                255,
                255,
                255,
                .82
            ) 92%,

            #ffffff 100%
        ),

        /*
            HORIZONTAL
        */

        linear-gradient(
            90deg,

            #ffffff 0%,

            rgba(
                255,
                255,
                255,
                .82
            ) 7%,

            rgba(
                255,
                255,
                255,
                .18
            ) 23%,

            rgba(
                255,
                255,
                255,
                .06
            ) 58%,

            rgba(
                255,
                255,
                255,
                .45
            ) 88%,

            #ffffff 100%
        );

}

/* =========================================================
   MAIN LAYOUT
========================================================= */

.contact-layout {

    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(
            0,
            .95fr
        )
        minmax(
            430px,
            1.05fr
        );

    gap:
        clamp(
            45px,
            6vw,
            95px
        );

    align-items: stretch;

}

/* =========================================================
   LEFT
========================================================= */

.contact-left {

    display: flex;

    flex-direction: column;

}

/* =========================================================
   HEADING
========================================================= */

.contact-heading {

    max-width: 650px;

}

.contact-heading h2 {

    margin-top: 8px;

    font-family: var(--serif);

    font-size:
        clamp(
            58px,
            6.5vw,
            102px
        );

    line-height: .9;

    font-weight: 500;

    letter-spacing: -.052em;

}

.contact-heading h2 em {

    display: block;

    color: var(--gold);

    font-weight: 500;

}

.contact-heading > p {

    max-width: 420px;

    margin-top: 25px;

    color: #4f4f4f;

    font-size: 15px;

    line-height: 1.65;

}

/* =========================================================
   CONTACT CARDS GRID
========================================================= */

.contact-cards {

    margin-top: 48px;

    display: grid;

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

    gap: 16px;

}

/* =========================================================
   PREMIUM SOLID GLASS CARD
========================================================= */

.contact-card {

    position: relative;

    min-width: 0;

    min-height: 235px;

    padding: 24px;

    overflow: hidden;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .95
        );

    border-radius: 26px;

    background:
        linear-gradient(
            145deg,
            #ffffff 0%,
            #fbfaf8 48%,
            #f3f0eb 100%
        );

    box-shadow:
        0 18px 50px
        rgba(
            43,
            36,
            27,
            .08
        ),
        inset 0 1px 0
        rgba(
            255,
            255,
            255,
            1
        ),
        inset 0 -1px 0
        rgba(
            17,
            17,
            17,
            .035
        );

    transition:
        transform .35s
        cubic-bezier(
            .2,
            .7,
            .2,
            1
        ),
        box-shadow .35s ease;

}

/* =========================================================
   LIQUID HIGHLIGHT
========================================================= */

.contact-card::before {

    content: "";

    position: absolute;

    top: -65px;

    right: -60px;

    width: 160px;

    height: 160px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,

            rgba(
                255,
                255,
                255,
                1
            ) 0%,

            rgba(
                255,
                255,
                255,
                .55
            ) 36%,

            rgba(
                255,
                255,
                255,
                0
            ) 70%
        );

    pointer-events: none;

}

/* =========================================================
   SUBTLE BOTTOM REFLECTION
========================================================= */

.contact-card::after {

    content: "";

    position: absolute;

    left: 18%;

    right: 18%;

    bottom: -1px;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(
                181,
                138,
                69,
                .28
            ),
            transparent
        );

}

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

.contact-card:hover {

    transform:
        translateY(-5px);

    box-shadow:
        0 24px 60px
        rgba(
            43,
            36,
            27,
            .12
        ),
        inset
        0
        1px
        0
        #ffffff;

}

/* =========================================================
   WIDE CONTACT CARD
========================================================= */

.contact-card-wide {

    grid-column:
        1 / -1;

    min-height: 190px;

}

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

.contact-card-top {

    position: relative;

    z-index: 2;

    display: flex;

    justify-content: space-between;

    align-items: center;

}

/* =========================================================
   ICON
========================================================= */

.contact-card-icon {

    width: 48px;

    height: 48px;

    display: grid;

    place-items: center;

    border:
        1px solid
        rgba(
            17,
            17,
            17,
            .08
        );

    border-radius: 16px;

    background: #ffffff;

    box-shadow:
        0
        8px
        22px
        rgba(
            0,
            0,
            0,
            .05
        );

    color: #111111;

    transition:
        transform .3s ease,
        background-color .3s ease,
        color .3s ease;

}

.contact-card:hover
.contact-card-icon {

    transform:
        translateY(-2px)
        rotate(-3deg);

    background: #111111;

    color: #ffffff;

}

.contact-card-icon svg {

    width: 19px;

    height: 19px;

    stroke-width: 1.55;

}

/* =========================================================
   NUMBER
========================================================= */

.contact-card-number {

    color:
        rgba(
            17,
            17,
            17,
            .27
        );

    font-size: 11px;

    font-weight: 600;

    letter-spacing: .12em;

}

/* =========================================================
   BODY
========================================================= */

.contact-card-body {

    position: relative;

    z-index: 2;

    margin-top: 30px;

}

/* =========================================================
   LABEL
========================================================= */

.contact-card-label {

    display: block;

    margin-bottom: 10px;

    color: var(--gold);

    font-size: 11px;

    font-weight: 600;

    letter-spacing: .15em;

}

/* =========================================================
   TITLE
========================================================= */

.contact-card h3 {

    font-family: var(--serif);

    font-size: 26px;

    font-weight: 500;

    line-height: 1.05;

}

/* =========================================================
   DESCRIPTION
========================================================= */

.contact-card p {

    margin-top: 10px;

    color: #656565;

    font-size: 14px;

    line-height: 1.6;

}

/* =========================================================
   HOURS
========================================================= */

.contact-hours {

    display: flex;

    flex-direction: column;

    gap: 11px;

    width:
        100%;

}

.contact-hours > div {

    

    

    

    width:
        100%;

    display:
        flex;

    flex-direction:
        row;

    align-items:
        baseline;

    justify-content:
        flex-start;

    gap:
        15px;

}

.contact-hours span {

    color: #686868;

    font-size: 13px;

}


.contact-hours > div > span {

    margin-right:
        auto;

    text-align:
        left;

}

.contact-hours strong {

    color: #171717;

    font-size: 15px;

    font-weight: 500;

}

.contact-hours > div > strong {

    margin-left:
        auto;

    text-align:
        right;

    white-space:
        nowrap;

}

/* =========================================================
   CONTACT LINKS
========================================================= */

.contact-links {

    display: grid;

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

    gap:
        12px
        25px;

}

.contact-links a {

    min-width: 0;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 12px;

    padding:
        10px
        0;

    border-bottom:
        1px solid
        rgba(
            17,
            17,
            17,
            .09
        );

    color: #222222;

    font-size: 14px;

    font-weight: 500;

}

.contact-links a span {

    overflow: hidden;

    text-overflow: ellipsis;

}

.contact-links svg {

    width: 15px;

    height: 15px;

    flex-shrink: 0;

    transition:
        transform .25s ease;

}

.contact-links a:hover svg {

    transform:
        translate(
            3px,
            -3px
        );

}

/* =========================================================
   MAP COLUMN
========================================================= */

.contact-map-column {

    min-width: 0;

    display: flex;

}

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

.contact-map-card {

    width: 100%;

    min-height: 720px;

    display: flex;

    flex-direction: column;

    padding: 18px;

    overflow: hidden;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .95
        );

    border-radius: 30px;

    background:
        linear-gradient(
            145deg,
            #ffffff 0%,
            #faf8f5 100%
        );

    box-shadow:
        0
        24px
        70px
        rgba(
            35,
            29,
            22,
            .11
        );

}

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

.contact-map-header {

    padding:
        10px
        8px
        20px;

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 20px;

}

.contact-map-header
> div
> span {

    display: block;

    margin-bottom: 8px;

    color: var(--gold);

    font-size: 11px;

    font-weight: 600;

    letter-spacing: .15em;

}

.contact-map-header h3 {

    font-family: var(--serif);

    font-size: 34px;

    line-height: 1;

    font-weight: 500;

}

/* =========================================================
   OPEN MAP
========================================================= */

.contact-map-header > a {

    display: flex;

    align-items: center;

    gap: 8px;

    padding-bottom: 3px;

    color: #111111;

    border-bottom:
        1px solid
        rgba(
            17,
            17,
            17,
            .25
        );

    font-size: 13px;

    font-weight: 500;

}

.contact-map-header
> a
svg {

    width: 15px;

}

/* =========================================================
   MAP FRAME
========================================================= */

.contact-map-frame {

    position: relative;

    flex: 1;

    min-height: 620px;

    overflow: hidden;

    border-radius: 22px;

    background: #e7e2da;

}

/* =========================================================
   GOOGLE MAP
========================================================= */

.contact-map-frame iframe {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    border: 0;

    filter:
        saturate(.74)
        contrast(.96);

}

/* =========================================================
   LOCATION OVER MAP
========================================================= */

.contact-map-location {

    position: absolute;

    z-index: 3;

    left: 20px;

    bottom: 20px;

    display: flex;

    align-items: center;

    gap: 12px;

    padding:
        10px
        16px
        10px
        10px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .9
        );

    border-radius: 18px;

    background: #ffffff;

    box-shadow:
        0
        16px
        45px
        rgba(
            0,
            0,
            0,
            .13
        );

}

/* =========================================================
   LOCATION ICON
========================================================= */

.contact-map-location-icon {

    width: 42px;

    height: 42px;

    display: grid;

    place-items: center;

    border-radius: 13px;

    background: #111111;

    color: #ffffff;

}

.contact-map-location-icon svg {

    width: 17px;

}

/* =========================================================
   LOCATION TEXT
========================================================= */

.contact-map-location
> div:last-child {

    display: flex;

    flex-direction: column;

    gap: 3px;

}

.contact-map-location span {

    color: #999999;

    font-size: 9px;

    font-weight: 600;

    letter-spacing: .12em;

}

.contact-map-location strong {

    color: #111111;

    font-size: 13px;

    font-weight: 500;

}

/* =========================================================
   SMALL DESKTOP / TABLET LANDSCAPE
========================================================= */

@media (
    max-width: 1150px
) {

    .contact-layout {

        grid-template-columns:
            1fr
            1fr;

        gap: 40px;

    }

    .contact-heading h2 {

        font-size:
            clamp(
                58px,
                7vw,
                82px
            );

    }

    .contact-card {

        min-height: 220px;

        padding: 21px;

    }

    .contact-map-card {

        min-height: 680px;

    }

    .contact-map-frame {

        min-height: 575px;

    }

}

/* =========================================================
   TABLET
========================================================= */

@media (
    max-width: 900px
) {

    .contact::before {

        height: 145px;

    }

    .contact-layout {

        grid-template-columns:
            1fr;

        gap: 42px;

    }

    .contact-left {

        max-width: none;

    }

    .contact-heading {

        max-width: 650px;

    }

    .contact-cards {

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

    }

    .contact-map-card {

        min-height: 560px;

    }

    .contact-map-frame {

        min-height: 455px;

    }

    .contact-background img {

        opacity: .30;

    }

}

/* =========================================================
   MOBILE
========================================================= */

@media (
    max-width: 650px
) {

    .contact {

        padding-top: 85px;

        padding-bottom: 85px;

    }

    /*
        El tono estructural del principio se mantiene bastante
        para que no reaparezca la foto justo en el borde.
    */

    .contact::before {

        height: 120px;

        background:
            linear-gradient(
                to bottom,

                #ffffff 0%,

                rgba(
                    255,
                    255,
                    255,
                    .98
                ) 30%,

                rgba(
                    255,
                    255,
                    255,
                    .72
                ) 58%,

                rgba(
                    255,
                    255,
                    255,
                    .28
                ) 80%,

                rgba(
                    255,
                    255,
                    255,
                    0
                ) 100%
            );

    }

    /* =====================================================
       BACKGROUND
    ===================================================== */

    .contact-background img {

        opacity: .27;

        object-position:
            58%
            center;

    }

    .contact-background-fade {

        background:
            linear-gradient(
                180deg,

                #ffffff 0%,

                rgba(
                    255,
                    255,
                    255,
                    .92
                ) 9%,

                rgba(
                    255,
                    255,
                    255,
                    .54
                ) 20%,

                rgba(
                    255,
                    255,
                    255,
                    .16
                ) 34%,

                rgba(
                    255,
                    255,
                    255,
                    .24
                ) 72%,

                rgba(
                    255,
                    255,
                    255,
                    .83
                ) 92%,

                #ffffff 100%
            );

    }

    /* =====================================================
       TITLE
    ===================================================== */

    .contact-heading h2 {

        font-size:
            clamp(
                50px,
                14vw,
                70px
            );

    }

    .contact-heading > p {

        margin-top: 18px;

        font-size: 14px;

    }

    /* =====================================================
       CARDS
    ===================================================== */

    .contact-cards {

        margin-top: 34px;

        grid-template-columns: 1fr;

        gap: 12px;

    }

    .contact-card,
    .contact-card-wide {

        grid-column: auto;

        min-height: auto;

        padding: 20px;

        border-radius: 22px;

    }

    .contact-card-top {

        position: absolute;

        top: 18px;

        right: 18px;

    }

    .contact-card-icon {

        width: 42px;

        height: 42px;

        border-radius: 14px;

    }

    .contact-card-number {

        display: none;

    }

    .contact-card-body {

        margin-top: 0;

        padding-right: 55px;

    }

    .contact-card-label {

        font-size: 9px;

    }

    .contact-card h3 {

        font-size: 23px;

    }

    .contact-card p {

        font-size: 13px;

    }

    .contact-hours {

        gap: 8px;

    }

    .contact-hours > div {

        flex-direction: row;

        justify-content: space-between;

        gap: 15px;

    }

    .contact-hours span,
    .contact-hours strong {

        font-size: 12px;

    }

    .contact-links {

        grid-template-columns: 1fr;

        gap: 2px;

    }

    .contact-links a {

        padding:
            7px
            0;

        font-size: 12px;

    }

    /* =====================================================
       MAP
    ===================================================== */

    .contact-map-card {

        min-height: 470px;

        padding: 14px;

        border-radius: 24px;

    }

    .contact-map-header {

        padding:
            8px
            5px
            16px;

    }

    .contact-map-header h3 {

        font-size: 28px;

    }

    .contact-map-header > a {

        font-size: 11px;

    }

    .contact-map-frame {

        min-height: 390px;

        border-radius: 18px;

    }

    .contact-map-location {

        left: 12px;

        bottom: 12px;

        padding:
            8px
            12px
            8px
            8px;

        border-radius: 15px;

    }

    .contact-map-location-icon {

        width: 36px;

        height: 36px;

    }

}



/* =========================================================
   NICOLAU SIGNATURE SECTION
========================================================= */

.nicolau-signature-section {

    position:
        relative;

    isolation:
        isolate;

    min-height:
        340px;

    padding:
        70px
        0
        90px;

    display:
        flex;

    align-items:
        center;

    overflow:
        hidden;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fbfaf8 55%,
            #f6f3ee 100%
        );

}

/* =========================================================
   TOP LINE
========================================================= */

.nicolau-signature-section::before {

    content:
        "";

    position:
        absolute;

    top:
        0;

    left:
        10%;

    right:
        10%;

    height:
        1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(
                17,
                17,
                17,
                .08
            ),
            transparent
        );

}

/* =========================================================
   BOTTOM FADE
========================================================= */

.nicolau-signature-section::after {

    content:
        "";

    position:
        absolute;

    left:
        0;

    right:
        0;

    bottom:
        0;

    height:
        55px;

    pointer-events:
        none;

    background:
        linear-gradient(
            to bottom,
            transparent,
            rgba(
                17,
                17,
                17,
                .03
            )
        );

}

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

.nicolau-signature-content {

    position:
        relative;

    width:
        min(
            100%,
            1100px
        );

    margin:
        0 auto;

}

/* =========================================================
   SIGNATURE WRAPPER
========================================================= */

.nicolau-signature-wrapper {

    position:
        relative;

    width:
        100%;

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

}

/* =========================================================
   SVG
========================================================= */

.nicolau-signature-svg {

    width:
        min(
            1000px,
            94vw
        );

    height:
        auto;

    display:
        block;

    margin:
        0 auto;

    overflow:
        visible;

}

/* =========================================================
   SIGNATURE TEXT BASE
========================================================= */

.nicolau-signature-stroke,
.nicolau-signature-fill {

    font-family:
        "Corinthia",
        cursive;

    font-size:
        250px;

    font-weight:
        700;

    letter-spacing:
        0;

}

/* =========================================================
   DRAWING STROKE
========================================================= */

.nicolau-signature-stroke {

    fill:
        transparent;

    stroke:
        #111111;

    stroke-width:
        1.5;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;

    stroke-dasharray:
        2000;

    stroke-dashoffset:
        2000;

    opacity:
        0;

}

/* =========================================================
   FINAL FILL
========================================================= */

.nicolau-signature-fill {

    fill:
        #111111;

    stroke:
        none;

    opacity:
        0;

}

/* =========================================================
   TABLET
========================================================= */

@media (
    max-width: 900px
) {

    .nicolau-signature-section {

        min-height:
            300px;

        padding:
            60px
            0
            75px;

    }


    .nicolau-signature-svg {

        width:
            min(
                820px,
                92vw
            );

    }

}

/* =========================================================
   MOBILE
========================================================= */

/* =========================================================
   SIGNATURE — MOBILE
========================================================= */

@media (
    max-width: 650px
) {

    .nicolau-signature-section {

        min-height:
            auto;

        padding:
            52px
            18px
            64px;

        display:
            flex;

        align-items:
            center;

        justify-content:
            center;

    }


    .nicolau-signature-content {

        width:
            100%;

        max-width:
            560px;

        margin:
            0 auto;

    }


    .nicolau-signature-wrapper {

        width:
            100%;

        display:
            flex;

        align-items:
            center;

        justify-content:
            center;

    }


    .nicolau-signature-svg {

        width:
            min(
                520px,
                91vw
            );

        height:
            auto;

        margin:
            0 auto;

        display:
            block;

        transform:
            translateX(-16px);

    }

}

/* =========================================================
   SMALL MOBILE
========================================================= */

/* =========================================================
   SIGNATURE — SMALL MOBILE
========================================================= */

@media (
    max-width: 390px
) {

    .nicolau-signature-section {

        min-height:
            auto;

        padding:
            46px
            16px
            58px;

    }


    .nicolau-signature-svg {

        width:
            92vw;

        max-width:
            380px;

    }

}

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

.footer {

    position:
        relative;

    padding:
        88px 0 24px;

    background:
        var(--black);

    color:
        #ffffff;

    overflow:
        hidden;

}

/* =========================================================
   TOP LINE
========================================================= */

.footer::before {

    content:
        "";

    position:
        absolute;

    top:
        0;

    left:
        50%;

    width:
        92%;

    max-width:
        1420px;

    height:
        1px;

    transform:
        translateX(-50%);

    background:
        rgba(
            255,
            255,
            255,
            .14
        );

}

/* =========================================================
   MAIN GRID
========================================================= */

.footer-main {

    display:
        grid;

    grid-template-columns:
        1.45fr
        .65fr
        .85fr
        1.15fr;

    gap:
        clamp(
            40px,
            5vw,
            90px
        );

    align-items:
        start;

    padding-bottom:
        75px;

}

/* =========================================================
   BRAND AREA
========================================================= */

.footer-brand-area {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-start;

}

/* =========================================================
   LOGO
========================================================= */

.footer-brand {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    width:
        fit-content;

    color:
        #ffffff;

    line-height:
        .86;

}

/* NICOLAU */

.footer-brand > span {

    font-family:
        var(--serif);

    font-size:
        clamp(
            35px,
            3.1vw,
            52px
        );

    font-weight:
        500;

    letter-spacing:
        .045em;

}

/* STUDIO */

.footer-brand small {

    margin-top:
        10px;

    margin-left:
        5px;

    font-family:
        var(--sans);

    font-size:
        8px;

    font-weight:
        500;

    letter-spacing:
        .55em;

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

}

/* =========================================================
   BRAND TEXT
========================================================= */

.footer-brand-text {

    max-width:
        320px;

    margin-top:
        30px;

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

    font-size:
        13px;

    line-height:
        1.7;

}

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

.footer-book {

    margin-top:
        27px;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        14px;

    padding:
        5px
        5px
        5px
        18px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .24
        );

    border-radius:
        100px;

    color:
        #ffffff;

    font-size:
        11px;

    transition:
        border-color .3s ease,
        background-color .3s ease,
        transform .3s ease;

}

.footer-book:hover {

    border-color:
        rgba(
            255,
            255,
            255,
            .55
        );

    background:
        rgba(
            255,
            255,
            255,
            .05
        );

    transform:
        translateY(-2px);

}

.footer-book-arrow {

    width:
        36px;

    height:
        36px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        50%;

    background:
        #ffffff;

    color:
        var(--black);

    font-size:
        14px;

}

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

.footer-column {

    display:
        flex;

    flex-direction:
        column;

}

/* =========================================================
   COLUMN TITLE
========================================================= */

.footer-column-title {

    margin-bottom:
        24px;

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

    font-size:
        9px;

    font-weight:
        600;

    letter-spacing:
        .2em;

}

/* =========================================================
   NAVIGATION
========================================================= */

.footer-nav {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-start;

    gap:
        13px;

}

.footer-nav a {

    position:
        relative;

    width:
        fit-content;

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

    font-size:
        12px;

    transition:
        color .25s ease;

}

.footer-nav a::after {

    content:
        "";

    position:
        absolute;

    left:
        0;

    bottom:
        -4px;

    width:
        0;

    height:
        1px;

    background:
        #ffffff;

    transition:
        width .3s ease;

}

.footer-nav a:hover {

    color:
        #ffffff;

}

.footer-nav a:hover::after {

    width:
        100%;

}

/* =========================================================
   CONTACT
========================================================= */

.footer-contact {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-start;

    gap:
        12px;

}

.footer-contact a {

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

    font-size:
        12px;

    transition:
        color .25s ease;

}

.footer-contact a:hover {

    color:
        #ffffff;

}

.footer-contact p {

    margin-top:
        10px;

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

    font-size:
        13px;

    line-height:
        1.6;

}

/* =========================================================
   SOCIAL
========================================================= */

.footer-social {

    width:
        100%;

    display:
        flex;

    flex-direction:
        column;

}

/* =========================================================
   SOCIAL LINK
========================================================= */

.footer-social-link {

    width:
        100%;

    min-height:
        60px;

    display:
        grid;

    grid-template-columns:
        38px
        1fr
        auto;

    align-items:
        center;

    gap:
        12px;

    border-top:
        1px solid
        rgba(
            255,
            255,
            255,
            .12
        );

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

    transition:
        color .3s ease,
        padding .3s ease;

}

.footer-social-link:last-child {

    border-bottom:
        1px solid
        rgba(
            255,
            255,
            255,
            .12
        );

}

.footer-social-link:hover {

    color:
        #ffffff;

    padding-left:
        5px;

}

/* =========================================================
   SOCIAL ICON
========================================================= */

.footer-social-icon {

    width:
        36px;

    height:
        36px;

    display:
        grid;

    place-items:
        center;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .18
        );

    border-radius:
        50%;

    font-size:
        14px;

    transition:
        background-color .3s ease,
        color .3s ease,
        border-color .3s ease,
        transform .3s ease;

}

.footer-social-link:hover
.footer-social-icon {

    background:
        #ffffff;

    color:
        var(--black);

    border-color:
        #ffffff;

    transform:
        rotate(-5deg);

}

/* =========================================================
   SOCIAL NAME
========================================================= */

.footer-social-name {

    font-size:
        12px;

}

/* =========================================================
   SOCIAL ARROW
========================================================= */

.footer-social-arrow {

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

    font-size:
        13px;

    transition:
        color .3s ease,
        transform .3s ease;

}

.footer-social-link:hover
.footer-social-arrow {

    color:
        #ffffff;

    transform:
        translate(
            2px,
            -2px
        );

}

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

.footer-bottom {

    /*
        Ya no hay columna central.

        IZQUIERDA:
        copyright

        DERECHA:
        volver arriba
    */

    min-height:
        56px;

    padding-top:
        20px;

    display:
        grid;

    grid-template-columns:
        1fr auto;

    align-items:
        center;

    gap:
        30px;

    border-top:
        1px solid
        rgba(
            255,
            255,
            255,
            .22
        );

    /*
        Antes era .35 y se leía muy poco.
    */

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

    font-size:
        13px;

    font-weight:
        500;

    letter-spacing:
        .035em;

}

/* =========================================================
   BOTTOM LEFT
========================================================= */

.footer-bottom-left {

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

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

}

/* =========================================================
   COPYRIGHT EMPHASIS
========================================================= */

.footer-bottom-left
span:first-child {

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

    font-weight:
        600;

}

/* =========================================================
   DOT
========================================================= */

.footer-dot {

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

}

/* =========================================================
   REMOVE OLD CENTER ELEMENT
========================================================= */

.footer-bottom-center {

    display:
        none;

}

/* =========================================================
   BACK TO TOP
========================================================= */

.footer-back-top {

    justify-self:
        end;

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

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

    font-size:
        10px;

    font-weight:
        500;

    transition:
        color .25s ease;

}

.footer-back-top span {

    width:
        30px;

    height:
        30px;

    display:
        grid;

    place-items:
        center;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .28
        );

    border-radius:
        50%;

    color:
        #ffffff;

    transition:
        transform .3s ease,
        background-color .3s ease,
        color .3s ease;

}

.footer-back-top:hover {

    color:
        #ffffff;

}

.footer-back-top:hover span {

    transform:
        translateY(-3px);

    background:
        #ffffff;

    color:
        var(--black);

}


/* =========================================================
   FOOTER — CASAI CREDIT
========================================================= */

.footer-bottom-right {

    justify-self:
        end;

    display:
        flex;

    flex-direction:
        row;

    align-items:
        center;

    gap:
        24px;

}


/* =========================================================
   CREDIT
========================================================= */

.footer-credit {

    display:
        flex;

    align-items:
        center;

    gap:
        6px;

    color:
        #bfc3c8;

    font-size:
        12px;

    font-weight:
        500;

    letter-spacing:
        .035em;

    line-height:
        1;

    white-space:
        nowrap;

}


/* =========================================================
   CASAI
========================================================= */

.footer-credit-brand {

    position:
        relative;

    display:
        inline-block;

    overflow:
        hidden;

    padding:
        2px 3px;

    color:
        #d5d8dc;

    font-weight:
        700;

    letter-spacing:
        .12em;

}


/* =========================================================
   CASAI — ONE TIME SHINE
========================================================= */

.footer-credit-brand::after {

    content:
        "";

    position:
        absolute;

    top:
        -30%;

    bottom:
        -30%;

    left:
        -65%;

    width:
        42%;

    pointer-events:
        none;

    background:
        linear-gradient(
            105deg,
            transparent 0%,
            rgba(255, 255, 255, .08) 22%,
            rgba(255, 255, 255, .55) 48%,
            rgba(255, 255, 255, .95) 50%,
            rgba(255, 255, 255, .55) 52%,
            rgba(255, 255, 255, .08) 78%,
            transparent 100%
        );

    filter:
        blur(2px);

    transform:
        skewX(-18deg);

    opacity:
        0;

}

.footer-credit-brand.is-shining::after {

    opacity:
        1;

    animation:
        footerCasaiShine
        2.5s
        cubic-bezier(.22, .61, .36, 1)
        .2s
        1
        forwards;

}


/* =========================================================
   SHINE ANIMATION
========================================================= */

@keyframes footerCasaiShine {

    from {

        left:
            -65%;

    }

    to {

        left:
            125%;

    }

}


/* =========================================================
   TABLET
========================================================= */

@media (
    max-width: 1000px
) {

    .footer {

        padding:
            68px 0 22px;

    }

    .footer-main {

        grid-template-columns:
            1.25fr
            1fr;

        gap:
            48px
            65px;

        padding-bottom:
            55px;

    }

    .footer-social-column {

        max-width:
            420px;

    }

    /*
        Sigue teniendo exactamente dos columnas:
        copyright + volver arriba.
    */

    .footer-bottom {

        grid-template-columns:
            1fr auto;

    }

}

/* =========================================================
   MOBILE
========================================================= */

@media (
    max-width: 650px
) {

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

       Mucho más compacto que antes.
    ===================================================== */

    .footer {

        padding:
            46px 0 18px;

    }

    /* =====================================================
       MAIN
    ===================================================== */

    .footer-main {

        grid-template-columns:
            1fr;

        gap:
            32px;

        padding-bottom:
            38px;

    }

    /* =====================================================
       BRAND
    ===================================================== */

    .footer-brand > span {

        font-size:
            36px;

    }

    .footer-brand small {

        margin-top:
            8px;

        font-size:
            7px;

    }

    .footer-brand-text {

        max-width:
            280px;

        margin-top:
            20px;

        font-size:
            12px;

        line-height:
            1.55;

    }

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

    .footer-book {

        margin-top:
            19px;

    }

    .footer-book-arrow {

        width:
            34px;

        height:
            34px;

    }

    /* =====================================================
       TITLES
    ===================================================== */

    .footer-column-title {

        margin-bottom:
            14px;

        font-size:
            8px;

    }

    /* =====================================================
       NAVIGATION

       Dos columnas para ahorrar bastante altura.
    ===================================================== */

    .footer-nav {

        display:
            grid;

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

        width:
            100%;

        gap:
            11px
            24px;

    }

    .footer-nav a {

        font-size:
            11px;

    }

    /* =====================================================
       CONTACT
    ===================================================== */

    .footer-contact {

        gap:
            9px;

    }

    .footer-contact a {

        font-size:
            11px;

    }

    .footer-contact p {

        margin-top:
            5px;

        font-size:
            10px;

    }

    /* =====================================================
       SOCIAL

       Antes medían 60px.
       Ahora son bastante más compactas.
    ===================================================== */

    .footer-social-link {

        min-height:
            50px;

        grid-template-columns:
            34px
            1fr
            auto;

        gap:
            10px;

    }

    .footer-social-icon {

        width:
            32px;

        height:
            32px;

        font-size:
            13px;

    }

    .footer-social-name {

        font-size:
            11px;

    }

    /* =====================================================
       BOTTOM

       En móvil copyright queda a la izquierda
       y volver arriba a la derecha.

       NO los ponemos uno debajo del otro.
    ===================================================== */

    .footer-bottom {

        min-height:
            50px;

        padding-top:
            16px;

        display:
            grid;

        grid-template-columns:
            1fr
            auto;

        align-items:
            center;

        gap:
            15px;

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

        font-size:
            9px;

    }

    /* =====================================================
       COPYRIGHT
    ===================================================== */

    .footer-bottom-left {

        display:
            flex;

        flex-direction:
            column;

        align-items:
            flex-start;

        gap:
            3px;

        line-height:
            1.35;

    }

    /*
        En celular escondemos solamente el punto.
    */

    .footer-dot {

        display:
            none;

    }

    /* =====================================================
       BACK TOP
    ===================================================== */

    .footer-back-top {

        justify-self:
            end;

        gap:
            7px;

        white-space:
            nowrap;

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

        font-size:
            9px;

    }

    .footer-back-top span {

        width:
            28px;

        height:
            28px;

    }

    .footer-bottom-right {

        gap:
            14px;

    }


    .footer-credit {

        gap:
            5px;

        font-size:
            10px;

    }


    .footer-credit-brand {

        letter-spacing:
            .09em;

    }

}

/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (
    max-width: 380px
) {

    .footer {

        padding-top:
            40px;

    }

    .footer-main {

        gap:
            28px;

    }

    .footer-bottom {

        gap:
            10px;

    }

    /*
        En pantallas muy chicas dejamos sólo © + marca,
        evitando que el footer inferior se rompa.
    */

    .footer-bottom-left
    span:last-child {

        display:
            none;

    }

}

/* =========================================================
   REVEAL
========================================================= */

.reveal {

    opacity:
        0;

    transform:
        translateY(35px);

    transition:
        opacity .8s ease,
        transform .8s
        cubic-bezier(
            .2,
            .7,
            .2,
            1
        );

}

.reveal.visible {

    opacity:
        1;

    transform:
        translateY(0);

}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (
    max-width: 1050px
) {

    .nav,
    .header-book {

        display:
            none;

    }

    .menu-button {

        display:
            grid;

        place-items:
            center;

        color:
            var(--text);

    }

    .nav.active {

        position:
            absolute;

        display:
            flex;

        flex-direction:
            column;

        align-items:
            flex-start;

        gap:
            0;

        top:
            100%;

        left:
            0;

        width:
            100%;

        padding:
            20px 4%;

        background:
            rgba(8, 8, 8, .94);

        -webkit-backdrop-filter:
            blur(18px)
            saturate(140%);

        backdrop-filter:
            blur(18px)
            saturate(140%);

        border-top:
            1px solid
            var(--border-dark);

        border-bottom:
            1px solid
            var(--border-dark);

    }

    .nav.active a {

        width:
            100%;

        padding:
            17px 0;

        border-bottom:
            1px solid
            var(--border-dark);

        outline:
            none;

        -webkit-tap-highlight-color:
            transparent;

    }

}

/* =========================================================
   DARK THEME — GLOBAL CANVAS

   Esta capa cromática conserva la geometría y las animaciones
   existentes. Los fondos estructurales comparten el mismo canvas
   para que carga, rebote y cambios de sección nunca revelen blanco.
========================================================= */

main {
    background:
        var(--bg) !important;

    color:
        var(--text);
}

.site-fullbleed {
    background-color: var(--bg);
}

/* =========================================================
   DARK THEME — HEADER / SAFE AREAS
========================================================= */

.header {
    padding-right: var(--safe-right);
    padding-left: var(--safe-left);
    color: var(--text);
}

.header-container {
    height: calc(68px + var(--safe-top));
    padding-top: var(--safe-top);
}

.header.scrolled,
body.hero-photo-active .header,
body.hero-photo-active .header.scrolled {
    background: rgba(8, 8, 8, .68);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    backdrop-filter: blur(18px) saturate(140%);
    box-shadow: 0 1px 0 var(--line-dark);
}

.nav a,
.menu-button,
.menu-button svg {
    color: var(--text);
}

.nav a::after {
    background: var(--gold);
}

.header-book {
    border-color: rgba(255, 255, 255, .22);
    background: var(--glass);
    color: var(--text);
}

.header-book:hover {
    border-color: var(--text);
    background: var(--text);
    color: var(--bg);
}

.nav.active {
    color: var(--text);
    background: rgba(8, 8, 8, .94);
    border-color: var(--border-dark);
}

/* =========================================================
   DARK THEME — HERO

   Sólo cambia el estado cromático inicial. La fotografía,
   la escala y la timeline de ScrollTrigger permanecen intactas.
========================================================= */

.ns-hero,
.ns-hero-sticky,
.ns-hero-intro {
    background: var(--bg);
    color: var(--text);
}

.ns-hero-brand-line {
    color: var(--text);
}

.ns-hero-meta {
    color: var(--gold-soft);
}

.ns-hero-action-primary {
    background: var(--text);
    color: var(--bg);
    box-shadow: 0 15px 35px rgba(0, 0, 0, .35);
}

.ns-hero-action-secondary {
    border-color: rgba(255, 255, 255, .18);
    background: var(--glass);
    color: var(--text);
}

.ns-hero-scroll > span {
    color: var(--text-soft);
}

.ns-hero-scroll-line {
    background: rgba(255, 255, 255, .16);
}

.ns-hero-scroll-line > div {
    background: var(--text);
}

@media (hover: hover) {
    .ns-hero-action-primary:hover {
        background: var(--gold-soft);
    }

    .ns-hero-action-secondary:hover {
        border-color: rgba(255, 255, 255, .42);
        background: var(--glass-strong);
    }
}

/* =========================================================
   DARK THEME — MARQUEE
========================================================= */

.marquee {
    background: linear-gradient(180deg, var(--bg) 0%, var(--bg-soft) 50%, var(--bg) 100%);
}

.marquee::before,
.marquee::after {
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, .04) 12%,
        rgba(255, 255, 255, .12) 50%,
        rgba(255, 255, 255, .04) 88%,
        transparent 100%
    );
}

.marquee-item {
    color: var(--text-soft);
}

.marquee-brand {
    color: var(--text);
    background: linear-gradient(135deg, rgba(181, 138, 69, .12), rgba(255, 255, 255, .025));
}

/* =========================================================
   DARK THEME — SERVICES
========================================================= */

.services {
    background: var(--bg);
    color: var(--text);
}

.services-description,
.services-signature p,
.service-content p,
.services-help p {
    color: var(--text-soft);
}

.services-signature-top,
.service-content h3,
.services-help > a {
    color: var(--text);
}

.services-signature-line {
    background: var(--line-dark);
}

.service-card {
    border-color: var(--border-dark);
    background: rgba(17, 17, 17, .86);
    color: var(--text);
    box-shadow:
        0 18px 48px rgba(0, 0, 0, .24),
        inset 0 1px 0 rgba(255, 255, 255, .04);
}

.service-card-bg {
    background: linear-gradient(120deg, #201a12 0%, #171717 65%, #0f0f0f 100%);
}

.service-category,
.service-price span {
    color: var(--text-muted);
}

.service-price {
    border-color: var(--border-dark);
    background: var(--surface-soft);
}

.service-price strong {
    color: var(--text);
}

.service-price-consult strong,
.services-help > div:nth-child(2) > span {
    color: var(--gold-soft);
}

.service-icon,
.services-help-icon {
    border-color: var(--border-dark);
    background: var(--surface-raised);
    color: var(--gold-soft);
    box-shadow: 0 10px 25px rgba(0, 0, 0, .22);
}

.services-help {
    border-color: rgba(181, 138, 69, .24);
    background: linear-gradient(135deg, rgba(181, 138, 69, .12), rgba(255, 255, 255, .035));
}

/* =========================================================
   DARK THEME — ABOUT
========================================================= */

.about {
    background: var(--bg-soft);
    color: var(--text);
}

.about-image-main {
    background: var(--surface-raised);
    box-shadow: 0 32px 90px rgba(0, 0, 0, .42);
}

.about-image-secondary {
    background: rgba(255, 255, 255, .08);
    box-shadow: 0 28px 70px rgba(0, 0, 0, .42);
}

.about-visual-number,
.about-manifesto strong,
.about-value h3,
.about-signature > div > span {
    color: var(--text);
}

.about-manifesto p,
.about-description,
.about-value p,
.about-signature > p {
    color: var(--text-soft);
}

.about-value {
    border-color: var(--border-dark);
    background: linear-gradient(145deg, var(--surface-raised) 0%, var(--surface) 100%);
    box-shadow:
        0 14px 38px rgba(0, 0, 0, .26),
        inset 0 1px 0 rgba(255, 255, 255, .045);
}

.about-value-icon {
    border-color: var(--border-dark);
    background: var(--surface-soft);
    color: var(--text);
}

.about-signature {
    border-color: var(--border-dark);
}

@media (hover: hover) {
    .about-value:hover .about-value-icon {
        background: var(--gold);
        color: var(--bg);
    }
}

/* =========================================================
   EXPERIENCE — PREMIUM SILVER
========================================================= */

.experience {

    position:
        relative;

    isolation:
        isolate;

    color:
        #ffffff;

    /*
        Gris plata / graphite premium.

        No es simplemente gris:
        combina distintas temperaturas de plata para
        producir profundidad y apariencia metálica.
    */

    background:

        /* brillo superior izquierdo */
        radial-gradient(
            circle at 12% 8%,
            rgba(
                255,
                255,
                255,
                .13
            ) 0%,
            transparent 26%
        ),

        /* brillo metálico central */
        radial-gradient(
            ellipse at 52% 28%,
            rgba(
                210,
                215,
                220,
                .09
            ) 0%,
            transparent 38%
        ),

        /* profundidad inferior derecha */
        radial-gradient(
            circle at 88% 85%,
            rgba(
                0,
                0,
                0,
                .22
            ) 0%,
            transparent 34%
        ),

        /* base plata graphite */
        linear-gradient(
            135deg,

            #27292c 0%,

            #36393d 24%,

            #474a4e 48%,

            #323539 72%,

            #232528 100%
        );

}

/* =========================================================
   EXPERIENCE — TOP BLEND
========================================================= */

.experience::before {

    content:
        "";

    position:
        absolute;

    z-index:
        1;

    left:
        0;

    right:
        0;

    top:
        0;

    height:
        180px;

    pointer-events:
        none;

    background:
        linear-gradient(
            to bottom,

            var(--bg) 0%,

            rgba(
                8,
                8,
                8,
                .68
            ) 28%,

            rgba(
                8,
                8,
                8,
                .22
            ) 62%,

            transparent 100%
        );

}

/* =========================================================
   EXPERIENCE — BOTTOM BLEND
========================================================= */

.experience::after {

    content:
        "";

    position:
        absolute;

    z-index:
        1;

    left:
        0;

    right:
        0;

    bottom:
        0;

    height:
        180px;

    pointer-events:
        none;

    background:
        linear-gradient(
            to bottom,

            transparent 0%,

            rgba(
                8,
                8,
                8,
                .22
            ) 38%,

            rgba(
                8,
                8,
                8,
                .68
            ) 72%,

            var(--bg) 100%
        );

}

/* =========================================================
   DARK THEME — CUTS CAROUSEL
========================================================= */

.cuts-showcase {
    background: var(--bg-soft);
    color: var(--text);
}

.cuts-showcase-heading p,
.cuts-drag-hint {
    color: var(--text-soft);
}

.cuts-slide-image {
    background: var(--surface-raised);
}

.cuts-slide-image::after {
    border-color: var(--border-dark);
}

.cuts-pagination-dot {
    background: var(--text);
    opacity: .24;
}

.cuts-pagination-dot.is-active {
    background: var(--gold);
    opacity: 1;
}

/* =========================================================
   DARK THEME — REVIEWS
========================================================= */

.reviews {
    background: var(--bg);
    color: var(--text);
}

.reviews-score-card {
    border-color: var(--border-dark);
    background: linear-gradient(145deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .035));
    box-shadow:
        0 22px 60px rgba(0, 0, 0, .30),
        inset 0 1px 0 rgba(255, 255, 255, .06);
}

.reviews-score-info strong,
.reviews-google-mark span,
.review-author strong {
    color: var(--text);
}

.reviews-score-info > span,
.review-author span,
.review-source {
    color: var(--text-muted);
}

.reviews-google-mark,
.review-avatar {
    border-color: var(--border-dark);
    background: var(--surface-raised);
    color: var(--gold-soft);
    box-shadow: 0 8px 22px rgba(0, 0, 0, .22);
}

.review-card,
.review-card-featured {
    border-color: var(--border-dark);
    background: linear-gradient(145deg, var(--surface-raised) 0%, var(--surface) 100%);
    color: var(--text);
    box-shadow:
        0 22px 58px rgba(0, 0, 0, .28),
        inset 0 1px 0 rgba(255, 255, 255, .04);
}

.review-card-featured {
    background: linear-gradient(145deg, #211a12 0%, var(--surface) 58%, #18130d 100%);
}

.review-card::before {
    background: radial-gradient(circle, rgba(255, 255, 255, .07) 0%, rgba(255, 255, 255, .015) 40%, transparent 70%);
}

.review-card-featured::before {
    background: radial-gradient(circle, rgba(181, 138, 69, .20), transparent 70%);
}

.review-number {
    color: rgba(255, 255, 255, .30);
}

.review-card > p,
.review-card-featured > p {
    color: rgba(255, 255, 255, .88);
}

.review-bottom,
.review-card-featured .review-bottom {
    border-top-color: var(--border-dark);
}

/* =========================================================
   DARK THEME — BOOKING / LIQUID GLASS
========================================================= */

.booking {
    background:
        radial-gradient(circle at 15% 10%, rgba(181, 138, 69, .34) 0%, transparent 34%),
        radial-gradient(circle at 88% 78%, rgba(108, 75, 34, .30) 0%, transparent 34%),
        radial-gradient(circle at 75% 5%, rgba(255, 229, 180, .10) 0%, transparent 30%),
        linear-gradient(125deg, #15110c 0%, #0d0c0a 42%, var(--bg) 100%);
}

.booking::before {
    background: linear-gradient(to bottom, var(--bg) 0%, rgba(8, 8, 8, .72) 28%, rgba(8, 8, 8, .20) 68%, transparent 100%);
}

.booking::after {
    background: linear-gradient(to bottom, transparent 0%, rgba(8, 8, 8, .20) 43%, rgba(8, 8, 8, .68) 75%, var(--bg) 100%);
}

.booking-form {
    border-color: rgba(255, 255, 255, .16);
    background: linear-gradient(135deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .035));
    box-shadow:
        0 30px 85px rgba(0, 0, 0, .36),
        inset 0 1px 0 rgba(255, 255, 255, .08);
}

.booking-input-wrapper {
    border-color: rgba(255, 255, 255, .13);
    background: rgba(255, 255, 255, .055);
    color: var(--text-soft);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}

.booking-input-wrapper:focus-within {
    border-color: var(--gold-soft);
    background: rgba(255, 255, 255, .075);
    box-shadow: 0 0 0 3px rgba(181, 138, 69, .12);
}

.booking-input-wrapper input,
.booking-input-wrapper select {
    color: var(--text);
}

.booking-input-wrapper input::placeholder {
    color: var(--text-muted);
}

.booking-input-wrapper select option {
    background: var(--surface);
    color: var(--text);
}

.booking-submit {
    border-color: rgba(181, 138, 69, .58);
    background: var(--gold);
    color: var(--bg);
}

.booking-submit-icon {
    background: var(--bg);
    color: var(--text);
}

.booking-input-wrapper.is-invalid {
    border-color: rgba(225, 105, 85, .78);
    box-shadow: 0 0 0 3px rgba(225, 105, 85, .10);
}

.booking-input-wrapper input:-webkit-autofill,
.booking-input-wrapper input:-webkit-autofill:hover,
.booking-input-wrapper input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--text) !important;
    caret-color: var(--text);
    box-shadow: 0 0 0 1000px var(--surface) inset !important;
    transition: background-color 9999s ease-out 0s;
}

/* =========================================================
   DARK THEME — CONTACT
========================================================= */

.contact {
    background: var(--bg) !important;
    color: var(--text);
}

.contact::before {
    background: linear-gradient(
        to bottom,
        var(--bg) 0%,
        rgba(8, 8, 8, .98) 16%,
        rgba(8, 8, 8, .88) 42%,
        rgba(8, 8, 8, .34) 78%,
        transparent 100%
    );
}

.contact-background img {
    filter: saturate(.62) contrast(1.02) brightness(.58);
    opacity: .46;
}

.contact-background-fade {
    background:
        linear-gradient(to bottom, var(--bg) 0%, rgba(8, 8, 8, .90) 10%, rgba(8, 8, 8, .34) 32%, rgba(8, 8, 8, .18) 66%, rgba(8, 8, 8, .84) 92%, var(--bg) 100%),
        linear-gradient(90deg, var(--bg) 0%, rgba(8, 8, 8, .78) 8%, rgba(8, 8, 8, .18) 30%, rgba(8, 8, 8, .24) 70%, rgba(8, 8, 8, .78) 92%, var(--bg) 100%);
}

.contact-heading > p,
.contact-card p,
.contact-hours span,
.contact-map-location span {
    color: var(--text-soft);
}

.contact-card,
.contact-map-card {
    border-color: var(--border-dark);
    background: linear-gradient(145deg, rgba(27, 27, 27, .94), rgba(17, 17, 17, .96));
    color: var(--text);
    box-shadow:
        0 24px 70px rgba(0, 0, 0, .34),
        inset 0 1px 0 rgba(255, 255, 255, .045);
}

.contact-card::before {
    background: radial-gradient(circle, rgba(181, 138, 69, .14) 0%, rgba(255, 255, 255, .025) 38%, transparent 70%);
}

.contact-card:hover {
    box-shadow:
        0 28px 70px rgba(0, 0, 0, .42),
        inset 0 1px 0 rgba(255, 255, 255, .07);
}

.contact-card-icon {
    border-color: var(--border-dark);
    background: var(--surface-soft);
    color: var(--gold-soft);
    box-shadow: 0 8px 22px rgba(0, 0, 0, .24);
}

.contact-card:hover .contact-card-icon {
    background: var(--gold);
    color: var(--bg);
}

.contact-card h3,
.contact-hours strong,
.contact-links a,
.contact-map-header h3,
.contact-map-header > a,
.contact-map-location strong {
    color: var(--text);
}

.contact-links a,
.contact-map-header > a {
    border-color: var(--border-dark);
}

.contact-map-frame {
    background: var(--surface-soft);
}

.contact-map-frame iframe {
    filter: grayscale(.82) invert(.88) hue-rotate(180deg) saturate(.42) brightness(.72) contrast(1.05);
}

.contact-map-location {
    border-color: rgba(255, 255, 255, .14);
    background: rgba(8, 8, 8, .88);
    box-shadow: 0 16px 45px rgba(0, 0, 0, .34);
    -webkit-backdrop-filter: blur(14px) saturate(130%);
    backdrop-filter: blur(14px) saturate(130%);
}

.contact-map-location-icon {
    background: var(--gold);
    color: var(--bg);
}

/* =========================================================
   DARK THEME — SIGNATURE / FOOTER
========================================================= */

.nicolau-signature-section {
    background: linear-gradient(180deg, var(--bg) 0%, var(--bg-soft) 55%, var(--surface) 100%);
    color: var(--text);
}

.nicolau-signature-section::before {
    background: linear-gradient(90deg, transparent, var(--line-dark), transparent);
}

.nicolau-signature-section::after {
    background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, .025));
}

.nicolau-signature-stroke {
    stroke: var(--text);
}

.nicolau-signature-fill {
    fill: var(--text);
}

.nicolau-signature-section.is-static .nicolau-signature-stroke {
    stroke-dashoffset: 0;
    opacity: .14;
}

.nicolau-signature-section.is-static .nicolau-signature-fill {
    opacity: 1;
}

.footer {
    background: var(--surface);
    padding-bottom: calc(24px + var(--safe-bottom));
}

/* =========================================================
   DARK THEME — INTERACTION FIXES

   Reveal y hover comparten transform. Esta composición más
   específica recupera el lift original una vez revelada la card.
========================================================= */

@media (hover: hover) {
    .service-card.reveal.visible:hover {
        transform: translateX(8px);
        border-color: rgba(181, 138, 69, .24);
        box-shadow:
            0 26px 64px rgba(0, 0, 0, .38),
            inset 0 1px 0 rgba(255, 255, 255, .06);
    }

    .experience-card.reveal.visible:hover {
        transform: translateY(-8px);
    }

    .review-card.reveal.visible:hover {
        transform: translateY(-7px);
        border-color: rgba(181, 138, 69, .24);
        box-shadow:
            0 30px 78px rgba(0, 0, 0, .42),
            inset 0 1px 0 rgba(255, 255, 255, .055);
    }

    .about-value:hover {
        border-color: rgba(181, 138, 69, .24);
        box-shadow:
            0 24px 58px rgba(0, 0, 0, .38),
            inset 0 1px 0 rgba(255, 255, 255, .055);
    }

    .booking-submit:hover {
        background: var(--gold-soft);
        color: var(--bg);
        box-shadow: 0 20px 45px rgba(0, 0, 0, .34);
    }
}

@media (hover: none) {
    .booking-submit:hover {
        background: var(--gold);
        color: var(--bg);
    }
}

/* =========================================================
   DARK THEME — MOBILE / IPHONE
========================================================= */

@media (max-width: 650px) {
    .ns-hero-meta {
        left: max(20px, calc(var(--safe-left) + 14px));
        right: max(20px, calc(var(--safe-right) + 14px));
    }

    .ns-hero-actions {
        right: max(18px, calc(var(--safe-right) + 14px));
        left: max(18px, calc(var(--safe-left) + 14px));
        width: auto;
        transform: none;
    }

    .ns-hero-final {
        right: max(22px, calc(var(--safe-right) + 14px));
        left: max(22px, calc(var(--safe-left) + 14px));
        width: auto;
    }

    .booking-input-wrapper input,
    .booking-input-wrapper select {
        font-size: 16px;
    }

    .contact::before {
        background: linear-gradient(to bottom, var(--bg) 0%, rgba(8, 8, 8, .94) 32%, rgba(8, 8, 8, .56) 68%, transparent 100%);
    }

    .contact-background-fade {
        background: linear-gradient(180deg, var(--bg) 0%, rgba(8, 8, 8, .88) 12%, rgba(8, 8, 8, .30) 34%, rgba(8, 8, 8, .38) 72%, rgba(8, 8, 8, .86) 92%, var(--bg) 100%);
    }

    .footer {
        padding-bottom: calc(18px + var(--safe-bottom));
    }
}

@media (max-width: 520px) {
    .header-container {
        height: calc(76px + var(--safe-top));
    }
}

@media (
    max-width: 520px
) {

    .container {

        width:
            90%;

    }

    .header-container {

        height:
            calc(76px + var(--safe-top));

    }

}

#trabajos {
    scroll-margin-top: calc(108px + var(--safe-top));
}

.menu-button:focus-visible {
    outline: 2px solid var(--gold-soft);
    outline-offset: 3px;
}

@media (max-width: 650px) {
    .container:not(.header-container) {
        width: auto;
        margin-left: max(5%, calc(var(--safe-left) + 12px));
        margin-right: max(5%, calc(var(--safe-right) + 12px));
    }
}

@media (orientation: landscape) and (max-width: 950px) {
    .container:not(.header-container) {
        width: auto;
        margin-left: max(4%, calc(var(--safe-left) + 12px));
        margin-right: max(4%, calc(var(--safe-right) + 12px));
    }

    .ns-hero-meta {
        left: max(4vw, calc(var(--safe-left) + 14px));
        right: max(4vw, calc(var(--safe-right) + 14px));
    }

    .ns-hero-final {
        left: max(28px, calc(var(--safe-left) + 14px));
    }
}

@media (orientation: landscape) and (max-width: 950px) and (max-height: 500px) {
    .ns-hero-sticky {
        height: 100vh;
        height: 100dvh;
        min-height: 100svh;
    }

    .ns-hero-brand {
        top: 47%;
    }

    .ns-hero-brand-line {
        font-size: clamp(74px, 12vw, 108px);
        line-height: .78;
    }

    .ns-hero-meta {
        top: 49%;
        font-size: 10px;
        letter-spacing: .18em;
    }

    .ns-hero-actions {
        bottom: 28px;
        gap: 10px;
    }

    .ns-hero-action {
        min-width: 142px;
        height: 46px;
        padding-inline: 20px;
    }

    .ns-hero-scroll {
        display: none;
    }

    .ns-hero-final {
        bottom: 24px;
        width: min(560px, 76vw);
    }

    .ns-hero-final-label {
        margin-bottom: 10px;
    }

    .ns-hero-final h2 {
        font-size: clamp(42px, 8vw, 66px);
        line-height: .9;
    }

    .ns-hero-final-link {
        margin-top: 18px;
    }
}

/* =========================================================
   ACCESSIBILITY
========================================================= */



/* =========================================================
   FIX FINAL — EXPERIENCE MOBILE

   IMPORTANTE:
   este bloque debe quedar AL FINAL DE styles.css
========================================================= */

@media (
    max-width: 650px
) {

    /* =====================================================
       CARDS
    ===================================================== */

    .experience .experience-card,
    .experience .experience-card-two,
    .experience .experience-card-three {

        min-height:
            0 !important;

        height:
            auto !important;

        margin-top:
            0 !important;

        padding:
            16px !important;

    }

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

    .experience .experience-card-content {

        margin-top:
            0 !important;

        padding-top:
            22px !important;

    }

    /* =====================================================
       TITLE

       Esto elimina el margin-top:150px del CSS viejo.
    ===================================================== */

    .experience .experience-card h3 {

        margin-top:
            0 !important;

        font-size:
            clamp(
                28px,
                8.4vw,
                34px
            );

        line-height:
            1;

    }

    /* =====================================================
       TEXT
    ===================================================== */

    .experience .experience-card p {

        margin-top:
            9px;

        font-size:
            13px;

        line-height:
            1.48;

    }

    /* =====================================================
       TOP
    ===================================================== */

    .experience .experience-card-top {

        min-height:
            44px;

    }

    .experience .experience-step {

        font-size:
            32px;

    }

    .experience .experience-icon {

        width:
            44px;

        height:
            44px;

        border-radius:
            14px;

    }

    .experience .experience-icon svg {

        width:
            17px;

        height:
            17px;

    }

    /* =====================================================
       BOTTOM
    ===================================================== */

    .experience .experience-card-bottom {

        margin-top:
            14px;

        padding-top:
            11px;

        gap:
            6px;

    }

    .experience .experience-card-bottom span {

        padding:
            5px
            8px;

        font-size:
            9px;

    }

}

/* =========================================================
   FIX FINAL — BOOKING → CONTACT MOBILE

   Elimina definitivamente el hairline de Safari/iPhone.
========================================================= */

@media (
    max-width: 650px
) {

    /* =====================================================
       BOOKING

       El fade termina exactamente dentro de la sección.
    ===================================================== */

    .booking::after {

        bottom:
            0 !important;

        left:
            -6% !important;

        right:
            -6% !important;

        height:
            205px !important;

    }

    /* =====================================================
       OVERLAP

       Contacto se monta algunos píxeles sobre Booking.
       Así Safari no puede mostrar el borde entre capas.
    ===================================================== */

    .booking + .contact {

        margin-top:
            -8px !important;

        border-top:
            0 !important;

        outline:
            0 !important;

    }

    /* =====================================================
       CONTACT

       Los primeros píxeles continúan el canvas oscuro.
    ===================================================== */

    .contact {

        border-top:
            0 !important;

        outline:
            0 !important;

        background:
            var(--bg) !important;

    }

    .contact::before {

        top:
            -8px;

        height:
            128px;

    }

}

/* =========================================================
   SAFARI EDGE-TO-EDGE
========================================================= */

@supports (
    padding-top:
        env(safe-area-inset-top)
) {

    html,
    body {

        min-height:
            100%;

    }

    body {

        overscroll-behavior-y:
            none;

    }

}

/* =========================================================
   REAL FULL-BLEED BACKGROUND
========================================================= */

html,
body {

    margin:
        0;

    padding:
        0;

    width:
        100%;

    min-height:
        100%;

    background:
        var(--bg) !important;

}

/* =========================================================
   FULL-BLEED CANVAS

   Es una capa REAL que vive detrás de todo el sitio.
   Se ajusta exactamente al viewport visual.
========================================================= */

.site-fullbleed {

    position:
        fixed;

    z-index:
        0;

    left:
        0;

    right:
        0;

    top:
        0;

    bottom:
        0;

    width:
        100%;

    pointer-events:
        none;

    background:
        var(--bg);

    background-size:
        cover;

    background-position:
        center center;

    background-repeat:
        no-repeat;

    transform:
        translateZ(0);

    backface-visibility:
        hidden;

}

/* =========================================================
   SITE CONTENT ABOVE FULL-BLEED
========================================================= */

main {

    position:
        relative;

    z-index:
        1;

}

.header {

    z-index:
        1000;

}

/* =========================================================
   MOBILE
========================================================= */

@media (
    max-width: 650px
) {

    .site-fullbleed {
        display: none !important;
    }

    .header {
        position: fixed;
    }

    .skip-link {
        position: absolute;
    }


    .ns-hero-sticky {

        top:
            8px;

        height:
            calc(
                100dvh - 16px
            );

        min-height:
            calc(
                100svh - 16px
            );

        background:
            transparent !important;

    }



}

/* =========================================================
   HEADER OVER FULL-BLEED HERO
========================================================= */

@media (
    max-width: 650px
) {

    .header,
    .header.scrolled,
    body.hero-photo-active .header,
    body.hero-photo-active .header.scrolled {

        background:
            linear-gradient(
                to bottom,

                #080808 0%,

                rgba(8, 8, 8, .92) 24%,

                rgba(8, 8, 8, .68) 58%,

                rgba(8, 8, 8, .38) 100%
            );

        -webkit-backdrop-filter:
            blur(18px)
            saturate(140%);

        backdrop-filter:
            blur(18px)
            saturate(140%);

        box-shadow:
            none;

    }

}


/* =========================================================
   CONTINUOUS DARK CANVAS

   Todas las secciones estructurales comparten exactamente
   el mismo negro. Las variaciones de negro se reservan para
   cards, superficies, bordes y elementos internos.
========================================================= */


main,
.ns-hero,

.ns-hero-intro,
.marquee,
.services,
.about,

.cuts-showcase,
.products-showcase,
.reviews,
.contact,
.nicolau-signature-section,
.footer {

    background:
        var(--bg) !important;

}


/* =========================================================
   REMOVE SECTION-LEVEL BACKGROUND GRADIENTS

   Los gradientes internos de cards y elementos decorativos
   permanecen intactos.
========================================================= */

.marquee,
.about,

.cuts-showcase,
.reviews,
.nicolau-signature-section {

    background-image:
        none !important;

}

/* =========================================================
   BOOKING — DARK GOLD + BLACK LIQUID GLASS

   - Fondo general dorado oscuro.
   - Card del formulario liquid glass negra.
   - Campos blancos.
   - Botón principal negro.
========================================================= */


/* =========================================================
   SECTION BACKGROUND — DARK GOLD
========================================================= */

.booking {

    color:
        #ffffff;

    background:

        /* luz dorada superior muy controlada */
        radial-gradient(
            circle at 15% 8%,
            rgba(
                211,
                169,
                96,
                .26
            ) 0%,
            transparent 30%
        ),

        /* profundidad inferior */
        radial-gradient(
            circle at 88% 82%,
            rgba(
                72,
                44,
                16,
                .42
            ) 0%,
            transparent 34%
        ),

        /* brillo sutil */
        radial-gradient(
            circle at 72% 10%,
            rgba(
                255,
                218,
                148,
                .08
            ) 0%,
            transparent 28%
        ),

        /* color principal */
        linear-gradient(
            130deg,

            #8a642f 0%,

            #745022 30%,

            #5b3c18 62%,

            #38230f 100%
        )

        !important;

}



/* =========================================================
   LARGE BACKGROUND WORD
========================================================= */

.booking-background-word {

    -webkit-text-stroke:
        1px
        rgba(
            255,
            255,
            255,
            .07
        );

}



/* =========================================================
   BACKGROUND GLOWS

   Conservamos los efectos, pero evitando que aclaren
   demasiado el fondo dorado.
========================================================= */

.booking-glow {

    opacity:
        .55;

}



/* =========================================================
   FORM CARD — BLACK LIQUID GLASS
========================================================= */

.booking-form {

    position:
        relative;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .15
        );

    background:

        linear-gradient(
            145deg,

            rgba(
                24,
                24,
                24,
                .84
            ) 0%,

            rgba(
                8,
                8,
                8,
                .72
            ) 52%,

            rgba(
                17,
                17,
                17,
                .80
            ) 100%
        )

        !important;

    -webkit-backdrop-filter:
        blur(28px)
        saturate(150%);

    backdrop-filter:
        blur(28px)
        saturate(150%);

    box-shadow:

        0
        35px
        90px
        rgba(
            0,
            0,
            0,
            .42
        ),

        inset
        0
        1px
        0
        rgba(
            255,
            255,
            255,
            .10
        ),

        inset
        0
        -1px
        0
        rgba(
            255,
            255,
            255,
            .035
        );

}



/* =========================================================
   LIQUID GLASS LIGHT REFLECTION
========================================================= */

.booking-form::before {

    content:
        "";

    position:
        absolute;

    z-index:
        0;

    top:
        0;

    left:
        4%;

    right:
        4%;

    height:
        1px;

    pointer-events:
        none;

    background:
        linear-gradient(
            90deg,

            transparent,

            rgba(
                255,
                255,
                255,
                .36
            ),

            transparent
        );

}



/* =========================================================
   KEEP CONTENT ABOVE GLASS EFFECT
========================================================= */

.booking-form > * {

    position:
        relative;

    z-index:
        1;

}



/* =========================================================
   FORM LABELS
========================================================= */

.booking-field label,
.booking-form label {

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

}



/* =========================================================
   INPUT WRAPPER — WHITE
========================================================= */

.booking-input-wrapper {

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .88
        )

        !important;

    background:
        rgba(
            255,
            255,
            255,
            .96
        )

        !important;

    color:
        #111111;

    box-shadow:

        0
        8px
        24px
        rgba(
            0,
            0,
            0,
            .12
        ),

        inset
        0
        1px
        0
        rgba(
            255,
            255,
            255,
            1
        );

}



/* =========================================================
   INPUTS / SELECTS
========================================================= */

.booking-input-wrapper input,
.booking-input-wrapper select {

    color:
        #111111

        !important;

    background:
        transparent;

}



/* =========================================================
   PLACEHOLDERS
========================================================= */

.booking-input-wrapper input::placeholder {

    color:
        rgba(
            17,
            17,
            17,
            .48
        )

        !important;

}



/* =========================================================
   ICONS INSIDE INPUTS
========================================================= */

.booking-input-wrapper svg,
.booking-input-wrapper i {

    color:
        #80602e;

    stroke:
        currentColor;

}



/* =========================================================
   SELECT OPTIONS
========================================================= */

.booking-input-wrapper select option {

    background:
        #ffffff

        !important;

    color:
        #111111

        !important;

}



/* =========================================================
   FIELD FOCUS
========================================================= */

.booking-input-wrapper:focus-within {

    border-color:
        #d0aa69

        !important;

    background:
        #ffffff

        !important;

    box-shadow:

        0
        0
        0
        3px
        rgba(
            181,
            138,
            69,
            .20
        ),

        0
        12px
        30px
        rgba(
            0,
            0,
            0,
            .16
        );

}



/* =========================================================
   SUBMIT BUTTON — BLACK
========================================================= */

.booking-submit {

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .12
        )

        !important;

    background:
        #090909

        !important;

    color:
        #ffffff

        !important;

    box-shadow:

        0
        18px
        42px
        rgba(
            0,
            0,
            0,
            .34
        ),

        inset
        0
        1px
        0
        rgba(
            255,
            255,
            255,
            .08
        );

}


/* =========================================================
   BUTTON ICON — WHITE BOX / BLACK ARROW
========================================================= */

.booking-submit-icon {

    background:
        #ffffff

        !important;

    color:
        #111111

        !important;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .92
        );

    box-shadow:
        0
        5px
        16px
        rgba(
            0,
            0,
            0,
            .16
        );

}

/* =========================================================
   ARROW COLOR
========================================================= */

.booking-submit-icon svg {

    color:
        #111111

        !important;

    stroke:
        #111111

        !important;

}



/* =========================================================
   BUTTON HOVER — DESKTOP
========================================================= */

@media (
    hover: hover
) {

    .booking-submit:hover {

        background:
            #171717

            !important;

        color:
            #ffffff

            !important;

        transform:
            translateY(-2px);

        box-shadow:

            0
            24px
            52px
            rgba(
                0,
                0,
                0,
                .42
            ),

            inset
            0
            1px
            0
            rgba(
                255,
                255,
                255,
                .10
            );

    }


    .booking-submit:hover
    .booking-submit-icon {

        background:
            #ffffff

            !important;

        color:
            #111111

            !important;

        transform:
            translate(
                2px,
                -2px
            );

    }

}



/* =========================================================
   INVALID FIELD
========================================================= */

.booking-input-wrapper.is-invalid {

    border-color:
        #b84f43

        !important;

    box-shadow:
        0
        0
        0
        3px
        rgba(
            184,
            79,
            67,
            .16
        );

}



/* =========================================================
   SAFARI / CHROME AUTOFILL

   Evita que el navegador vuelva oscuro el campo.
========================================================= */

.booking-input-wrapper
input:-webkit-autofill,

.booking-input-wrapper
input:-webkit-autofill:hover,

.booking-input-wrapper
input:-webkit-autofill:focus {

    -webkit-text-fill-color:
        #111111

        !important;

    caret-color:
        #111111;

    -webkit-box-shadow:
        0
        0
        0
        1000px
        #ffffff
        inset

        !important;

    box-shadow:
        0
        0
        0
        1000px
        #ffffff
        inset

        !important;

}

/* =========================================================
   CONTACT MAP — LIGHT MAP INSIDE DARK CARD
========================================================= */

.contact-map-card {

    background:
        linear-gradient(
            145deg,
            rgba(27, 27, 27, .96),
            rgba(17, 17, 17, .98)
        )
        !important;

    color:
        var(--text);

}


.contact-map-frame {

    background:
        #ffffff !important;

    color-scheme:
        light;

}


.contact-map-frame iframe {

    filter:
        none !important;

    opacity:
        1;

    color-scheme:
        light;

}


/* =========================================================
   FIX — ABOUT GALLERY IMAGE BLEED
========================================================= */

.about-image-main
.about-gallery-slide {

    transform:
        none !important;

}


/* Evita que el hover vuelva a agrandar todas las slides */

@media (
    hover: hover
) {

    .about-visual:hover
    .about-gallery-slide {

        transform:
            none !important;

    }

}


/* =========================================================
   CONTACT HOURS — FINAL ALIGNMENT
========================================================= */

.contact-hours {

    width:
        100%;

    display:
        flex;

    flex-direction:
        column;

    gap:
        14px;

}


.contact-hours-row {

    width:
        100%;

    display:
        grid;

    grid-template-columns:
        minmax(
            70px,
            auto
        )
        minmax(
            0,
            1fr
        );

    align-items:
        start;

    column-gap:
        18px;

}


.contact-hours-row > span {

    margin:
        0;

    color:
        var(--text-soft);

    text-align:
        left;

    white-space:
        nowrap;

}


.contact-hours-row > strong {

    margin:
        0;

    justify-self:
        end;

    color:
        var(--text);

    font-weight:
        500;

    line-height:
        1.45;

    text-align:
        right;

    white-space:
        nowrap;

}


/* =========================================================
   DOUBLE SHIFT
========================================================= */

.contact-hours-double {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-end;

    gap:
        2px;

}


.contact-hours-double > span {

    display:
        block;

    color:
        inherit;

    font-size:
        inherit;

    white-space:
        nowrap;

}


@media (
        max-width: 650px
    ) {

        .contact-card-hours
        .contact-card-body {

            padding-right:
                55px;

        }

        .contact-card-hours
        .contact-hours {

            margin-top:
                22px;

            gap:
                17px;

        }

        .contact-card-hours
        .contact-hours-row {

            grid-template-columns:
                82px
                minmax(
                    0,
                    1fr
                );

            column-gap:
                12px;

        }

        .contact-card-hours
        .contact-hours-row > span,
        .contact-card-hours
        .contact-hours-row > strong {

            font-size:
                13px;

        }

    }


    .contact-card-hours
    .contact-hours {

        margin-top:
            22px;

        gap:
            17px;

    }


    .contact-card-hours
    .contact-hours-row {

        grid-template-columns:
            82px
            minmax(
                0,
                1fr
            );

        column-gap:
            12px;

    }


    .contact-card-hours
    .contact-hours-row > span,
    .contact-card-hours
    .contact-hours-row > strong {

        font-size:
            13px;

    }




/* =========================================================
   REVIEWS MANUAL — GOOGLE
========================================================= */

.reviews-manual {

    position:
        relative;

    isolation:
        isolate;

    overflow:
        hidden;

    padding:
        clamp(
            110px,
            10vw,
            165px
        )
        0
        clamp(
            115px,
            10vw,
            165px
        );

    background:
        var(--bg) !important;

    color:
        var(--text);

}


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

.reviews-manual-header {

    display:
        grid;

    grid-template-columns:
        minmax(
            0,
            1.3fr
        )
        minmax(
            320px,
            .7fr
        );

    align-items:
        end;

    gap:
        clamp(
            55px,
            8vw,
            120px
        );

    margin-bottom:
        clamp(
            55px,
            7vw,
            90px
        );

}


/* =========================================================
   EYEBROW
========================================================= */

.reviews-manual-eyebrow {

    display:
        flex;

    align-items:
        center;

    gap:
        11px;

    margin-bottom:
        24px;

    color:
        var(--gold-soft);

    font-size:
        11px;

    font-weight:
        600;

    letter-spacing:
        .17em;

}


.reviews-manual-google-icon {

    width:
        31px;

    height:
        31px;

    display:
        grid;

    place-items:
        center;

    flex-shrink:
        0;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .13
        );

    border-radius:
        50%;

    background:
        rgba(
            255,
            255,
            255,
            .055
        );

    color:
        #ffffff;

    font-size:
        14px;

}


/* =========================================================
   TITLE
========================================================= */

.reviews-manual-heading h2 {

    max-width:
        850px;

    margin:
        0;

    font-family:
        var(--serif);

    font-size:
        clamp(
            58px,
            6.5vw,
            104px
        );

    font-weight:
        500;

    line-height:
        .89;

    letter-spacing:
        -.055em;

}


.reviews-manual-heading h2 em {

    display:
        block;

    color:
        var(--gold);

    font-weight:
        500;

    font-style:
        italic;

}


.reviews-manual-heading > p {

    max-width:
        520px;

    margin-top:
        14px;

    color:
        var(--text-soft);

    font-size:
        15px;

    line-height:
        1.65;

}


/* =========================================================
   RATING
========================================================= */

.reviews-manual-rating {

    position:
        relative;

    min-height:
        165px;

    padding:
        25px;

    display:
        grid;

    grid-template-columns:
        auto
        1fr
        auto;

    align-items:
        center;

    gap:
        20px;

    overflow:
        hidden;

    border:
        1px solid
        var(--border-dark);

    border-radius:
        28px;

    background:
        linear-gradient(
            145deg,
            rgba(
                255,
                255,
                255,
                .075
            ),
            rgba(
                255,
                255,
                255,
                .025
            )
        );

    box-shadow:
        0
        28px
        75px
        rgba(
            0,
            0,
            0,
            .28
        ),
        inset
        0
        1px
        0
        rgba(
            255,
            255,
            255,
            .06
        );

}


.reviews-manual-rating-number {

    font-family:
        var(--serif);

    font-size:
        clamp(
            65px,
            5.8vw,
            90px
        );

    font-weight:
        500;

    line-height:
        .85;

    letter-spacing:
        -.055em;

}


.reviews-manual-rating-info {

    min-width:
        0;

}


.reviews-manual-stars {

    color:
        var(--gold);

    font-size:
        14px;

    letter-spacing:
        2px;

}


.reviews-manual-rating-info > strong {

    display:
        block;

    margin-top:
        8px;

    color:
        var(--text);

    font-size:
        14px;

    font-weight:
        600;

}


.reviews-manual-rating-info > span {

    display:
        block;

    margin-top:
        4px;

    color:
        var(--text-muted);

    font-size:
        12px;

}


.reviews-manual-rating-google {

    width:
        44px;

    height:
        44px;

    display:
        grid;

    place-items:
        center;

    border:
        1px solid
        var(--border-dark);

    border-radius:
        14px;

    background:
        var(--surface-raised);

    color:
        var(--text);

    font-size:
        18px;

}


/* =========================================================
   CAROUSEL
========================================================= */

.reviews-manual-carousel {

    position:
        relative;

    width:
        100%;

}

/* =========================================================
   REVIEWS — CAROUSEL VIEWPORT
========================================================= */

.reviews-manual-viewport {

    position:
        relative;

    width:
        100%;

    /*
        Espacio interno para que:
        - la tarjeta pueda subir en hover
        - la sombra no se corte
    */

    padding:
        16px
        0
        48px;

    /*
        Compensamos el padding para no aumentar
        visualmente la separación de la sección.
    */

    margin-top:
        -16px;

    margin-bottom:
        -48px;

    overflow-x:
        auto;

    overflow-y:
        hidden;

    scroll-snap-type:
        x mandatory;

    scroll-behavior:
        auto;

    scrollbar-width:
        none;

    touch-action:
        pan-y;

    -webkit-overflow-scrolling:
        touch;

    -webkit-tap-highlight-color:
        transparent;

}


.reviews-manual-viewport::-webkit-scrollbar {

    display:
        none;

}

/* =========================================================
   REVIEWS — TRANSITION STATE
========================================================= */

.reviews-manual-viewport.is-animating {

    scroll-snap-type:
        none;

}


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

.reviews-manual-card {

    will-change:
        transform,
        opacity;

}
/* =========================================================
   TRACK
========================================================= */

.reviews-manual-track {

    display:
        flex;

    align-items:
        stretch;

    gap:
        18px;

}


/* =========================================================
   HOVER
========================================================= */

@media (
    hover: hover
) {

    .reviews-manual-card:hover {

        transform:
            translateY(-6px);

        border-color:
            rgba(
                181,
                138,
                69,
                .28
            );

        box-shadow:
            0
            30px
            75px
            rgba(
                0,
                0,
                0,
                .36
            );

    }

}


.reviews-manual-viewport::-webkit-scrollbar {

    display:
        none;

}


.reviews-manual-track {

    display:
        flex;

    align-items:
        stretch;

    gap:
        18px;

}


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

.reviews-manual-card {

    position:
        relative;

    flex:
        0 0
        calc(
            (
                100% -
                36px
            ) /
            3
        );

    min-width:
        0;

    min-height:
        370px;

    padding:
        27px;

    display:
        flex;

    flex-direction:
        column;

    scroll-snap-align:
        start;

    overflow:
        hidden;

    border:
        1px solid
        var(--border-dark);

    border-radius:
        28px;

    background:
        linear-gradient(
            145deg,
            var(--surface-raised)
            0%,
            var(--surface)
            100%
        );

    box-shadow:
        0
        22px
        60px
        rgba(
            0,
            0,
            0,
            .27
        );

    transition:
        transform
        .45s
        cubic-bezier(
            .16,
            1,
            .3,
            1
        ),
        border-color
        .35s ease,
        box-shadow
        .35s ease;

}


.reviews-manual-card::before {

    content:
        "";

    position:
        absolute;

    top:
        -110px;

    right:
        -110px;

    width:
        240px;

    height:
        240px;

    border-radius:
        50%;

    pointer-events:
        none;

    background:
        radial-gradient(
            circle,

            rgba(
                181,
                138,
                69,
                .12
            ),

            transparent
            70%
        );

}


@media (
    hover: hover
) {

    .reviews-manual-card:hover {

        transform:
            translateY(-6px);

        border-color:
            rgba(
                181,
                138,
                69,
                .28
            );

        box-shadow:
            0
            30px
            75px
            rgba(
                0,
                0,
                0,
                .36
            );

    }

}


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

.reviews-manual-card-top {

    position:
        relative;

    z-index:
        2;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        15px;

}


.reviews-manual-author {

    min-width:
        0;

    display:
        flex;

    align-items:
        center;

    gap:
        13px;

}


.reviews-manual-avatar {

    width:
        44px;

    height:
        44px;

    flex:
        0 0
        44px;

    display:
        grid;

    place-items:
        center;

    border:
        1px solid
        var(--border-dark);

    border-radius:
        50%;

    background:
        var(--surface-soft);

    color:
        var(--gold-soft);

    font-size:
        11px;

    font-weight:
        600;

    letter-spacing:
        .05em;

}


.reviews-manual-author-info {

    min-width:
        0;

}


.reviews-manual-author-info strong {

    display:
        block;

    overflow:
        hidden;

    color:
        var(--text);

    font-size:
        14px;

    font-weight:
        600;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;

}


.reviews-manual-author-info span {

    display:
        block;

    margin-top:
        4px;

    color:
        var(--text-muted);

    font-size:
        11px;

}


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

.reviews-manual-card-stars {

    flex-shrink:
        0;

    color:
        var(--gold);

    font-size:
        11px;

    letter-spacing:
        1px;

}


/* =========================================================
   QUOTE
========================================================= */

.reviews-manual-card-quote {

    position:
        relative;

    z-index:
        2;

    height:
        45px;

    margin-top:
        28px;

    color:
        rgba(
            181,
            138,
            69,
            .42
        );

    font-family:
        var(--serif);

    font-size:
        82px;

    line-height:
        .7;

}


/* =========================================================
   TEXT
========================================================= */

.reviews-manual-card-text {

    position:
        relative;

    z-index:
        2;

    margin-top:
        4px;

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

    font-family:
        var(--serif);

    font-size:
        clamp(
            20px,
            1.7vw,
            25px
        );

    font-weight:
        500;

    line-height:
        1.4;

    letter-spacing:
        -.012em;

}


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

.reviews-manual-card-bottom {

    position:
        relative;

    z-index:
        2;

    margin-top:
        auto;

    padding-top:
        24px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        15px;

    border-top:
        1px solid
        var(--border-dark);

}


.reviews-manual-source {

    color:
        var(--text-muted);

    font-size:
        9px;

    font-weight:
        600;

    letter-spacing:
        .16em;

}


.reviews-manual-google-small {

    color:
        var(--gold-soft);

    font-size:
        15px;

}


/* =========================================================
   CONTROLS
========================================================= */

.reviews-manual-controls {

    margin-top:
        27px;

    display:
        grid;

    grid-template-columns:
        48px
        1fr
        48px;

    align-items:
        center;

    gap:
        20px;

}


.reviews-manual-arrow {

    width:
        48px;

    height:
        48px;

    padding:
        0;

    display:
        grid;

    place-items:
        center;

    border:
        1px solid
        var(--border-dark);

    border-radius:
        50%;

    background:
        rgba(
            255,
            255,
            255,
            .035
        );

    color:
        var(--text);

    cursor:
        pointer;

    transition:
        background-color
        .3s ease,
        border-color
        .3s ease,
        color
        .3s ease,
        transform
        .3s ease;

}


.reviews-manual-arrow svg {

    width:
        18px;

    height:
        18px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.6;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;

}


@media (
    hover: hover
) {

    .reviews-manual-arrow:hover {

        border-color:
            var(--gold);

        background:
            var(--gold);

        color:
            var(--bg);

        transform:
            scale(1.06);

    }

}


/* =========================================================
   PAGINATION
========================================================= */

.reviews-manual-pagination {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        13px;

    color:
        var(--text-muted);

    font-size:
        10px;

    font-weight:
        600;

    letter-spacing:
        .12em;

}


.reviews-manual-pagination-line {

    width:
        70px;

    height:
        1px;

    background:
        var(--border-dark);

}


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

.reviews-manual-footer {

    margin-top:
        54px;

    padding-top:
        24px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        30px;

    border-top:
        1px solid
        var(--border-dark);

}


.reviews-manual-footer > div {

    display:
        flex;

    align-items:
        center;

    gap:
        6px;

    color:
        var(--text-muted);

    font-size:
        12px;

}


.reviews-manual-footer strong {

    color:
        var(--text-soft);

    font-weight:
        600;

}


.reviews-manual-google-link {

    display:
        flex;

    align-items:
        center;

    gap:
        14px;

    color:
        var(--text);

    font-size:
        12px;

    font-weight:
        600;

}


.reviews-manual-google-link > span {

    width:
        39px;

    height:
        39px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        50%;

    background:
        var(--gold);

    color:
        var(--bg);

}


.reviews-manual-google-link svg {

    width:
        15px;

    height:
        15px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.6;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;

}


/* =========================================================
   TABLET
========================================================= */

@media (
    max-width: 900px
) {

    .reviews-manual-header {

        grid-template-columns:
            1fr;

        gap:
            35px;

    }


    .reviews-manual-rating {

        max-width:
            520px;

    }


    .reviews-manual-card {

        flex-basis:
            calc(
                (
                    100% -
                    18px
                ) /
                2
            );

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (
    max-width: 650px
) {

    .reviews-manual {

        padding:
            85px
            0
            100px;

    }


    .reviews-manual-heading h2 {

        font-size:
            clamp(
                49px,
                14vw,
                68px
            );

        line-height:
            .91;

    }


    .reviews-manual-heading > p {

        margin-top:
            22px;

        font-size:
            14px;

    }


    .reviews-manual-rating {

        min-height:
            0;

        padding:
            18px;

        grid-template-columns:
            auto
            1fr
            40px;

        gap:
            14px;

        border-radius:
            22px;

    }


    .reviews-manual-rating-number {

        font-size:
            57px;

    }


    .reviews-manual-rating-google {

        width:
            40px;

        height:
            40px;

    }


    .reviews-manual-card {

        flex-basis:
            100%;

        min-height:
            330px;

        padding:
            21px;

        border-radius:
            22px;

    }


    .reviews-manual-card-text {

        font-size:
            21px;

    }


    .reviews-manual-controls {

        grid-template-columns:
            44px
            1fr
            44px;

        gap:
            14px;

    }


    .reviews-manual-arrow {

        width:
            44px;

        height:
            44px;

    }


    .reviews-manual-footer {

        margin-top:
            44px;

        flex-direction:
            column;

        align-items:
            flex-start;

        gap:
            18px;

    }


    .reviews-manual-google-link {

        width:
            100%;

        justify-content:
            space-between;

    }

}


/* =========================================================
   REVIEWS — TRUE INFINITE CAROUSEL
========================================================= */

.reviews-manual-viewport {

    position:
        relative;

    width:
        100%;

    /*
        Espacio para que la card pueda subir con hover
        sin quedar recortada.
    */

    padding:
        16px
        0
        48px;

    margin-top:
        -16px;

    margin-bottom:
        -48px;


    /*
        MUY IMPORTANTE:

        ya no usamos scroll horizontal.
        El movimiento lo realiza el TRACK.
    */

    overflow:
        hidden !important;

    scroll-snap-type:
        none !important;

    scroll-behavior:
        auto !important;

    scrollbar-width:
        none;

    touch-action:
        pan-y;

    cursor:
        grab;

    user-select:
        none;

    -webkit-user-select:
        none;

    -webkit-overflow-scrolling:
        auto;

    -webkit-tap-highlight-color:
        transparent;

}


.reviews-manual-viewport::-webkit-scrollbar {

    display:
        none;

}


/* =========================================================
   DRAG STATE
========================================================= */

.reviews-manual-viewport.is-dragging {

    cursor:
        grabbing;

}


/* =========================================================
   TRACK
========================================================= */

.reviews-manual-track {

    display:
        flex;

    align-items:
        stretch;

    gap:
        18px;

    /*
        El JS controla este translate3d.
    */

    transform:
        translate3d(
            0,
            0,
            0
        );

    will-change:
        transform;

}


/* =========================================================
   CARDS
========================================================= */

.reviews-manual-card {

    scroll-snap-align:
        none !important;

    will-change:
        transform,
        opacity;

}


/* =========================================================
   HOVER
========================================================= */

@media (
    hover: hover
) {

    .reviews-manual-card:hover {

        transform:
            translateY(-6px);

        border-color:
            rgba(
                181,
                138,
                69,
                .28
            );

        box-shadow:
            0
            30px
            75px
            rgba(
                0,
                0,
                0,
                .36
            );

    }

}


/* =========================================================
   HEADER — RESERVA REMOVIDA
   Conserva exactamente el espacio del CTA anterior.
========================================================= */

.header-book-placeholder {

    width:
        153px;

    min-width:
        153px;

    height:
        45px;

    flex:
        0 0 153px;

    visibility:
        hidden;

    pointer-events:
        none;

}


@media (
    max-width: 1050px
) {

    .header-book-placeholder {

        display:
            none;

    }

}

/* =========================================================
   HERO — ESPACIO DEL CTA ELIMINADO
========================================================= */

.ns-hero-action-placeholder {

    visibility:
        hidden;

    pointer-events:
        none;

}


/* =========================================================
   HERO FINAL — RESERVA REMOVIDA
========================================================= */

.ns-hero-final-link-placeholder {

    width:
        190px;

    min-height:
        56px;

    visibility:
        hidden;

    pointer-events:
        none;

}



/* =========================================================
   HERO — SINGLE CTA CENTERED
========================================================= */

.ns-hero-actions {

    justify-content:
        center;

}


/* =========================================================
   DESKTOP
========================================================= */

@media (
    min-width: 651px
) {

    .ns-hero-actions {

        left:
            50%;

        right:
            auto;

        width:
            auto;

        transform:
            translateX(-50%);

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (
    max-width: 650px
) {

    .ns-hero-actions {

        left:
            0;

        right:
            0;

        width:
            100%;

        transform:
            none;

        justify-content:
            center;

    }

}


/* =========================================================
   BOOKING VISUAL — IMMERSIVE PHOTO
========================================================= */

.booking.booking-visual-only {

    position:
        relative;

    isolation:
        isolate;

    overflow:
        hidden;

}


/* =========================================================
   EXISTING BACKGROUND

   Se conserva:
   - dorado original
   - glows
   - NICOLAU outline
========================================================= */

.booking.booking-visual-only
.booking-background {

    z-index:
        -1;

}


/* =========================================================
   IMMERSIVE MEDIA LAYER
========================================================= */

.booking-immersive-media {

    position:
        absolute;

    z-index:
        2;

    inset:
        0;

    overflow:
        hidden;

    pointer-events:
        none;

}


/* =========================================================
   GOLD HALO BEHIND PHOTO

   Une visualmente la luz de la fotografía
   con el fondo dorado existente.
========================================================= */

.booking-immersive-glow {

    position:
        absolute;

    z-index:
        0;

    top:
        50%;

    left:
        50%;

    width:
        min(
            1050px,
            82vw
        );

    aspect-ratio:
        1 / 1;

    transform:
        translate(
            -50%,
            -50%
        );

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,

            rgba(
                231,
                190,
                109,
                .28
            )
            0%,

            rgba(
                181,
                138,
                69,
                .16
            )
            30%,

            rgba(
                117,
                78,
                31,
                .08
            )
            52%,

            transparent
            74%
        );

    filter:
        blur(
            30px
        );

}


/* =========================================================
   MAIN PHOTO
========================================================= */

.booking-immersive-image {

    position:
        absolute;

    z-index:
        1;

    left:
        50%;

    bottom:
        -5%;

    width:
        auto;

    max-width:
        none;

    height:
        116%;

    display:
        block;

    object-fit:
        contain;

    object-position:
        center
        bottom;

    transform:
        translateX(
            -50%
        );

    transform-origin:
        center
        bottom;

    /*
        Adaptamos el dorado de la foto al fondo
        actual de la sección.
    */

    filter:
        saturate(
            .88
        )
        contrast(
            1.04
        )
        brightness(
            .91
        );

    opacity:
        .96;

    user-select:
        none;

    -webkit-user-select:
        none;

    -webkit-user-drag:
        none;

    /*
        CLAVE:

        La fotografía deja de tener un rectángulo
        visible. Se desvanece progresivamente
        hacia el fondo de Booking.
    */

    -webkit-mask-image:
        radial-gradient(
            ellipse
            70%
            88%
            at
            50%
            52%,

            #000000
            0%,

            #000000
            54%,

            rgba(
                0,
                0,
                0,
                .96
            )
            64%,

            rgba(
                0,
                0,
                0,
                .74
            )
            75%,

            rgba(
                0,
                0,
                0,
                .34
            )
            87%,

            transparent
            100%
        );

    mask-image:
        radial-gradient(
            ellipse
            70%
            88%
            at
            50%
            52%,

            #000000
            0%,

            #000000
            54%,

            rgba(
                0,
                0,
                0,
                .96
            )
            64%,

            rgba(
                0,
                0,
                0,
                .74
            )
            75%,

            rgba(
                0,
                0,
                0,
                .34
            )
            87%,

            transparent
            100%
        );

}


/* =========================================================
   ORIGINAL NICOLAU WORD

   Queda atrás de las personas.
========================================================= */

.booking.booking-visual-only
.booking-background-word {

    opacity:
        .72;

}


/* =========================================================
   PLACEHOLDER

   Sólo mantiene el tamaño estructural.
========================================================= */

.booking.booking-visual-only
.booking-content {

    position:
        relative;

    z-index:
        3;

}


.booking.booking-visual-only
.booking-content-placeholder {

    min-height:
        clamp(
            510px,
            46vw,
            680px
        );

}


/* =========================================================
   TOP / BOTTOM BLENDING

   Los fades originales de Booking quedan por encima
   de la fotografía para que ésta también se integre
   con Reviews y Contacto.
========================================================= */

.booking.booking-visual-only::before {

    z-index:
        5;

}


.booking.booking-visual-only::after {

    z-index:
        5;

}


/* =========================================================
   DESKTOP LARGE
========================================================= */

@media (
    min-width: 1400px
) {

    .booking-immersive-image {

        height:
            122%;

        bottom:
            -8%;

    }

}


/* =========================================================
   TABLET
========================================================= */

@media (
    max-width: 1050px
) {

    .booking.booking-visual-only
    .booking-content-placeholder {

        min-height:
            570px;

    }


    .booking-immersive-image {

        height:
            112%;

        bottom:
            -3%;

    }


    .booking-immersive-glow {

        width:
            100vw;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (
    max-width: 650px
) {

    .booking.booking-visual-only {

        /*
            Conservamos espacio suficiente para que
            la fotografía tenga presencia vertical.
        */

        padding-top:
            95px;

        padding-bottom:
            120px;

    }


    .booking.booking-visual-only
    .booking-content-placeholder {

        min-height:
            620px;

    }


    .booking-immersive-image {

        left:
            51%;

        bottom:
            -1%;

        height:
            108%;

        /*
            En celular la imagen puede exceder
            horizontalmente el viewport.
            Eso produce el efecto full-bleed.
        */

        max-width:
            none;

        filter:
            saturate(
                .88
            )
            contrast(
                1.03
            )
            brightness(
                .92
            );

        -webkit-mask-image:
            radial-gradient(
                ellipse
                86%
                90%
                at
                50%
                50%,

                #000000
                0%,

                #000000
                58%,

                rgba(
                    0,
                    0,
                    0,
                    .92
                )
                70%,

                rgba(
                    0,
                    0,
                    0,
                    .50
                )
                84%,

                transparent
                100%
            );

        mask-image:
            radial-gradient(
                ellipse
                86%
                90%
                at
                50%
                50%,

                #000000
                0%,

                #000000
                58%,

                rgba(
                    0,
                    0,
                    0,
                    .92
                )
                70%,

                rgba(
                    0,
                    0,
                    0,
                    .50
                )
                84%,

                transparent
                100%
            );

    }


    .booking-immersive-glow {

        top:
            48%;

        width:
            145vw;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (
    max-width: 390px
) {

    .booking.booking-visual-only
    .booking-content-placeholder {

        min-height:
            575px;

    }


    .booking-immersive-image {

        left:
            52%;

        height:
            105%;

    }

}



/* =========================================================
   BOOKING — IMMERSIVE PHOTO
========================================================= */

.booking.booking-visual-only {

    position:
        relative;

    isolation:
        isolate;

    overflow:
        hidden;

}


/* =========================================================
   ORIGINAL BACKGROUND
========================================================= */

.booking.booking-visual-only
.booking-background {

    z-index:
        -1;

}


/* =========================================================
   IMMERSIVE MEDIA
========================================================= */

.booking-immersive-media {

    position:
        absolute;

    z-index:
        2;

    inset:
        0;

    overflow:
        hidden;

    pointer-events:
        none;

}


/* =========================================================
   GOLD GLOW

   Refuerza la unión entre el fondo de la fotografía
   y el dorado propio de la sección.
========================================================= */

.booking-immersive-glow {

    position:
        absolute;

    z-index:
        0;

    top:
        48%;

    left:
        50%;

    width:
        min(
            1200px,
            92vw
        );

    height:
        90%;

    transform:
        translate(
            -50%,
            -50%
        );

    border-radius:
        50%;

    background:
        radial-gradient(
            ellipse at center,

            rgba(
                223,
                177,
                94,
                .30
            )
            0%,

            rgba(
                181,
                138,
                69,
                .20
            )
            28%,

            rgba(
                116,
                76,
                30,
                .10
            )
            52%,

            transparent
            76%
        );

    filter:
        blur(
            42px
        );

}


/* =========================================================
   PHOTO
========================================================= */

.booking-immersive-image {

    position:
        absolute;

    z-index:
        1;

    top:
        50%;

    left:
        50%;

    width:
        auto;

    max-width:
        none;

    height:
        118%;

    display:
        block;

    object-fit:
        contain;

    object-position:
        center;

    transform:
        translate(
            -50%,
            -50%
        );

    transform-origin:
        center;

    /*
        Ajuste cromático leve.

        No destruimos el color original de la capa,
        simplemente lo acercamos al dorado de la sección.
    */

    filter:
        saturate(.91)
        contrast(1.03)
        brightness(.93);

    user-select:
        none;

    -webkit-user-select:
        none;

    -webkit-user-drag:
        none;


    /* =====================================================
       DIFUMINADO HORIZONTAL

       ESTE ES EL CAMBIO PRINCIPAL.

       0–18%:
       desaparece progresivamente el borde izquierdo.

       18–82%:
       imagen completamente visible.

       82–100%:
       desaparece progresivamente el borde derecho.
    ===================================================== */

    -webkit-mask-image:
        linear-gradient(
            to right,

            transparent
            0%,

            rgba(
                0,
                0,
                0,
                .10
            )
            5%,

            rgba(
                0,
                0,
                0,
                .35
            )
            10%,

            rgba(
                0,
                0,
                0,
                .72
            )
            15%,

            #000000
            22%,

            #000000
            78%,

            rgba(
                0,
                0,
                0,
                .72
            )
            85%,

            rgba(
                0,
                0,
                0,
                .35
            )
            90%,

            rgba(
                0,
                0,
                0,
                .10
            )
            95%,

            transparent
            100%
        );

    mask-image:
        linear-gradient(
            to right,

            transparent
            0%,

            rgba(
                0,
                0,
                0,
                .10
            )
            5%,

            rgba(
                0,
                0,
                0,
                .35
            )
            10%,

            rgba(
                0,
                0,
                0,
                .72
            )
            15%,

            #000000
            22%,

            #000000
            78%,

            rgba(
                0,
                0,
                0,
                .72
            )
            85%,

            rgba(
                0,
                0,
                0,
                .35
            )
            90%,

            rgba(
                0,
                0,
                0,
                .10
            )
            95%,

            transparent
            100%
        );

}


/* =========================================================
   EXTRA SIDE BLENDING

   Estas dos capas agregan un fundido cromático encima
   de los últimos píxeles de la fotografía.

   Evitan que se perciba dónde termina el JPG/PNG.
========================================================= */

.booking-immersive-media::before,
.booking-immersive-media::after {

    content:
        "";

    position:
        absolute;

    z-index:
        3;

    top:
        0;

    bottom:
        0;

    width:
        31%;

    pointer-events:
        none;

}


/* =========================================================
   LEFT
========================================================= */

.booking-immersive-media::before {

    left:
        0;

    background:
        linear-gradient(
            to right,

            rgba(
                112,
                75,
                31,
                .56
            )
            0%,

            rgba(
                112,
                75,
                31,
                .25
            )
            35%,

            rgba(
                112,
                75,
                31,
                .07
            )
            67%,

            transparent
            100%
        );

}


/* =========================================================
   RIGHT
========================================================= */

.booking-immersive-media::after {

    right:
        0;

    background:
        linear-gradient(
            to left,

            rgba(
                63,
                39,
                18,
                .52
            )
            0%,

            rgba(
                78,
                50,
                22,
                .22
            )
            35%,

            rgba(
                90,
                58,
                25,
                .06
            )
            67%,

            transparent
            100%
        );

}


/* =========================================================
   BACKGROUND NICOLAU
========================================================= */

.booking.booking-visual-only
.booking-background-word {

    opacity:
        .60;

}


/* =========================================================
   STRUCTURAL HEIGHT
========================================================= */

.booking.booking-visual-only
.booking-content {

    position:
        relative;

    z-index:
        4;

}


.booking.booking-visual-only
.booking-content-placeholder {

    min-height:
        clamp(
            540px,
            46vw,
            720px
        );

}


/* =========================================================
   ORIGINAL BOOKING TRANSITIONS

   Deben quedar por encima de la fotografía.
========================================================= */

.booking.booking-visual-only::before {

    z-index:
        6;

}


.booking.booking-visual-only::after {

    z-index:
        6;

}


/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (
    min-width: 1500px
) {

    .booking-immersive-image {

        height:
            122%;

    }

}


/* =========================================================
   TABLET
========================================================= */

@media (
    max-width: 1050px
) {

    .booking.booking-visual-only
    .booking-content-placeholder {

        min-height:
            600px;

    }


    .booking-immersive-image {

        height:
            114%;

    }


    .booking-immersive-media::before,
    .booking-immersive-media::after {

        width:
            24%;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (
    max-width: 650px
) {

    .booking.booking-visual-only {

        padding-top:
            80px;

        padding-bottom:
            105px;

    }


    .booking.booking-visual-only
    .booking-content-placeholder {

        min-height:
            610px;

    }


    .booking-immersive-image {

        top:
            50%;

        left:
            50%;

        height:
            108%;

        transform:
            translate(
                -50%,
                -50%
            );


        /*
            En celular hacemos un fade algo menor,
            porque tenemos menos ancho disponible.
        */

        -webkit-mask-image:
            linear-gradient(
                to right,

                transparent
                0%,

                rgba(
                    0,
                    0,
                    0,
                    .35
                )
                7%,

                #000000
                17%,

                #000000
                83%,

                rgba(
                    0,
                    0,
                    0,
                    .35
                )
                93%,

                transparent
                100%
            );

        mask-image:
            linear-gradient(
                to right,

                transparent
                0%,

                rgba(
                    0,
                    0,
                    0,
                    .35
                )
                7%,

                #000000
                17%,

                #000000
                83%,

                rgba(
                    0,
                    0,
                    0,
                    .35
                )
                93%,

                transparent
                100%
            );

    }


    .booking-immersive-media::before,
    .booking-immersive-media::after {

        width:
            13%;

    }


    .booking-immersive-glow {

        width:
            150vw;

        height:
            80%;

        filter:
            blur(
                30px
            );

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (
    max-width: 390px
) {

    .booking.booking-visual-only
    .booking-content-placeholder {

        min-height:
            570px;

    }


    .booking-immersive-image {

        height:
            104%;

    }

}

/* =========================================================
   BOOKING — NICOLAU MÁS VISIBLE
========================================================= */

.booking.booking-visual-only
.booking-background-word {

    opacity:
        .82;

    -webkit-text-stroke:
        1.4px
        rgba(
            255,
            255,
            255,
            .13
        );

}


/* =========================================================
   PRODUCTS SHOWCASE
========================================================= */

.products-showcase {

    position:
        relative;

    isolation:
        isolate;

    padding:
        clamp(
            105px,
            10vw,
            165px
        )
        0
        clamp(
            120px,
            11vw,
            180px
        );

    overflow:
        hidden;

    background:
        var(--bg-soft);

    color:
        var(--text);

}


/* =========================================================
   BACKGROUND DETAIL
========================================================= */

.products-showcase::before {

    content:
        "";

    position:
        absolute;

    z-index:
        -1;

    top:
        42%;

    left:
        50%;

    width:
        min(
            1000px,
            75vw
        );

    aspect-ratio:
        1 / 1;

    transform:
        translate(
            -50%,
            -50%
        );

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,

            rgba(
                181,
                138,
                69,
                .10
            )
            0%,

            rgba(
                181,
                138,
                69,
                .035
            )
            38%,

            transparent
            70%
        );

    pointer-events:
        none;

}


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

.products-header {

    width:
        min(
            900px,
            100%
        );

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

    text-align:
        center;

}


.products-eyebrow {

    display:
        block;

    margin-bottom:
        22px;

    color:
        var(--gold-soft);

    font-size:
        10px;

    font-weight:
        600;

    letter-spacing:
        .20em;

}


.products-header h2 {

    margin:
        0;

    font-family:
        var(--serif);

    font-size:
        clamp(
            58px,
            6.7vw,
            105px
        );

    font-weight:
        500;

    line-height:
        .89;

    letter-spacing:
        -.055em;

}


.products-header h2 em {

    display:
        block;

    color:
        var(--gold);

    font-weight:
        500;

    font-style:
        italic;

}


.products-header p {

    max-width:
        520px;

    margin:
        27px auto 0;

    color:
        var(--text-soft);

    font-size:
        15px;

    line-height:
        1.65;

}


/* =========================================================
   STAGE

   Cuatro esquinas + centro editorial.
========================================================= */

.products-stage {

    position:
        relative;

    width:
        100%;

    min-height:
        1050px;

    display:
        grid;

    grid-template-columns:
        minmax(
            0,
            1fr
        )
        minmax(
            230px,
            .70fr
        )
        minmax(
            0,
            1fr
        );

    grid-template-rows:
        1fr
        1fr;

    gap:
        clamp(
            45px,
            6vw,
            95px
        );

    align-items:
        center;

}


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

.product-card-one {

    grid-column:
        1;

    grid-row:
        1;

    justify-self:
        start;

}


.product-card-two {

    grid-column:
        3;

    grid-row:
        1;

    justify-self:
        end;

}


.product-card-three {

    grid-column:
        1;

    grid-row:
        2;

    justify-self:
        start;

}


.product-card-four {

    grid-column:
        3;

    grid-row:
        2;

    justify-self:
        end;

}


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

.product-flip-card {

    position:
        relative;

    width:
        min(
            31vw,
            390px
        );

    aspect-ratio:
        .78 / 1;

    perspective:
        1500px;

    cursor:
        pointer;

    outline:
        none;

    -webkit-tap-highlight-color:
        transparent;

}


/* =========================================================
   INNER
========================================================= */

.product-flip-inner {

    position:
        relative;

    width:
        100%;

    height:
        100%;

    transform-style:
        preserve-3d;

    transition:
        transform
        .85s
        cubic-bezier(
            .16,
            1,
            .3,
            1
        );

    will-change:
        transform;

}


/* =========================================================
   FLIPPED
========================================================= */

@media (
    hover: hover
) {

    .product-flip-card:hover
    .product-flip-inner {

        transform:
            rotateY(
                180deg
            );

    }

}


.product-flip-card.is-flipped
.product-flip-inner {

    transform:
        rotateY(
            180deg
        );

}


.product-flip-card:focus-visible {

    outline:
        2px solid
        var(--gold);

    outline-offset:
        7px;

    border-radius:
        30px;

}


/* =========================================================
   FACES
========================================================= */

.product-face {

    position:
        absolute;

    inset:
        0;

    overflow:
        hidden;

    border:
        1px solid
        var(--border-dark);

    border-radius:
        30px;

    backface-visibility:
        hidden;

    -webkit-backface-visibility:
        hidden;

    box-shadow:
        0
        32px
        85px
        rgba(
            0,
            0,
            0,
            .34
        );

}


/* =========================================================
   FRONT
========================================================= */

.product-face-front {

    background:
        var(--surface);

}


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

.product-face-front img {

    position:
        absolute;

    inset:
        0;

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    object-position:
        center;

    transform:
        scale(
            1.01
        );

    transition:
        transform
        .9s
        cubic-bezier(
            .16,
            1,
            .3,
            1
        );

    user-select:
        none;

    -webkit-user-drag:
        none;

}


@media (
    hover: hover
) {

    .product-flip-card:hover
    .product-face-front img {

        transform:
            scale(
                1.055
            );

    }

}


/* =========================================================
   FRONT OVERLAY
========================================================= */

.product-front-overlay {

    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            to bottom,

            rgba(
                0,
                0,
                0,
                .03
            )
            20%,

            rgba(
                0,
                0,
                0,
                .12
            )
            55%,

            rgba(
                0,
                0,
                0,
                .82
            )
            100%
        );

    pointer-events:
        none;

}


/* =========================================================
   FRONT INFORMATION
========================================================= */

.product-front-info {

    position:
        absolute;

    z-index:
        3;

    left:
        24px;

    right:
        24px;

    bottom:
        24px;

    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        20px;

}


.product-front-info > span {

    color:
        var(--gold-soft);

    font-family:
        var(--serif);

    font-size:
        17px;

}


.product-front-info strong {

    max-width:
        72%;

    color:
        #ffffff;

    font-family:
        var(--serif);

    font-size:
        clamp(
            25px,
            2.2vw,
            35px
        );

    font-weight:
        500;

    line-height:
        1;

    text-align:
        right;

}


/* =========================================================
   FLIP HINT
========================================================= */

.product-flip-hint {

    position:
        absolute;

    z-index:
        3;

    top:
        20px;

    right:
        20px;

    padding:
        8px
        11px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .18
        );

    border-radius:
        999px;

    background:
        rgba(
            8,
            8,
            8,
            .30
        );

    -webkit-backdrop-filter:
        blur(
            12px
        );

    backdrop-filter:
        blur(
            12px
        );

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

    font-size:
        8px;

    font-weight:
        600;

    letter-spacing:
        .10em;

    text-transform:
        uppercase;

}


/* =========================================================
   BACK
========================================================= */

.product-face-back {

    padding:
        28px;

    display:
        flex;

    flex-direction:
        column;

    transform:
        rotateY(
            180deg
        );

    background:

        radial-gradient(
            circle at 90% 5%,

            rgba(
                181,
                138,
                69,
                .19
            ),

            transparent
            34%
        ),

        linear-gradient(
            145deg,

            #1b1b1b
            0%,

            #111111
            56%,

            #17120c
            100%
        );

}


/* =========================================================
   BACK NUMBER
========================================================= */

.product-back-number {

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

    font-family:
        var(--serif);

    font-size:
        48px;

    line-height:
        1;

}


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

.product-back-content {

    margin-top:
        auto;

    margin-bottom:
        auto;

}


.product-back-category {

    display:
        block;

    margin-bottom:
        15px;

    color:
        var(--gold-soft);

    font-size:
        9px;

    font-weight:
        600;

    letter-spacing:
        .20em;

}


.product-back-content h3 {

    max-width:
        300px;

    color:
        var(--text);

    font-family:
        var(--serif);

    font-size:
        clamp(
            34px,
            3vw,
            48px
        );

    font-weight:
        500;

    line-height:
        .95;

    letter-spacing:
        -.035em;

}


.product-back-content p {

    max-width:
        310px;

    margin-top:
        20px;

    color:
        var(--text-soft);

    font-size:
        14px;

    line-height:
        1.65;

}


/* =========================================================
   BACK BRAND
========================================================= */

.product-back-brand {

    padding-top:
        18px;

    border-top:
        1px solid
        var(--border-dark);

    color:
        var(--text-muted);

    font-size:
        8px;

    font-weight:
        600;

    letter-spacing:
        .19em;

}


/* =========================================================
   CENTER
========================================================= */

.products-center {

    position:
        absolute;

    z-index:
        -1;

    top:
        50%;

    left:
        50%;

    transform:
        translate(
            -50%,
            -50%
        );

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    pointer-events:
        none;

    text-align:
        center;

}


.products-center > span {

    color:
        var(--gold-soft);

    font-size:
        8px;

    font-weight:
        600;

    letter-spacing:
        .30em;

}


.products-center-mark {

    margin:
        -5px 0
        -8px;

    color:
        transparent;

    font-family:
        var(--serif);

    font-size:
        clamp(
            150px,
            17vw,
            280px
        );

    font-weight:
        500;

    line-height:
        1;

    -webkit-text-fill-color:
        transparent;

    -webkit-text-stroke:
        1px
        rgba(
            181,
            138,
            69,
            .24
        );

}


.products-center small {

    color:
        var(--text-muted);

    font-size:
        7px;

    font-weight:
        600;

    letter-spacing:
        .24em;

}


/* =========================================================
   TABLET
========================================================= */

@media (
    max-width: 1000px
) {

    .products-stage {

        min-height:
            auto;

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

        grid-template-rows:
            auto;

        gap:
            22px;

    }


    .product-card-one,
    .product-card-two,
    .product-card-three,
    .product-card-four {

        grid-column:
            auto;

        grid-row:
            auto;

        justify-self:
            stretch;

    }


    .product-flip-card {

        width:
            100%;

    }


    .products-center {

        display:
            none;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (
    max-width: 650px
) {

    .products-showcase {

        padding:
            85px
            0
            100px;

    }


    .products-header {

        margin-bottom:
            45px;

    }


    .products-header h2 {

        font-size:
            clamp(
                49px,
                14vw,
                68px
            );

        line-height:
            .91;

    }


    .products-header p {

        margin-top:
            20px;

        font-size:
            14px;

    }


    /*
        En celular mantenemos dos columnas.
        Así siguen sintiéndose como cuatro esquinas
        y no se transforma en una lista convencional.
    */

    .products-stage {

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

        gap:
            11px;

    }


    .product-flip-card {

        width:
            100%;

        aspect-ratio:
            .76 / 1;

    }


    .product-face {

        border-radius:
            20px;

    }


    .product-face-back {

        padding:
            15px;

    }


    .product-front-info {

        left:
            13px;

        right:
            13px;

        bottom:
            14px;

        gap:
            8px;

    }


    .product-front-info > span {

        font-size:
            13px;

    }


    .product-front-info strong {

        font-size:
            clamp(
                17px,
                5vw,
                22px
            );

    }


    .product-flip-hint {

        top:
            10px;

        right:
            10px;

        padding:
            6px
            8px;

        font-size:
            6px;

    }


    .product-back-number {

        font-size:
            29px;

    }


    .product-back-category {

        margin-bottom:
            8px;

        font-size:
            6px;

    }


    .product-back-content h3 {

        font-size:
            clamp(
                22px,
                6vw,
                29px
            );

    }


    .product-back-content p {

        margin-top:
            10px;

        font-size:
            10px;

        line-height:
            1.45;

    }


    .product-back-brand {

        padding-top:
            10px;

        font-size:
            6px;

    }

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (
    max-width: 390px
) {

    .products-stage {

        gap:
            8px;

    }


    .product-face-back {

        padding:
            12px;

    }


    .product-back-content p {

        font-size:
            9px;

    }

}


/* =========================================================
   PRODUCTS — WIDER CARDS
========================================================= */

@media (
    min-width: 1001px
) {

    .product-flip-card {

        /*
            Antes:
            max 390px

            Ahora:
            max 440px
        */

        width:
            min(
                34vw,
                540px
            );


        /*
            Las hacemos más anchas
            sin aumentar demasiado la altura.

            440 / .88 = 500px aprox.

            La altura anterior era:
            390 / .78 = 500px aprox.
        */

        aspect-ratio:
            .88 / 1;

    }

}


/* =========================================================
   PRODUCTS — IOS / SAFARI FLIP FIX

   Evita que la cara frontal se vea espejada
   detrás de la descripción al girar la tarjeta.
========================================================= */

.product-flip-card {

    -webkit-perspective:
        1500px;

    perspective:
        1500px;

}


.product-flip-inner {

    -webkit-transform-style:
        preserve-3d;

    transform-style:
        preserve-3d;

}


/* =========================================================
   FACES — HARDWARE LAYER
========================================================= */

.product-face {

    -webkit-backface-visibility:
        hidden !important;

    backface-visibility:
        hidden !important;

    transform-style:
        preserve-3d;

    -webkit-transform-style:
        preserve-3d;

}


/* =========================================================
   FRONT

   Safari necesita un transform explícito
   en ambas caras.
========================================================= */

.product-face-front {

    -webkit-transform:
        rotateY(0deg)
        translateZ(1px);

    transform:
        rotateY(0deg)
        translateZ(1px);

}


/* =========================================================
   BACK
========================================================= */

.product-face-back {

    -webkit-transform:
        rotateY(180deg)
        translateZ(1px);

    transform:
        rotateY(180deg)
        translateZ(1px);

}


/* =========================================================
   MOBILE / TOUCH SAFETY FIX

   Además del backface-visibility, ocultamos explícitamente
   la cara que no corresponde.

   Esto elimina definitivamente:
   - VER PRODUCTO invertido
   - número duplicado
   - nombre duplicado
   - elementos del frente detrás de la descripción
========================================================= */

@media (
    hover: none
) {

    .product-face-front {

        opacity:
            1;

        visibility:
            visible;

        transition:
            opacity .18s ease,
            visibility 0s linear;

    }


    .product-face-back {

        opacity:
            0;

        visibility:
            hidden;

        transition:
            opacity .18s ease,
            visibility 0s linear .18s;

    }


    /* =============================================
       FLIPPED — FRONT OFF
    ============================================== */

    .product-flip-card.is-flipped
    .product-face-front {

        opacity:
            0;

        visibility:
            hidden;

        transition:
            opacity .16s ease,
            visibility 0s linear .16s;

    }


    /* =============================================
       FLIPPED — BACK ON
    ============================================== */

    .product-flip-card.is-flipped
    .product-face-back {

        opacity:
            1;

        visibility:
            visible;

        transition:
            opacity .18s ease .12s,
            visibility 0s linear;

    }

}

/* =========================================================
   SAFARI — BORDER RADIUS / 3D RENDER FIX
========================================================= */

.product-flip-card,
.product-flip-inner,
.product-face {

    -webkit-transform-origin:
        center center;

    transform-origin:
        center center;

}


.product-face {

    isolation:
        isolate;

}


.product-face-front img {

    -webkit-backface-visibility:
        hidden;

    backface-visibility:
        hidden;

}

/* =========================================================
   TEMPORARY FLOW
   CREDENTIALS → EXPERIENCE

   Mientras Before / After siga desactivado,
   reemplaza únicamente el fade negro superior.
========================================================= */

.credentials + .experience::before {

    height:
        170px;

    background:
        linear-gradient(
            to bottom,

            #f6f4f0 0%,

            rgba(
                246,
                244,
                240,
                .88
            ) 16%,

            rgba(
                246,
                244,
                240,
                .58
            ) 36%,

            rgba(
                246,
                244,
                240,
                .28
            ) 58%,

            rgba(
                246,
                244,
                240,
                .08
            ) 78%,

            transparent 100%
        );

}


/* =========================================================
   CUSTOM SCROLLBAR — NICOLAU
========================================================= */

/* Firefox */

html {

    scrollbar-width:
        thin;

    scrollbar-color:
        rgba(
            255,
            255,
            255,
            .92
        )
        #080808;

}


/* Chrome / Edge / Safari */

::-webkit-scrollbar {

    width:
        10px;

}


::-webkit-scrollbar-track {

    background:
        #080808;

}


::-webkit-scrollbar-thumb {

    background:
        rgba(
            255,
            255,
            255,
            .92
        );

    border-radius:
        999px;

    border:
        3px solid
        #080808;

}


::-webkit-scrollbar-thumb:hover {

    background:
        #ffffff;

}

/* =========================================================
   ESTUDIO → CERTIFICACIONES
   DECORACIÓN REPETIDA
========================================================= */

.studio-credentials-divider {

    --middle-width:
        320px;

    position:
        relative;

    z-index:
        40;

    width:
        100%;

    height:
        0;

    overflow-x:
        clip;

    overflow-y:
        visible;

    pointer-events:
        none;

}


/* =========================================================
   TRACK
========================================================= */

.studio-credentials-divider-track {

    position:
        absolute;

    top:
        0;

    left:
        50%;

    width:
        max-content;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        0;

    transform:
        translate(
            -50%,
            -51%
        );

    pointer-events:
        none;

}


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

.studio-credentials-divider-track img {

    width:
        var(--middle-width);

    max-width:
        none;

    height:
        auto;

    flex:
        0 0
        var(--middle-width);

    display:
        block;

    object-fit:
        contain;

    user-select:
        none;

    -webkit-user-select:
        none;

    -webkit-user-drag:
        none;

}


/* =========================================================
   RANDOM HORIZONTAL FLIP
========================================================= */

.studio-credentials-divider-track img.is-flipped {

    transform:
        scaleX(-1);

}


/* =========================================================
   MOBILE
========================================================= */

@media (
    max-width: 650px
) {

    .studio-credentials-divider {

        --middle-width:
            230px;

    }


    .studio-credentials-divider-track {

        transform:
            translate(
                -50%,
                -53%
            );

    }

}

/* =========================================================
   CREDENTIALS — PHOTO ABOVE BACKGROUND
========================================================= */

.credentials {

    position:
        relative;

    isolation:
        isolate;

    overflow:
        hidden;

}


/* =========================================================
   PHOTO LAYER
========================================================= */

.credentials-background-photo {

    position:
        absolute;

    z-index:
        0;

    inset:
        0;

    overflow:
        hidden;

    pointer-events:
        none;

}


/* =========================================================
   PHOTO
========================================================= */

.credentials-background-photo img {

    position:
        absolute;

    top:
        70%;

    left:
        15%;

    width:
        min(
            450px,
            82vw
        );

    height:
        auto;

    max-height:
        88%;

    display:
        block;

    object-fit:
        contain;

    transform:
        translate(
            -50%,
            -50%
        );

    opacity:
        0.87;

    filter:
        none;

    user-select:
        none;

    -webkit-user-select:
        none;

    -webkit-user-drag:
        none;
    
        -webkit-mask-image:
        linear-gradient(
            to bottom,

            #000000 0%,

            #000000 72%,

            rgba(
                0,
                0,
                0,
                .92
            ) 78%,

            rgba(
                0,
                0,
                0,
                .62
            ) 86%,

            rgba(
                0,
                0,
                0,
                .28
            ) 93%,

            transparent 100%
        );

    mask-image:
        linear-gradient(
            to bottom,

            #000000 0%,

            #000000 72%,

            rgba(
                0,
                0,
                0,
                .92
            ) 78%,

            rgba(
                0,
                0,
                0,
                .62
            ) 86%,

            rgba(
                0,
                0,
                0,
                .28
            ) 93%,

            transparent 100%
        );

}


/* =========================================================
   CONTENT ABOVE PHOTO
========================================================= */

.credentials > .container {

    position:
        relative;

    z-index:
        2;

}


/* =========================================================
   REVIEWS — EDITORIAL REDESIGN V3
========================================================= */

.reviews-manual {

    position:
        relative;

    isolation:
        isolate;

    overflow:
        hidden;

    padding:
        clamp(
            110px,
            9vw,
            150px
        )
        0
        clamp(
            110px,
            9vw,
            150px
        );

    background:
        var(--bg) !important;

    color:
        var(--text);

}


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

.reviews-manual > .container {

    position:
        relative;

    z-index:
        2;

}


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

.reviews-manual-header {

    position:
        relative;

    z-index:
        5;

    width:
        min(
            1080px,
            100%
        );

    margin:
        0 auto
        clamp(
            65px,
            6vw,
            90px
        );

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    text-align:
        center;

}


/* =========================================================
   EYEBROW
========================================================= */

.reviews-manual-eyebrow {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        12px;

    margin-bottom:
        20px;

    color:
        var(--gold-soft);

    font-size:
        10px;

    font-weight:
        600;

    letter-spacing:
        .34em;

}


.reviews-manual-eyebrow-line {

    width:
        58px;

    height:
        1px;

    background:
        linear-gradient(
            90deg,

            transparent,

            rgba(
                199,
                168,
                112,
                .78
            )
        );

}


.reviews-manual-eyebrow-line:last-child {

    transform:
        scaleX(-1);

}


/* =========================================================
   TITLE
========================================================= */

.reviews-manual-heading h2 {

    max-width:
        1050px;

    margin:
        0;

    color:
        var(--text);

    font-family:
        var(--serif);

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

    font-weight:
        500;

    line-height:
        .94;

    letter-spacing:
        -.045em;

}


.reviews-manual-heading h2 em {

    display:
        inline;

    color:
        var(--text);

    font-style:
        normal;

    font-weight:
        inherit;

}


.reviews-manual-heading > p {

    max-width:
        650px;

    margin:
        22px auto 0;

    color:
        var(--text-muted);

    font-size:
        10px;

    font-weight:
        500;

    line-height:
        1.7;

    letter-spacing:
        .20em;

    text-transform:
        uppercase;

}


/* =========================================================
   RATING
========================================================= */

.reviews-manual-rating {

    position:
        relative;

    min-height:
        0;

    margin-top:
        34px;

    padding:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        26px;

    overflow:
        visible;

    border:
        0;

    border-radius:
        0;

    background:
        none;

    box-shadow:
        none;

}


.reviews-manual-rating-stars-group {

    display:
        flex;

    align-items:
        center;

    gap:
        21px;

}


.reviews-manual-stars {

    color:
        var(--gold-soft);

    font-size:
        clamp(
            20px,
            1.8vw,
            28px
        );

    line-height:
        1;

    letter-spacing:
        4px;

}


.reviews-manual-rating-number {

    color:
        var(--text);

    font-family:
        var(--serif);

    font-size:
        clamp(
            39px,
            3.3vw,
            53px
        );

    font-weight:
        500;

    line-height:
        1;

    letter-spacing:
        -.04em;

}


.reviews-manual-rating-divider {

    width:
        1px;

    height:
        54px;

    flex:
        0 0 1px;

    background:
        rgba(
            255,
            255,
            255,
            .24
        );

}


.reviews-manual-rating-info {

    text-align:
        left;

}


.reviews-manual-rating-info > strong {

    display:
        block;

    margin:
        0;

    color:
        var(--text);

    font-family:
        var(--serif);

    font-size:
        20px;

    font-weight:
        500;

    line-height:
        1;

}


.reviews-manual-rating-info > span {

    display:
        block;

    margin-top:
        7px;

    color:
        var(--text-muted);

    font-size:
        9px;

    font-weight:
        600;

    line-height:
        1;

    letter-spacing:
        .12em;

    text-transform:
        uppercase;

}


.reviews-manual-rating-google {

    width:
        38px;

    height:
        38px;

    display:
        grid;

    place-items:
        center;

    flex:
        0 0 38px;

    border:
        1px solid
        rgba(
            199,
            168,
            112,
            .30
        );

    border-radius:
        50%;

    background:
        rgba(
            181,
            138,
            69,
            .06
        );

    color:
        var(--gold-soft);

    font-size:
        15px;

}


/* =========================================================
   CAROUSEL
========================================================= */

.reviews-manual-carousel {

    position:
        relative;

    isolation:
        isolate;

    width:
        100%;

}


/* =========================================================
   CINEMATIC LIGHT SYSTEM
========================================================= */

.reviews-manual-lights {

    position:
        absolute;

    z-index:
        0;

    top:
        -210px;

    right:
        -7vw;

    bottom:
        -150px;

    left:
        -7vw;

    overflow:
        visible;

    pointer-events:
        none;

}


/* =========================================================
   LIGHT BEAMS
========================================================= */

.reviews-manual-light-beam {

    position:
        absolute;

    top:
        -100px;

    width:
        min(
            620px,
            44vw
        );

    height:
        820px;

    opacity:
        .90;

    pointer-events:
        none;

    mix-blend-mode:
        screen;

    filter:
        blur(
            18px
        );

    background:
        linear-gradient(
            to bottom,

            rgba(
                242,
                208,
                147,
                .34
            )
            0%,

            rgba(
                215,
                174,
                103,
                .24
            )
            20%,

            rgba(
                181,
                138,
                69,
                .13
            )
            47%,

            rgba(
                181,
                138,
                69,
                .045
            )
            70%,

            transparent
            92%
        );

    clip-path:
        polygon(
            39% 0%,
            56% 0%,
            100% 100%,
            0% 100%
        );

}


/* =========================================================
   LEFT LIGHT
========================================================= */

.reviews-manual-light-left {

    left:
        -6%;

    transform:
        rotate(
            -16deg
        );

    transform-origin:
        top center;

}


/* =========================================================
   RIGHT LIGHT
========================================================= */

.reviews-manual-light-right {

    right:
        -6%;

    transform:
        rotate(
            16deg
        );

    transform-origin:
        top center;

}


/* =========================================================
   CENTER LIGHT BLOOM
========================================================= */

.reviews-manual-light-center {

    position:
        absolute;

    top:
        40px;

    left:
        50%;

    width:
        min(
            720px,
            58vw
        );

    height:
        390px;

    transform:
        translateX(
            -50%
        );

    border-radius:
        50%;

    opacity:
        .88;

    pointer-events:
        none;

    background:
        radial-gradient(
            ellipse
            at
            center
            top,

            rgba(
                235,
                195,
                127,
                .27
            )
            0%,

            rgba(
                199,
                154,
                84,
                .13
            )
            33%,

            rgba(
                181,
                138,
                69,
                .05
            )
            58%,

            transparent
            78%
        );

    filter:
        blur(
            24px
        );

    mix-blend-mode:
        screen;

}


/* =========================================================
   VIEWPORT

   Mucho aire vertical para que el glow superior
   de la card central NO se corte.
========================================================= */

.reviews-manual-viewport {

    position:
        relative;

    z-index:
        2;

    width:
        100%;

    padding:
        150px
        0
        135px;

    margin-top:
        -150px;

    margin-bottom:
        -135px;

    overflow:
        hidden !important;

    scroll-snap-type:
        none !important;

    scroll-behavior:
        auto !important;

    scrollbar-width:
        none;

    cursor:
        grab;

    touch-action:
        pan-y;

    user-select:
        none;

    -webkit-user-select:
        none;

    -webkit-overflow-scrolling:
        auto;

    -webkit-tap-highlight-color:
        transparent;

}


.reviews-manual-viewport::-webkit-scrollbar {

    display:
        none;

}


.reviews-manual-viewport.is-dragging {

    cursor:
        grabbing;

}


/* =========================================================
   TRACK
========================================================= */

.reviews-manual-track {

    display:
        flex;

    align-items:
        stretch;

    gap:
        26px;

    transform:
        translate3d(
            0,
            0,
            0
        );

    will-change:
        transform;

}


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

   Desktop:
   card + gap + card + gap + card
   = 100%
========================================================= */

.reviews-manual-card {

    position:
        relative;

    flex:
        0 0
        calc(
            (
                100% -
                52px
            )
            /
            3
        );

    min-width:
        0;

    min-height:
        455px;

    padding:
        30px;

    display:
        flex;

    flex-direction:
        column;

    overflow:
        hidden;

    isolation:
        isolate;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .075
        );

    border-radius:
        29px;

    background:
        linear-gradient(
            145deg,

            rgba(
                27,
                27,
                27,
                .96
            )
            0%,

            rgba(
                15,
                15,
                15,
                .99
            )
            100%
        );

    opacity:
        .62;

    transform:
        translateY(
            17px
        )
        scale(
            .945
        );

    transform-origin:
        center center;

    filter:
        brightness(
            .88
        )
        saturate(
            .86
        );

    box-shadow:
        0
        24px
        60px
        rgba(
            0,
            0,
            0,
            .30
        );

    will-change:
        transform,
        opacity;

    transition:
        transform
        .72s
        cubic-bezier(
            .16,
            1,
            .3,
            1
        ),
        opacity
        .5s ease,
        filter
        .5s ease,
        border-color
        .5s ease,
        box-shadow
        .5s ease;

}


/* =========================================================
   TOP LIGHT INSIDE ALL CARDS
========================================================= */

.reviews-manual-card::before {

    content:
        "";

    position:
        absolute;

    z-index:
        0;

    top:
        -130px;

    left:
        45%;

    width:
        390px;

    height:
        300px;

    transform:
        translateX(
            -50%
        );

    border-radius:
        50%;

    pointer-events:
        none;

    opacity:
        .34;

    background:
        radial-gradient(
            ellipse,

            rgba(
                181,
                138,
                69,
                .16
            )
            0%,

            rgba(
                181,
                138,
                69,
                .045
            )
            43%,

            transparent
            72%
        );

}


/* =========================================================
   ACTIVE CARD INNER LIGHT
========================================================= */

.reviews-manual-card::after {

    content:
        "";

    position:
        absolute;

    z-index:
        0;

    inset:
        0;

    border-radius:
        inherit;

    pointer-events:
        none;

    opacity:
        0;

    background:
        radial-gradient(
            ellipse
            at
            74%
            0%,

            rgba(
                235,
                195,
                127,
                .23
            )
            0%,

            rgba(
                181,
                138,
                69,
                .09
            )
            35%,

            transparent
            64%
        );

    transition:
        opacity
        .5s ease;

}


/* =========================================================
   ACTIVE / CENTER CARD
========================================================= */

.reviews-manual-card.is-active {

    z-index:
        10;

    opacity:
        1;

    transform:
        translateY(
            -14px
        )
        scale(
            1.035
        );

    filter:
        none;

    border-color:
        rgba(
            199,
            168,
            112,
            .58
        );

    background:
        linear-gradient(
            145deg,

            #1d1b18
            0%,

            #151412
            30%,

            #101010
            73%,

            #0d0d0d
            100%
        );

    box-shadow:

        0
        -38px
        88px
        rgba(
            199,
            154,
            84,
            .22
        ),

        0
        -12px
        44px
        rgba(
            226,
            183,
            110,
            .10
        ),

        0
        0
        90px
        rgba(
            181,
            138,
            69,
            .13
        ),

        0
        45px
        95px
        rgba(
            0,
            0,
            0,
            .60
        ),

        inset
        0
        1px
        0
        rgba(
            255,
            255,
            255,
            .09
        );

}


.reviews-manual-card.is-active::before {

    opacity:
        .92;

    background:
        radial-gradient(
            ellipse,

            rgba(
                235,
                195,
                127,
                .27
            )
            0%,

            rgba(
                181,
                138,
                69,
                .10
            )
            45%,

            transparent
            72%
        );

}


.reviews-manual-card.is-active::after {

    opacity:
        1;

}


/* =========================================================
   CONTENT ABOVE CARD LIGHTS
========================================================= */

.reviews-manual-card-top,
.reviews-manual-card-quote,
.reviews-manual-card-text,
.reviews-manual-card-bottom {

    position:
        relative;

    z-index:
        2;

}


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

.reviews-manual-card-top {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        16px;

}


.reviews-manual-author {

    min-width:
        0;

    display:
        flex;

    align-items:
        center;

    gap:
        14px;

}


.reviews-manual-avatar {

    width:
        46px;

    height:
        46px;

    flex:
        0 0 46px;

    display:
        grid;

    place-items:
        center;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .10
        );

    border-radius:
        50%;

    background:
        rgba(
            255,
            255,
            255,
            .025
        );

    color:
        var(--gold-soft);

    font-size:
        11px;

    font-weight:
        600;

    letter-spacing:
        .05em;

}


.reviews-manual-author-info {

    min-width:
        0;

}


.reviews-manual-author-info strong {

    display:
        block;

    overflow:
        hidden;

    color:
        var(--text);

    font-size:
        14px;

    font-weight:
        600;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;

}


.reviews-manual-author-info span {

    display:
        block;

    margin-top:
        4px;

    color:
        var(--text-muted);

    font-size:
        11px;

}


.reviews-manual-card-stars {

    flex-shrink:
        0;

    color:
        var(--gold);

    font-size:
        11px;

    letter-spacing:
        1px;

}


/* =========================================================
   QUOTE
========================================================= */

.reviews-manual-card-quote {

    height:
        46px;

    margin-top:
        30px;

    color:
        rgba(
            181,
            138,
            69,
            .48
        );

    font-family:
        var(--serif);

    font-size:
        84px;

    line-height:
        .7;

}


/* =========================================================
   REVIEW TEXT
========================================================= */

.reviews-manual-card-text {

    margin-top:
        5px;

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

    font-family:
        var(--serif);

    font-size:
        clamp(
            20px,
            1.7vw,
            25px
        );

    font-weight:
        500;

    line-height:
        1.4;

    letter-spacing:
        -.012em;

}


.reviews-manual-card:not(.is-active)
.reviews-manual-card-text {

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

}


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

.reviews-manual-card-bottom {

    margin-top:
        auto;

    padding-top:
        24px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        15px;

    border-top:
        1px solid
        rgba(
            255,
            255,
            255,
            .08
        );

}


.reviews-manual-source {

    color:
        var(--text-muted);

    font-size:
        9px;

    font-weight:
        600;

    letter-spacing:
        .16em;

}


.reviews-manual-google-small {

    color:
        var(--gold-soft);

    font-size:
        16px;

}


/* =========================================================
   CONTROLS
========================================================= */

.reviews-manual-controls {

    position:
        relative;

    z-index:
        4;

    margin-top:
        38px;

    display:
        grid;

    grid-template-columns:
        52px
        1fr
        52px;

    align-items:
        center;

    gap:
        24px;

}


.reviews-manual-arrow {

    width:
        52px;

    height:
        52px;

    padding:
        0;

    display:
        grid;

    place-items:
        center;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .12
        );

    border-radius:
        50%;

    background:
        rgba(
            255,
            255,
            255,
            .028
        );

    color:
        var(--text);

    cursor:
        pointer;

    -webkit-backdrop-filter:
        blur(
            12px
        );

    backdrop-filter:
        blur(
            12px
        );

    transition:
        transform
        .3s ease,
        border-color
        .3s ease,
        background-color
        .3s ease,
        color
        .3s ease;

}


.reviews-manual-arrow svg {

    width:
        18px;

    height:
        18px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.6;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;

}


@media (
    hover: hover
) {

    .reviews-manual-arrow:hover {

        transform:
            scale(
                1.06
            );

        border-color:
            var(--gold);

        background:
            var(--gold);

        color:
            var(--bg);

    }

}


/* =========================================================
   PAGINATION
========================================================= */

.reviews-manual-pagination {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        15px;

}


.reviews-manual-page-number {

    min-width:
        25px;

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

    font-size:
        9px;

    font-weight:
        600;

    letter-spacing:
        .14em;

}


.reviews-manual-page-bars {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        11px;

}


.reviews-manual-page-bar {

    width:
        40px;

    height:
        2px;

    border-radius:
        999px;

    background:
        rgba(
            255,
            255,
            255,
            .14
        );

    transition:
        width
        .45s ease,
        background-color
        .45s ease,
        box-shadow
        .45s ease;

}


.reviews-manual-page-bar.is-active {

    width:
        60px;

    background:
        var(--gold-soft);

    box-shadow:
        0
        0
        16px
        rgba(
            181,
            138,
            69,
            .34
        );

}


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

.reviews-manual-footer {

    position:
        relative;

    z-index:
        4;

    margin-top:
        58px;

    padding-top:
        24px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        30px;

    border-top:
        1px solid
        rgba(
            255,
            255,
            255,
            .08
        );

}


.reviews-manual-footer > div {

    display:
        flex;

    align-items:
        center;

    gap:
        7px;

}


.reviews-manual-footer > div span {

    color:
        var(--text-muted);

    font-size:
        11px;

}


.reviews-manual-footer > div strong {

    color:
        var(--text-soft);

    font-size:
        11px;

    font-weight:
        600;

}


.reviews-manual-google-link {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        14px;

    color:
        var(--text-soft);

    font-size:
        12px;

    font-weight:
        600;

}


.reviews-manual-google-link > span {

    width:
        38px;

    height:
        38px;

    display:
        grid;

    place-items:
        center;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .10
        );

    border-radius:
        50%;

    transition:
        background-color
        .3s ease,
        color
        .3s ease,
        border-color
        .3s ease;

}


.reviews-manual-google-link svg {

    width:
        15px;

    height:
        15px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.6;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;

}


/* =========================================================
   DESKTOP HOVER

   Estas reglas están al final deliberadamente para
   que ninguna regla vieja pise los transforms.
========================================================= */

@media (
    hover: hover
) {

    .reviews-manual-card:not(.is-active):hover {

        opacity:
            .80;

        transform:
            translateY(
                10px
            )
            scale(
                .96
            );

        filter:
            brightness(
                .95
            )
            saturate(
                .92
            );

        border-color:
            rgba(
                181,
                138,
                69,
                .23
            );

    }


    .reviews-manual-card.is-active {

        transform:
            translateY(
                -12px
            )
            scale(
                1.015
            );

    }

}


/* =========================================================
   TABLET
========================================================= */

@media (
    max-width: 900px
) {

    .reviews-manual-header {

        width:
            min(
                760px,
                100%
            );

    }


    .reviews-manual-track {

        gap:
            20px;

    }


    .reviews-manual-card {

        flex:
            0 0
            72%;

        min-height:
            420px;

    }


    .reviews-manual-light-beam {

        width:
            60vw;

        opacity:
            .68;

    }


    .reviews-manual-page-bar {

        width:
            28px;

    }


    .reviews-manual-page-bar.is-active {

        width:
            42px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (
    max-width: 650px
) {

    .reviews-manual {

        padding:
            85px
            0
            100px;

    }


    .reviews-manual-header {

        margin-bottom:
            50px;

    }


    .reviews-manual-eyebrow {

        gap:
            12px;

        font-size:
            8px;

        letter-spacing:
            .24em;

    }


    .reviews-manual-eyebrow-line {

        width:
            31px;

    }


    .reviews-manual-heading h2 {

        font-size:
            clamp(
                45px,
                13vw,
                62px
            );

        line-height:
            .92;

    }


    .reviews-manual-heading h2 em {

        display:
            block;

    }


    .reviews-manual-heading > p {

        max-width:
            340px;

        margin-top:
            18px;

        font-size:
            8px;

        letter-spacing:
            .12em;

    }


    /* =====================================================
       MOBILE RATING
    ===================================================== */

    .reviews-manual-rating {

        margin-top:
            27px;

        gap:
            13px;

    }


    .reviews-manual-rating-stars-group {

        gap:
            9px;

    }


    .reviews-manual-stars {

        font-size:
            14px;

        letter-spacing:
            1px;

    }


    .reviews-manual-rating-number {

        font-size:
            20px;

    }


    .reviews-manual-rating-divider {

        height:
            40px;

    }


    .reviews-manual-rating-info > strong {

        font-size:
            15px;

    }


    .reviews-manual-rating-info > span {

        font-size:
            6.5px;

        letter-spacing:
            .08em;

    }


    .reviews-manual-rating-google {

        display:
            none;

    }


    /* =====================================================
       MOBILE LIGHTS
    ===================================================== */

    .reviews-manual-lights {

        top:
            -130px;

        right:
            -30vw;

        left:
            -30vw;

    }


    .reviews-manual-light-beam {

        width:
            95vw;

        height:
            650px;

        opacity:
            .46;

        filter:
            blur(
                17px
            );

    }


    .reviews-manual-light-left {

        left:
            -35%;

    }


    .reviews-manual-light-right {

        right:
            -35%;

    }


    .reviews-manual-light-center {

        top:
            60px;

        width:
            125vw;

        opacity:
            .60;

    }


    /* =====================================================
       MOBILE CAROUSEL
    ===================================================== */

    .reviews-manual-viewport {

        padding:
            105px
            0
            105px;

        margin-top:
            -105px;

        margin-bottom:
            -105px;

    }


    .reviews-manual-track {


        gap:
            clamp(
                28px,
                7vw,
                32px
            );

    }


    .reviews-manual-card {

        flex:
            0 0
            88%;

        min-height:
            390px;

        padding:
            22px;

        border-radius:
            23px;

        opacity:
            .50;

        transform:
            scale(
                .95
            );

    }


    .reviews-manual-card.is-active {

        opacity:
            1;

        transform:
            scale(
                1
            );

        border-color:
            rgba(
                199,
                168,
                112,
                .48
            );

        box-shadow:
            0
            -25px
            60px
            rgba(
                181,
                138,
                69,
                .15
            ),

            0
            30px
            70px
            rgba(
                0,
                0,
                0,
                .46
            );

    }


    .reviews-manual-card-text {

        font-size:
            20px;

    }


    /* =====================================================
       MOBILE CONTROLS
    ===================================================== */

    .reviews-manual-controls {

        margin-top:
            27px;

        grid-template-columns:
            44px
            1fr
            44px;

        gap:
            9px;

    }


    .reviews-manual-arrow {

        width:
            44px;

        height:
            44px;

    }


    .reviews-manual-page-number {

        display:
            none;

    }


    .reviews-manual-page-bars {

        gap:
            6px;

    }


    .reviews-manual-page-bar {

        width:
            16px;

        height:
            2px;

    }


    .reviews-manual-page-bar.is-active {

        width:
            30px;

    }


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

    .reviews-manual-footer {

        margin-top:
            45px;

        flex-direction:
            column;

        align-items:
            flex-start;

        gap:
            18px;

    }


    .reviews-manual-google-link {

        width:
            100%;

        justify-content:
            space-between;

    }

}

/* =========================================================
   REVIEWS — FINAL 3 CARD GEOMETRY
========================================================= */

@media (
    min-width: 901px
) {

    .reviews-manual-carousel {

        --reviews-gap:
            26px;

        position:
            relative;

        width:
            100%;

    }


    .reviews-manual-viewport {

        position:
            relative;

        width:
            100%;

        overflow:
            hidden !important;

    }


    .reviews-manual-track {

        display:
            flex;

        align-items:
            stretch;

        gap:
            var(--reviews-gap);

        /*
            El track conserva el ancho del viewport.
            Las demás cards pueden continuar por fuera
            y el viewport las recorta.
        */

        width:
            100%;

    }


    .reviews-manual-card {

        /*
            JS asigna el flex-basis exacto.

            No calculamos nuevamente el ancho
            desde CSS.
        */

        flex-grow:
            0;

        flex-shrink:
            0;

    }

}

@media (
    hover: hover
) {

    .reviews-manual-card.is-active:hover {

        transform:
            translateY(
                -12px
            )
            scale(
                1.015
            );

    }

}

/* =========================================================
   REVIEWS — EXACT HEADER SPACING
========================================================= */

.reviews-manual-header {

    /* NICOLAU STUDIO → título */
    --reviews-gap-eyebrow-title:
        20px;

    /* título → subtítulo */
    --reviews-gap-title-subtitle:
        40px;

    /* subtítulo → puntuación */
    --reviews-gap-subtitle-rating:
        78px;

    /* bloque completo → carrusel */
    --reviews-gap-header-carousel:
        200px;


    gap:
        0 !important;

    margin-bottom:
        var(
            --reviews-gap-header-carousel
        ) !important;

}


/* =========================================================
   NICOLAU STUDIO → TITLE
========================================================= */

.reviews-manual-header
> .reviews-manual-eyebrow {

    margin:
        0
        0
        var(
            --reviews-gap-eyebrow-title
        )
        0 !important;

}


/* =========================================================
   TITLE + SUBTITLE
========================================================= */

.reviews-manual-heading {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    gap:
        var(
            --reviews-gap-title-subtitle
        );

}


.reviews-manual-heading h2 {

    margin:
        0 !important;

}


.reviews-manual-heading > p {

    margin:
        0 !important;

}


/* =========================================================
   SUBTITLE → RATING
========================================================= */

.reviews-manual-rating {

    margin:
        var(
            --reviews-gap-subtitle-rating
        )
        0
        0 !important;

}

/* =========================================================
   REVIEWS — DISABLE CINEMATIC LIGHTS
========================================================= */

.reviews-manual-lights {
    display: none;
}


/* =========================================================
   REVIEWS — IMAGE BEHIND TITLE
========================================================= */

.reviews-manual-heading {

    position:
        relative;

    isolation:
        isolate;

    z-index:
        1;

}


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

.reviews-manual-heading::before {

    content:
        "";

    position:
        absolute;

    z-index:
        0;

    top:
        50%;

    left:
        50%;

    width:
        min(
            760px,
            82vw
        );

    height:
        820px;

    transform:
        translate(
            -50%,
            -50%
        );

    background-image:
        url("im/cortando.webp");

    background-repeat:
        no-repeat;

    background-position:
        center;

    background-size:
        contain;

    opacity:
        .22;

    pointer-events:
        none;


    -webkit-mask-image:
        linear-gradient(
            to bottom,

            #000 0%,
            #000 72%,

            rgba(
                0,
                0,
                0,
                .92
            ) 80%,

            rgba(
                0,
                0,
                0,
                .60
            ) 88%,

            rgba(
                0,
                0,
                0,
                .25
            ) 95%,

            transparent 100%
        );

    mask-image:
        linear-gradient(
            to bottom,

            #000 0%,
            #000 72%,

            rgba(
                0,
                0,
                0,
                .92
            ) 80%,

            rgba(
                0,
                0,
                0,
                .60
            ) 88%,

            rgba(
                0,
                0,
                0,
                .25
            ) 95%,

            transparent 100%
        );

}

/* =========================================================
   REVIEWS — BACKGROUND IMAGE
   MOBILE FIX
========================================================= */

@media (
    max-width: 650px
) {

    .reviews-manual-heading::before {

        /*
            En desktop usamos una composición grande.

            En mobile reducimos la altura real del lienzo
            de la imagen para que acompañe únicamente
            título + subtítulo + rating.
        */

        top:
            46%;

        left:
            50%;


        /* =================================================
           SIZE
        ================================================= */

        width:
            min(
                430px,
                94vw
            );

        height:
            540px;


        /* =================================================
           POSITION
        ================================================= */

        transform:
            translate(
                -50%,
                -50%
            );


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

        background-image:
            url("im/cortando.webp");

        background-repeat:
            no-repeat;

        background-position:
            center center;

        background-size:
            contain;


        /* =================================================
           VISIBILITY
        ================================================= */

        opacity:
            .21;

        pointer-events:
            none;


        /* =================================================
           BOTTOM FADE

           Conservamos la parte superior completa.
           La imagen desaparece progresivamente antes
           de llegar al carrusel.
        ================================================= */

        -webkit-mask-image:
            linear-gradient(
                to bottom,

                #000
                0%,

                #000
                58%,

                rgba(
                    0,
                    0,
                    0,
                    .94
                )
                67%,

                rgba(
                    0,
                    0,
                    0,
                    .72
                )
                77%,

                rgba(
                    0,
                    0,
                    0,
                    .40
                )
                87%,

                rgba(
                    0,
                    0,
                    0,
                    .14
                )
                95%,

                transparent
                100%
            );

        mask-image:
            linear-gradient(
                to bottom,

                #000
                0%,

                #000
                58%,

                rgba(
                    0,
                    0,
                    0,
                    .94
                )
                67%,

                rgba(
                    0,
                    0,
                    0,
                    .72
                )
                77%,

                rgba(
                    0,
                    0,
                    0,
                    .40
                )
                87%,

                rgba(
                    0,
                    0,
                    0,
                    .14
                )
                95%,

                transparent
                100%
            );

    }

}


/* =========================================================
   REVIEWS — BACKGROUND IMAGE
   SMALL MOBILE
========================================================= */

@media (
    max-width: 390px
) {

    .reviews-manual-heading::before {

        top:
            45%;

        width:
            94vw;

        height:
            500px;

        opacity:
            .20;

    }

}


/* =========================================================
   CONTENT ABOVE IMAGE
========================================================= */

.reviews-manual-heading > * {

    position:
        relative;

    z-index:
        2;

}







/* =========================================================
   PRODUCTS — SIDE CONE LIGHTS
   SAME GEOMETRY · SOFTER REAL LIGHT
========================================================= */

.products-showcase > .container {

    position:
        relative;

    z-index:
        2;

}


/* =========================================================
   LIGHT LAYER
========================================================= */

.products-lights {

    position:
        absolute;

    z-index:
        0;

    inset:
        0;

    overflow:
        hidden;

    pointer-events:
        none;

}


/* =========================================================
   LIGHT BASE

   POSICIÓN Y TAMAÑO:
   SIN CAMBIOS
========================================================= */

.products-light {

    position:
        absolute;

    top:
        -120px;

    width:
        clamp(
            820px,
            54vw,
            1120px
        );

    height:
        clamp(
            980px,
            66vw,
            1280px
        );


    opacity:
        .68;

    pointer-events:
        none;


    /*
        Blur suficiente para que
        los límites del cono no parezcan sólidos.
    */

    filter:
        blur(
            42px
        );

    mix-blend-mode:
        screen;

    will-change:
        transform;

}


/* =========================================================
   LEFT LIGHT

   GEOMETRÍA:
   SIN CAMBIOS
========================================================= */

.products-light-left {

    left:
        clamp(
            -300px,
            -13vw,
            -190px
        );


    clip-path:
        polygon(

            4% 0%,

            11% 0%,

            92% 100%,

            30% 100%

        );


    /*
        MISMO COLOR DORADO EN TODO EL HAZ.

        Cerca del lateral:
        prácticamente transparente.

        Hacia la card:
        aumenta progresivamente.
    */

    background:

        /* =================================================
           BLOOM SOBRE LA ZONA DEL PRODUCTO
        ================================================== */

        radial-gradient(
            ellipse
            at
            68% 84%,

            rgba(
                181,
                138,
                69,
                .24
            )
            0%,

            rgba(
                181,
                138,
                69,
                .16
            )
            28%,

            rgba(
                181,
                138,
                69,
                .08
            )
            48%,

            rgba(
                181,
                138,
                69,
                .025
            )
            65%,

            transparent
            78%
        ),


        /* =================================================
           FADE LATERAL

           izquierda:
           desaparece hacia el borde de pantalla
           y gana luz al entrar.
        ================================================== */

        linear-gradient(
            to right,

            transparent
            0%,

            rgba(
                181,
                138,
                69,
                .008
            )
            7%,

            rgba(
                181,
                138,
                69,
                .025
            )
            14%,

            rgba(
                181,
                138,
                69,
                .055
            )
            23%,

            rgba(
                181,
                138,
                69,
                .10
            )
            36%,

            rgba(
                181,
                138,
                69,
                .16
            )
            52%,

            rgba(
                181,
                138,
                69,
                .20
            )
            68%,

            rgba(
                181,
                138,
                69,
                .17
            )
            82%,

            rgba(
                181,
                138,
                69,
                .08
            )
            93%,

            transparent
            100%
        );

}


/* =========================================================
   RIGHT LIGHT

   ESPEJO EXACTO
   GEOMETRÍA SIN CAMBIOS
========================================================= */

.products-light-right {

    right:
        clamp(
            -300px,
            -13vw,
            -190px
        );


    clip-path:
        polygon(

            89% 0%,

            96% 0%,

            70% 100%,

            8% 100%

        );


    background:

        /* =================================================
           BLOOM SOBRE LA ZONA DEL PRODUCTO
        ================================================== */

        radial-gradient(
            ellipse
            at
            32% 84%,

            rgba(
                181,
                138,
                69,
                .24
            )
            0%,

            rgba(
                181,
                138,
                69,
                .16
            )
            28%,

            rgba(
                181,
                138,
                69,
                .08
            )
            48%,

            rgba(
                181,
                138,
                69,
                .025
            )
            65%,

            transparent
            78%
        ),


        /* =================================================
           FADE LATERAL

           derecha:
           desaparece hacia el borde de pantalla
           y gana luz hacia adentro.
        ================================================== */

        linear-gradient(
            to left,

            transparent
            0%,

            rgba(
                181,
                138,
                69,
                .008
            )
            7%,

            rgba(
                181,
                138,
                69,
                .025
            )
            14%,

            rgba(
                181,
                138,
                69,
                .055
            )
            23%,

            rgba(
                181,
                138,
                69,
                .10
            )
            36%,

            rgba(
                181,
                138,
                69,
                .16
            )
            52%,

            rgba(
                181,
                138,
                69,
                .20
            )
            68%,

            rgba(
                181,
                138,
                69,
                .17
            )
            82%,

            rgba(
                181,
                138,
                69,
                .08
            )
            93%,

            transparent
            100%
        );

}


/* =========================================================
   VERTICAL LIGHT FADE

   Mantiene suave el nacimiento superior
   y la desaparición inferior.
========================================================= */

.products-light {

    -webkit-mask-image:
        linear-gradient(
            to bottom,

            transparent
            0%,

            rgba(
                0,
                0,
                0,
                .06
            )
            4%,

            rgba(
                0,
                0,
                0,
                .24
            )
            9%,

            rgba(
                0,
                0,
                0,
                .55
            )
            15%,

            rgba(
                0,
                0,
                0,
                .85
            )
            23%,

            #000
            32%,

            #000
            78%,

            rgba(
                0,
                0,
                0,
                .82
            )
            86%,

            rgba(
                0,
                0,
                0,
                .48
            )
            93%,

            rgba(
                0,
                0,
                0,
                .16
            )
            97%,

            transparent
            100%
        );

    mask-image:
        linear-gradient(
            to bottom,

            transparent
            0%,

            rgba(
                0,
                0,
                0,
                .06
            )
            4%,

            rgba(
                0,
                0,
                0,
                .24
            )
            9%,

            rgba(
                0,
                0,
                0,
                .55
            )
            15%,

            rgba(
                0,
                0,
                0,
                .85
            )
            23%,

            #000
            32%,

            #000
            78%,

            rgba(
                0,
                0,
                0,
                .82
            )
            86%,

            rgba(
                0,
                0,
                0,
                .48
            )
            93%,

            rgba(
                0,
                0,
                0,
                .16
            )
            97%,

            transparent
            100%
        );

}


/* =========================================================
   TABLET
   POSICIÓN Y TAMAÑO SIN CAMBIOS
========================================================= */

@media (
    max-width: 1000px
) {

    .products-light {

        top:
            -75px;

        width:
            740px;

        height:
            900px;

        opacity:
            .50;

        filter:
            blur(
                34px
            );

    }


    .products-light-left {

        left:
            -245px;

    }


    .products-light-right {

        right:
            -245px;

    }

}


/* =========================================================
   MOBILE
   POSICIÓN Y TAMAÑO SIN CAMBIOS
========================================================= */

@media (
    max-width: 650px
) {

    .products-light {

        top:
            -35px;

        width:
            520px;

        height:
            660px;

        opacity:
            .32;

        filter:
            blur(
                25px
            );

    }


    .products-light-left {

        left:
            -220px;

    }


    .products-light-right {

        right:
            -220px;

    }

}


/* =========================================================
   REVIEWS — MOBILE FINAL TUNING
   IMAGE + VERTICAL SPACING
========================================================= */

@media (
    max-width: 650px
) {

    /* =====================================================
       SPACING CONTROLS

       Tocando solamente estos cuatro valores podés
       modificar todas las distancias principales.
    ===================================================== */

    .reviews-manual-header {

        /* NICOLAU STUDIO → título */
        --reviews-gap-eyebrow-title:
            16px;

        /* título → subtítulo */
        --reviews-gap-title-subtitle:
            510px;

        /* subtítulo → puntuación */
        --reviews-gap-subtitle-rating:
            40px;

        /* puntuación / header → carrusel */
        --reviews-gap-header-carousel:
            62px;

    }


    /* =====================================================
       SECTION
    ===================================================== */

    .reviews-manual {

        padding-top:
            82px;

        padding-bottom:
            95px;

    }


    /* =====================================================
       EYEBROW → TITLE
    ===================================================== */

    .reviews-manual-header
    > .reviews-manual-eyebrow {

        margin:
            0
            0
            var(
                --reviews-gap-eyebrow-title
            )
            0
            !important;

    }


    /* =====================================================
       TITLE / SUBTITLE GROUP
    ===================================================== */

    .reviews-manual-heading {

        gap:
            var(
                --reviews-gap-title-subtitle
            );

    }


    /* =====================================================
       TITLE
    ===================================================== */

    .reviews-manual-heading h2 {

        margin:
            0
            !important;

        font-size:
            clamp(
                48px,
                13.7vw,
                62px
            );

        line-height:
            .91;

    }


    /* =====================================================
       SUBTITLE
    ===================================================== */

    .reviews-manual-heading > p {

        max-width:
            330px;

        margin:
            0
            auto
            !important;

        font-size:
            14px;

        line-height:
            1.6;

        text-align:
            center;

    }


    /* =====================================================
       SUBTITLE → RATING
    ===================================================== */

    .reviews-manual-rating {

        margin:
            var(
                --reviews-gap-subtitle-rating
            )
            0
            0
            !important;

    }


    /* =====================================================
       HEADER → CAROUSEL
    ===================================================== */

    .reviews-manual-header {

        margin-bottom:
            var(
                --reviews-gap-header-carousel
            )
            !important;

    }


    /* =====================================================
       BACKGROUND IMAGE — CORTANDO.PNG

       Mobile tiene su propia geometría.
    ===================================================== */

    .reviews-manual-heading::before {

        top:
            50%;

        left:
            50%;


        /*
            Un poco más grande en celular para que
            se perciba como una imagen editorial de fondo
            y no como una imagen chica detrás del texto.
        */

        width:
            min(
                470px,
                112vw
            );

        height:
            560px;


        transform:
            translate(
                -50%,
                -50%
            );


        background-position:
            center
            center;

        background-size:
            contain;


        opacity:
            .35;


        /*
            Fade inferior más temprano porque en mobile
            tenemos mucha menos altura disponible.
        */

        -webkit-mask-image:
            linear-gradient(
                to bottom,

                #000
                0%,

                #000
                62%,

                rgba(
                    0,
                    0,
                    0,
                    .90
                )
                72%,

                rgba(
                    0,
                    0,
                    0,
                    .55
                )
                82%,

                rgba(
                    0,
                    0,
                    0,
                    .20
                )
                91%,

                transparent
                100%
            );

        mask-image:
            linear-gradient(
                to bottom,

                #000
                0%,

                #000
                62%,

                rgba(
                    0,
                    0,
                    0,
                    .90
                )
                72%,

                rgba(
                    0,
                    0,
                    0,
                    .55
                )
                82%,

                rgba(
                    0,
                    0,
                    0,
                    .20
                )
                91%,

                transparent
                100%
            );

    }

}


/* =========================================================
   REVIEWS — SMALL MOBILE
========================================================= */

@media (
    max-width: 390px
) {

    .reviews-manual-header {

        --reviews-gap-eyebrow-title:
            14px;

        --reviews-gap-title-subtitle:
            21px;

        --reviews-gap-subtitle-rating:
            38px;

        --reviews-gap-header-carousel:
            64px;

    }


    .reviews-manual-heading h2 {

        font-size:
            clamp(
                45px,
                13.2vw,
                55px
            );

    }


    .reviews-manual-heading > p {

        max-width:
            305px;

        font-size:
            13.5px;

    }


    .reviews-manual-heading::before {

        top:
            47%;

        width:
            118vw;

        height:
            525px;

    }

}


/* =========================================================
   REVIEWS — MOBILE RATING BIGGER
   ONLY MOBILE
========================================================= */

@media (
    max-width: 650px
) {

    /* =====================================================
       GENERAL RATING AREA
    ===================================================== */

    .reviews-manual-rating {

        margin-top:
            30px;

        gap:
            16px;

    }


    /* =====================================================
       STARS + 5,0
    ===================================================== */

    .reviews-manual-rating-stars-group {

        gap:
            12px;

    }


    .reviews-manual-stars {

        font-size:
            20px;

        letter-spacing:
            1.5px;

    }


    /* =====================================================
       5,0
    ===================================================== */

    .reviews-manual-rating-number {

        font-size:
            38px;

        line-height:
            .95;

    }


    /* =====================================================
       DIVIDER
    ===================================================== */

    .reviews-manual-rating-divider {

        height:
            48px;

    }


    /* =====================================================
       EXCELENTE
    ===================================================== */

    .reviews-manual-rating-info > strong {

        font-size:
            25px;

        line-height:
            1;

    }


    /* =====================================================
       TEXTO PEQUEÑO DEBAJO
    ===================================================== */

    .reviews-manual-rating-info > span {

        margin-top:
            6px;

        font-size:
            8px;

        letter-spacing:
            .09em;

    }

}


/* =========================================================
   CREDENTIALS BACKGROUND PHOTO — MOBILE
   BOTTOM FADE ONLY
========================================================= */

@media (
    max-width: 650px
) {

    .credentials-background-photo img {

        /* =================================================
           POSICIÓN
        ================================================= */

        top:
            59%;

        left:
            15%;

        max-height:
            none;


        /* =================================================
           MASK
           
           ARRIBA:
           totalmente visible desde el inicio.

           ABAJO:
           fade progresivo y largo.
        ================================================= */

        -webkit-mask-image:
            linear-gradient(
                to bottom,

                /* -----------------------------------------
                   TOP — FULLY VISIBLE
                ----------------------------------------- */

                #000000
                0%,

                #000000
                55%,


                /* -----------------------------------------
                   BOTTOM — SOFT FADE
                ----------------------------------------- */

                rgba(
                    0,
                    0,
                    0,
                    .96
                )
                60%,

                rgba(
                    0,
                    0,
                    0,
                    .86
                )
                66%,

                rgba(
                    0,
                    0,
                    0,
                    .70
                )
                72%,

                rgba(
                    0,
                    0,
                    0,
                    .52
                )
                78%,

                rgba(
                    0,
                    0,
                    0,
                    .34
                )
                84%,

                rgba(
                    0,
                    0,
                    0,
                    .18
                )
                90%,

                rgba(
                    0,
                    0,
                    0,
                    .07
                )
                95%,

                transparent
                100%
            );


        mask-image:
            linear-gradient(
                to bottom,

                #000000
                0%,

                #000000
                55%,

                rgba(
                    0,
                    0,
                    0,
                    .96
                )
                60%,

                rgba(
                    0,
                    0,
                    0,
                    .86
                )
                66%,

                rgba(
                    0,
                    0,
                    0,
                    .70
                )
                72%,

                rgba(
                    0,
                    0,
                    0,
                    .52
                )
                78%,

                rgba(
                    0,
                    0,
                    0,
                    .34
                )
                84%,

                rgba(
                    0,
                    0,
                    0,
                    .18
                )
                90%,

                rgba(
                    0,
                    0,
                    0,
                    .07
                )
                95%,

                transparent
                100%
            );


        -webkit-mask-repeat:
            no-repeat;

        mask-repeat:
            no-repeat;


        -webkit-mask-size:
            100%
            100%;

        mask-size:
            100%
            100%;

    }

}


/* =========================================================
   SIGNATURE — MOBILE SAFARI RENDER FIX
========================================================= */

@media (
    max-width: 650px
) {

    .nicolau-signature-stroke,
    .nicolau-signature-fill {

        /*
            Mantiene ambos textos exactamente sobre
            la misma geometría durante el repaint.
        */

        transform-box:
            fill-box;

        transform-origin:
            center;

    }


    .nicolau-signature-stroke {

        stroke-linecap:
            round;

        stroke-linejoin:
            round;

    }

}


/* =========================================================
   SIGNATURE — MOBILE SVG RENDER STABILITY
========================================================= */

@media (
    max-width: 650px
) {

    .nicolau-signature-stroke,
    .nicolau-signature-fill {

        text-rendering:
            geometricPrecision;

    }


    .nicolau-signature-fill {

        pointer-events:
            none;

    }

}


/* =========================================================
   DESKTOP — FIX MARQUEE BRAND CLIPPING
========================================================= */

@media (min-width: 901px) {

    .marquee-inner {
        padding-top: 2px;
        padding-bottom: 2px;
    }

    .marquee-brand {
        display: inline-flex;
        align-items: center;

        line-height: 1.2;

        padding-top: 9px;
        padding-bottom: 10px;
    }

}