/* ============================================================
   BUONDÌ
   GLOBAL STYLES
============================================================ */


/* ------------------------------------------------------------
   VARIABLES
------------------------------------------------------------- */

:root {

    --color-cream: #eee7d8;
    --color-ivory: #f7f3ea;

    --color-espresso: #211914;
    --color-charcoal: #181614;

    --color-wine: #762c27;
    --color-terracotta: #a65f48;
    --color-olive: #62654d;

    --color-white: #ffffff;

    --font-display:
        "Cormorant Garamond",
        Georgia,
        serif;

    --font-body:
        "Manrope",
        Arial,
        sans-serif;

    --header-height: 96px;

    --page-padding:
        clamp(
            24px,
            4vw,
            72px
        );

}


/* ------------------------------------------------------------
   RESET
------------------------------------------------------------- */

*,
*::before,
*::after {
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {

    margin: 0;

    background:
        var(--color-cream);

    color:
        var(--color-espresso);

    font-family:
        var(--font-body);

    -webkit-font-smoothing:
        antialiased;

    overflow-x: hidden;

}


body.menu-open {
    overflow: hidden;
}


img {
    display: block;
    max-width: 100%;
}


a {
    color: inherit;
    text-decoration: none;
}


button {
    color: inherit;
    font: inherit;
}


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

.site-header {

    position: fixed;

    top: 0;
    left: 0;

    width: 100%;
    height: var(--header-height);

    z-index: 1000;

    display: grid;

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

    align-items: center;

    padding:
        0 var(--page-padding);

    color:
        var(--color-white);

    transition:
        background-color .45s ease,
        backdrop-filter .45s ease,
        height .45s ease,
        border-color .45s ease;

    border-bottom:
        1px solid transparent;

}


.site-header--scrolled {

    height: 76px;

    background:
        rgba(24, 22, 20, .82);

    backdrop-filter:
        blur(18px);

    -webkit-backdrop-filter:
        blur(18px);

    border-bottom-color:
        rgba(255, 255, 255, .08);

}


/* ------------------------------------------------------------
   BRAND
------------------------------------------------------------- */

.brand {

    justify-self: start;

    position: relative;

    z-index: 2;

}


.brand__logo {

    width:
        clamp(
            105px,
            10vw,
            160px
        );

    max-height: 52px;

    object-fit: contain;

}


/* ------------------------------------------------------------
   DESKTOP NAV
------------------------------------------------------------- */

.desktop-nav {

    display: flex;

    align-items: center;

    justify-content: center;

    gap:
        clamp(
            28px,
            3vw,
            52px
        );

}


.desktop-nav a {

    position: relative;

    font-size: 12px;

    font-weight: 500;

    letter-spacing: .12em;

    text-transform: uppercase;

}


.desktop-nav a::after {

    content: "";

    position: absolute;

    left: 0;
    bottom: -8px;

    width: 100%;
    height: 1px;

    background:
        currentColor;

    transform:
        scaleX(0);

    transform-origin:
        right center;

    transition:
        transform .35s ease;

}


.desktop-nav a:hover::after {

    transform:
        scaleX(1);

    transform-origin:
        left center;

}


/* ------------------------------------------------------------
   RESERVATION HEADER BUTTON
------------------------------------------------------------- */

.header-reservation {

    justify-self: end;

    display: flex;

    align-items: center;

    gap: 12px;

    padding:
        12px 18px;

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

    border-radius:
        100px;

    font-size: 11px;

    font-weight: 600;

    letter-spacing: .12em;

    text-transform: uppercase;

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

}


.header-reservation:hover {

    background:
        var(--color-ivory);

    color:
        var(--color-charcoal);

}


/* ------------------------------------------------------------
   MOBILE BUTTON
------------------------------------------------------------- */

.menu-toggle {

    display: none;

    width: 42px;
    height: 42px;

    padding: 0;

    border: none;

    background: transparent;

    cursor: pointer;

    position: relative;

    z-index: 1101;

}


.menu-toggle span {

    position: absolute;

    left: 8px;

    width: 26px;
    height: 1px;

    background:
        currentColor;

    transition:
        transform .35s ease,
        top .35s ease;

}


.menu-toggle span:first-child {
    top: 16px;
}


.menu-toggle span:last-child {
    top: 25px;
}


.menu-toggle.is-active span:first-child {

    top: 21px;

    transform:
        rotate(45deg);

}


.menu-toggle.is-active span:last-child {

    top: 21px;

    transform:
        rotate(-45deg);

}


/* ------------------------------------------------------------
   MOBILE MENU
------------------------------------------------------------- */

.mobile-menu {
    display: none;
}


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

.hero {

    position: relative;

    width: 100%;
    min-height: 100svh;

    overflow: hidden;

    display: flex;

    align-items: center;

    color:
        var(--color-white);

    background:
        var(--color-charcoal);

}


/* ------------------------------------------------------------
   HERO MEDIA
------------------------------------------------------------- */

.hero__media {

    position: absolute;

    inset: 0;

    overflow: hidden;

}


.hero__image {

    position: absolute;

    inset: -5%;

    width: 110%;
    height: 110%;

    max-width: none;

    object-fit: cover;

    object-position:
        center center;

    transform:
        scale(1.05);

    will-change:
        transform;

}


/* ------------------------------------------------------------
   HERO CINEMATIC OVERLAY
------------------------------------------------------------- */

.hero__overlay {

    position: absolute;

    inset: 0;

    z-index: 1;

    background:

        linear-gradient(
            90deg,
            rgba(12, 10, 8, .78) 0%,
            rgba(12, 10, 8, .46) 42%,
            rgba(12, 10, 8, .10) 72%,
            rgba(12, 10, 8, .22) 100%
        ),

        linear-gradient(
            0deg,
            rgba(10, 8, 7, .65) 0%,
            transparent 45%
        );

}


/* ------------------------------------------------------------
   HERO GRAIN
------------------------------------------------------------- */

.hero__grain {

    position: absolute;

    inset: 0;

    z-index: 2;

    pointer-events: none;

    opacity: .09;

    background-image:
        url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='.7'/%3E%3C/svg%3E");

}


/* ------------------------------------------------------------
   HERO CONTENT
------------------------------------------------------------- */

.hero__content {

    position: relative;

    z-index: 10;

    width:
        min(
            900px,
            86vw
        );

    margin-left:
        var(--page-padding);

    padding-top:
        80px;

}


.hero__eyebrow {

    margin:
        0 0 13px;

    font-family:
        var(--font-display);

    font-size:
        clamp(
            18px,
            1.5vw,
            26px
        );

    font-style: italic;

    font-weight: 400;

    letter-spacing: .05em;

}


.hero__title {

    margin: 0;

    font-family:
        var(--font-display);

    font-size:
        clamp(
            88px,
            13vw,
            210px
        );

    font-weight: 500;

    letter-spacing:
        -.065em;

    line-height: .76;

    text-indent:
        -.06em;

}


.hero__subtitle {

    margin:
        clamp(
            30px,
            5vh,
            54px
        )
        0
        0;

    font-family:
        var(--font-display);

    font-size:
        clamp(
            30px,
            4vw,
            62px
        );

    line-height: .95;

    font-weight: 400;

}


/* ------------------------------------------------------------
   HERO BUTTONS
------------------------------------------------------------- */

.hero__actions {

    display: flex;

    align-items: center;

    gap: 14px;

    margin-top:
        clamp(
            30px,
            5vh,
            50px
        );

}


.button {

    min-height: 54px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 18px;

    padding:
        0 25px;

    border-radius:
        100px;

    font-size: 11px;

    font-weight: 600;

    letter-spacing: .12em;

    text-transform: uppercase;

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

}


.button:hover {
    transform: translateY(-2px);
}


.button--primary {

    background:
        var(--color-ivory);

    color:
        var(--color-charcoal);

}


.button--primary:hover {

    background:
        var(--color-white);

}


.button--ghost {

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

    color:
        var(--color-white);

}


.button--ghost:hover {

    border-color:
        var(--color-white);

}


/* ------------------------------------------------------------
   HERO LOCATION
------------------------------------------------------------- */

.hero__location {

    position: absolute;

    z-index: 10;

    left:
        var(--page-padding);

    bottom: 35px;

    display: flex;

    align-items: center;

    gap: 9px;

    font-size: 10px;

    letter-spacing: .12em;

    text-transform: uppercase;

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

}


.hero__location-line {

    display: block;

    width: 30px;
    height: 1px;

    background:
        currentColor;

}


/* ------------------------------------------------------------
   HERO INDEX
------------------------------------------------------------- */

.hero__index {

    position: absolute;

    z-index: 10;

    right:
        var(--page-padding);

    bottom: 31px;

    font-family:
        var(--font-display);

    font-style: italic;

    font-size: 16px;

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

}


/* ------------------------------------------------------------
   SCROLL INDICATOR
------------------------------------------------------------- */

.scroll-indicator {

    position: absolute;

    z-index: 10;

    right:
        var(--page-padding);

    top: 50%;

    transform:
        translateY(-50%);

    display: flex;

    align-items: center;

    gap: 20px;

    writing-mode:
        vertical-rl;

}


.scroll-indicator__text {

    font-size: 9px;

    letter-spacing: .25em;

    text-transform: uppercase;

    opacity: .65;

}


.scroll-indicator__line {

    width: 1px;
    height: 75px;

    display: block;

    position: relative;

    overflow: hidden;

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

}


.scroll-indicator__line span {

    position: absolute;

    top: -100%;

    left: 0;

    width: 100%;
    height: 100%;

    background:
        var(--color-white);

    animation:
        scrollLine
        2.4s
        cubic-bezier(
            .76,
            0,
            .24,
            1
        )
        infinite;

}


@keyframes scrollLine {

    0% {

        transform:
            translateY(0);

    }

    60%,
    100% {

        transform:
            translateY(200%);

    }

}


/* ============================================================
   LA NOSTRA CUCINA
   SCROLL PIZZA
============================================================ */

.pizza-scroll {

    position: relative;

    height: 500vh;

    background:
        var(--color-cream);

}


.pizza-scroll__sticky {

    position: sticky;

    top: 0;

    width: 100%;
    height: 100svh;

    overflow: hidden;

    background:
        var(--color-cream);

    color:
        var(--color-espresso);

}


/* ------------------------------------------------------------
   PIZZA MEDIA
------------------------------------------------------------- */

.pizza-scroll__media {

    position: absolute;

    inset: 0;

}


.pizza-scroll__video {

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position:
        center center;

}


/* ------------------------------------------------------------
   PIZZA OVERLAYS
------------------------------------------------------------- */

.pizza-scroll__overlay {

    position: absolute;

    inset: 0;

    z-index: 2;

    pointer-events: none;

    background:

        linear-gradient(
            90deg,
            rgba(
                238,
                231,
                216,
                .97
            ) 0%,

            rgba(
                238,
                231,
                216,
                .90
            ) 22%,

            rgba(
                238,
                231,
                216,
                .52
            ) 43%,

            rgba(
                238,
                231,
                216,
                .08
            ) 65%,

            transparent 100%
        ),

        linear-gradient(
            0deg,
            rgba(
                238,
                231,
                216,
                .42
            ),
            transparent 35%
        );

}


.pizza-scroll__grain {

    position: absolute;

    inset: 0;

    z-index: 3;

    pointer-events: none;

    opacity: .045;

    background-image:
        url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='.7'/%3E%3C/svg%3E");

}


/* ------------------------------------------------------------
   PIZZA CONTENT
------------------------------------------------------------- */

.pizza-scroll__content {

    position: absolute;

    z-index: 10;

    left:
        var(--page-padding);

    top: 50%;

    transform:
        translateY(-50%);

    width:
        min(
            600px,
            40vw
        );

}


.pizza-scroll__eyebrow {

    margin:
        0 0 23px;

    color:
        var(--color-wine);

    font-family:
        var(--font-display);

    font-size:
        clamp(
            20px,
            1.7vw,
            28px
        );

    font-style: italic;

}


.pizza-scroll__title {

    margin: 0;

    max-width: 650px;

    font-family:
        var(--font-display);

    font-size:
        clamp(
            56px,
            6.7vw,
            110px
        );

    font-weight: 400;

    letter-spacing:
        -.045em;

    line-height: .85;

}


.pizza-scroll__description {

    max-width: 420px;

    margin:
        33px 0 0;

    font-size:
        clamp(
            12px,
            1vw,
            15px
        );

    line-height: 1.9;

    opacity: .72;

}


/* ------------------------------------------------------------
   PIZZA STEP COUNTER
------------------------------------------------------------- */

.pizza-scroll__step {

    position: absolute;

    z-index: 10;

    right:
        var(--page-padding);

    top:
        calc(
            var(--header-height)
            + 35px
        );

    display: flex;

    align-items: center;

    gap: 11px;

    font-family:
        var(--font-display);

    font-size: 15px;

    font-style: italic;

}


.pizza-scroll__separator {

    width: 32px;
    height: 1px;

    background:
        currentColor;

    opacity: .35;

}


/* ------------------------------------------------------------
   PIZZA PROGRESS
------------------------------------------------------------- */

.pizza-scroll__progress {

    position: absolute;

    z-index: 10;

    left:
        var(--page-padding);

    right:
        var(--page-padding);

    bottom: 42px;

}


.pizza-scroll__progress-track {

    width: 100%;
    height: 1px;

    background:
        rgba(
            33,
            25,
            20,
            .18
        );

    overflow: hidden;

}


.pizza-scroll__progress-fill {

    display: block;

    width: 0%;
    height: 100%;

    background:
        var(--color-wine);

}


/* ------------------------------------------------------------
   PIZZA SCROLL HINT
------------------------------------------------------------- */

.pizza-scroll__hint {

    position: absolute;

    z-index: 10;

    right:
        var(--page-padding);

    bottom: 60px;

    display: flex;

    gap: 12px;

    align-items: center;

    font-size: 9px;

    font-weight: 600;

    letter-spacing: .15em;

    text-transform: uppercase;

    opacity: .5;

}


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

@media (
    max-width: 1024px
) {

    :root {

        --header-height: 80px;

    }


    .desktop-nav {
        display: none;
    }


    .header-reservation {
        display: none;
    }


    .site-header {

        grid-template-columns:
            1fr auto;

    }


    .menu-toggle {
        display: block;
    }


    /* --------------------------------------------------------
       MOBILE FULLSCREEN MENU
    --------------------------------------------------------- */

    .mobile-menu {

        position: fixed;

        inset: 0;

        z-index: 999;

        display: flex;

        flex-direction: column;

        justify-content: center;

        padding:
            110px
            var(--page-padding)
            50px;

        background:
            var(--color-espresso);

        color:
            var(--color-ivory);

        opacity: 0;

        visibility: hidden;

        pointer-events: none;

        transition:
            opacity .4s ease,
            visibility .4s ease;

    }


    .mobile-menu.is-open {

        opacity: 1;

        visibility: visible;

        pointer-events: auto;

    }


    .mobile-menu__nav {

        display: flex;

        flex-direction: column;

    }


    .mobile-menu__nav a {

        display: flex;

        align-items: baseline;

        gap: 18px;

        padding:
            10px 0;

        font-family:
            var(--font-display);

        font-size:
            clamp(
                50px,
                9vw,
                90px
            );

        line-height: 1;

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

    }


    .mobile-menu__nav span {

        font-family:
            var(--font-body);

        font-size: 9px;

        letter-spacing: .15em;

        opacity: .45;

    }


    .mobile-menu__footer {

        margin-top: auto;

        font-size: 10px;

        letter-spacing: .12em;

        text-transform: uppercase;

        opacity: .5;

    }


    /* --------------------------------------------------------
       PIZZA TABLET
    --------------------------------------------------------- */

    .pizza-scroll {
        height: 450vh;
    }


    .pizza-scroll__content {
        width: 46vw;
    }


    .pizza-scroll__title {

        font-size:
            clamp(
                52px,
                8vw,
                90px
            );

    }

}


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

@media (
    max-width: 700px
) {

    :root {

        --page-padding: 22px;

    }


    /* --------------------------------------------------------
       HERO MOBILE
    --------------------------------------------------------- */

    .hero {

        min-height: 100svh;

        align-items: flex-end;

    }


    .hero__image {

        object-position:
            62% center;

    }


    .hero__overlay {

        background:

            linear-gradient(
                0deg,
                rgba(
                    12,
                    10,
                    8,
                    .92
                ) 0%,

                rgba(
                    12,
                    10,
                    8,
                    .53
                ) 60%,

                rgba(
                    12,
                    10,
                    8,
                    .30
                ) 100%
            );

    }


    .hero__content {

        width:
            calc(
                100% - 44px
            );

        margin:
            0 22px;

        padding:
            0 0 120px;

    }


    .hero__eyebrow {
        font-size: 18px;
    }


    .hero__title {

        font-size:
            clamp(
                76px,
                25vw,
                120px
            );

    }


    .hero__subtitle {

        font-size:
            clamp(
                32px,
                10vw,
                48px
            );

        margin-top: 28px;

    }


    .hero__actions {

        align-items: stretch;

        flex-direction: column;

        width: 100%;

        max-width: 310px;

    }


    .button {
        width: 100%;
    }


    .hero__location {

        bottom: 24px;

        max-width: 70%;

        flex-wrap: wrap;

        font-size: 8px;

    }


    .hero__index {
        bottom: 22px;
    }


    .scroll-indicator {
        display: none;
    }


    /* --------------------------------------------------------
       PIZZA MOBILE
    --------------------------------------------------------- */

    .pizza-scroll {
        height: 420vh;
    }


    .pizza-scroll__video {

        object-position:
            67% center;

    }


    .pizza-scroll__overlay {

        background:

            linear-gradient(
                0deg,

                rgba(
                    238,
                    231,
                    216,
                    .98
                ) 0%,

                rgba(
                    238,
                    231,
                    216,
                    .90
                ) 31%,

                rgba(
                    238,
                    231,
                    216,
                    .20
                ) 67%,

                transparent 100%
            );

    }


    .pizza-scroll__content {

        left: 22px;

        right: 22px;

        top: auto;

        bottom: 105px;

        transform: none;

        width: auto;

    }


    .pizza-scroll__eyebrow {
        margin-bottom: 13px;
    }


    .pizza-scroll__title {

        max-width: 95%;

        font-size:
            clamp(
                48px,
                16vw,
                76px
            );

    }


    .pizza-scroll__description {

        max-width: 90%;

        margin-top: 18px;

        line-height: 1.6;

    }


    .pizza-scroll__step {

        top: 100px;

        right: 22px;

    }


    .pizza-scroll__progress {

        left: 22px;

        right: 22px;

        bottom: 28px;

    }


    .pizza-scroll__hint {
        display: none;
    }

}


/* ============================================================
   REDUCED MOTION
============================================================ */

@media (
    prefers-reduced-motion: reduce
) {

    html {
        scroll-behavior: auto;
    }


    *,
    *::before,
    *::after {

        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            .01ms !important;

    }

}
/* ============================================================
   LA NOSTRA STORIA
============================================================ */

.story {

    position: relative;

    height: 400vh;

    background:
        var(--color-ivory);

}


.story__sticky {

    position: sticky;

    top: 0;

    width: 100%;
    height: 100svh;

    overflow: hidden;

    background:
        var(--color-ivory);

    color:
        var(--color-espresso);

}


/* ------------------------------------------------------------
   LARGE EDITORIAL NUMBER
------------------------------------------------------------- */

.story__chapter-number {

    position: absolute;

    right: -1vw;
    top: -8vh;

    z-index: 0;

    font-family:
        var(--font-display);

    font-size:
        clamp(
            240px,
            38vw,
            700px
        );

    line-height: 1;

    font-style: italic;

    color:
        rgba(
            33,
            25,
            20,
            .025
        );

    user-select: none;

}


/* ------------------------------------------------------------
   HEADER
------------------------------------------------------------- */

.story__header {

    position: absolute;

    z-index: 20;

    top:
        calc(
            var(--header-height)
            + 35px
        );

    left:
        var(--page-padding);

    right:
        var(--page-padding);

    display: flex;

    justify-content:
        space-between;

    align-items: center;

}


.story__eyebrow {

    font-family:
        var(--font-display);

    font-style: italic;

    font-size:
        clamp(
            18px,
            1.6vw,
            27px
        );

    color:
        var(--color-wine);

}


.story__progress-label {

    font-size: 9px;

    letter-spacing: .15em;

    text-transform: uppercase;

    opacity: .45;

}


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

.story__visual {

    position: absolute;

    top: 50%;

    right:
        clamp(
            70px,
            10vw,
            180px
        );

    transform:
        translateY(-50%);

    width:
        clamp(
            330px,
            31vw,
            560px
        );

    height:
        min(
            70vh,
            720px
        );

    z-index: 5;

}


.story__image {

    position: absolute;

    inset: 0;

    margin: 0;

    overflow: hidden;

    opacity: 0;

    transform:
        scale(.94)
        translateY(35px);

    clip-path:
        inset(
            12%
            8%
            12%
            8%
            round 180px 180px 12px 12px
        );

    will-change:
        opacity,
        transform,
        clip-path;

}


.story__image:first-child {

    opacity: 1;

    transform:
        scale(1)
        translateY(0);

}


.story__image img {

    width: 100%;
    height: 100%;

    object-fit: cover;

}


/* Decorative offset frame */

.story__visual::before {

    content: "";

    position: absolute;

    inset:
        35px
        -35px
        -35px
        35px;

    z-index: -1;

    border:
        1px solid rgba(
            33,
            25,
            20,
            .13
        );

}


/* ============================================================
   COPY
============================================================ */

.story__copy {

    position: absolute;

    z-index: 10;

    top: 50%;

    left:
        var(--page-padding);

    transform:
        translateY(-50%);

    width:
        min(
            52vw,
            860px
        );

}


.story__place {

    display: block;

    margin-bottom: 25px;

    font-size: 10px;

    font-weight: 600;

    letter-spacing: .22em;

    text-transform: uppercase;

    color:
        var(--color-wine);

}


.story__title {

    margin: 0;

    max-width: 800px;

    font-family:
        var(--font-display);

    font-size:
        clamp(
            58px,
            7vw,
            125px
        );

    font-weight: 400;

    line-height: .82;

    letter-spacing: -.045em;

}


.story__description {

    max-width: 540px;

    margin:
        clamp(
            30px,
            5vh,
            55px
        )
        0 0;

    font-size:
        clamp(
            12px,
            1vw,
            15px
        );

    line-height: 1.9;

    opacity: .68;

}


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

.story__meta {

    position: absolute;

    z-index: 20;

    left:
        var(--page-padding);

    bottom: 42px;

    display: flex;

    align-items: center;

    gap: 12px;

    font-size: 9px;

    font-weight: 600;

    letter-spacing: .16em;

    text-transform: uppercase;

    opacity: .52;

}


.story__meta-line {

    width: 46px;
    height: 1px;

    background:
        currentColor;

    opacity: .35;

}


/* ============================================================
   PROGRESS
============================================================ */

.story__progress {

    position: absolute;

    z-index: 20;

    left: 0;

    bottom: 0;

    width: 100%;
    height: 2px;

    background:
        rgba(
            33,
            25,
            20,
            .08
        );

}


.story__progress-fill {

    display: block;

    width: 0%;
    height: 100%;

    background:
        var(--color-wine);

}


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

@media (
    max-width: 1024px
) {

    .story {

        height: 380vh;

    }


    .story__copy {

        width: 52vw;

    }


    .story__visual {

        right: 45px;

        width: 39vw;

        height: 60vh;

    }


    .story__title {

        font-size:
            clamp(
                52px,
                7vw,
                85px
            );

    }

}


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

@media (
    max-width: 700px
) {

    .story {

        height: 350vh;

    }


    .story__header {

        top: 95px;

        left: 22px;

        right: 22px;

    }


    .story__progress-label {

        display: none;

    }


    .story__visual {

        top: 19%;

        right: 22px;
        left: 22px;

        transform: none;

        width: auto;
        height: 43vh;

    }


    .story__image {

        clip-path:
            inset(
                4%
                4%
                4%
                4%
                round 100px 100px 8px 8px
            );

    }


    .story__visual::before {

        inset:
            18px
            -8px
            -18px
            8px;

    }


    .story__copy {

        top: auto;

        bottom: 85px;

        left: 22px;
        right: 22px;

        transform: none;

        width: auto;

    }


    .story__place {

        margin-bottom: 10px;

    }


    .story__title {

        max-width: 95%;

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

    }


    .story__description {

        max-width: 95%;

        margin-top: 18px;

        line-height: 1.6;

    }


    .story__meta {

        display: none;

    }

}
/* ============================================================
   LE NOSTRE SPECIALITÀ
============================================================ */

.specialties {

    position: relative;

    padding:
        clamp(120px, 12vw, 220px)
        var(--page-padding);

    background:
        var(--color-espresso);

    color:
        var(--color-ivory);

}


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

.specialties__header {

    display: grid;

    grid-template-columns:
        2fr 1fr;

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

    align-items: end;

    margin-bottom:
        clamp(
            100px,
            12vw,
            190px
        );

}


.specialties__eyebrow {

    display: block;

    margin-bottom: 20px;

    font-family:
        var(--font-display);

    font-style: italic;

    font-size:
        clamp(
            20px,
            1.8vw,
            30px
        );

    color:
        #c48b72;

}


.specialties__title {

    margin: 0;

    font-family:
        var(--font-display);

    font-size:
        clamp(
            72px,
            10vw,
            170px
        );

    font-weight: 400;

    line-height: .77;

    letter-spacing: -.05em;

}


.specialties__intro {

    max-width: 370px;

    padding-bottom: 10px;

}


.specialties__number {

    display: block;

    margin-bottom: 28px;

    font-family:
        var(--font-display);

    font-style: italic;

    font-size: 18px;

    opacity: .4;

}


.specialties__intro p {

    margin: 0;

    font-size:
        clamp(
            12px,
            1vw,
            15px
        );

    line-height: 1.9;

    color:
        rgba(
            247,
            243,
            234,
            .62
        );

}


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

.specialties__grid {

    display: grid;

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

    column-gap:
        clamp(
            20px,
            2.5vw,
            45px
        );

    row-gap:
        clamp(
            90px,
            12vw,
            190px
        );

}


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

.specialty-card {

    position: relative;

}


.specialty-card--pizza {

    grid-column:
        1 / span 7;

}


.specialty-card--gnocchi {

    grid-column:
        9 / span 4;

    margin-top:
        clamp(
            120px,
            14vw,
            240px
        );

}


.specialty-card--lasagna {

    grid-column:
        2 / span 4;

}


.specialty-card--cannoli {

    grid-column:
        7 / span 6;

    margin-top:
        clamp(
            80px,
            8vw,
            150px
        );

}


/* ============================================================
   MEDIA
============================================================ */

.specialty-card__media {

    position: relative;

    width: 100%;

    overflow: hidden;

    background:
        #151210;

}


.specialty-card--pizza
.specialty-card__media {

    aspect-ratio:
        4 / 3;

}


.specialty-card--gnocchi
.specialty-card__media {

    aspect-ratio:
        3 / 4;

}


.specialty-card--lasagna
.specialty-card__media {

    aspect-ratio:
        4 / 5;

}


.specialty-card--cannoli
.specialty-card__media {

    aspect-ratio:
        4 / 3;

}


.specialty-card__media img {

    width: 100%;
    height: 115%;

    object-fit: cover;

    object-position: center;

    transform:
        scale(1.03);

    transition:
        transform
        1.1s
        cubic-bezier(
            .19,
            1,
            .22,
            1
        );

    will-change:
        transform;

}


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

.specialty-card__footer {

    display: flex;

    align-items: flex-start;

    justify-content:
        space-between;

    gap: 30px;

    padding-top: 24px;

}


.specialty-card__index {

    display: block;

    margin-bottom: 8px;

    font-size: 9px;

    letter-spacing: .16em;

    opacity: .4;

}


.specialty-card h3 {

    margin: 0;

    font-family:
        var(--font-display);

    font-size:
        clamp(
            32px,
            3vw,
            56px
        );

    font-weight: 400;

    line-height: 1;

}


.specialty-card__arrow {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 46px;
    height: 46px;

    flex-shrink: 0;

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

    border-radius: 50%;

    transition:
        background .35s ease,
        color .35s ease,
        transform .35s ease;

}


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

@media (
    hover: hover
) {

    .specialty-card:hover
    .specialty-card__media img {

        transform:
            scale(1.09);

    }


    .specialty-card:hover
    .specialty-card__arrow {

        background:
            var(--color-ivory);

        color:
            var(--color-espresso);

        transform:
            rotate(45deg);

    }

}


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

.specialties__footer {

    margin-top:
        clamp(
            120px,
            14vw,
            220px
        );

    padding-top: 35px;

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

    display: flex;

    align-items: center;

    justify-content:
        space-between;

    gap: 40px;

}


.specialties__footer > span {

    font-size: 9px;

    font-weight: 600;

    letter-spacing: .16em;

    text-transform: uppercase;

    opacity: .45;

}


.specialties__cta {

    display: inline-flex;

    align-items: center;

    gap: 18px;

    font-size: 11px;

    font-weight: 600;

    letter-spacing: .12em;

    text-transform: uppercase;

}


.specialties__cta > span {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 46px;
    height: 46px;

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

    border-radius: 50%;

    transition:
        transform .35s ease,
        background .35s ease,
        color .35s ease;

}


.specialties__cta:hover > span {

    transform:
        rotate(45deg);

    background:
        var(--color-ivory);

    color:
        var(--color-espresso);

}


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

@media (
    max-width: 1024px
) {

    .specialties__header {

        grid-template-columns:
            1.5fr 1fr;

    }


    .specialty-card--pizza {

        grid-column:
            1 / span 7;

    }


    .specialty-card--gnocchi {

        grid-column:
            8 / span 5;

    }


    .specialty-card--lasagna {

        grid-column:
            1 / span 5;

    }


    .specialty-card--cannoli {

        grid-column:
            6 / span 7;

    }

}


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

@media (
    max-width: 700px
) {

    .specialties {

        padding:
            110px
            22px;

    }


    .specialties__header {

        display: block;

        margin-bottom:
            80px;

    }


    .specialties__title {

        font-size:
            clamp(
                65px,
                22vw,
                100px
            );

    }


    .specialties__intro {

        margin-top: 45px;

    }


    .specialties__grid {

        display: block;

    }


    .specialty-card {

        margin:
            0 0 85px;

    }


    .specialty-card__media {

        aspect-ratio:
            4 / 3 !important;

    }


    .specialty-card__media img {

        height: 110%;

    }


    .specialty-card__footer {

        padding-top: 17px;

    }


    .specialty-card h3 {

        font-size: 40px;

    }


    .specialties__footer {

        margin-top: 50px;

        flex-direction: column;

        align-items: flex-start;

    }

}
/* ============================================================
   IL RITUALE
   360° COFFEE EXPERIENCE
============================================================ */

.coffee-spin {

    position: relative;

    height: 450vh;

    background:
        #17120f;

}


.coffee-spin__sticky {

    position: sticky;

    top: 0;

    width: 100%;
    height: 100svh;

    overflow: hidden;

    background:
        #17120f;

    color:
        var(--color-ivory);

}


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

.coffee-spin__background-title {

    position: absolute;

    z-index: 0;

    top: 50%;
    left: 50%;

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

    width: 100%;

    text-align: center;

    white-space: nowrap;

    font-family:
        var(--font-display);

    font-size:
        clamp(
            140px,
            24vw,
            440px
        );

    font-weight: 400;

    line-height: .75;

    letter-spacing:
        -.07em;

    color:
        rgba(
            247,
            243,
            234,
            .055
        );

    user-select: none;

}


/* ============================================================
   VIDEO
============================================================ */

.coffee-spin__media {

    position: absolute;

    inset: 0;

    z-index: 2;

    display: flex;

    align-items: center;

    justify-content: center;

}


.coffee-spin__video {

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center;

}


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

.coffee-spin__vignette {

    position: absolute;

    inset: 0;

    z-index: 3;

    pointer-events: none;

    background:

        radial-gradient(
            circle at center,
            transparent 20%,
            rgba(14, 10, 8, .05) 47%,
            rgba(14, 10, 8, .65) 100%
        ),

        linear-gradient(
            90deg,
            rgba(12, 9, 7, .70) 0%,
            transparent 30%,
            transparent 70%,
            rgba(12, 9, 7, .45) 100%
        );

}


/* ============================================================
   GRAIN
============================================================ */

.coffee-spin__grain {

    position: absolute;

    inset: 0;

    z-index: 4;

    pointer-events: none;

    opacity: .06;

    background-image:
        url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='.7'/%3E%3C/svg%3E");

}


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

.coffee-spin__top {

    position: absolute;

    z-index: 10;

    top:
        calc(
            var(--header-height)
            + 30px
        );

    left:
        var(--page-padding);

    right:
        var(--page-padding);

    display: flex;

    justify-content:
        space-between;

    align-items: center;

    font-size: 9px;

    font-weight: 600;

    letter-spacing: .16em;

    text-transform: uppercase;

    color:
        rgba(
            247,
            243,
            234,
            .55
        );

}


.coffee-spin__eyebrow {

    font-family:
        var(--font-display);

    font-size:
        clamp(
            20px,
            1.7vw,
            28px
        );

    font-style: italic;

    font-weight: 400;

    letter-spacing: normal;

    text-transform: none;

    color:
        #cf9074;

}


/* ============================================================
   COPY
============================================================ */

.coffee-spin__copy {

    position: absolute;

    z-index: 10;

    left:
        var(--page-padding);

    bottom:
        clamp(
            75px,
            10vh,
            120px
        );

    width:
        min(
            570px,
            40vw
        );

}


.coffee-spin__chapter {

    display: block;

    margin-bottom: 17px;

    font-family:
        var(--font-display);

    font-size: 16px;

    font-style: italic;

    opacity: .45;

}


.coffee-spin__copy h2 {

    margin: 0;

    font-family:
        var(--font-display);

    font-size:
        clamp(
            48px,
            5.7vw,
            100px
        );

    font-weight: 400;

    line-height: .84;

    letter-spacing: -.045em;

}


.coffee-spin__copy p {

    max-width: 440px;

    margin:
        27px 0 0;

    font-size:
        clamp(
            11px,
            .9vw,
            14px
        );

    line-height: 1.8;

    color:
        rgba(
            247,
            243,
            234,
            .62
        );

}


/* ============================================================
   DEGREES
============================================================ */

.coffee-spin__degrees {

    position: absolute;

    z-index: 10;

    right:
        var(--page-padding);

    top: 50%;

    transform:
        translateY(-50%);

    text-align: right;

}


.coffee-spin__degrees-value {

    display: block;

    font-family:
        var(--font-display);

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

    font-weight: 400;

    font-style: italic;

    line-height: 1;

}


.coffee-spin__degrees-label {

    display: block;

    margin-top: 7px;

    font-size: 8px;

    font-weight: 600;

    letter-spacing: .22em;

    text-transform: uppercase;

    opacity: .45;

}


/* ============================================================
   PROGRESS
============================================================ */

.coffee-spin__progress {

    position: absolute;

    z-index: 10;

    bottom: 0;

    left: 0;

    width: 100%;
    height: 2px;

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

}


.coffee-spin__progress-fill {

    display: block;

    width: 0%;
    height: 100%;

    background:
        #c9876c;

}


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

.coffee-spin__hint {

    position: absolute;

    z-index: 10;

    right:
        var(--page-padding);

    bottom: 45px;

    display: flex;

    align-items: center;

    gap: 12px;

    font-size: 8px;

    font-weight: 600;

    letter-spacing: .18em;

    text-transform: uppercase;

    opacity: .45;

}


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

@media (
    max-width: 1024px
) {

    .coffee-spin {

        height: 400vh;

    }


    .coffee-spin__copy {

        width: 44vw;

    }


    .coffee-spin__degrees-value {

        font-size: 65px;

    }

}


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

@media (
    max-width: 700px
) {

    .coffee-spin {

        height: 360vh;

    }


    .coffee-spin__video {

        object-position:
            center center;

    }


    .coffee-spin__background-title {

        top: 37%;

        font-size:
            clamp(
                115px,
                39vw,
                190px
            );

    }


    .coffee-spin__top {

        top: 95px;

        left: 22px;
        right: 22px;

    }


    .coffee-spin__top > span:last-child {

        display: none;

    }


    .coffee-spin__copy {

        left: 22px;
        right: 22px;

        bottom: 70px;

        width: auto;

    }


    .coffee-spin__copy h2 {

        max-width: 90%;

        font-size:
            clamp(
                45px,
                14vw,
                67px
            );

    }


    .coffee-spin__copy p {

        max-width: 90%;

        margin-top: 17px;

        line-height: 1.6;

    }


    .coffee-spin__degrees {

        top: 130px;

        right: 22px;

        transform: none;

    }


    .coffee-spin__degrees-value {

        font-size: 38px;

    }


    .coffee-spin__degrees-label {

        font-size: 7px;

    }


    .coffee-spin__hint {

        display: none;

    }

}
/* ============================================================
   IL RISTORANTE
============================================================ */

.restaurant {

    position: relative;

    background:
        var(--color-ivory);

    color:
        var(--color-espresso);

}


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

.restaurant__intro {

    min-height: 100svh;

    display: grid;

    grid-template-columns:
        2fr 1fr;

    align-items: center;

    gap:
        clamp(
            60px,
            10vw,
            180px
        );

    padding:
        clamp(
            120px,
            12vw,
            220px
        )
        var(--page-padding);

}


.restaurant__eyebrow {

    display: block;

    margin-bottom: 20px;

    font-family:
        var(--font-display);

    font-size:
        clamp(
            20px,
            1.8vw,
            30px
        );

    font-style: italic;

    color:
        var(--color-wine);

}


.restaurant__intro h2 {

    margin: 0;

    max-width: 1000px;

    font-family:
        var(--font-display);

    font-size:
        clamp(
            72px,
            10vw,
            170px
        );

    font-weight: 400;

    line-height: .78;

    letter-spacing: -.05em;

}


.restaurant__intro-copy {

    max-width: 380px;

}


.restaurant__intro-copy > span {

    display: block;

    margin-bottom: 30px;

    font-family:
        var(--font-display);

    font-size: 18px;

    font-style: italic;

    opacity: .4;

}


.restaurant__intro-copy p {

    margin: 0;

    font-size:
        clamp(
            12px,
            1vw,
            15px
        );

    line-height: 1.9;

    opacity: .65;

}


/* ============================================================
   HORIZONTAL WRAPPER
============================================================ */

.restaurant-gallery {

    position: relative;

    /*
       Espacio suficiente para desplazamiento horizontal.
    */

    height: 500vh;

}


.restaurant-gallery__sticky {

    position: sticky;

    top: 0;

    width: 100%;
    height: 100svh;

    overflow: hidden;

    background:
        #d9d0c0;

}


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

.restaurant-gallery__track {

    height: 100%;

    display: flex;

    flex-wrap: nowrap;

    will-change: transform;

}


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

.restaurant-slide {

    position: relative;

    flex:
        0 0 78vw;

    height: 100svh;

    padding:
        clamp(
            90px,
            8vw,
            130px
        )
        clamp(
            35px,
            4vw,
            70px
        )
        70px;

    display: flex;

    flex-direction: column;

    justify-content: center;

}


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

.restaurant-slide--intro {

    flex-basis: 55vw;

    background:
        var(--color-wine);

    color:
        var(--color-ivory);

}


.restaurant-slide__text {

    max-width: 720px;

}


.restaurant-slide__text > span {

    font-family:
        var(--font-display);

    font-style: italic;

    font-size:
        clamp(
            20px,
            2vw,
            30px
        );

    color:
        #e5b19a;

}


.restaurant-slide__text h3 {

    margin:
        25px 0 35px;

    font-family:
        var(--font-display);

    font-size:
        clamp(
            60px,
            7vw,
            125px
        );

    font-weight: 400;

    line-height: .82;

    letter-spacing: -.045em;

}


.restaurant-slide__text p {

    max-width: 440px;

    margin: 0;

    font-size:
        13px;

    line-height: 1.8;

    color:
        rgba(
            247,
            243,
            234,
            .65
        );

}


/* ============================================================
   MEDIA
============================================================ */

.restaurant-slide__media {

    position: relative;

    width: 100%;
    height:
        min(
            69vh,
            760px
        );

    margin: 0;

    overflow: hidden;

    background:
        var(--color-charcoal);

}


.restaurant-slide__media img {

    width: 110%;
    height: 110%;

    object-fit: cover;

    object-position: center;

    transform:
        translateX(-5%);

    will-change:
        transform;

}


/* ============================================================
   CAPTION
============================================================ */

.restaurant-slide__caption {

    display: flex;

    justify-content:
        space-between;

    align-items: baseline;

    padding-top: 20px;

}


.restaurant-slide__caption span {

    font-size: 9px;

    letter-spacing: .15em;

    opacity: .4;

}


.restaurant-slide__caption h3 {

    margin: 0;

    font-family:
        var(--font-display);

    font-size:
        clamp(
            32px,
            3vw,
            52px
        );

    font-weight: 400;

}


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

.restaurant-slide--final {

    flex-basis: 70vw;

    align-items: center;

    background:
        var(--color-espresso);

    color:
        var(--color-ivory);

}


.restaurant-slide__final-copy {

    width:
        min(
            850px,
            80%
        );

}


.restaurant-slide__final-copy > span {

    font-family:
        var(--font-display);

    font-style: italic;

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

    color:
        #cf9074;

}


.restaurant-slide__final-copy h3 {

    margin:
        25px 0;

    font-family:
        var(--font-display);

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

    font-weight: 400;

    line-height: .76;

    letter-spacing: -.055em;

}


.restaurant-slide__final-copy p {

    font-family:
        var(--font-display);

    font-size:
        clamp(
            24px,
            2vw,
            34px
        );

    font-style: italic;

    opacity: .65;

}


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

.restaurant-slide__cta {

    display: inline-flex;

    align-items: center;

    gap: 20px;

    margin-top: 35px;

    font-size: 11px;

    font-weight: 600;

    letter-spacing: .13em;

    text-transform: uppercase;

}


.restaurant-slide__cta > span {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 52px;
    height: 52px;

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

    border-radius: 50%;

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

}


.restaurant-slide__cta:hover > span {

    background:
        var(--color-ivory);

    color:
        var(--color-espresso);

    transform:
        rotate(45deg);

}


/* ============================================================
   PROGRESS
============================================================ */

.restaurant-gallery__progress {

    position: absolute;

    z-index: 20;

    left: 0;
    bottom: 0;

    width: 100%;
    height: 2px;

    background:
        rgba(
            33,
            25,
            20,
            .10
        );

}


.restaurant-gallery__progress-fill {

    display: block;

    width: 0%;
    height: 100%;

    background:
        var(--color-wine);

}


/* ============================================================
   COUNTER
============================================================ */

.restaurant-gallery__counter {

    position: absolute;

    z-index: 20;

    right:
        var(--page-padding);

    bottom: 30px;

    display: flex;

    gap: 8px;

    font-family:
        var(--font-display);

    font-size: 16px;

    font-style: italic;

    color:
        rgba(
            33,
            25,
            20,
            .55
        );

}


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

@media (
    max-width: 1024px
) {

    .restaurant-gallery {

        height: 450vh;

    }


    .restaurant-slide {

        flex-basis: 88vw;

    }


    .restaurant-slide--intro {

        flex-basis: 70vw;

    }


    .restaurant-slide--final {

        flex-basis: 80vw;

    }

}


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

@media (
    max-width: 700px
) {

    .restaurant__intro {

        min-height: auto;

        display: block;

        padding:
            110px
            22px;

    }


    .restaurant__intro h2 {

        font-size:
            clamp(
                63px,
                21vw,
                95px
            );

    }


    .restaurant__intro-copy {

        margin-top: 50px;

    }


    .restaurant-gallery {

        height: 420vh;

    }


    .restaurant-slide {

        flex-basis: 92vw;

        padding:
            90px
            18px
            60px;

    }


    .restaurant-slide--intro {

        flex-basis: 92vw;

        padding:
            100px
            28px;

    }


    .restaurant-slide--final {

        flex-basis: 92vw;

        align-items: flex-start;

        padding-left: 28px;

    }


    .restaurant-slide__text h3 {

        font-size:
            clamp(
                55px,
                17vw,
                83px
            );

    }


    .restaurant-slide__media {

        height: 62vh;

    }


    .restaurant-slide__caption h3 {

        font-size: 35px;

    }


    .restaurant-slide__final-copy {

        width: 100%;

    }


    .restaurant-slide__final-copy h3 {

        font-size:
            clamp(
                66px,
                20vw,
                110px
            );

    }


    .restaurant-gallery__counter {

        right: 22px;

        bottom: 22px;

    }

}

/* ============================================================
   IL MENÙ
============================================================ */

.menu-section {

    position: relative;

    padding:
        clamp(120px, 12vw, 220px)
        var(--page-padding);

    background:
        var(--color-cream);

    color:
        var(--color-espresso);

}


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

.menu-section__header {

    display: grid;

    grid-template-columns:
        2fr 1fr;

    gap:
        clamp(
            60px,
            10vw,
            180px
        );

    align-items: end;

    margin-bottom:
        clamp(
            90px,
            10vw,
            160px
        );

}


.menu-section__eyebrow {

    display: block;

    margin-bottom: 20px;

    font-family:
        var(--font-display);

    font-size:
        clamp(
            20px,
            1.8vw,
            30px
        );

    font-style: italic;

    color:
        var(--color-wine);

}


.menu-section__header h2 {

    margin: 0;

    font-family:
        var(--font-display);

    font-size:
        clamp(
            72px,
            10vw,
            170px
        );

    font-weight: 400;

    line-height: .77;

    letter-spacing: -.05em;

}


.menu-section__intro {

    max-width: 380px;

}


.menu-section__intro > span {

    display: block;

    margin-bottom: 28px;

    font-family:
        var(--font-display);

    font-size: 18px;

    font-style: italic;

    opacity: .4;

}


.menu-section__intro p {

    margin: 0;

    font-size:
        clamp(
            12px,
            1vw,
            15px
        );

    line-height: 1.9;

    opacity: .65;

}


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

.menu-experience {

    display: grid;

    grid-template-columns:
        minmax(400px, .9fr)
        minmax(500px, 1.1fr);

    gap:
        clamp(
            60px,
            8vw,
            150px
        );

    align-items: center;

}


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

.menu-categories {

    border-top:
        1px solid
        rgba(
            33,
            25,
            20,
            .18
        );

}


.menu-category {

    position: relative;

    width: 100%;

    min-height:
        clamp(
            90px,
            9vw,
            150px
        );

    padding:
        0;

    border: none;

    border-bottom:
        1px solid
        rgba(
            33,
            25,
            20,
            .18
        );

    background: none;

    color:
        var(--color-espresso);

    display: grid;

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

    align-items: center;

    gap: 18px;

    cursor: pointer;

    text-align: left;

    transition:
        padding-left .45s
        cubic-bezier(
            .19,
            1,
            .22,
            1
        );

}


.menu-category::before {

    content: "";

    position: absolute;

    left: 0;
    top: 0;

    width: 0;
    height: 100%;

    background:
        var(--color-wine);

    z-index: 0;

    transition:
        width .55s
        cubic-bezier(
            .19,
            1,
            .22,
            1
        );

}


.menu-category > span {

    position: relative;

    z-index: 2;

}


.menu-category__number {

    font-size: 9px;

    letter-spacing: .14em;

    opacity: .45;

}


.menu-category__name {

    font-family:
        var(--font-display);

    font-size:
        clamp(
            45px,
            5vw,
            86px
        );

    font-weight: 400;

    line-height: 1;

    letter-spacing: -.035em;

}


.menu-category__arrow {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 45px;
    height: 45px;

    margin-right: 15px;

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

    border-radius: 50%;

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

}


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

.menu-category.is-active {

    padding-left: 22px;

    color:
        var(--color-ivory);

}


.menu-category.is-active::before {

    width: 100%;

}


.menu-category.is-active
.menu-category__arrow {

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

    transform:
        rotate(45deg);

}


/* ============================================================
   PREVIEW
============================================================ */

.menu-preview {

    position: relative;

}


.menu-preview__images {

    position: relative;

    width: 100%;

    aspect-ratio:
        4 / 5;

    overflow: hidden;

    background:
        var(--color-charcoal);

}


.menu-preview__image {

    position: absolute;

    inset: 0;

    margin: 0;

    opacity: 0;

    visibility: hidden;

    transform:
        scale(1.06);

    transition:
        opacity .7s ease,
        visibility .7s ease;

}


.menu-preview__image.is-active {

    opacity: 1;

    visibility: visible;

}


.menu-preview__image img {

    width: 100%;
    height: 100%;

    object-fit: cover;

}


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

.menu-preview__info {

    display: grid;

    grid-template-columns:
        1fr 1.4fr;

    gap: 35px;

    padding-top: 22px;

    border-top:
        1px solid
        rgba(
            33,
            25,
            20,
            .16
        );

    margin-top: 18px;

}


.menu-preview__category {

    font-family:
        var(--font-display);

    font-size:
        clamp(
            25px,
            2.4vw,
            38px
        );

    font-style: italic;

    color:
        var(--color-wine);

}


.menu-preview__info p {

    margin: 0;

    max-width: 420px;

    font-size:
        12px;

    line-height: 1.8;

    opacity: .65;

}


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

.menu-section__footer {

    margin-top:
        clamp(
            100px,
            12vw,
            180px
        );

    padding-top: 32px;

    border-top:
        1px solid
        rgba(
            33,
            25,
            20,
            .18
        );

    display: flex;

    justify-content:
        space-between;

    align-items: center;

    gap: 30px;

}


.menu-section__footer > span {

    font-size: 9px;

    font-weight: 600;

    letter-spacing: .15em;

    text-transform: uppercase;

    opacity: .45;

}


.menu-section__cta {

    display: inline-flex;

    align-items: center;

    gap: 18px;

    font-size: 11px;

    font-weight: 600;

    letter-spacing: .12em;

    text-transform: uppercase;

}


.menu-section__cta > span {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 48px;
    height: 48px;

    border:
        1px solid
        rgba(
            33,
            25,
            20,
            .22
        );

    border-radius: 50%;

    transition:
        transform .35s ease,
        background .35s ease,
        color .35s ease;

}


.menu-section__cta:hover > span {

    transform:
        rotate(45deg);

    background:
        var(--color-espresso);

    color:
        var(--color-ivory);

}


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

@media (hover: hover) {

    .menu-category:not(.is-active):hover {

        padding-left: 12px;

    }

}


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

@media (
    max-width: 1024px
) {

    .menu-experience {

        grid-template-columns:
            .9fr 1fr;

        gap: 45px;

    }


    .menu-category__name {

        font-size:
            clamp(
                40px,
                5vw,
                65px
            );

    }

}


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

@media (
    max-width: 700px
) {

    .menu-section {

        padding:
            110px
            22px;

    }


    .menu-section__header {

        display: block;

        margin-bottom: 75px;

    }


    .menu-section__header h2 {

        font-size:
            clamp(
                65px,
                22vw,
                100px
            );

    }


    .menu-section__intro {

        margin-top: 45px;

    }


    .menu-experience {

        display: flex;

        flex-direction: column;

        gap: 55px;

    }


    .menu-categories {

        width: 100%;

    }


    .menu-category {

        min-height: 82px;

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

    }


    .menu-category__name {

        font-size:
            clamp(
                38px,
                12vw,
                55px
            );

    }


    .menu-category__arrow {

        width: 38px;
        height: 38px;

        margin-right: 7px;

    }


    .menu-category.is-active {

        padding-left: 10px;

    }


    .menu-preview {

        width: 100%;

    }


    .menu-preview__images {

        aspect-ratio:
            4 / 3;

    }


    .menu-preview__info {

        grid-template-columns:
            1fr;

        gap: 12px;

    }


    .menu-section__footer {

        flex-direction: column;

        align-items: flex-start;

        margin-top: 80px;

    }

}

/* ============================================================
   RESERVACIONES
============================================================ */

.reservation {

    position: relative;

    padding:
        clamp(120px, 12vw, 220px)
        var(--page-padding);

    background:
        var(--color-ivory);

    color:
        var(--color-espresso);

}


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

.reservation__header {

    display: grid;

    grid-template-columns:
        2fr 1fr;

    align-items: end;

    gap:
        clamp(
            60px,
            9vw,
            160px
        );

    margin-bottom:
        clamp(
            90px,
            10vw,
            160px
        );

}


.reservation__eyebrow {

    display: block;

    margin-bottom: 20px;

    font-family:
        var(--font-display);

    font-size:
        clamp(
            20px,
            1.8vw,
            30px
        );

    font-style: italic;

    color:
        var(--color-wine);

}


.reservation__header h2 {

    margin: 0;

    font-family:
        var(--font-display);

    font-size:
        clamp(
            72px,
            10vw,
            170px
        );

    font-weight: 400;

    line-height: .77;

    letter-spacing:
        -.05em;

}


.reservation__header-copy {

    max-width: 380px;

}


.reservation__header-copy > span {

    display: block;

    margin-bottom: 28px;

    font-family:
        var(--font-display);

    font-size: 18px;

    font-style: italic;

    opacity: .4;

}


.reservation__header-copy p {

    margin: 0;

    font-size:
        clamp(
            12px,
            1vw,
            15px
        );

    line-height: 1.9;

    opacity: .65;

}


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

.reservation__experience {

    display: grid;

    grid-template-columns:
        minmax(400px, .85fr)
        minmax(520px, 1.15fr);

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

    align-items: start;

}


/* ============================================================
   STEPS
============================================================ */

.reservation-step {

    padding:
        38px 0;

    border-top:
        1px solid
        rgba(
            33,
            25,
            20,
            .16
        );

}


.reservation-step:last-child {

    border-bottom:
        1px solid
        rgba(
            33,
            25,
            20,
            .16
        );

}


.reservation-step__header {

    display: flex;

    align-items: baseline;

    gap: 18px;

    margin-bottom: 28px;

}


.reservation-step__header span {

    font-size: 9px;

    letter-spacing: .15em;

    opacity: .4;

}


.reservation-step__header h3 {

    margin: 0;

    font-family:
        var(--font-display);

    font-size:
        clamp(
            30px,
            3vw,
            50px
        );

    font-weight: 400;

}


/* ============================================================
   OPTIONS
============================================================ */

.reservation-options {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

}


.reservation-option,
.reservation-time {

    min-height: 48px;

    padding:
        0 20px;

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

    border-radius:
        100px;

    background:
        transparent;

    cursor: pointer;

    font-size: 10px;

    font-weight: 600;

    letter-spacing: .10em;

    text-transform: uppercase;

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

}


.reservation-option:hover,
.reservation-time:hover {

    transform:
        translateY(-2px);

}


.reservation-option.is-active,
.reservation-time.is-active {

    background:
        var(--color-wine);

    border-color:
        var(--color-wine);

    color:
        var(--color-ivory);

}


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

.reservation-option--date-input {

    display: flex;

    align-items: center;

    position: relative;

    cursor: pointer;

}


.reservation-option--date-input input {

    position: absolute;

    inset: 0;

    opacity: 0;

    cursor: pointer;

}


/* ============================================================
   PEOPLE
============================================================ */

.people-selector {

    width:
        min(
            300px,
            100%
        );

    min-height: 86px;

    display: grid;

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

    align-items: center;

    border:
        1px solid
        rgba(
            33,
            25,
            20,
            .18
        );

}


.people-selector button {

    height: 100%;

    border: none;

    background:
        transparent;

    cursor: pointer;

    font-family:
        var(--font-display);

    font-size: 30px;

    transition:
        background .3s ease;

}


.people-selector button:hover {

    background:
        rgba(
            33,
            25,
            20,
            .05
        );

}


.people-selector > div {

    text-align: center;

}


.people-selector__number {

    display: block;

    font-family:
        var(--font-display);

    font-size: 37px;

    line-height: 1;

}


.people-selector__label {

    display: block;

    margin-top: 4px;

    font-size: 8px;

    letter-spacing: .13em;

    text-transform: uppercase;

    opacity: .45;

}


/* ============================================================
   TIME
============================================================ */

.reservation-times {

    display: grid;

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

    gap: 9px;

}


.reservation-time {

    width: 100%;

}


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

.reservation-map {

    position: sticky;

    top:
        calc(
            var(--header-height)
            + 35px
        );

}


.reservation-map__top {

    display: flex;

    justify-content:
        space-between;

    align-items: end;

    gap: 25px;

    margin-bottom: 25px;

}


.reservation-map__top > div:first-child {

    display: flex;

    gap: 16px;

    align-items: baseline;

}


.reservation-map__top > div:first-child span {

    font-size: 9px;

    opacity: .4;

}


.reservation-map__top h3 {

    margin: 0;

    font-family:
        var(--font-display);

    font-size:
        clamp(
            30px,
            3vw,
            48px
        );

    font-weight: 400;

}


/* ============================================================
   LEGEND
============================================================ */

.reservation-map__legend {

    display: flex;

    gap: 15px;

    font-size: 8px;

    letter-spacing: .1em;

    text-transform: uppercase;

    opacity: .55;

}


.reservation-map__legend span {

    display: flex;

    align-items: center;

    gap: 6px;

}


.legend-dot {

    width: 7px;
    height: 7px;

    border-radius: 50%;

}


.legend-dot--available {

    background:
        var(--color-olive);

}


.legend-dot--busy {

    background:
        rgba(
            33,
            25,
            20,
            .25
        );

}


/* ============================================================
   RESTAURANT PLAN
============================================================ */

.restaurant-plan {

    position: relative;

    width: 100%;

    aspect-ratio:
        4 / 3;

    overflow: hidden;

    border:
        1px solid
        rgba(
            33,
            25,
            20,
            .16
        );

    background:

        linear-gradient(
            rgba(
                33,
                25,
                20,
                .04
            ) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(
                33,
                25,
                20,
                .04
            ) 1px,
            transparent 1px
        ),

        var(--color-cream);

    background-size:
        40px 40px;

}


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

.restaurant-plan__label {

    position: absolute;

    font-size: 7px;

    font-weight: 600;

    letter-spacing: .18em;

    text-transform: uppercase;

    opacity: .35;

}


.restaurant-plan__label--window {

    top: 16px;
    left: 50%;

    transform:
        translateX(-50%);

}


.restaurant-plan__label--entrance {

    bottom: 17px;
    left: 20px;

}


/* ============================================================
   TABLES
============================================================ */

.table {

    position: absolute;

    left:
        var(--x);

    top:
        var(--y);

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

    width:
        clamp(
            65px,
            6vw,
            90px
        );

    height:
        clamp(
            65px,
            6vw,
            90px
        );

    border-radius: 50%;

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

    background:
        rgba(
            247,
            243,
            234,
            .8
        );

    color:
        var(--color-espresso);

    cursor: pointer;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

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

}


.table span {

    font-family:
        var(--font-display);

    font-size: 22px;

}


.table small {

    margin-top: 2px;

    font-size: 7px;

    letter-spacing: .1em;

    opacity: .45;

}


.table--available:hover {

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

}


.table--available.is-active {

    background:
        var(--color-wine);

    border-color:
        var(--color-wine);

    color:
        var(--color-ivory);

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

}


.table--busy {

    opacity: .25;

    cursor: not-allowed;

}


/* ============================================================
   BAR + CUCINA
============================================================ */

.restaurant-plan__bar,
.restaurant-plan__kitchen {

    position: absolute;

    display: flex;

    align-items: center;

    justify-content: center;

    border:
        1px solid
        rgba(
            33,
            25,
            20,
            .12
        );

    font-size: 7px;

    font-weight: 600;

    letter-spacing: .18em;

    opacity: .4;

}


.restaurant-plan__bar {

    right: 20px;
    top: 45%;

    width: 75px;
    height: 130px;

}


.restaurant-plan__kitchen {

    left: 18%;
    bottom: 20px;

    width: 145px;
    height: 52px;

}


/* ============================================================
   SUMMARY
============================================================ */

.reservation-summary {

    margin-top:
        clamp(
            100px,
            10vw,
            160px
        );

    padding:
        clamp(
            40px,
            5vw,
            75px
        );

    display: grid;

    grid-template-columns:
        1.2fr 2fr auto;

    align-items: center;

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

    background:
        var(--color-espresso);

    color:
        var(--color-ivory);

}


.reservation-summary__copy > span {

    font-family:
        var(--font-display);

    font-size: 18px;

    font-style: italic;

    color:
        #cf9074;

}


.reservation-summary__copy h3 {

    margin:
        10px 0 4px;

    font-family:
        var(--font-display);

    font-size:
        clamp(
            38px,
            4vw,
            65px
        );

    font-weight: 400;

}


.reservation-summary__copy p {

    margin: 0;

    font-size: 10px;

    opacity: .5;

}


/* ============================================================
   SUMMARY DETAILS
============================================================ */

.reservation-summary__details {

    display: grid;

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

    gap: 25px;

}


.reservation-summary__details span {

    display: block;

    margin-bottom: 7px;

    font-size: 7px;

    letter-spacing: .15em;

    text-transform: uppercase;

    opacity: .4;

}


.reservation-summary__details strong {

    font-family:
        var(--font-display);

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

    font-weight: 400;

}


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

.reservation-submit {

    min-height: 57px;

    padding:
        0 25px;

    border: none;

    border-radius:
        100px;

    background:
        var(--color-ivory);

    color:
        var(--color-espresso);

    cursor: pointer;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 16px;

    white-space: nowrap;

    font-size: 10px;

    font-weight: 600;

    letter-spacing: .12em;

    text-transform: uppercase;

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

}


.reservation-submit:hover {

    transform:
        translateY(-3px);

    background:
        #ffffff;

}


/* ============================================================
   CONFIRMATION
============================================================ */

.reservation-confirmation {

    position: fixed;

    inset: 0;

    z-index: 5000;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 25px;

    background:
        rgba(
            18,
            13,
            10,
            .94
        );

    backdrop-filter:
        blur(20px);

    color:
        var(--color-ivory);

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

}


.reservation-confirmation.is-open {

    opacity: 1;

    visibility: visible;

    pointer-events: auto;

}


.reservation-confirmation__close {

    position: absolute;

    right: 40px;
    top: 30px;

    width: 50px;
    height: 50px;

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

    border-radius: 50%;

    background: none;

    color: white;

    cursor: pointer;

    font-size: 30px;

}


.reservation-confirmation__content {

    max-width: 1000px;

    text-align: center;

}


.reservation-confirmation__eyebrow {

    font-family:
        var(--font-display);

    font-size: 27px;

    font-style: italic;

    color:
        #cf9074;

}


.reservation-confirmation__content h3 {

    margin:
        25px 0;

    font-family:
        var(--font-display);

    font-size:
        clamp(
            70px,
            10vw,
            160px
        );

    line-height: .76;

    font-weight: 400;

    letter-spacing:
        -.05em;

}


.reservation-confirmation__content > p {

    font-family:
        var(--font-display);

    font-size: 28px;

    font-style: italic;

    opacity: .7;

}


.reservation-confirmation__data {

    margin:
        50px 0;

    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 15px;

    font-size: 10px;

    font-weight: 600;

    letter-spacing: .14em;

    text-transform: uppercase;

}


.reservation-confirmation small {

    font-size: 8px;

    letter-spacing: .15em;

    text-transform: uppercase;

    opacity: .3;

}


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

@media (
    max-width: 900px
) {

    .reservation__experience {

        grid-template-columns:
            1fr;

    }


    .reservation-map {

        position: relative;

        top: auto;

    }


    .reservation-summary {

        grid-template-columns:
            1fr;

    }

}


@media (
    max-width: 700px
) {

    .reservation {

        padding:
            110px 22px;

    }


    .reservation__header {

        display: block;

        margin-bottom: 70px;

    }


    .reservation__header h2 {

        font-size:
            clamp(
                65px,
                22vw,
                100px
            );

    }


    .reservation__header-copy {

        margin-top: 45px;

    }


    .reservation-times {

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

    }


    .reservation-map__top {

        display: block;

    }


    .reservation-map__legend {

        margin-top: 15px;

    }


    .restaurant-plan {

        aspect-ratio:
            1 / 1.15;

    }


    .table {

        width: 60px;
        height: 60px;

    }


    .restaurant-plan__bar {

        width: 55px;
        height: 100px;

    }


    .restaurant-plan__kitchen {

        width: 110px;

    }


    .reservation-summary__details {

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

    }


    .reservation-submit {

        width: 100%;

    }


    .reservation-confirmation__content h3 {

        font-size:
            clamp(
                62px,
                21vw,
                105px
            );

    }


    .reservation-confirmation__close {

        right: 20px;
        top: 20px;

    }

}

/* ============================================================
   FINAL CINEMATIC CTA
============================================================ */

.final-cta {

    position: relative;

    width: 100%;
    min-height: 100svh;

    overflow: hidden;

    display: flex;

    align-items: center;

    color:
        var(--color-ivory);

    background:
        var(--color-charcoal);

}


/* ============================================================
   MEDIA
============================================================ */

.final-cta__media {

    position: absolute;

    inset: 0;

    overflow: hidden;

}


.final-cta__image {

    position: absolute;

    inset: -6%;

    width: 112%;
    height: 112%;

    max-width: none;

    object-fit: cover;

    object-position:
        center center;

    transform:
        scale(1.05);

    will-change:
        transform;

}


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

.final-cta__overlay {

    position: absolute;

    inset: 0;

    z-index: 2;

    background:

        linear-gradient(
            90deg,
            rgba(12, 9, 7, .82) 0%,
            rgba(12, 9, 7, .58) 40%,
            rgba(12, 9, 7, .14) 70%,
            rgba(12, 9, 7, .30) 100%
        ),

        linear-gradient(
            0deg,
            rgba(10, 8, 7, .75) 0%,
            transparent 50%
        );

}


/* ============================================================
   GRAIN
============================================================ */

.final-cta__grain {

    position: absolute;

    inset: 0;

    z-index: 3;

    pointer-events: none;

    opacity: .08;

    background-image:
        url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='.7'/%3E%3C/svg%3E");

}


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

.final-cta__content {

    position: relative;

    z-index: 10;

    width:
        min(
            1000px,
            85vw
        );

    margin-left:
        var(--page-padding);

}


.final-cta__eyebrow {

    display: block;

    margin-bottom: 24px;

    font-family:
        var(--font-display);

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

    font-style: italic;

    color:
        #d6a089;

}


.final-cta__content h2 {

    margin: 0;

    font-family:
        var(--font-display);

    font-size:
        clamp(
            85px,
            12vw,
            200px
        );

    font-weight: 400;

    line-height: .74;

    letter-spacing:
        -.06em;

}


.final-cta__content p {

    margin:
        clamp(
            30px,
            5vh,
            50px
        )
        0 0;

    font-family:
        var(--font-display);

    font-size:
        clamp(
            27px,
            2.5vw,
            42px
        );

    font-style: italic;

    opacity: .75;

}


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

.final-cta__button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 20px;

    min-height: 58px;

    margin-top: 40px;

    padding:
        0 26px;

    border-radius:
        100px;

    background:
        var(--color-ivory);

    color:
        var(--color-espresso);

    font-size: 10px;

    font-weight: 600;

    letter-spacing: .14em;

    text-transform: uppercase;

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

}


