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

:root {

    --bg:
        #080808;

    --gold:
        #b58a45;

    --gold-soft:
        #c7a870;

    --text:
        #f5f5f5;

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

    --silver:
        #c6c9ce;

    --border:
        rgba(255, 255, 255, .11);

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

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

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

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

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

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


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

    --links-background-main:
        url("im/links/fondo-links.webp");

    --links-background-detail:
        none;

}


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

* {

    margin:
        0;

    padding:
        0;

    box-sizing:
        border-box;

}


html {

    width:
        100%;

    min-width:
        100%;

    min-height:
        100%;

    margin:
        0;

    padding:
        0;

    background:
        var(--bg);

}


body {

    width:
        100%;

    min-width:
        100%;

    min-height:
        100vh;

    min-height:
        100dvh;

    min-height:
        100lvh;

    margin:
        0;

    padding:
        0;

    overflow-x:
        hidden;

    overscroll-behavior-y:
        none;

    background:
        var(--bg);

    color:
        var(--text);

    font-family:
        var(--sans);

    -webkit-font-smoothing:
        antialiased;

}


a {

    color:
        inherit;

    text-decoration:
        none;

}


/* =========================================================
   SAFARI / FULL BLEED BACKGROUND
========================================================= */

.links-fullbleed {

    position:
        fixed;

    z-index:
        0;

    inset:
        -3px;

    pointer-events:
        none;

    overflow:
        hidden;

    background:
        var(--bg);

}


/* =========================================================
   MAIN PHOTO
========================================================= */

.links-fullbleed::before {

    content:
        "";

    position:
        absolute;

    inset:
        -3%;

    background-image:

        linear-gradient(
            to bottom,

            #080808 0%,

            rgba(
                8,
                8,
                8,
                .88
            ) 8%,

            rgba(
                8,
                8,
                8,
                .56
            ) 21%,

            rgba(
                8,
                8,
                8,
                .48
            ) 55%,

            rgba(
                8,
                8,
                8,
                .70
            ) 82%,

            #080808 100%
        ),

        var(--links-background-main);

    background-size:
        cover,
        cover;

    background-position:
        center,
        center;

    background-repeat:
        no-repeat;

    transform:
        scale(1.025);

}


/* =========================================================
   SECOND OPTIONAL PHOTO / TEXTURE
========================================================= */

.links-fullbleed::after {

    content:
        "";

    position:
        absolute;

    inset:
        -3%;

    pointer-events:
        none;

    opacity:
        .14;

    background-image:
        var(--links-background-detail);

    background-size:
        cover;

    background-position:
        center;

    background-repeat:
        no-repeat;

    mix-blend-mode:
        soft-light;

}


/* =========================================================
   PAGE
========================================================= */

.links-page {

    position:
        relative;

    z-index:
        1;

    width:
        100%;

    min-height:
        100vh;

    min-height:
        100dvh;

    display:
        flex;

    justify-content:
        center;

    padding-left:
        var(--safe-left);

    padding-right:
        var(--safe-right);

    background:
        transparent;

}


/* =========================================================
   SHELL

   MISMA POSICIÓN GENERAL DEL DISEÑO ANTERIOR.
========================================================= */

.links-shell {

    position:
        relative;

    width:
        min(
            calc(100% - 36px),
            560px
        );

    min-height:
        100dvh;

    padding:

        max(
            58px,
            calc(
                var(--safe-top) + 34px
            )
        )

        0

        max(
            26px,
            calc(
                var(--safe-bottom) + 18px
            )
        );

    display:
        flex;

    flex-direction:
        column;

}


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

.links-header {

    position:
        relative;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    text-align:
        center;

    opacity:
        0;

    transform:
        translateY(8px);

}


/* =========================================================
   SUBTLE DECORATIVE LINE
========================================================= */

.links-header::after {

    content:
        "";

    position:
        absolute;

    left:
        50%;

    bottom:
        -26px;

    width:
        72px;

    height:
        1px;

    transform:
        translateX(-50%);

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

}


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

.links-brand {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    line-height:
        .86;

}


.links-brand-main {

    font-family:
        var(--serif);

    font-size:
        clamp(
            42px,
            12vw,
            62px
        );

    font-weight:
        500;

    letter-spacing:
        .045em;

}


.links-brand-sub {

    margin-top:
        12px;

    margin-left:
        6px;

    color:
        var(--gold);

    font-size:
        9px;

    font-weight:
        600;

    letter-spacing:
        .52em;

}


.links-location {

    margin-top:
        30px;

    color:
        var(--text-soft);

    font-size:
        9px;

    font-weight:
        600;

    letter-spacing:
        .18em;

}


/* =========================================================
   LINK LIST
========================================================= */

.links-list {

    width:
        100%;

    margin-top:
        58px;

    display:
        flex;

    flex-direction:
        column;

    gap:
        12px;

}


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

