:root {

            --fondo: #22124f;
            --fondo2: #31206b;
            --fondo3: #3f2a85;

            --rosa: #c084fc;
            --azul: #ddd0ff;
            --morado: #7c3aed;

            --blanco: #ffffff;
            --gris: #cfc6ee;

        }


        /* CONFIGURACIÓN GENERAL */

        * {

            margin: 0;
            padding: 0;
            box-sizing: border-box;
            scroll-behavior: smooth;

        }


        body {

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

            background: var(--fondo);

            color: var(--blanco);

            line-height: 1.6;

        }


        a {

            text-decoration: none;

            color: white;

        }


        button,
        input,
        select {

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

        }


        /* =====================================================
           MENÚ
        ====================================================== */

        header {

            position: fixed;

            top: 0;
            left: 0;

            width: 100%;

            z-index: 1000;

            background: rgba(34,18,79,0.93);

            backdrop-filter: blur(12px);

            border-bottom:
                1px solid rgba(255,255,255,0.1);

        }


        .menu {

            width: 90%;

            max-width: 1200px;

            min-height: 75px;

            margin: auto;

            display: flex;

            align-items: center;

            justify-content: space-between;

        }


        /* LOGO */

        .logo {

            font-size: 24px;

            font-weight: bold;

            letter-spacing: 3px;

        }


        .logo span {

            color: var(--rosa);

            text-shadow:

                0 0 10px var(--rosa),

                0 0 20px var(--rosa);

        }


        /* ENLACES */

        .links {

            display: flex;

            gap: 25px;

        }


        .links a {

            font-size: 14px;

            font-weight: bold;

            transition: 0.3s;

        }


        .links a:hover {

            color: var(--azul);

            text-shadow:

                0 0 10px var(--azul);

        }


        /* CARRITO */

        #botonCarrito {

            background: transparent;

            color: white;

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

            padding: 10px 15px;

            border-radius: 8px;

            cursor: pointer;

            transition: 0.3s;

        }


        #botonCarrito:hover {

            background: var(--rosa);

            box-shadow:

                0 0 20px rgba(192,132,252,0.5);

        }


        #contador {

            background: var(--rosa);

            padding: 3px 7px;

            border-radius: 50%;

            margin-left: 5px;

        }


        /* =====================================================
           INICIO
        ====================================================== */

        .inicio {

            min-height: 750px;

            display: flex;

            align-items: center;

            justify-content: center;

            text-align: center;

            padding: 120px 20px 60px;

            position: relative;

            overflow: hidden;

            background:

                radial-gradient(

                    circle at center,

                    rgba(124,58,237,0.55),

                    transparent 40%

                ),

                linear-gradient(

                    135deg,

                    #22124f,

                    #4b2fa0,

                    #22124f

                );

        }


        /* CUADRÍCULA */

        .inicio::before {

            content: "";

            position: absolute;

            inset: 0;

            background-image:

                linear-gradient(

                    rgba(221,208,255,0.05) 1px,

                    transparent 1px

                ),

                linear-gradient(

                    90deg,

                    rgba(192,132,252,0.05) 1px,

                    transparent 1px

                );

            background-size: 50px 50px;

        }


        .contenidoInicio {

            position: relative;

            z-index: 2;

            max-width: 850px;

        }


        .subtitulo {

            color: var(--azul);

            font-size: 14px;

            font-weight: bold;

            letter-spacing: 4px;

            margin-bottom: 15px;

        }


        .contenidoInicio h1 {

            font-size: clamp(55px, 10vw, 110px);

            line-height: 1;

            margin-bottom: 25px;

            text-shadow:

                0 0 25px rgba(192,132,252,0.5);

        }


        .contenidoInicio h1 span {

            color: var(--rosa);

        }


        .textoInicio {

            color: var(--gris);

            font-size: 18px;

            max-width: 650px;

            margin: auto;

            margin-bottom: 30px;

        }


        /* =====================================================
           BOTONES
        ====================================================== */

        .boton {

            display: inline-block;

            padding: 14px 25px;

            border: none;

            border-radius: 8px;

            background:

                linear-gradient(

                    90deg,

                    var(--rosa),

                    var(--morado)

                );

            color: white;

            font-weight: bold;

            cursor: pointer;

            transition: 0.3s;

            box-shadow:

                0 0 20px rgba(192,132,252,0.3);

        }


        .boton:hover {

            transform: translateY(-4px);

            box-shadow:

                0 0 30px rgba(221,208,255,0.5);

        }


        /* =====================================================
           BENEFICIOS
        ====================================================== */

        .beneficios {

            width: 90%;

            max-width: 1100px;

            margin: 60px auto;

            display: grid;

            grid-template-columns:

                repeat(3, 1fr);

            gap: 20px;

        }


        .beneficio {

            display: flex;

            align-items: center;

            gap: 15px;

            padding: 25px;

            background: var(--fondo2);

            border:

                1px solid rgba(255,255,255,0.1);

            border-radius: 12px;

            transition: 0.3s;

        }


        .beneficio:hover {

            transform: translateY(-5px);

            border-color: var(--azul);

        }


        .icono {

            font-size: 35px;

        }


        .beneficio p {

            color: var(--gris);

            font-size: 14px;

        }


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

        .productos {

            width: 90%;

            max-width: 1200px;

            margin: 110px auto;

        }


        .tituloSeccion {

            text-align: center;

            margin-bottom: 40px;

        }


        .tituloSeccion h2 {

            font-size: 45px;

            margin-bottom: 10px;

        }


        .tituloSeccion h2 span {

            color: var(--rosa);

        }


        .tituloSeccion p:last-child {

            color: var(--gris);

        }


        /* =====================================================
           BUSCADOR
        ====================================================== */

        .herramientas {

            display: flex;

            gap: 15px;

            margin-bottom: 30px;

        }


        .herramientas input,
        .herramientas select {

            flex: 1;

            padding: 15px;

            background: var(--fondo2);

            color: white;

            border:

                1px solid rgba(255,255,255,0.15);

            border-radius: 8px;

            outline: none;

        }


        .herramientas input:focus,
        .herramientas select:focus {

            border-color: var(--azul);

            box-shadow:

                0 0 15px rgba(221,208,255,0.2);

        }


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

        .listaProductos {

            display: grid;

            grid-template-columns:

                repeat(3, 1fr);

            gap: 25px;

        }


        .producto {

            background:

                linear-gradient(

                    145deg,

                    #3a2680,

                    #281656

                );

            border:

                1px solid rgba(255,255,255,0.1);

            border-radius: 15px;

            overflow: hidden;

            transition: 0.3s;

        }


        .producto:hover {

            transform: translateY(-8px);

            border-color: var(--azul);

            box-shadow:

                0 0 30px rgba(221,208,255,0.15);

        }


        .imagenProducto {

            height: 190px;

            display: flex;

            align-items: center;

            justify-content: center;

            font-size: 75px;

            background:

                radial-gradient(

                    circle,

                    rgba(221,208,255,0.15),

                    transparent 60%

                );

        }


        .infoProducto {

            padding: 20px;

        }


        .categoria {

            color: var(--azul);

            font-size: 11px;

            font-weight: bold;

            letter-spacing: 2px;

        }


        .infoProducto h3 {

            margin: 8px 0;

            font-size: 20px;

        }


        .marca {

            display: inline-block;

            margin-bottom: 8px;

            padding: 3px 7px;

            border-radius: 5px;

            background:

                rgba(192,132,252,0.12);

            color: #d8b4fe;

            font-size: 11px;

        }


        .descripcion {

            color: var(--gris);

            font-size: 14px;

            min-height: 50px;

        }


        .parteInferior {

            margin-top: 20px;

            display: flex;

            align-items: center;

            justify-content: space-between;

            gap: 10px;

        }


        .precio {

            font-size: 20px;

            font-weight: bold;

        }


        .agregar {

            background: transparent;

            color: white;

            border:

                1px solid var(--rosa);

            padding: 9px 12px;

            border-radius: 7px;

            cursor: pointer;

            transition: 0.3s;

        }


        .agregar:hover {

            background: var(--rosa);

            box-shadow:

                0 0 15px rgba(192,132,252,0.4);

        }


        /* =====================================================
           OFERTA
        ====================================================== */

        .oferta {

            width: 90%;

            max-width: 1100px;

            margin: 100px auto;

            padding: 50px;

            display: flex;

            align-items: center;

            justify-content: space-between;

            gap: 30px;

            border-radius: 15px;

            background:

                linear-gradient(

                    100deg,

                    rgba(192,132,252,0.2),

                    rgba(221,208,255,0.1)

                );

            border:

                1px solid rgba(192,132,252,0.4);

        }


        .oferta h2 {

            font-size: 40px;

            margin-bottom: 10px;

        }


        .oferta h2 span {

            color: var(--rosa);

        }


        .oferta p:not(.subtitulo) {

            color: var(--gris);

        }


        /* =====================================================
           NOSOTROS
        ====================================================== */

        .nosotros {

            width: 80%;

            max-width: 900px;

            margin: 100px auto;

            padding: 50px;

            text-align: center;

            background: var(--fondo2);

            border-radius: 15px;

            border:

                1px solid rgba(255,255,255,0.1);

        }


        .nosotros h2 {

            font-size: 40px;

            margin-bottom: 15px;

        }


        .nosotros h2 span {

            color: var(--rosa);

        }


        .nosotros p:last-child {

            color: var(--gris);

        }


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

        footer {

            padding: 50px 10%;

            text-align: center;

            background: #180c3a;

            border-top:

                1px solid rgba(255,255,255,0.1);

        }


        footer p {

            color: var(--gris);

            margin-top: 10px;

        }


        .derechos {

            margin-top: 30px;

            font-size: 13px;

        }


        /* =====================================================
           CARRITO
        ====================================================== */

        .ventana {

            position: fixed;

            inset: 0;

            background:

                rgba(0,0,0,0.8);

            display: none;

            align-items: center;

            justify-content: center;

            padding: 20px;

            z-index: 2000;

        }


        .contenidoCarrito {

            width: 90%;

            max-width: 550px;

            max-height: 80vh;

            overflow-y: auto;

            padding: 35px;

            background: #31206b;

            border-radius: 15px;

            border:

                1px solid var(--azul);

            box-shadow:

                0 0 40px rgba(221,208,255,0.2);

            position: relative;

        }


        .contenidoCarrito h2 {

            margin-bottom: 25px;

        }


        .cerrar {

            position: absolute;

            right: 20px;

            top: 10px;

            background: none;

            border: none;

            color: white;

            font-size: 30px;

            cursor: pointer;

        }


        .productoCarrito {

            display: flex;

            justify-content: space-between;

            align-items: center;

            padding: 15px 0;

            border-bottom:

                1px solid rgba(255,255,255,0.1);

        }


        .productoCarrito small {

            color: var(--gris);

        }


        .eliminar {

            background: none;

            border: none;

            color: #e9a8ff;

            cursor: pointer;

        }


        .totalCarrito {

            margin: 25px 0;

            font-size: 20px;

        }


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

        @media (max-width: 850px) {

            .links {

                display: none;

            }


            .beneficios {

                grid-template-columns: 1fr;

            }


            .listaProductos {

                grid-template-columns:

                    repeat(2, 1fr);

            }


            .oferta {

                flex-direction: column;

                align-items: flex-start;

            }

        }


        @media (max-width: 600px) {

            .listaProductos {

                grid-template-columns: 1fr;

            }


            .herramientas {

                flex-direction: column;

            }


            .nosotros {

                width: 90%;

                padding: 30px;

            }


            .oferta {

                padding: 30px;

            }


            .contenidoInicio h1 {

                font-size: 55px;

            }

        }

    