.final-cta__button:hover {

    transform:
        translateY(-3px);

    background:
        white;

}


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

.final-cta__bottom {

    position: absolute;

    z-index: 10;

    left:
        var(--page-padding);

    right:
        var(--page-padding);

    bottom: 30px;

    display: flex;

    justify-content:
        space-between;

    gap: 30px;

    font-size: 8px;

    font-weight: 600;

    letter-spacing: .15em;

    text-transform: uppercase;

    color:
        rgba(
            247,
            243,
            234,
            .48
        );

}


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

@media (
    max-width: 700px
) {

    .final-cta {

        align-items: flex-end;

    }


    .final-cta__image {

        object-position:
            62% center;

    }


    .final-cta__overlay {

        background:

            linear-gradient(
                0deg,
                rgba(12, 9, 7, .94) 0%,
                rgba(12, 9, 7, .58) 58%,
                rgba(12, 9, 7, .20) 100%
            );

    }


    .final-cta__content {

        width: auto;

        margin:
            0 22px;

        padding-bottom:
            120px;

    }


    .final-cta__content h2 {

        font-size:
            clamp(
                75px,
                23vw,
                118px
            );

    }


    .final-cta__content p {

        font-size: 28px;

    }


    .final-cta__bottom {

        left: 22px;
        right: 22px;

        bottom: 22px;

        flex-direction: column;

        gap: 5px;

    }

}

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