.link-card {

    --pointer-x:
        50%;

    --pointer-y:
        50%;

    --app-rgb:
        181, 138, 69;


    position:
        relative;

    isolation:
        isolate;

    min-height:
        92px;

    padding:
        13px 14px;

    display:
        grid;

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

    align-items:
        center;

    gap:
        16px;

    overflow:
        hidden;

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

    border-radius:
        25px;

    background:

        linear-gradient(
            135deg,

            rgba(
                255,
                255,
                255,
                .075
            ),

            rgba(
                255,
                255,
                255,
                .025
            )
        );

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

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

    box-shadow:

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

        0 16px 38px
        rgba(
            0,
            0,
            0,
            .12
        );

    opacity:
        0;

    transform:
        translateY(15px);

    transition:

        transform .42s
        cubic-bezier(.2, .7, .2, 1),

        border-color .35s ease,

        background-color .35s ease,

        box-shadow .35s ease;

}


/* =========================================================
   APPLICATION ACCENTS
========================================================= */

.link-card[data-link-name="instagram"] {

    --app-rgb:
        225, 48, 108;

}


.link-card[data-link-name="whatsapp"] {

    --app-rgb:
        37, 211, 102;

}


.link-card[data-link-name="maps"] {

    --app-rgb:
        181, 138, 69;
    

}


.link-card[data-link-name="web"] {

    --app-rgb:
        66, 133, 244;

}


/* =========================================================
   POINTER LIGHT
========================================================= */

.link-card::before {

    content:
        "";

    position:
        absolute;

    z-index:
        -1;

    inset:
        0;

    pointer-events:
        none;

    opacity:
        0;

    background:
        radial-gradient(
            circle
            180px
            at
            var(--pointer-x)
            var(--pointer-y),

            rgba(
                var(--app-rgb),
                .14
            ),

            transparent
            68%
        );

    transition:
        opacity .3s ease;

}


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

.link-card::after {

    content:
        "";

    position:
        absolute;

    z-index:
        2;

    top:
        -65%;

    bottom:
        -65%;

    left:
        -35%;

    width:
        18%;

    pointer-events:
        none;

    opacity:
        0;

    background:
        linear-gradient(
            105deg,

            transparent,

            rgba(
                255,
                255,
                255,
                .09
            ),

            rgba(
                255,
                255,
                255,
                .27
            ),

            rgba(
                255,
                255,
                255,
                .09
            ),

            transparent
        );

    filter:
        blur(2px);

    transform:
        skewX(-18deg);

}


/* =========================================================
   LOGO
========================================================= */

.link-card-logo {

    position:
        relative;

    width:
        54px;

    height:
        54px;

    display:
        grid;

    place-items:
        center;

    overflow:
        hidden;

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

    border-radius:
        18px;

    background:

        radial-gradient(
            circle at 30% 15%,

            rgba(
                var(--app-rgb),
                .17
            ),

            transparent
            65%
        ),

        rgba(
            255,
            255,
            255,
            .045
        );

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

}


/* =========================================================
   FALLBACK IF LOGO DOESN'T EXIST YET
========================================================= */

.link-card-logo::before {

    content:
        attr(data-fallback);

    position:
        absolute;

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

    font-size:
        10px;

    font-weight:
        600;

    letter-spacing:
        .05em;

    transition:
        opacity .25s ease;

}


.link-card-logo img {

    position:
        relative;

    z-index:
        1;

    width:
        27px;

    height:
        27px;

    object-fit:
        contain;

    opacity:
        0;

    transform:
        scale(.90);

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

}


.link-card-logo.has-logo::before {

    opacity:
        0;

}


.link-card-logo.has-logo img {

    opacity:
        1;

    transform:
        scale(1);

}


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

.link-card-content {

    position:
        relative;

    z-index:
        3;

    min-width:
        0;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-start;

}


.link-card-eyebrow {

    margin-bottom:
        4px;

    color:
        rgba(
            199,
            168,
            112,
            .84
        );

    font-size:
        7px;

    font-weight:
        600;

    letter-spacing:
        .17em;

}


.link-card-content strong {

    font-family:
        var(--serif);

    font-size:
        20px;

    font-weight:
        500;

    line-height:
        1.05;

    letter-spacing:
        -.012em;

}


.link-card-content small {

    margin-top:
        6px;

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

    font-size:
        10px;

    font-weight:
        500;

}


/* =========================================================
   ACTION
========================================================= */

.link-card-action {

    position:
        relative;

    z-index:
        3;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-end;

    gap:
        10px;

}


.link-card-action > small {

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

    font-size:
        7px;

    font-weight:
        600;

    letter-spacing:
        .12em;

}


.link-card-arrow {

    width:
        36px;

    height:
        36px;

    display:
        grid;

    place-items:
        center;

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

    border-radius:
        50%;

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

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

    

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

}


.link-card-arrow svg {

    width:
        16px;

    height:
        16px;

    display:
        block;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.6;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;

}


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

@media (
    hover: hover
) {

    .link-card:hover {

        transform:
            translateY(-3px);

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

        box-shadow:

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

            0 22px 48px
            rgba(
                0,
                0,
                0,
                .18
            );

    }


    .link-card:hover::before {

        opacity:
            1;

    }


    .link-card:hover::after {

        opacity:
            1;

        animation:
            linkCardReflection
            .85s
            cubic-bezier(.22, .61, .36, 1)
            1
            forwards;

    }


    .link-card:hover
    .link-card-arrow {

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

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

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

    }

}


