/* =========================================
   COMBOFIT PREMIUM STYLE
========================================= */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    color: #172554;

    min-height: 100vh;

    background:
        radial-gradient(
            circle at top left,
            rgba(99,102,241,.18),
            transparent 35%
        ),
        radial-gradient(
            circle at bottom right,
            rgba(6,182,212,.16),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            #f8fbff,
            #eef2ff
        );
}


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

.header {
    width: 100%;

    height: 92px;

    display: flex;

    align-items: center;

    justify-content: center;

    background:
        linear-gradient(
            135deg,
            #312e81,
            #4f46e5,
            #06b6d4
        );

    position: relative;

    overflow: hidden;

    box-shadow:
        0 10px 35px
        rgba(49,46,129,.22);
}


.header::before {
    content: "";

    position: absolute;

    width: 260px;

    height: 260px;

    border-radius: 50%;

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

    top: -150px;

    left: -70px;
}


.header::after {
    content: "";

    position: absolute;

    width: 220px;

    height: 220px;

    border-radius: 50%;

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

    right: -80px;

    bottom: -150px;
}


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

.logo {
    position: relative;

    z-index: 2;

    font-size: 30px;

    font-weight: 700;

    letter-spacing: 3px;

    color: #ffffff;

    text-shadow:
        0 4px 15px
        rgba(0,0,0,.20);

    animation:
        logoIn .7s ease;
}


.logo span {
    color: #67e8f9;
}


@keyframes logoIn {

    from {
        opacity: 0;

        transform:
            translateY(-12px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }

}


/* =========================================
   MAIN CONTAINER
========================================= */

.container {
    width:
        min(
            1180px,
            calc(100% - 34px)
        );

    margin:
        42px auto 80px;
}


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

.studio-name {
    text-align: center;

    margin-bottom: 12px;

    font-size: 18px;

    font-weight: 600;

    letter-spacing: 1px;

    color: #334155;

    text-transform: uppercase;
}


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

.container > h1 {
    text-align: center;

    margin:
        0 0 35px;

    color: #172554;

    font-size: 27px;

    font-weight: 600;

    letter-spacing: .5px;

    animation:
        titleIn .7s ease;
}


.container > h1::after {
    content: "";

    display: block;

    width: 70px;

    height: 4px;

    margin:
        12px auto 0;

    border-radius: 10px;

    background:
        linear-gradient(
            90deg,
            #4f46e5,
            #06b6d4
        );
}


@keyframes titleIn {

    from {
        opacity: 0;

        transform:
            translateY(12px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }

}


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

#content {
    display: grid;

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

    gap: 20px;
}


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

.folder-box {
    min-height: 105px;

    position: relative;

    display: flex;

    align-items: center;

    gap: 17px;

    padding:
        20px 22px;

    overflow: hidden;

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

    border:
        1px solid
        rgba(148,163,184,.20);

    border-radius: 18px;

    cursor: pointer;

    box-shadow:
        0 10px 30px
        rgba(30,41,59,.07);

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


/* =========================================
   LEFT COLOR STRIPE
========================================= */

.folder-box::before {
    content: "";

    position: absolute;

    left: 0;

    top: 0;

    bottom: 0;

    width: 5px;

    background:
        linear-gradient(
            180deg,
            #4f46e5,
            #06b6d4
        );
}


/* =========================================
   SHINE EFFECT
========================================= */

.folder-box::after {
    content: "";

    position: absolute;

    width: 120px;

    height: 120px;

    border-radius: 50%;

    background:
        rgba(99,102,241,.06);

    right: -55px;

    top: -55px;

    transition:
        transform .3s ease;
}


.folder-box:hover {
    transform:
        translateY(-6px);

    border-color:
        rgba(99,102,241,.30);

    box-shadow:
        0 18px 40px
        rgba(79,70,229,.13);
}


.folder-box:hover::after {
    transform:
        scale(1.5);
}


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

.folder-icon {
    width: 55px;

    min-width: 55px;

    height: 55px;

    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 15px;

    font-size: 30px;

    background:
        linear-gradient(
            135deg,
            #eef2ff,
            #cffafe
        );

    box-shadow:
        inset 0 0 0 1px
        rgba(99,102,241,.10);

    transition:
        transform .25s ease;
}


.folder-box:hover .folder-icon {
    transform:
        scale(1.08)
        rotate(-3deg);
}


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

.folder-text {
    position: relative;

    z-index: 2;

    color: #1e293b;

    font-size: 15px;

    font-weight: 600;

    line-height: 1.5;
}


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

.folder-arrow {
    position: relative;

    z-index: 2;

    margin-left: auto;

    color: #94a3b8;

    font-size: 25px;

    font-weight: 400;

    line-height: 1;

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


.folder-box:hover .folder-arrow {
    transform:
        translateX(5px);

    color: #4f46e5;
}


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

.whatsapp-float {
    position: fixed;

    right: 24px;

    bottom: 24px;

    width: 62px;

    height: 62px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #25D366,
            #16a34a
        );

    border:
        3px solid #ffffff;

    text-decoration: none;

    cursor: pointer;

    z-index: 99999;

    box-shadow:
        0 10px 30px
        rgba(22,163,74,.30);

    animation:
        whatsappPulse 2s infinite;

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


.whatsapp-float:hover {
    transform:
        scale(1.12)
        rotate(-4deg);

    box-shadow:
        0 15px 40px
        rgba(22,163,74,.40);
}


.whatsapp-float svg {
    width: 35px;

    height: 35px;

    fill: #ffffff;
}


@keyframes whatsappPulse {

    0% {
        box-shadow:
            0 10px 30px
            rgba(22,163,74,.30),
            0 0 0 0
            rgba(37,211,102,.40);
    }

    70% {
        box-shadow:
            0 10px 30px
            rgba(22,163,74,.30),
            0 0 0 15px
            rgba(37,211,102,0);
    }

    100% {
        box-shadow:
            0 10px 30px
            rgba(22,163,74,.30),
            0 0 0 0
            rgba(37,211,102,0);
    }

}


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

@media (max-width: 900px) {

    #content {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

}


@media (max-width: 650px) {

    .header {
        height: 78px;
    }


    .logo {
        font-size: 24px;

        letter-spacing: 2px;
    }


    .container {
        width:
            calc(100% - 22px);

        margin:
            28px auto 60px;
    }


    .studio-name {
        font-size: 14px;

        margin-bottom: 10px;
    }


    .container > h1 {
        font-size: 21px;

        line-height: 1.4;

        margin-bottom: 25px;
    }


    #content {
        grid-template-columns: 1fr;

        gap: 13px;
    }


    .folder-box {
        min-height: 82px;

        padding:
            15px 17px;
    }


    .folder-icon {
        width: 48px;

        min-width: 48px;

        height: 48px;

        font-size: 27px;
    }


    .folder-text {
        font-size: 14px;
    }


    .folder-arrow {
        font-size: 22px;
    }


    .whatsapp-float {
        width: 54px;

        height: 54px;

        right: 15px;

        bottom: 15px;
    }


    .whatsapp-float svg {
        width: 30px;

        height: 30px;
    }

}.seo-main-title {
    margin: 15px auto 5px;
    color: #0f172a;
    text-align: center;
    font-size: 20px;
    font-weight: 800;
}

.seo-main-description {
    max-width: 700px;
    margin: 0 auto 18px;
    color: #64748b;
    text-align: center;
    font-size: 12px;
    line-height: 1.6;
}