/* =========================================================
   CORES DA IDENTIDADE VISUAL
========================================================= */

:root {

    --cream: #f5eee4;

    --red: #96383b;

    --blue: #11294d;

    --green: #34533d;

    --gold: #c8a45d;

    --text: #24334c;


    --shadow:
        0 12px 28px rgba(
            30,
            39,
            49,
            0.10
        );


    --shadow-hover:
        0 18px 38px rgba(
            30,
            39,
            49,
            0.16
        );
}


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

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;
}


html {

    scroll-behavior: smooth;
}


body {

    min-height: 100vh;

    background:
        var(--cream);

    color:
        var(--text);

    font-family:
        "Montserrat",
        sans-serif;

    overflow-x: hidden;

}


/* =========================================================
   CONTAINER PRINCIPAL
========================================================= */

.linktree {

    position: relative;

    width: 100%;

    max-width: 680px;

    min-height: 100vh;

    margin: 0 auto;

    padding:
        48px
        24px
        190px;

    text-align: center;

    overflow: hidden;


    background:

        radial-gradient(
            circle at 20% 10%,
            rgba(
                255,
                255,
                255,
                0.65
            ),
            transparent 40%
        ),

        radial-gradient(
            circle at 85% 70%,
            rgba(
                210,
                195,
                177,
                0.15
            ),
            transparent 45%
        );
}


/* =========================================================
   TEXTURA DE PAPEL
========================================================= */

.linktree::before {

    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    opacity: 1;


    background-image:

        url("../assets/background-linktree.png");

    background-size:
        cover;

    background-position:
        center top;


    background-repeat:
        no-repeat;

    mix-blend-mode:
        normal;

    z-index: 0;
}


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

.header {

    position: relative;

    z-index: 5;
}


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

.logo {

    display: block;

    width: 175px;

    height: 175px;

    margin:
        0 auto
        18px;

    object-fit:
        contain;


    filter:

        drop-shadow(
            0 8px 10px
            rgba(
                0,
                0,
                0,
                0.05
            )
        );
}


/* =========================================================
   NOME AFECTAR
========================================================= */

.brand {

    font-family:
        "Cormorant Garamond",
        serif;

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

    font-weight:
        500;

    letter-spacing:
        0.17em;

    line-height:
        0.95;

    color:
        var(--red);

    margin-left:
        0.17em;
}


/* =========================================================
   CATEGORIAS
========================================================= */

.categories {

    display: flex;

    justify-content: center;

    align-items: center;

    flex-wrap: wrap;

    gap: 9px;

    margin-top:
        25px;


    font-family:
        "Cormorant Garamond",
        serif;

    font-weight:
        600;

    font-size:
        20px;

    letter-spacing:
        0.12em;

    text-transform:
        uppercase;
}


.psychology {

    color:
        var(--red);
}


.education {

    color:
        var(--blue);
}


.health {

    color:
        var(--green);
}


.separator {

    color:
        var(--text);

    font-size:
        14px;
}


/* =========================================================
   DIVISOR
========================================================= */

.divider {

    position:
        relative;

    z-index:
        5;


    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        13px;

    width:
        210px;

    margin:
        40px auto
        30px;
}


.divider::before,
.divider::after {

    content:
        "";

    width:
        80px;

    height:
        1px;

    background:
        var(--gold);
}


.divider span {

    width:
        8px;

    height:
        8px;

    border-radius:
        50%;

    background:
        var(--gold);
}


/* =========================================================
   FRASE
========================================================= */

.intro {

    position:
        relative;

    z-index:
        5;

    margin-bottom:
        40px;
}


.intro p {

    font-family:
        "Cormorant Garamond",
        serif;

    font-size:
        26px;

    line-height:
        1.35;

    letter-spacing:
        0.08em;

    color:
        var(--blue);
}


/* =========================================================
   ÁREA DOS LINKS
========================================================= */