.site-footer {
    position: relative;
    overflow: hidden;

    padding:
        clamp(85px, 8vw, 135px)
        var(--page-padding)
        28px;

    background: var(--color-espresso);
    color: var(--color-ivory);
}


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

.site-footer__top {
    display: grid;

    grid-template-columns:
        1.45fr
        repeat(4, minmax(120px, 1fr));

    gap:
        clamp(35px, 4.5vw, 80px);

    align-items: start;
}


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

.site-footer__brand {
    max-width: 390px;
}


.site-footer__logo-link {
    display: inline-block;
}


.site-footer__logo {
    display: block;

    width:
        clamp(115px, 10vw, 165px);

    height: auto;
}


.site-footer__brand p {
    margin: 30px 0 0;

    max-width: 390px;

    font-family: var(--font-display);

    font-size:
        clamp(38px, 3.7vw, 64px);

    font-weight: 400;

    line-height: .88;

    letter-spacing: -.035em;

    color:
        rgba(247, 243, 234, .88);
}


/* ============================================================
   COLUMNS
============================================================ */

.site-footer__column {
    min-width: 0;
}


.site-footer__label {
    display: block;

    margin-bottom: 28px;

    font-size: 8px;
    font-weight: 600;

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

    color: #c98b70;
}


/* ============================================================
   ADDRESS
============================================================ */

