:root {
            --fucsia: #ff0099;
            --fucsiaSoft: #ffe3f3;

            --morado: #4c3370;
            --moradoSoft: #efe4ff;

            --texto: #170025;
            --texto2: #4c3370;

            --bg: #FFE9F6;

            --white: #fff;

            --amarillo: #fff1b8;

            --moradoCard: #f6daff;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;

        }

        html {
            scroll-behavior: smooth;
            overflow-x: hidden;
        }

        body {
            font-family: 'Plus Jakarta Sans', sans-serif;
            background: var(--bg);
            color: var(--texto);
            overflow-x: hidden;

            cursor: none;
        }

        /* CURSOR */

        .cursor {
            width: 18px;
            height: 18px;

            border-radius: 50%;

            position: fixed;
            top: 0;
            left: 0;

            background:
                radial-gradient(circle,
                    #ff4db8,
                    #ff1493);

            pointer-events: none;

            z-index: 999999;

            transform:
                translate(-50%, -50%);

            box-shadow:
                0 0 20px rgba(255, 20, 147, .45);
        }



        /* NAV */

        nav {
            position: fixed;
            top: 0;
            left: 0;

            width: 100%;

            padding: 1rem 2rem;

            display: flex;
            justify-content: space-between;
            align-items: center;

            background: linear-gradient(
                180deg,
                #fff,
                #fffafd);

            border-bottom:
                1px solid rgba(255, 20, 147, .08);

            z-index: 1000;
        }

        nav ul.active{
            opacity:1;

            pointer-events:auto;

            transform:translateY(0);
        }
        .logo {
            text-decoration: none;

            font-family: 'Syne', sans-serif;

            font-size: 2rem;
            font-weight: 800;

            color: var(--fucsia);
        }

        .logo span {
            color: var(--morado);
        }

        nav ul {
            list-style: none;

            display: flex;
            align-items: center;
            gap: 2rem;
        }

        nav ul a {
            text-decoration: none;

            color: #5d4977;

            font-weight: 700;
        }

        .nav-btn {
            background:
                linear-gradient(135deg,
                    var(--fucsia),
                    var(--morado));

            color: white !important;

            padding: .9rem 1.5rem;

            border-radius: 100px;

            box-shadow:
                0 10px 30px rgba(255, 20, 147, .18);

            transition: .25s ease;
        }

        .nav-btn:hover {
            transform: translateY(-2px);
        }


        /* RESPONSIVE--------------------------- */

        @media(max-width:980px) {

            body {
                cursor: auto;
            }

            .cursor,
            .floating-dot {
                display: none;
            }

            nav {
                padding: .7rem 1.2rem;
            }

            .logo {
                font-size: 1.5rem;
            }

            .btn-main,
            .btn-second{
                width:100%;

                max-width:310px;

                justify-content:center;

                align-items: center;

                padding:
                .7rem 1rem;

                font-size:1.2rem;
            }

            .nav-btn{
                width:auto;

                max-width:none;

                padding:.6rem 1.2rem;

                font-size:1rem;
            }
        }

                /* =========================================================
        MENU MOBILE
        ========================================================= */

        .menu-toggle{
            display:none;

            background:none;

            border:none;

            font-size:1.5rem;

            color:var(--texto);

            cursor:pointer;

            z-index:1001;

            width:34px;
            height:34px;

            border-radius:12px;

            background:white;

            box-shadow:
            0 8px 20px rgba(0,0,0,.06);
        }

        .menu-toggle i{
            font-size:1rem;
        }

        @media(max-width:768px){

            nav{
                padding:.7rem 1rem;
            }

            .menu-toggle{
                display:block;
            }

            nav ul{
                position:absolute;

                top:100%;

                left:0;

                width:100%;

                background:white;

                padding:.8rem 1rem 1rem;

                flex-direction:column;

                align-items:center;

                gap:.45rem;

                box-shadow:
                0 12px 30px rgba(0,0,0,.08);

                opacity:0;

                pointer-events:none;

                transform:translateY(-10px);

                transition:.25s ease;
                border-top:
                    1px solid rgba(0,0,0,.05);
            }

            nav ul.active{
                opacity:1;

                pointer-events:auto;

                transform:translateY(0);
            }

            .nav-btn{
                width:auto;

                max-width:none;

                padding:.4rem 1.2rem;

                font-size:1.1rem;
            }
        }
                /* SECTION */

        .section {
            padding: 4rem 2rem;
        }

        .container{
            width:100%;

            max-width:1100px;

            margin:auto;
        }

        .section-mini {
            color: var(--fucsia);

            text-transform: uppercase;
            letter-spacing: .16em;

            font-size: .84rem;
            font-weight: 800;

            margin-bottom: 1rem;

            text-align: center;
        }

        .section-title {
            font-family: 'Syne', sans-serif;

            font-size:
                clamp(2.5rem, 5vw, 4.2rem);

            line-height: 1.05;

            letter-spacing: -2px;

            text-align: center;

            margin-bottom: 1rem;
        }

        .section-desc {
            max-width: 700px;
            margin: auto;

            text-align: center;

            color: var(--texto2);

            line-height: 1.9;
        }

        /* RESPONSIVE */

        @media(max-width:980px) {

            /* GENERAL */

            .section {
                padding: 4rem 1.5rem;
            }

            .section-title {
                font-size:
                    clamp(2.3rem, 10vw, 3.5rem);

                line-height: 1;
            }

            .section-desc {
                font-size: 1rem;

                line-height: 1.7;
            }
        }

                /* =========================================================
        FOOTER
        ========================================================= */
        

        #footer{
            padding:18px 0 22px;

            border-top: 1px solid rgba(255,20,147,.05);
        }

        /* CONTENT */

        .footer-content{
            display:flex;

            align-items:center;

            justify-content:space-between;

            gap:2rem;

            margin-bottom:.5rem;
        }

        /* BRAND */

        .footer-brand{
            flex-shrink:0;
            text-decoration:none;
        }

        .footer-brand h3{
            font-family:'Syne',sans-serif;

            font-size:2rem;

            font-weight:800;

            margin-bottom:0;

            color:var(--fucsia);
        }

        .footer-brand h3 span{
            color:var(--morado);
        }

        .footer-brand p{
            color:var(--texto2);

            line-height:1.7;

            font-size:1rem;
        }

        /* LINKS */

        .footer-links{
            display:flex;

            align-items:center;

            gap:2rem;
        }

        .footer-links a{
            text-decoration:none;

            color:var(--texto);

            font-weight:600;

            transition:.25s ease;
        }

        .footer-links a:hover{
            color:var(--fucsia);
        }

 
        /* BOTTOM */

        .footer-bottom{
            padding-top:.5rem;

            border-top:
            1px solid rgba(255,20,147,.08);

            text-align:center;

            font-size:.95rem;

            color:var(--texto2);
        }

        /* =========================================================
        RESPONSIVE
        ========================================================= */

        @media(max-width:1150px){

            #footer .container{
                padding-inline:24px;
            }

        }
        @media(max-width:768px){

            #footer{
                padding:22px 0 22px;
            }

            .footer-content{
                flex-direction:column;

                align-items:center;

                text-align:center;

                gap:1.2rem;
            }

            .footer-brand{
                max-width:100%;
            }

            .footer-links{
                gap:1.3rem;

                flex-wrap:wrap;

                justify-content:center;
            }

        }

        /* RESPONSIVE */

        @media(max-width:980px) {

            /* FOOTER */

            .footer-brand h3 
            {
                font-size: 1.5rem;
            }
        }

        #productos{
            scroll-margin-top:80px;
        }

        #sobre{
            scroll-margin-top:80px;
        }

        #redes{
            scroll-margin-top:80px;
        }

        #contenido{
            scroll-margin-top:80px;
        }
        #comprar{
            scroll-margin-top:80px;
        }