.links {

    position:
        relative;

    z-index:
        10;


    display:
        flex;

    flex-direction:
        column;

    gap:
        20px;
}


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

.link-card {

    position:
        relative;


    min-height:
        125px;


    display:
        flex;

    align-items:
        center;


    width:
        100%;


    padding:
        20px 28px;


    text-decoration:
        none;


    text-align:
        left;


    background:

        linear-gradient(
            135deg,
            rgba(
                255,
                255,
                255,
                0.80
            ),
            rgba(
                247,
                239,
                229,
                0.92
            )
        ),

        url("../assets/textura-papel.png");


    background-size:
        100% 100%,
        cover;


    background-position:
        center;


    background-blend-mode:
        normal,
        soft-light;


    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.8
        );


    border-radius:
        22px;


    box-shadow:
        var(--shadow),

        0 2px 5px
        rgba(
            30,
            39,
            49,
            0.05
        ),

        inset 0 1px 0
        rgba(
            255,
            255,
            255,
            0.45
        );


    overflow:
        hidden;


    transition:

        transform
        0.35s ease,

        box-shadow
        0.35s ease;
}


.link-card:hover {

    transform:
        translateY(-5px);

    box-shadow:
        var(--shadow-hover),

        0 5px 12px
        rgba(
            30,
            39,
            49,
            0.08
        ),

        inset 0 1px 0
        rgba(
            255,
            255,
            255,
            0.45
        );
}


.link-card:active {

    transform:
        scale(0.985);
}


/* =========================================================
   ÍCONES PNG COMPLETOS
========================================================= */

/*
   IMPORTANTE:

   Os PNGs já possuem o próprio fundo/desenho.

   Por isso não existe mais uma bolinha
   azul ou verde criada pelo CSS.
*/

.link-icon {

    position:
        relative;

    z-index:
        4;


    flex-shrink:
        0;


    width:
        82px;

    height:
        82px;


    display:
        flex;

    align-items:
        center;

    justify-content:
        center;


    margin-right:
        22px;
}


.link-icon img {

    display:
        block;


    width:
        100%;

    height:
        100%;


    object-fit:
        contain;
}


/* =========================================================
   TEXTO DOS CARDS
========================================================= */

.link-info {

    position:
        relative;

    z-index:
        4;
}


.link-info h2 {

    font-family:
        "Cormorant Garamond",
        serif;


    font-size:
        30px;


    font-weight:
        600;


    letter-spacing:
        0.15em;


    line-height:
        1;


    margin-bottom:
        5px;


    color:
        var(--blue);
}


.whatsapp-card
.link-info
h2 {

    color:
        var(--green);
}


.link-info p {

    font-family:
        "Cormorant Garamond",
        serif;


    font-size:
        19px;


    letter-spacing:
        0.04em;


    color:
        var(--text);
}


/* =========================================================
   PNGS DECORATIVOS DOS CARDS
========================================================= */

.card-decoration {

    position:
        absolute;


    z-index:
        1;


    top:
        -18px;


    right:
        -12px;


    display:
        block;


    width:
        280px;


    height:
        auto;


    object-fit:
        contain;


    object-position:
        center;


    pointer-events:
        none;
}


.card-decoration-site,
.card-decoration-whatsapp {

    right:
        -12px;
}


/* =========================================================
   LINHA DOURADA DECORATIVA
========================================================= */

.link-card::before {

    content:
        "";


    position:
        absolute;


    right:
        -30px;


    top:
        -40px;


    width:
        155px;


    height:
        180px;


    border-left:
        1px solid
        rgba(
            200,
            164,
            93,
            0.85
        );


    border-radius:
        50%;


    transform:
        rotate(-18deg);


    z-index:
        3;
}


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

.footer {

    position:
        relative;

    z-index:
        6;


    visibility:
        hidden;


    margin-top:
        68px;


    font-family:
        "Cormorant Garamond",
        serif;


    text-transform:
        uppercase;


    letter-spacing:
        0.16em;


    font-weight:
        600;
}