.site-footer address {
    margin: 0;

    font-style: normal;

    font-size:
        clamp(11px, .9vw, 13px);

    line-height: 1.9;

    color:
        rgba(247, 243, 234, .62);
}


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

.site-footer__hours {
    display: flex;

    flex-direction: column;

    gap: 24px;
}


.site-footer__hours div {
    display: flex;

    flex-direction: column;

    gap: 5px;
}


.site-footer__hours span {
    font-size: 9px;

    letter-spacing: .07em;

    text-transform: uppercase;

    opacity: .45;
}


.site-footer__hours strong {
    font-family: var(--font-display);

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

    font-weight: 400;
}


/* ============================================================
   NAVIGATION
============================================================ */

.site-footer__nav {
    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 14px;
}


.site-footer__nav a {
    position: relative;

    display: inline-flex;

    align-items: center;

    gap: 9px;

    font-family: var(--font-display);

    font-size:
        clamp(20px, 1.6vw, 28px);

    line-height: 1.15;

    color:
        rgba(247, 243, 234, .74);

    transition:
        color .3s ease,
        transform .3s ease;
}


.site-footer__nav a span {
    font-family: var(--font-body);

    font-size: 10px;

    opacity: .4;
}


.site-footer__nav a:hover {
    color: var(--color-ivory);

    transform:
        translateX(5px);
}