/* Navegación entre páginas */
.links a {
    font-size: 14px;
    font-weight: bold;
    transition: 0.3s;
}
.links a:hover {
    color: var(--azul);
    text-shadow: 0 0 10px var(--azul);
}

/* =====================================================
   COMPONENTES DE LAS PÁGINAS NUEVAS
===================================================== */
.pagina { width: 90%; max-width: 1200px; margin: 140px auto 90px; }
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 25px; }
.chip { background: var(--fondo2); color: #fff; border: 1px solid rgba(255,255,255,0.15); padding: 8px 18px; border-radius: 20px; cursor: pointer; transition: 0.3s; }
.chip:hover, .chip.on { border-color: var(--rosa); background: rgba(192,132,252,0.15); }
.cuenta { display: flex; gap: 8px; margin: 14px 0 4px; }
.cuenta div { flex: 1; text-align: center; padding: 6px 0; font-weight: bold; color: var(--azul); background: rgba(221,208,255,0.08); border: 1px solid rgba(221,208,255,0.25); border-radius: 8px; }
.cuenta small { display: block; font-size: 10px; font-weight: normal; color: var(--gris); }
.agregar.on { background: var(--rosa); }
.vacio { display: none; text-align: center; color: var(--gris); padding: 30px; }
.caja { background: var(--fondo2); border: 1px solid rgba(255,255,255,0.1); border-radius: 15px; padding: 30px; }
.dosCol { display: grid; grid-template-columns: 1fr 1fr; gap: 25px; align-items: start; }
.formulario label { display: block; margin: 14px 0 6px; font-size: 13px; color: var(--gris); }
.formulario input, .formulario select, .formulario textarea { width: 100%; padding: 13px; background: var(--fondo); color: #fff; border: 1px solid rgba(255,255,255,0.15); border-radius: 8px; outline: none; }
.formulario input:focus, .formulario select:focus { border-color: var(--azul); box-shadow: 0 0 15px rgba(221,208,255,0.2); }
.resultado { margin: 22px 0; padding: 18px; border-radius: 12px; text-align: center; background: linear-gradient(100deg, rgba(192,132,252,0.2), rgba(221,208,255,0.1)); border: 1px solid rgba(192,132,252,0.4); }
.resultado b { font-size: 26px; color: var(--azul); }
.item { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,0.1); }
.item small { color: var(--gris); }
.acordeon { max-width: 850px; margin: auto; }
.acordeon details { background: var(--fondo2); border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; margin-bottom: 12px; transition: 0.3s; }
.acordeon details[open] { border-color: var(--azul); }
.acordeon summary { padding: 18px 22px; cursor: pointer; font-weight: bold; list-style: none; }
.acordeon summary::after { content: "+"; float: right; color: var(--rosa); font-size: 22px; }
.acordeon details[open] summary::after { content: "–"; }
.acordeon details p { padding: 0 22px 20px; color: var(--gris); }
.redes { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 25px; }
.toast { position: fixed; bottom: 25px; left: 50%; transform: translateX(-50%) translateY(120px); background: #31206b; border: 1px solid var(--azul); padding: 12px 22px; border-radius: 10px; z-index: 3000; transition: 0.4s; box-shadow: 0 0 25px rgba(221,208,255,0.25); }
.toast.ver { transform: translateX(-50%) translateY(0); }
@media (max-width: 850px) { .dosCol { grid-template-columns: 1fr; } .pagina { margin-top: 160px; } }