.footer-name {

    color:
        var(--blue);


    font-size:
        16px;


    margin-bottom:
        8px;
}


.footer-categories {

    display:
        flex;


    justify-content:
        center;


    flex-wrap:
        wrap;


    gap:
        7px;


    font-size:
        14px;
}


/* =========================================================
   ARCOS DOURADOS
========================================================= */

.gold-arc {

    position:
        absolute;


    z-index:
        2;


    left:
        50%;


    transform:
        translateX(-50%);


    width:
        850px;


    height:
        850px;


    border:
        1px solid
        rgba(
            200,
            164,
            93,
            0.6
        );


    border-radius:
        50%;


    pointer-events:
        none;
}


.arc-one {

    bottom:
        -640px;
}


.arc-two {

    bottom:
        -685px;


    width:
        920px;


    height:
        920px;


    opacity:
        0.45;
}


/* =========================================================
   DECORAÇÃO INFERIOR EM PNG
========================================================= */

.bottom-decoration {

    position:
        absolute;


    z-index:
        1;


    left:
        50%;


    bottom:
        -230px;


    display:
        block;


    width:
        144%;


    max-width:
        none;


    height:
        auto;


    object-fit:
        contain;


    object-position:
        center bottom;


    transform:
        translateX(-50%);


    pointer-events:
        none;
}


/* =========================================================
   ANIMAÇÃO DE ENTRADA
========================================================= */

.header,
.divider,
.intro,
.links,
.footer {

    opacity:
        0;

    transform:
        translateY(20px);


    animation:
        fadeUp
        0.8s
        ease
        forwards;
}


.header {

    animation-delay:
        0.1s;
}


.divider {

    animation-delay:
        0.2s;
}


.intro {

    animation-delay:
        0.3s;
}


.links {

    animation-delay:
        0.4s;
}


.footer {

    animation-delay:
        0.6s;
}


@keyframes fadeUp {

    to {

        opacity:
            1;

        transform:
            translateY(0);
    }
}


/* =========================================================
   RESPONSIVO — CELULAR
========================================================= */

@media (max-width: 520px) {

    .linktree {

        padding:
            38px
            17px
            170px;
    }


    .logo {

        width:
            145px;

        height:
            145px;
    }


    .brand {

        font-size:
            48px;
    }


    .categories {

        font-size:
            16px;

        gap:
            6px;
    }


    .intro p {

        font-size:
            22px;
    }


    .link-card {

        min-height:
            112px;

        padding:
            17px 18px;

        border-radius:
            18px;
    }


    .link-icon {

        width:
            58px;

        height:
            58px;

        margin-right:
            16px;
    }


    .link-info h2 {

        font-size:
            23px;
    }


    .link-info p {

        font-size:
            17px;
    }


    .card-decoration {

        top:
            -14px;


        right:
            -12px;


        width:
            230px;
    }


    .footer {

        margin-top:
            58px;
    }


    .footer-categories {

        font-size:
            12px;
    }


    .bottom-decoration {

        bottom:
            -110px;


        width:
            144%;
    }
}


/* =========================================================
   TELAS MUITO PEQUENAS
========================================================= */

@media (max-width: 370px) {

    .brand {

        font-size:
            41px;
    }


    .categories {

        font-size:
            13px;
    }


    .intro p {

        font-size:
            20px;
    }


    .link-card {

        padding:
            15px;
    }


    .link-icon {

        width:
            50px;

        height:
            50px;

        margin-right:
            12px;
    }


    .link-info h2 {

        font-size:
            20px;
    }


    .link-info p {

        font-size:
            15px;
    }


    .card-decoration {

        top:
            -12px;


        right:
            -12px;


        width:
            190px;
    }


    .bottom-decoration {

        bottom:
            -60px;


        width:
            144%;
    }
}