/* ============================================================
   INLINE LINKS
============================================================ */

.site-footer__inline-link {
    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-top: 27px;

    padding-bottom: 6px;

    border-bottom:
        1px solid
        rgba(247, 243, 234, .25);

    font-size: 8px;

    font-weight: 600;

    letter-spacing: .13em;

    text-transform: uppercase;

    color:
        rgba(247, 243, 234, .72);

    transition:
        color .3s ease,
        border-color .3s ease;
}


.site-footer__inline-link:hover {
    color: var(--color-ivory);

    border-color: var(--color-ivory);
}


/* ============================================================
   MASSIVE WORDMARK
============================================================ */

.site-footer__wordmark {
    position: relative;

    margin-top:
        clamp(65px, 7vw, 115px);

    margin-left: -.025em;

    font-family: var(--font-display);

    font-size:
        clamp(120px, 21.5vw, 400px);

    font-weight: 400;

    line-height: .64;

    letter-spacing: -.075em;

    white-space: nowrap;

    color: var(--color-ivory);

    user-select: none;
}


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

.site-footer__bottom {
    position: relative;

    z-index: 2;

    margin-top:
        clamp(35px, 4vw, 60px);

    padding-top: 24px;

    border-top:
        1px solid
        rgba(247, 243, 234, .13);

    display: grid;

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

    align-items: center;

    gap: 30px;

    font-size: 7px;

    font-weight: 600;

    letter-spacing: .14em;

    text-transform: uppercase;

    color:
        rgba(247, 243, 234, .40);
}