/* =========================================================
   PRESSED
========================================================= */

.link-card.is-pressed {

    transform:
        scale(.985);

}


/* =========================================================
   REFLECTION
========================================================= */

@keyframes linkCardReflection {

    from {

        left:
            -35%;

    }

    to {

        left:
            125%;

    }

}


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

.links-footer {

    margin-top:
        auto;

    padding-top:
        48px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

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

    font-size:
        9px;

    font-weight:
        500;

    opacity:
        0;

}

.links-footer-info,
.links-legal {

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

}

.links-footer-info {

    flex-wrap:
        wrap;

}

.links-legal a {

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

    text-decoration:
        underline;

    text-decoration-color:
        transparent;

    text-underline-offset:
        3px;

    transition:
        color .2s ease,
        text-decoration-color .2s ease;

}

.links-legal a:hover,
.links-legal a:focus-visible {

    color:
        var(--text);

    text-decoration-color:
        currentColor;

}


/* =========================================================
   CASAI
========================================================= */

.links-credit {

    display:
        flex;

    align-items:
        center;

    gap:
        5px;

    color:
        #bfc3c8;

    white-space:
        nowrap;

}


.links-credit-brand {

    position:
        relative;

    display:
        inline-block;

    overflow:
        hidden;

    padding:
        2px 3px;

    color:
        #d5d8dc;

    font-weight:
        700;

    letter-spacing:
        .12em;

}


/* =========================================================
   CASAI REFLECTION
========================================================= */

.links-credit-brand::after {

    content:
        "";

    position:
        absolute;

    top:
        -35%;

    bottom:
        -35%;

    left:
        -70%;

    width:
        52%;

    pointer-events:
        none;

    opacity:
        0;

    background:
        linear-gradient(
            105deg,

            transparent 0%,

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

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

            #ffffff 50%,

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

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

            transparent 100%
        );

    filter:
        blur(2px);

    transform:
        skewX(-18deg);

}


.links-credit-brand.is-shining::after {

    opacity:
        1;

    animation:
        linksCasaiShine
        1.05s
        cubic-bezier(.22, .61, .36, 1)
        .15s
        1
        forwards;

}


@keyframes linksCasaiShine {

    from {

        left:
            -70%;

    }

    to {

        left:
            125%;

    }

}


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

body.links-ready
.links-header {

    opacity:
        1;

    transform:
        translateY(0);

    transition:
        opacity .75s ease,
        transform .8s
        cubic-bezier(.2, .7, .2, 1);

}


body.links-ready
.link-card {

    opacity:
        1;

    transform:
        translateY(0);

    transition:

        opacity .7s ease,

        transform .42s
        cubic-bezier(.2, .7, .2, 1),

        border-color .35s ease,

        background-color .35s ease,

        box-shadow .35s ease;

}


body.links-ready
.link-card:nth-child(1) {

    transition-delay:
        .10s;

}


body.links-ready
.link-card:nth-child(2) {

    transition-delay:
        .17s;

}


body.links-ready
.link-card:nth-child(3) {

    transition-delay:
        .24s;

}


body.links-ready
.link-card:nth-child(4) {

    transition-delay:
        .31s;

}


body.links-ready
.links-footer {

    opacity:
        1;

    transition:
        opacity .8s ease .42s;

}


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

@media (
    max-width: 420px
) {

    .links-shell {

        width:
            calc(
                100% - 28px
            );

    }


    .links-list {

        margin-top:
            54px;

        gap:
            10px;

    }


    .link-card {

        min-height:
            86px;

        padding:
            11px 12px;

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

        gap:
            12px;

        border-radius:
            22px;

    }


    .link-card-logo {

        width:
            48px;

        height:
            48px;

        border-radius:
            16px;

    }


    .link-card-logo img {

        width:
            25px;

        height:
            25px;

    }


    .link-card-content strong {

        font-size:
            18px;

    }


    .link-card-arrow {

        width:
            32px;

        height:
            32px;

        font-size:
            14px;

    }


    .links-footer {

        font-size:
            8px;

    }

}


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

@media (
    max-width: 350px
) {

    .links-footer {

        flex-direction:
            column;

        align-items:
            flex-start;

        gap:
            7px;

    }

    .links-legal {

        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            5px;

    }

}


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

.skip-link {

    position:
        fixed;

    z-index:
        2000;

    top:
        12px;

    left:
        12px;

    padding:
        10px 14px;

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

    border-radius:
        999px;

    background:
        var(--bg);

    color:
        var(--text);

    transform:
        translateY(-180%);

    transition:
        transform .2s ease;

}

.skip-link:focus {

    transform:
        translateY(0);

}

.visually-hidden {

    position:
        absolute;

    width:
        1px;

    height:
        1px;

    padding:
        0;

    margin:
        -1px;

    overflow:
        hidden;

    clip:
        rect(0, 0, 0, 0);

    white-space:
        nowrap;

    border:
        0;

}