/* =====================================================
           VARIABLES
        ===================================================== */

        :root {

            --index-oscuro: #211a2e;
            --index-morado: #30243e;
            --index-limon: #c6f24e;
            --index-amarillo: #ffc65c;
            --index-naranja: #ff9d1f;
            --index-rojo: #ff4d4d;
            --index-crema: #fff6e8;
            --index-blanco: #ffffff;

        }


        /* =====================================================
           BODY
        ===================================================== */

        body {

            background:

                radial-gradient(
                    circle at 10% 10%,
                    rgba(198,242,78,.10),
                    transparent 25%
                ),

                radial-gradient(
                    circle at 90% 40%,
                    rgba(255,157,31,.10),
                    transparent 25%
                ),

                var(--index-crema);

            overflow-x: hidden;

        }


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

        .index-hero {

            position: relative;

            min-height: 520px;

            display: flex;

            align-items: center;

            overflow: hidden;

            color: white;

            background:

                radial-gradient(
                    circle at 80% 20%,
                    rgba(198,242,78,.20),
                    transparent 25%
                ),

                radial-gradient(
                    circle at 20% 80%,
                    rgba(255,157,31,.18),
                    transparent 25%
                ),

                linear-gradient(
                    135deg,
                    #211a2e 0%,
                    #34243f 55%,
                    #633a3b 100%
                );

            border-bottom:
                6px solid var(--index-limon);

        }


        /* =====================================================
           LUZ AMBIENTAL
        ===================================================== */

        .index-hero::before {

            content: "";

            position: absolute;

            width: 400px;

            height: 400px;

            top: -180px;

            right: -100px;

            border-radius: 50%;

            background:

                radial-gradient(
                    circle,
                    rgba(198,242,78,.25),
                    transparent 70%
                );

            animation:
                indexGirar 18s linear infinite;

        }


        .index-hero::after {

            content: "";

            position: absolute;

            width: 300px;

            height: 300px;

            bottom: -180px;

            left: -100px;

            border-radius: 50%;

            background:

                radial-gradient(
                    circle,
                    rgba(255,157,31,.22),
                    transparent 70%
                );

            animation:
                indexGirar 25s linear infinite reverse;

        }


        /* =====================================================
           📝 TEXTO HERO
        ===================================================== */

        .index-hero-content {

            position: relative;

            z-index: 10;

            animation:
                indexEntradaIzquierda .8s ease both;

        }


        .index-hero h1 {

            font-size:
                clamp(2.5rem, 5vw, 4.5rem);

            font-weight:
                900;

            line-height:
                1.05;

            margin-bottom:
                20px;

            text-shadow:
                0 5px 0 rgba(0,0,0,.2),
                0 0 30px rgba(198,242,78,.12);

        }


        .index-hero h1 .verde {

            color:
                var(--index-limon);

        }


        .index-hero h1 .naranja {

            color:
                var(--index-amarillo);

        }


        .index-hero .lead {

            max-width:
                600px;

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

            font-size:
                1.15rem;

        }


        /* =====================================================
           🍺 BOTÓN HERO
        ===================================================== */

        .index-btn {

            position:
                relative;

            overflow:
                hidden;

            display:
                inline-flex;

            align-items:
                center;

            gap:
                8px;

            background:

                linear-gradient(
                    135deg,
                    var(--index-amarillo),
                    var(--index-naranja)
                );

            border:
                none;

            color:
                var(--index-oscuro);

            font-weight:
                900;

            border-radius:
                14px;

            padding:
                14px 25px;

            box-shadow:
                0 7px 0 rgba(0,0,0,.20),
                0 15px 30px rgba(255,157,31,.25);

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

        }


        .index-btn::before {

            content: "";

            position: absolute;

            left: -100%;

            top: 0;

            width: 70%;

            height: 100%;

            background:

                linear-gradient(
                    100deg,
                    transparent,
                    rgba(255,255,255,.65),
                    transparent
                );

            transform:
                skewX(-20deg);

        }


        .index-btn:hover::before {

            left: 130%;

            transition:
                left .7s ease;

        }


        .index-btn:hover {

            color:
                var(--index-oscuro);

            transform:
                translateY(-5px)
                scale(1.04);

            box-shadow:
                0 10px 0 rgba(0,0,0,.15),
                0 20px 35px rgba(198,242,78,.25);

            background:

                linear-gradient(
                    135deg,
                    var(--index-limon),
                    var(--index-amarillo)
                );

        }


        .index-btn:active {

            transform:
                translateY(1px)
                scale(.97);

        }


        /* =====================================================
           🖼️ IMAGEN HERO
        ===================================================== */

        .index-image-wrapper {

            position:
                relative;

            z-index:
                10;

            animation:
                indexEntradaDerecha .9s ease both;

        }


        .index-image {

            width:
                100%;

            max-height:
                390px;

            object-fit:
                cover;

            border:
                5px solid var(--index-limon);

            border-radius:
                28px;

            box-shadow:
                0 25px 60px rgba(0,0,0,.45),
                0 0 30px rgba(198,242,78,.10);

            animation:
                indexFlotar 4s ease-in-out infinite;

            transition:
                transform .4s ease,
                box-shadow .4s ease;

        }


        .index-image:hover {

            transform:
                scale(1.035)
                rotate(1deg);

            box-shadow:
                0 30px 70px rgba(0,0,0,.5),
                0 0 40px rgba(198,242,78,.25);

        }


        /* =====================================================
           🏷️ ETIQUETA
        ===================================================== */

        .index-etiqueta {

            position:
                absolute;

            left:
                -20px;

            bottom:
                25px;

            z-index:
                20;

            display:
                flex;

            align-items:
                center;

            gap:
                8px;

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

            color:
                var(--index-oscuro);

            padding:
                11px 18px;

            border-radius:
                999px;

            font-weight:
                800;

            box-shadow:
                0 12px 25px rgba(0,0,0,.25);

            animation:
                indexFlotarSuave 3s ease-in-out infinite;

        }


        /* =====================================================
           🫧 BURBUJAS
        ===================================================== */

        .index-burbuja {

            position:
                absolute;

            bottom:
                -30px;

            width:
                12px;

            height:
                12px;

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

            border-radius:
                50%;

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

            box-shadow:
                0 0 12px rgba(255,255,255,.2);

            animation:
                indexBurbuja 8s linear infinite;

            z-index:
                2;

        }


        .index-b1 {
            left: 8%;
        }

        .index-b2 {

            left: 20%;

            width: 8px;

            height: 8px;

            animation-delay: 2s;

        }

        .index-b3 {

            left: 35%;

            width: 16px;

            height: 16px;

            animation-delay: 4s;

        }

        .index-b4 {

            left: 55%;

            width: 9px;

            height: 9px;

            animation-delay: 1s;

        }

        .index-b5 {

            left: 70%;

            width: 14px;

            height: 14px;

            animation-delay: 3s;

        }

        .index-b6 {

            left: 88%;

            width: 8px;

            height: 8px;

            animation-delay: 5s;

        }


        /* =====================================================
           ⭐ INFORMACIÓN
        ===================================================== */

        .index-info {

            display:
                flex;

            flex-wrap:
                wrap;

            gap:
                25px;

            margin-top:
                28px;

        }


        .index-info-item {

            display:
                flex;

            align-items:
                center;

            gap:
                8px;

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

            font-size:
                .9rem;

        }


        .index-info-icon {

            display:
                flex;

            align-items:
                center;

            justify-content:
                center;

            width:
                35px;

            height:
                35px;

            border-radius:
                50%;

            background:
                rgba(198,242,78,.15);

            animation:
                indexPulso 3s ease-in-out infinite;

        }


        /* =====================================================
           🔥 PRODUCTOS
        ===================================================== */

        .index-productos {

            padding-top:
                20px;

        }


        .index-titulo {

            animation:
                indexEntrada .7s ease both;

        }


        .index-titulo .mini {

            color:
                var(--index-rojo);

            font-size:
                .8rem;

            font-weight:
                900;

            letter-spacing:
                1.5px;

        }


        .index-titulo h2 {

            color:
                var(--index-oscuro);

            font-weight:
                900;

            font-size:
                2.3rem;

        }


        .index-linea {

            width:
                90px;

            height:
                5px;

            border-radius:
                999px;

            background:

                linear-gradient(
                    90deg,
                    var(--index-limon),
                    var(--index-naranja),
                    var(--index-rojo)
                );

            animation:
                indexPulso 3s infinite;

        }


        /* =====================================================
           🍹 TARJETAS
        ===================================================== */

        .index-card {

            position:
                relative;

            height:
                100%;

            overflow:
                hidden;

            border:
                1px solid #f0e2c8;

            border-top:
                5px solid var(--index-limon);

            border-radius:
                20px;

            background:
                white;

            box-shadow:
                0 8px 25px rgba(33,26,46,.08);

            animation:
                indexEntrada .6s ease both;

            transition:
                transform .35s cubic-bezier(.2,.8,.2,1),
                box-shadow .35s ease,
                border-color .35s ease;

        }


        .index-card:hover {

            transform:
                translateY(-12px)
                scale(1.015);

            border-color:
                rgba(198,242,78,.7);

            box-shadow:
                0 25px 50px rgba(33,26,46,.18);

        }


        /* =====================================================
           🖼️ IMAGEN TARJETA
        ===================================================== */

        .index-card-image {

            position:
                relative;

            height:
                215px;

            overflow:
                hidden;

        }


        .index-card-image img {

            width:
                100%;

            height:
                100%;

            object-fit:
                cover;

            transition:
                transform .6s ease,
                filter .4s ease;

        }


        .index-card:hover .index-card-image img {

            transform:
                scale(1.10);

            filter:
                saturate(1.2);

        }


        .index-card-image::after {

            content: "";

            position:
                absolute;

            top:
                0;

            left:
                -120%;

            width:
                60%;

            height:
                100%;

            background:

                linear-gradient(
                    100deg,
                    transparent,
                    rgba(255,255,255,.45),
                    transparent
                );

            transform:
                skewX(-20deg);

            pointer-events:
                none;

        }


        .index-card:hover .index-card-image::after {

            left:
                130%;

            transition:
                left .7s ease;

        }


        /* =====================================================
           ⭐ POPULAR
        ===================================================== */

        .index-popular {

            position:
                absolute;

            top:
                12px;

            right:
                12px;

            z-index:
                5;

            padding:
                6px 11px;

            border-radius:
                999px;

            background:
                rgba(33,26,46,.92);

            color:
                var(--index-limon);

            font-size:
                .75rem;

            font-weight:
                800;

            backdrop-filter:
                blur(6px);

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

        }


        .index-card:hover .index-popular {

            background:
                var(--index-rojo);

            color:
                white;

            transform:
                scale(1.08)
                rotate(-2deg);

        }


        /* =====================================================
           💰 PRECIO
        ===================================================== */

        .index-precio {

            color:
                var(--index-rojo);

            font-size:
                1.35rem;

            font-weight:
                900;

            transition:
                transform .25s ease;

        }


        .index-card:hover .index-precio {

            transform:
                scale(1.08);

        }


        /* =====================================================
           ➡️ FLECHA
        ===================================================== */

        .index-flecha {

            display:
                inline-block;

            transition:
                transform .25s ease;

        }


        .index-card:hover .index-flecha {

            transform:
                translateX(7px);

        }


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

        .index-cta {

            position:
                relative;

            overflow:
                hidden;

            margin-top:
                70px;

            padding:
                45px;

            border-radius:
                25px;

            color:
                white;

            background:

                radial-gradient(
                    circle at 90% 20%,
                    rgba(198,242,78,.18),
                    transparent 25%
                ),

                linear-gradient(
                    135deg,
                    var(--index-oscuro),
                    #4a304d
                );

            box-shadow:
                0 20px 50px rgba(33,26,46,.18);

        }


        .index-cta::after {

            content:
                "🍋";

            position:
                absolute;

            right:
                40px;

            top:
                20px;

            font-size:
                5rem;

            opacity:
                .12;

            animation:
                indexFlotar 4s ease-in-out infinite;

        }


        .index-cta h2 {

            color:
                white;

            font-weight:
                900;

        }


        .index-cta p {

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

        }


        /* =====================================================
           🎬 ANIMACIONES
        ===================================================== */

        @keyframes indexEntrada {

            from {

                opacity: 0;

                transform:
                    translateY(25px);

            }

            to {

                opacity: 1;

                transform:
                    translateY(0);

            }

        }


        @keyframes indexEntradaIzquierda {

            from {

                opacity: 0;

                transform:
                    translateX(-45px);

            }

            to {

                opacity: 1;

                transform:
                    translateX(0);

            }

        }


        @keyframes indexEntradaDerecha {

            from {

                opacity: 0;

                transform:
                    translateX(45px);

            }

            to {

                opacity: 1;

                transform:
                    translateX(0);

            }

        }


        @keyframes indexFlotar {

            0%,
            100% {

                transform:
                    translateY(0);

            }

            50% {

                transform:
                    translateY(-12px);

            }

        }


        @keyframes indexFlotarSuave {

            0%,
            100% {

                transform:
                    translateY(0);

            }

            50% {

                transform:
                    translateY(-7px);

            }

        }


        @keyframes indexPulso {

            0%,
            100% {

                transform:
                    scale(1);

            }

            50% {

                transform:
                    scale(1.08);

            }

        }


        @keyframes indexGirar {

            from {

                transform:
                    rotate(0deg);

            }

            to {

                transform:
                    rotate(360deg);

            }

        }


        @keyframes indexBurbuja {

            0% {

                opacity:
                    0;

                transform:
                    translateY(30px)
                    scale(.6);

            }

            20% {

                opacity:
                    .8;

            }

            100% {

                opacity:
                    0;

                transform:
                    translateY(-550px)
                    scale(1.2);

            }

        }


        /* =====================================================
           📱 RESPONSIVE
        ===================================================== */

        @media (max-width: 768px) {

            .index-hero {

                min-height:
                    auto;

                padding:
                    70px 0;

                text-align:
                    center;

            }


            .index-hero h1 {

                font-size:
                    2.6rem;

            }


            .index-info {

                justify-content:
                    center;

            }


            .index-image-wrapper {

                margin-top:
                    25px;

            }


            .index-etiqueta {

                left:
                    10px;

            }


            .index-cta {

                padding:
                    30px 22px;

                text-align:
                    center;

            }

        }


        /* =====================================================
           ♿ ACCESIBILIDAD
        ===================================================== */

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

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

                animation:
                    none !important;

                transition:
                    none !important;

            }

        }