.site-footer__bottom > span:last-child {
    text-align: right;
}


.site-footer__bottom a {
    display: flex;

    align-items: center;

    gap: 10px;

    color:
        rgba(247, 243, 234, .68);

    transition:
        color .3s ease;
}


.site-footer__bottom a:hover {
    color: var(--color-ivory);
}


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

@media (max-width: 1100px) {

    .site-footer {
        padding-top: 100px;
    }


    .site-footer__top {
        grid-template-columns:
            repeat(2, 1fr);

        row-gap: 65px;
    }


    .site-footer__brand {
        grid-column:
            1 / -1;

        margin-bottom: 20px;
    }


    .site-footer__brand p {
        max-width: 500px;
    }


    .site-footer__wordmark {
        margin-top: 90px;

        font-size:
            clamp(115px, 22vw, 280px);
    }

}


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

@media (max-width: 700px) {

    .site-footer {
        padding:
            90px
            22px
            25px;
    }


    .site-footer__top {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        column-gap: 30px;
        row-gap: 60px;
    }


    .site-footer__brand {
        grid-column:
            1 / -1;

        margin-bottom: 5px;
    }


    .site-footer__logo {
        width: 125px;
    }


    .site-footer__brand p {
        max-width: 330px;

        font-size: 43px;

        line-height: .9;
    }


    .site-footer__label {
        margin-bottom: 20px;
    }


    .site-footer__nav {
        gap: 12px;
    }


    .site-footer__nav a {
        font-size: 22px;
    }


    .site-footer__wordmark {
        margin-top: 85px;

        margin-left: -.04em;

        font-size:
            clamp(92px, 29vw, 150px);

        line-height: .72;

        letter-spacing: -.07em;
    }


    .site-footer__bottom {
        margin-top: 35px;

        grid-template-columns:
            1fr;

        gap: 15px;
    }


    .site-footer__bottom > span:last-child {
        text-align: left;
    }


    .site-footer__bottom a {
        grid-row: 1;
    }

}


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

@media (max-width: 450px) {

    .site-footer__top {
        grid-template-columns:
            1fr;

        row-gap: 50px;
    }


    .site-footer__brand {
        grid-column: auto;
    }


    .site-footer__wordmark {
        font-size:
            clamp(82px, 28vw, 120px);
    }

}
/* ============================================================
   PRODUCTION ACCESSIBILITY / PERFORMANCE
============================================================ */

html {
    scroll-padding-top: 90px;
}


.skip-link {
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 10000;

    padding: 12px 16px;

    background: var(--color-ivory);
    color: var(--color-espresso);

    font-size: 12px;
    font-weight: 700;

    transform: translateY(-180%);
    transition: transform .2s ease;
}


.skip-link:focus {
    transform: translateY(0);
}


:where(
    a,
    button,
    input,
    [tabindex]
):focus-visible {
    outline: 2px solid #d6a089;
    outline-offset: 4px;
}


button:disabled {
    cursor: not-allowed;
}


/* Progress bars animate with transform instead of width,
   avoiding layout work during scroll. */

.pizza-scroll__progress-fill,
.story__progress-fill,
.coffee-spin__progress-fill,
.restaurant-gallery__progress-fill {
    width: 100%;
    transform: scaleX(0);
    transform-origin: left center;
    will-change: transform;
}


@media (prefers-reduced-motion: reduce) {

    .skip-link {
        transition: none;
    }

}

/* ============================================================
   FLOATING TOOLS · BACK TO TOP + ASSISTANT
============================================================ */

.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.floating-tools {
    position: fixed;
    right: clamp(16px, 2vw, 28px);
    bottom: clamp(16px, 2vw, 28px);
    z-index: 4700;
    pointer-events: none;
}

/* ------------------------------------------------------------
   BACK TO TOP
------------------------------------------------------------- */

.back-to-top {
    position: absolute;
    right: 0;
    bottom: 72px;

    width: 48px;
    height: 48px;

    display: grid;
    place-items: center;

    border: 1px solid rgba(247, 243, 234, .18);
    border-radius: 50%;

    background: rgba(33, 25, 20, .88);
    color: var(--color-ivory);

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);

    cursor: pointer;
    pointer-events: none;

    opacity: 0;
    visibility: hidden;
    transform: translateY(12px) scale(.94);

    transition:
        opacity .3s ease,
        visibility .3s ease,
        transform .3s ease,
        background .3s ease;
}

.back-to-top span {
    font-family: var(--font-display);
    font-size: 24px;
    line-height: 1;
}

.back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.back-to-top:hover {
    background: var(--color-wine);
    transform: translateY(-3px);
}

/* ------------------------------------------------------------
   ASSISTANT TOGGLE
------------------------------------------------------------- */

.buondi-assistant {
    position: relative;
    pointer-events: auto;
}

.buondi-assistant__toggle {
    min-width: 112px;
    height: 56px;

    padding: 0 20px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    border: 1px solid rgba(247, 243, 234, .16);
    border-radius: 999px;

    background: var(--color-wine);
    color: var(--color-ivory);

    box-shadow: 0 16px 45px rgba(0, 0, 0, .22);

    cursor: pointer;

    font-size: 9px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;

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

.buondi-assistant__toggle:hover {
    transform: translateY(-3px);
    background: #87352f;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .28);
}

.buondi-assistant__toggle svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linejoin: round;
}

/* ------------------------------------------------------------
   ASSISTANT PANEL
------------------------------------------------------------- */

.buondi-assistant__panel {
    position: absolute;
    right: 0;
    bottom: 70px;

    width: min(380px, calc(100vw - 32px));
    max-height: min(620px, calc(100svh - 130px));

    display: grid;
    grid-template-rows: auto minmax(130px, 1fr) auto auto;

    overflow: hidden;

    border: 1px solid rgba(33, 25, 20, .10);
    border-radius: 22px;

    background: rgba(247, 243, 234, .98);
    color: var(--color-espresso);

    box-shadow: 0 28px 80px rgba(20, 14, 10, .28);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(16px) scale(.97);
    transform-origin: right bottom;

    transition:
        opacity .25s ease,
        visibility .25s ease,
        transform .3s cubic-bezier(.19, 1, .22, 1);
}

.buondi-assistant__panel.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

.buondi-assistant__header {
    min-height: 78px;
    padding: 16px 17px 16px 20px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    border-bottom: 1px solid rgba(33, 25, 20, .10);
}

.buondi-assistant__header > div {
    display: flex;
    align-items: center;
    gap: 11px;
}

.buondi-assistant__header strong {
    display: block;
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 500;
    line-height: 1;
}

.buondi-assistant__header small {
    display: block;
    margin-top: 5px;
    font-size: 8px;
    font-weight: 600;
    letter-spacing: .11em;
    text-transform: uppercase;
    opacity: .45;
}

.buondi-assistant__status {
    width: 9px;
    height: 9px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--color-olive);
    box-shadow: 0 0 0 4px rgba(98, 101, 77, .12);
}

.buondi-assistant__close {
    width: 38px;
    height: 38px;
    flex: 0 0 auto;

    border: 1px solid rgba(33, 25, 20, .12);
    border-radius: 50%;

    background: transparent;
    color: var(--color-espresso);

    cursor: pointer;
    font-family: var(--font-display);
    font-size: 25px;
    line-height: 1;
}

/* ------------------------------------------------------------
   ASSISTANT MESSAGES
------------------------------------------------------------- */

.buondi-assistant__messages {
    min-height: 170px;
    padding: 20px;

    display: flex;
    flex-direction: column;
    gap: 10px;

    overflow-y: auto;
    overscroll-behavior: contain;

    background:
        radial-gradient(circle at 100% 0%, rgba(118, 44, 39, .055), transparent 35%),
        var(--color-ivory);
}

.assistant-message {
    max-width: 86%;
    padding: 11px 13px;

    border-radius: 15px;

    font-size: 11px;
    line-height: 1.55;
}

.assistant-message--bot {
    align-self: flex-start;
    border-bottom-left-radius: 4px;
    background: #e9e1d2;
    color: var(--color-espresso);
}

.assistant-message--user {
    align-self: flex-end;
    border-bottom-right-radius: 4px;
    background: var(--color-wine);
    color: var(--color-ivory);
}

.assistant-message__action {
    width: max-content;
    max-width: 90%;
    margin-top: 2px;

    align-self: flex-start;

    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 9px 12px;

    border: 1px solid rgba(118, 44, 39, .18);
    border-radius: 999px;

    background: transparent;
    color: var(--color-wine);

    cursor: pointer;

    font-size: 8px;
    font-weight: 700;
    letter-spacing: .11em;
    text-transform: uppercase;
}

/* ------------------------------------------------------------
   QUICK ACTIONS
------------------------------------------------------------- */

.buondi-assistant__quick {
    padding: 10px 14px 12px;

    display: flex;
    gap: 7px;

    overflow-x: auto;

    border-top: 1px solid rgba(33, 25, 20, .08);
}

.buondi-assistant__quick button {
    flex: 0 0 auto;

    min-height: 34px;
    padding: 0 11px;

    border: 1px solid rgba(33, 25, 20, .13);
    border-radius: 999px;

    background: transparent;
    color: var(--color-espresso);

    cursor: pointer;

    font-size: 8px;
    font-weight: 650;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.buondi-assistant__quick button:hover {
    border-color: var(--color-wine);
    color: var(--color-wine);
}

/* ------------------------------------------------------------
   ASSISTANT FORM
------------------------------------------------------------- */

.buondi-assistant__form {
    padding: 12px 14px 14px;

    display: grid;
    grid-template-columns: 1fr 42px;
    gap: 8px;

    border-top: 1px solid rgba(33, 25, 20, .08);
}

.buondi-assistant__form input {
    min-width: 0;
    height: 42px;
    padding: 0 14px;

    border: 1px solid rgba(33, 25, 20, .13);
    border-radius: 999px;

    background: rgba(255, 255, 255, .48);
    color: var(--color-espresso);

    font: inherit;
    font-size: 10px;
}

.buondi-assistant__form input::placeholder {
    color: rgba(33, 25, 20, .42);
}

.buondi-assistant__form button {
    width: 42px;
    height: 42px;

    border: 0;
    border-radius: 50%;

    background: var(--color-espresso);
    color: var(--color-ivory);

    cursor: pointer;
    font-size: 17px;
}

/* ============================================================
   FLOATING TOOLS · MOBILE
============================================================ */

@media (max-width: 700px) {

    .floating-tools {
        right: 16px;
        bottom: 16px;
    }

    .buondi-assistant__toggle {
        min-width: 54px;
        width: 54px;
        height: 54px;
        padding: 0;
        border-radius: 50%;
    }

    .buondi-assistant__toggle > span {
        display: none;
    }

    .buondi-assistant__panel {
        position: fixed;
        right: 12px;
        bottom: 80px;
        width: calc(100vw - 24px);
        max-height: min(620px, calc(100svh - 100px));
    }

    .back-to-top {
        width: 44px;
        height: 44px;
        bottom: 66px;
        right: 5px;
    }

}

@media (prefers-reduced-motion: reduce) {

    .back-to-top,
    .buondi-assistant__toggle,
    .buondi-assistant__panel {
        transition: none;
    }

}


/* ============================================================
   MENÚ PDF · INLINE VIEWER
============================================================ */

body.catalog-open {
    overflow: hidden;
}

.menu-section__cta {
    border: 0;
    padding: 0;
    background: transparent;
    color: inherit;
    font-family: inherit;
    cursor: pointer;
}

.catalog-modal {
    position: fixed;
    inset: 0;
    z-index: 6500;

    display: grid;
    place-items: center;

    padding: clamp(12px, 2vw, 28px);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition:
        opacity .35s ease,
        visibility .35s ease;
}

.catalog-modal.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.catalog-modal__backdrop {
    position: absolute;
    inset: 0;

    background: rgba(12, 9, 7, .88);
    backdrop-filter: blur(18px);
}

.catalog-modal__shell {
    position: relative;
    z-index: 1;

    width: min(1500px, 100%);
    height: min(920px, calc(100svh - clamp(24px, 4vw, 56px)));

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

    overflow: hidden;

    background: var(--color-ivory);
    color: var(--color-espresso);

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

    transform: translateY(24px) scale(.985);

    transition: transform .45s cubic-bezier(.19, 1, .22, 1);
}

.catalog-modal.is-open .catalog-modal__shell {
    transform: translateY(0) scale(1);
}

.catalog-modal__header {
    min-height: 92px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;

    padding: 18px clamp(20px, 2.4vw, 38px);

    border-bottom: 1px solid rgba(33, 25, 20, .12);
}

.catalog-modal__header > div:first-child {
    min-width: 0;
}

.catalog-modal__eyebrow {
    display: block;

    margin-bottom: 2px;

    font-family: var(--font-display);
    font-size: 16px;
    font-style: italic;

    color: var(--color-wine);
}

.catalog-modal__header h2 {
    margin: 0;

    font-family: var(--font-display);
    font-size: clamp(30px, 3vw, 48px);
    font-weight: 400;
    line-height: 1;
}

.catalog-modal__header small {
    display: block;

    margin-top: 6px;

    max-width: 630px;

    font-size: 8px;
    line-height: 1.45;
    letter-spacing: .08em;
    text-transform: uppercase;

    opacity: .48;
}

.catalog-modal__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 9px;

    flex-shrink: 0;
}

.catalog-modal__action,
.catalog-modal__close {
    min-height: 42px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border: 1px solid rgba(33, 25, 20, .16);
    border-radius: 999px;

    background: transparent;
    color: var(--color-espresso);

    font-family: var(--font-body);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;

    cursor: pointer;

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

.catalog-modal__action {
    padding: 0 16px;
}

.catalog-modal__close {
    width: 42px;
    padding: 0;

    font-size: 23px;
    font-weight: 400;
    line-height: 1;
}

.catalog-modal__action:hover,
.catalog-modal__close:hover {
    background: var(--color-espresso);
    border-color: var(--color-espresso);
    color: var(--color-ivory);

    transform: translateY(-1px);
}

.catalog-modal__viewer {
    position: relative;
    min-height: 0;

    background: #d5d0c7;
}

.catalog-modal__viewer iframe {
    position: relative;
    z-index: 2;

    width: 100%;
    height: 100%;

    display: block;

    border: 0;
    background: #fff;
}

.catalog-modal__fallback {
    position: absolute;
    z-index: 1;
    inset: 0;

    display: grid;
    place-content: center;

    padding: 30px;
    text-align: center;
}

.catalog-modal__fallback strong {
    font-family: var(--font-display);
    font-size: clamp(30px, 4vw, 55px);
    font-weight: 400;
}

.catalog-modal__fallback p {
    max-width: 480px;
    margin: 12px auto 0;

    font-size: 11px;
    line-height: 1.7;
    opacity: .55;
}

@media (max-width: 760px) {

    .catalog-modal {
        padding: 0;
    }

    .catalog-modal__shell {
        width: 100%;
        height: 100svh;
    }

    .catalog-modal__header {
        min-height: auto;
        align-items: flex-start;
        padding: 16px 16px 13px;
    }

    .catalog-modal__header h2 {
        font-size: 29px;
    }

    .catalog-modal__header small {
        max-width: 220px;
        font-size: 7px;
    }

    .catalog-modal__actions {
        gap: 6px;
    }

    .catalog-modal__action {
        min-height: 38px;
        padding: 0 11px;
        font-size: 7px;
    }

    .catalog-modal__action:nth-child(2) {
        display: none;
    }

    .catalog-modal__close {
        width: 38px;
        min-height: 38px;
    }

}

@media (max-width: 480px) {

    .catalog-modal__header {
        flex-wrap: wrap;
    }

    .catalog-modal__header > div:first-child {
        width: calc(100% - 46px);
    }

    .catalog-modal__actions {
        position: absolute;
        top: 14px;
        right: 14px;
    }

    .catalog-modal__action:first-child {
        position: absolute;
        top: 55px;
        right: 0;
        white-space: nowrap;
    }

    .catalog-modal__viewer {
        margin-top: 36px;
    }

}

@media (prefers-reduced-motion: reduce) {

    .catalog-modal,
    .catalog-modal__shell,
    .catalog-modal__action,
    .catalog-modal__close {
        transition: none;
    }

}

/* ============================================================
   MOBILE LIQUID GLASS DOCK
============================================================ */

.mobile-glass-dock {
    display: none;
}


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

@media (max-width: 700px) {

    /*
     * Quitamos el menú hamburguesa anterior.
     */

    .menu-toggle {
        display: none !important;
    }

    .mobile-menu {
        display: none !important;
    }


    /*
     * Si ya tienes botón flotante de ayuda,
     * lo ocultamos porque ahora vive dentro del dock.
     */

    .help-launcher,
    .chat-launcher,
    .assistant-launcher {
        display: none !important;
    }


    /* ========================================================
       LIQUID GLASS CONTAINER
    ========================================================= */

    .mobile-glass-dock {
        position: fixed;

        z-index: 4000;

        left: 50%;
        bottom:
            max(
                14px,
                env(safe-area-inset-bottom)
            );

        transform:
            translateX(-50%);

        display: grid;

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

        align-items: center;

        width:
            calc(100% - 28px);

        max-width: 480px;

        min-height: 72px;

        padding: 7px;

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

        border-radius: 27px;

        background:
            linear-gradient(
                135deg,
                rgba(255, 255, 255, .18),
                rgba(255, 255, 255, .07)
            );

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

            inset 0 1px 0
            rgba(
                255,
                255,
                255,
                .24
            ),

            inset 0 -1px 0
            rgba(
                255,
                255,
                255,
                .05
            );

        backdrop-filter:
            blur(28px)
            saturate(170%);

        -webkit-backdrop-filter:
            blur(28px)
            saturate(170%);

        overflow: hidden;

        isolation: isolate;
    }


    /*
     * Reflejo superior tipo cristal.
     */

    .mobile-glass-dock::before {
        content: "";

        position: absolute;

        z-index: -1;

        top: 0;
        left: 4%;

        width: 92%;
        height: 48%;

        border-radius:
            100px;

        background:
            linear-gradient(
                180deg,
                rgba(255, 255, 255, .18),
                rgba(255, 255, 255, 0)
            );

        pointer-events: none;
    }


    /*
     * Ligera tonalidad espresso,
     * para integrarlo con Buondì.
     */

    .mobile-glass-dock::after {
        content: "";

        position: absolute;

        z-index: -2;

        inset: 0;

        background:
            rgba(
                30,
                22,
                18,
                .44
            );

        pointer-events: none;
    }


    /* ========================================================
       ITEMS
    ========================================================= */

    .mobile-glass-dock__item {
        position: relative;

        min-width: 0;

        min-height: 58px;

        padding:
            7px 3px 6px;

        border: 0;

        border-radius: 21px;

        background: transparent;

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

        display: flex;

        flex-direction: column;

        align-items: center;

        justify-content: center;

        gap: 3px;

        cursor: pointer;

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


    .mobile-glass-dock__icon {
        width: 23px;
        height: 23px;

        display: flex;

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


    .mobile-glass-dock__icon svg {
        width: 100%;
        height: 100%;

        fill: none;

        stroke: currentColor;

        stroke-width: 1.7;

        stroke-linecap: round;
        stroke-linejoin: round;
    }


    .mobile-glass-dock__label {
        max-width: 100%;

        overflow: hidden;

        white-space: nowrap;

        font-size: 7px;

        font-weight: 600;

        letter-spacing: .05em;

        text-transform: uppercase;

        opacity: .8;
    }


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

    .mobile-glass-dock__item.is-active {
        color:
            var(--color-ivory);

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

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

            0 7px 18px
            rgba(
                0,
                0,
                0,
                .12
            );
    }


    /* ========================================================
       RESERVAR
    ========================================================= */

    .mobile-glass-dock__item--primary {
        color:
            rgba(
                255,
                255,
                255,
                .92
            );
    }


    .mobile-glass-dock__item--primary::before {
        content: "";

        position: absolute;

        inset: 4px;

        z-index: -1;

        border-radius: 18px;

        background:
            linear-gradient(
                145deg,
                rgba(118, 44, 39, .92),
                rgba(118, 44, 39, .66)
            );

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

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


    .mobile-glass-dock__item:active {
        transform:
            scale(.92);
    }


    /* ========================================================
       BACK TO TOP POSITION
    ========================================================= */

    .back-to-top {
        bottom:
            calc(
                100px
                +
                env(safe-area-inset-bottom)
            ) !important;
    }


    /*
     * Evita que el footer quede tapado
     * por la navegación.
     */

    .site-footer {
        padding-bottom:
            calc(
                110px
                +
                env(safe-area-inset-bottom)
            );
    }

}

/* ============================================================
   FIX MOBILE CHATBOT + GLASS DOCK
============================================================ */

@media (max-width: 700px) {

    /* Ocultar el botón flotante original del chatbot */
    .buondi-assistant__toggle {
        display: none !important;
    }

    /* El panel del chatbot sí sigue funcionando */
    .buondi-assistant__panel {
        position: fixed;

        left: 14px;
        right: 14px;

        bottom:
            calc(
                100px
                +
                env(safe-area-inset-bottom)
            );

        width: auto;

        max-height:
            calc(
                100svh
                -
                135px
                -
                env(safe-area-inset-bottom)
            );

        transform-origin:
            center bottom;
    }

}