*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Arial, Helvetica, sans-serif;
}


body{
    background:#070b18;
    color:white;
}


/* NAVBAR */

.navbar{


    position: sticky;
    top: 15px;
    z-index: 1000;

    width:90%;
    margin:0 auto;

    display:flex;
    align-items:center;
    justify-content:space-between;

    padding:18px 30px;

    background:rgba(10,15,35,0.75);

    backdrop-filter:blur(15px);
    -webkit-backdrop-filter:blur(15px);

    border-radius:25px;

    border:1px solid rgba(255,255,255,.08);

    box-shadow:
    0 0 25px rgba(208,0,255,.25),
    0 0 45px rgba(0,234,255,.15);

        min-height:90px;
    margin-bottom:30px;

}


.navbar .logo img{
    width:100px;
    height:auto;
    max-height:40px;
    object-fit:contain;
    filter:drop-shadow(0 0 15px rgba(208,0,255,.8));
}


nav{
    display:flex;
    gap:35px;
}


nav a{
    color:white;
    text-decoration:none;
    font-size:16px;
}


.acciones{
    display:flex;
    gap:15px;
}


button{
    border:none;
    cursor:pointer;
    border-radius:25px;
    padding:12px 25px;
    font-weight:bold;
}


.login{
    background:transparent;
    color:white;
    border:1px solid #7c4dff;
}


.login,
.registro{

    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:12px 28px;

    border-radius:30px;

    text-decoration:none;

    font-weight:600;

    cursor:pointer;

    transition:.3s;
}
.login{
    border:1px solid #7c5cff;
    color:white;
    background:transparent;
}


.registro{
    background:linear-gradient(90deg,#ff00cc,#00d4ff);
    color:white;
}

.login:hover,
.registro:hover{

    transform:translateY(-2px);
    opacity:.9;

}




/* HERO */

.hero{
    width:90%;
    margin:70px auto;
    min-height:500px;
    display:flex;
    align-items:center;
    justify-content:space-between;
}


.hero-text{
    max-width:600px;
}


.hero h1{
    font-size:65px;
    line-height:1.1;
}


.hero h1 span{
    background:linear-gradient(90deg,#ff00cc,#00eaff);
    -webkit-background-clip:text;
    color:transparent;
}


.hero p{
    margin:25px 0;
    color:#ddd;
    font-size:20px;
}


.hero-card{

width:550px;
height:550px;

display:flex;
align-items:center;
justify-content:center;

background:transparent;

}


.hero-card img{

width:100%;
max-width:650px;

filter:
drop-shadow(0 0 60px rgba(208,0,255,.7));

}


.hero-card p{

margin-top:30px;

font-size:20px;

font-weight:700;

text-align:center;

background:
linear-gradient(
90deg,
#ff00cc,
#00eaff
);

-webkit-background-clip:text;

color:transparent;

}



/* PRODUCTOS */

.productos{
    width:90%;
    margin:80px auto;
}


.productos h2,
.confianza h2{
    text-align:center;
    font-size:40px;
    margin-bottom:40px;
}



.productos-grid {
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:18px;
    padding:0 25px;
}



.producto{

    background:#111827;
    border:1px solid #334155;
    border-radius:25px;
    padding:15px 20px;
    min-height:300px;

    display:flex;
    flex-direction:column;
    justify-content:flex-start;

    transition:.3s;
}



.producto:hover{

    transform:translateY(-8px);

}
.agregar{
    margin-top:auto;
}

.producto.sin-stock{
    opacity:0.65;
    filter:grayscale(40%);
}

.producto.sin-stock:hover{
    transform:translateY(-4px);
    border-color:#ff4d6d;
    box-shadow:0 0 25px rgba(255,77,109,.45);
}



/* LOGOS PRODUCTOS */

.producto img{

    width:120px;
    height:100px;
    object-fit:contain;
    margin:0 auto 25px auto;
    display:block;

}



.producto h3{

    font-size:25px;
    margin-bottom:15px;

}



.producto p{

    color:#cbd5e1;
    margin-bottom:15px;

}



.producto strong{

    font-size:20px;
    margin-bottom:20px;

}





/* CONFIANZA */

.confianza{

    width:90%;
    margin:80px auto;

}



.beneficios{

    display:flex;
    justify-content:center;
    gap:30px;

}


.beneficios div{

    background:#111827;
    padding:25px 40px;
    border-radius:20px;

}





/* RESPONSIVE */

@media(max-width:900px){

    .hero{

        flex-direction:column;
        text-align:center;

    }


    .productos-grid{

        grid-template-columns:1fr;

    }


    nav{

        display:none;

    }

}
html{
    scroll-behavior:smooth;
}


section{
    scroll-margin-top:120px;
}
html{
    scroll-behavior:smooth;
}


#funciona{
    scroll-margin-top:150px;
}

.funciona-card{

background:rgba(30,41,59,.55);

backdrop-filter:blur(12px);

border:1px solid rgba(0,234,255,.15);

border-radius:25px;

padding:30px;

min-height:150px;

box-shadow:
0 0 25px rgba(208,0,255,.15);

transition:.3s;

}


.funciona-card:hover{

transform:translateY(-8px);

border-color:#d000ff;

box-shadow:
0 0 35px rgba(208,0,255,.35);

}

/* COMO FUNCIONA */

.como-funciona{

width:90%;
margin:120px auto 80px;
text-align:center;

}


.como-funciona h2{

font-size:45px;
margin-bottom:15px;

background:linear-gradient(90deg,#ff00cc,#8b5cf6,#00eaff);
-webkit-background-clip:text;
color:transparent;

}



.subtitulo-funciona{

color:#ddd;
font-size:20px;
margin-bottom:50px;

}



.pasos{

display:grid;
grid-template-columns:repeat(4,1fr);
gap:30px;

}



.paso{

background:rgba(20,30,60,0.45);

border:1px solid rgba(180,80,255,.5);

border-radius:25px;

padding:35px 25px;

text-align:left;

backdrop-filter:blur(12px);

transition:.3s;

}



.paso:hover{

transform:translateY(-8px);

box-shadow:0 0 30px rgba(180,0,255,.5);

}



.icono-paso{

font-size:40px;

width:70px;
height:70px;

display:flex;
align-items:center;
justify-content:center;

border-radius:50%;

background:linear-gradient(135deg,#ff00cc,#00eaff);

margin-bottom:20px;

}



.numero{

color:#ff5cff;

font-size:22px;

font-weight:bold;

}



.paso h3{

font-size:24px;

margin:10px 0;

color:white;

}



.paso p{

color:#cbd5e1;

font-size:16px;

line-height:1.5;

}



/* RESPONSIVE */

@media(max-width:900px){

.pasos{

grid-template-columns:1fr 1fr;

}

}


@media(max-width:600px){

.pasos{

grid-template-columns:1fr;

}

}

html{
scroll-behavior:smooth;
}


section{
scroll-margin-top:120px;
}

/* SECCIÓN PROPUESTA NUVIX */

.nuvix-propuesta{
    width: 90%;
    max-width: 1100px;
    margin: 35px auto 70px;
    text-align: center;
}

.propuesta-tag{
    display:inline-block;
    padding:10px 25px;
    border-radius:30px;
    background:linear-gradient(90deg,rgba(255,0,204,.15),rgba(0,234,255,.15));
    border:1px solid rgba(0,234,255,.35);
    color:#ffffff;
    font-size:17px;
    font-weight:600;
    margin-bottom:30px;
    box-shadow:0 0 20px rgba(0,200,255,.25);
}


.nuvix-propuesta h2{
    font-size: 62px;
    line-height: 1.1;
    margin-bottom: 25px;
    color: white;
}


.nuvix-propuesta h2 span{
    background: linear-gradient(90deg,#ff00cc,#8b5cff,#00eaff);
    -webkit-background-clip:text;
    color:transparent;
}


.nuvix-propuesta p{
    max-width: 750px;
    margin: auto;
    font-size: 20px;
    line-height: 1.5;
    color:#cfd3e6;
}


.propuesta-btn{
    display:inline-block;
    margin-top:35px;
    padding:14px 35px;
    border-radius:30px;
    text-decoration:none;
    color:white;
    background:linear-gradient(90deg,#ff00cc,#00eaff);
    box-shadow:0 0 25px rgba(0,200,255,.35);
    font-weight:600;
    transition:.3s;

    display:inline-flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
}



.propuesta-btn:hover{
    transform:translateY(-3px);
}

.registro-container{
    min-height:100vh;
    padding:80px 20px 60px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
}


.logo-registro{

    width:150px;
    margin-top:10px;
    margin-bottom:15px;

    filter:
    drop-shadow(0 0 15px rgba(120,80,255,.8));
}


.registro-container h1{
    font-size:42px;
}


.registro-container h1 span{
    background:linear-gradient(90deg,#ff38d1,#4cc9ff);
    -webkit-background-clip:text;
    color:transparent;
}


.texto-registro{
    max-width:500px;
    color:#c8c8d8;
    font-size:18px;
}


.registro-box{

    margin-top:20px;
    margin-bottom:30px;

    padding:35px;
    width:360px;

    background:rgba(255,255,255,.06);
    border:1px solid rgba(150,80,255,.5);
    border-radius:25px;

    backdrop-filter:blur(15px);
}


.registro-box input{

    width:90%;
    padding:15px;
    margin:10px;

    border-radius:12px;
    border:none;

    background:#11182d;
    color:white;

}


.registro-box button{

    margin-top:20px;

    width:95%;
    padding:15px;

    border-radius:30px;
    border:none;

    background:linear-gradient(90deg,#ff25d8,#00d9ff);

    color:white;
    font-weight:bold;

    cursor:pointer;

}


.login-text{
    margin-top:20px;
}


.login-text a{
    color:#42dfff;
}

/* AJUSTE NAVBAR PRECIOS */

.precios-logo img{
    width: 120px;
    height: auto;
    object-fit: contain;
}


.hero-card img{
    display:none;
}

.producto img{
    max-width:120px;
    height:auto;
}




.navbar img{
    max-width:100px !important;
    max-height:40px !important;
}

.navbar .logo{
    display:flex;
    align-items:center;
}

.navbar .logo img{
    width:120px !important;
    height:auto !important;
    max-height:45px !important;
    object-fit:contain !important;
}

.hero-card img{
    display:none !important;
}
/* CORRECCIÓN LOGO NAVBAR */
.navbar .logo img {
    width: 120px !important;
    height: auto !important;
    max-height: 50px !important;
    object-fit: contain !important;
}

.navbar .logo {
    width: auto !important;
    height: auto !important;
}
/* AJUSTE LOGOS PRODUCTOS */
.logo-producto {
    height: 120px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    overflow: hidden;
}

.logo-producto img {
    width: 85px !important;
    height: 85px !important;
    max-width: 85px !important;
    max-height: 85px !important;
    object-fit: contain !important;
}
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Arial, Helvetica, sans-serif;
}


body{
    background:#070b18;
    color:white;
}


/* NAVBAR */

.navbar{


    position: sticky;
    top: 15px;
    z-index: 1000;

    width:90%;
    margin:0 auto;

    display:flex;
    align-items:center;
    justify-content:space-between;

    padding:18px 30px;

    background:rgba(10,15,35,0.75);

    backdrop-filter:blur(15px);
    -webkit-backdrop-filter:blur(15px);

    border-radius:25px;

    border:1px solid rgba(255,255,255,.08);

    box-shadow:
    0 0 25px rgba(208,0,255,.25),
    0 0 45px rgba(0,234,255,.15);

        min-height:90px;
    margin-bottom:30px;

}


.navbar .logo img{
    width:100px;
    height:auto;
    max-height:40px;
    object-fit:contain;
    filter:drop-shadow(0 0 15px rgba(208,0,255,.8));
}


nav{
    display:flex;
    gap:35px;
}


nav a{
    color:white;
    text-decoration:none;
    font-size:16px;
}


.acciones{
    display:flex;
    gap:15px;
}


button{
    border:none;
    cursor:pointer;
    border-radius:25px;
    padding:12px 25px;
    font-weight:bold;
}


.login{
    background:transparent;
    color:white;
    border:1px solid #7c4dff;
}


.login,
.registro{

    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:12px 28px;

    border-radius:30px;

    text-decoration:none;

    font-weight:600;

    cursor:pointer;

    transition:.3s;
}
.login{
    border:1px solid #7c5cff;
    color:white;
    background:transparent;
}


.registro{
    background:linear-gradient(90deg,#ff00cc,#00d4ff);
    color:white;
}

.login:hover,
.registro:hover{

    transform:translateY(-2px);
    opacity:.9;

}




/* HERO */

.hero{
    width:90%;
    margin:70px auto;
    min-height:500px;
    display:flex;
    align-items:center;
    justify-content:space-between;
}


.hero-text{
    max-width:600px;
}


.hero h1{
    font-size:65px;
    line-height:1.1;
}


.hero h1 span{
    background:linear-gradient(90deg,#ff00cc,#00eaff);
    -webkit-background-clip:text;
    color:transparent;
}


.hero p{
    margin:25px 0;
    color:#ddd;
    font-size:20px;
}


.hero-card{

width:550px;
height:550px;

display:flex;
align-items:center;
justify-content:center;

background:transparent;

}


.hero-card img{

width:650px;
max-width:none;

filter:
drop-shadow(0 0 60px rgba(208,0,255,.7));

}


.hero-card p{

margin-top:30px;

font-size:20px;

font-weight:700;

text-align:center;

background:
linear-gradient(
90deg,
#ff00cc,
#00eaff
);

-webkit-background-clip:text;

color:transparent;

}



/* PRODUCTOS */

.productos{
    width:90%;
    margin:80px auto;
}


.productos h2,
.confianza h2{
    text-align:center;
    font-size:40px;
    margin-bottom:40px;
}



.productos-grid{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:18px;
    padding:0 35px;
}



.producto{
    background:#111827;
    border:1px solid #334155;
    border-radius:18px;
    padding:15px;
    min-height:340px;
    height:auto;

    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    align-items:center;

    overflow:hidden;
    transition:.3s ease;
}

.producto:hover{

    transform:translateY(-8px);
    border-color:#00eaff;
    box-shadow:0 0 25px rgba(0,220,255,.35);

}



/* LOGOS PRODUCTOS */

.producto img{
    width:90px;
    height:70px;
    object-fit:contain;
    margin:10px auto 15px auto;
    display:block;
}



.producto h3{
    font-size:20px;
    margin-top:5px;
    margin-bottom:10px;
}


.producto p{

    color:#cbd5e1;
    margin-bottom:15px;

}



.producto strong{

    font-size:20px;
    margin-bottom:20px;

}





/* CONFIANZA */

.confianza{

    width:90%;
    margin:80px auto;

}



.beneficios{

    display:flex;
    justify-content:center;
    gap:30px;

}


.beneficios div{

    background:#111827;
    padding:25px 40px;
    border-radius:20px;

}





/* RESPONSIVE */

@media(max-width:900px){

    .hero{

        flex-direction:column;
        text-align:center;

    }


    .productos-grid{

        grid-template-columns:1fr;

    }


    nav{

        display:none;

    }

}
html{
    scroll-behavior:smooth;
}


section{
    scroll-margin-top:120px;
}
html{
    scroll-behavior:smooth;
}


#funciona{
    scroll-margin-top:150px;
}

.funciona-card{

background:rgba(30,41,59,.55);

backdrop-filter:blur(12px);

border:1px solid rgba(0,234,255,.15);

border-radius:25px;

padding:30px;

min-height:150px;

box-shadow:
0 0 25px rgba(208,0,255,.15);

transition:.3s;

}


.funciona-card:hover{

transform:translateY(-8px);

border-color:#d000ff;

box-shadow:
0 0 35px rgba(208,0,255,.35);

}

/* COMO FUNCIONA */

.como-funciona{

width:90%;
margin:120px auto 80px;
text-align:center;

}


.como-funciona h2{

font-size:45px;
margin-bottom:15px;

background:linear-gradient(90deg,#ff00cc,#8b5cf6,#00eaff);
-webkit-background-clip:text;
color:transparent;

}



.subtitulo-funciona{

color:#ddd;
font-size:20px;
margin-bottom:50px;

}



.pasos{

display:grid;
grid-template-columns:repeat(4,1fr);
gap:30px;

}



.paso{

background:rgba(20,30,60,0.45);

border:1px solid rgba(180,80,255,.5);

border-radius:25px;

padding:35px 25px;

text-align:left;

backdrop-filter:blur(12px);

transition:.3s;

}



.paso:hover{

transform:translateY(-8px);

box-shadow:0 0 30px rgba(180,0,255,.5);

}



.icono-paso{

font-size:40px;

width:70px;
height:70px;

display:flex;
align-items:center;
justify-content:center;

border-radius:50%;

background:linear-gradient(135deg,#ff00cc,#00eaff);

margin-bottom:20px;

}



.numero{

color:#ff5cff;

font-size:22px;

font-weight:bold;

}



.paso h3{

font-size:24px;

margin:10px 0;

color:white;

}



.paso p{

color:#cbd5e1;

font-size:16px;

line-height:1.5;

}



/* RESPONSIVE */

@media(max-width:900px){

.pasos{

grid-template-columns:1fr 1fr;

}

}


@media(max-width:600px){

.pasos{

grid-template-columns:1fr;

}

}

html{
scroll-behavior:smooth;
}


section{
scroll-margin-top:120px;
}

/* SECCIÓN PROPUESTA NUVIX */

.nuvix-propuesta{
    width: 90%;
    max-width: 1100px;
    margin: 35px auto 70px;
    text-align: center;
}

.propuesta-tag{
    display:inline-block;
    padding:10px 25px;
    border-radius:30px;
    background:linear-gradient(90deg,rgba(255,0,204,.15),rgba(0,234,255,.15));
    border:1px solid rgba(0,234,255,.35);
    color:#ffffff;
    font-size:17px;
    font-weight:600;
    margin-bottom:30px;
    box-shadow:0 0 20px rgba(0,200,255,.25);
}


.nuvix-propuesta h2{
    font-size: 62px;
    line-height: 1.1;
    margin-bottom: 25px;
    color: white;
}


.nuvix-propuesta h2 span{
    background: linear-gradient(90deg,#ff00cc,#8b5cff,#00eaff);
    -webkit-background-clip:text;
    color:transparent;
}


.nuvix-propuesta p{
    max-width: 750px;
    margin: auto;
    font-size: 20px;
    line-height: 1.5;
    color:#cfd3e6;
}


.propuesta-btn{
    display:inline-block;
    margin-top:35px;
    padding:14px 35px;
    border-radius:30px;
    text-decoration:none;
    color:white;
    background:linear-gradient(90deg,#ff00cc,#00eaff);
    box-shadow:0 0 25px rgba(0,200,255,.35);
    font-weight:600;
    transition:.3s;

    display:inline-flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
}



.propuesta-btn:hover{
    transform:translateY(-3px);
}

.registro-container{
    min-height:100vh;
    padding:80px 20px 60px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
}


.logo-registro{

    width:150px;
    margin-top:10px;
    margin-bottom:15px;

    filter:
    drop-shadow(0 0 15px rgba(120,80,255,.8));
}


.registro-container h1{
    font-size:42px;
}


.registro-container h1 span{
    background:linear-gradient(90deg,#ff38d1,#4cc9ff);
    -webkit-background-clip:text;
    color:transparent;
}


.texto-registro{
    max-width:500px;
    color:#c8c8d8;
    font-size:18px;
}


.registro-box{

    margin-top:20px;
    margin-bottom:30px;

    padding:35px;
    width:360px;

    background:rgba(255,255,255,.06);
    border:1px solid rgba(150,80,255,.5);
    border-radius:25px;

    backdrop-filter:blur(15px);
}


.registro-box input{

    width:90%;
    padding:15px;
    margin:10px;

    border-radius:12px;
    border:none;

    background:#11182d;
    color:white;

}


.registro-box button{

    margin-top:20px;

    width:95%;
    padding:15px;

    border-radius:30px;
    border:none;

    background:linear-gradient(90deg,#ff25d8,#00d9ff);

    color:white;
    font-weight:bold;

    cursor:pointer;

}


.login-text{
    margin-top:20px;
}


.login-text a{
    color:#42dfff;
}

/* AJUSTE NAVBAR PRECIOS */

.precios-logo img{
    width: 120px;
    height: auto;
    object-fit: contain;
}


.hero-card img{
    display:none;
}

.producto img{
    max-width:120px;
    height:auto;
}




.navbar img{
    max-width:100px !important;
    max-height:40px !important;
}

.navbar .logo{
    display:flex;
    align-items:center;
}

.navbar .logo img{
    width:120px !important;
    height:auto !important;
    max-height:45px !important;
    object-fit:contain !important;
}

.hero-card img{
    display:none !important;
}
/* CORRECCIÓN LOGO NAVBAR */
.navbar .logo img {
    width: 120px !important;
    height: auto !important;
    max-height: 50px !important;
    object-fit: contain !important;
}

.navbar .logo {
    width: auto !important;
    height: auto !important;
}
/* AJUSTE LOGOS PRODUCTOS */
.logo-producto {
    height: 100px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.logo-producto img {
    width: 80px !important;
    height: 80px !important;
    max-width: 80px !important;
    max-height: 80px !important;
    object-fit: contain !important;
}
/* CORRECCION TARJETAS PRODUCTOS */

.grid-productos {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    padding: 30px;
}

.producto {
    background: #111827;
    border-radius: 20px;
    padding: 22px;
    text-align: center;
    overflow: hidden;
    min-height: 260px;
}

.logo-producto {
    height: 120px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.logo-producto img {
    width: 90px;
    height: 90px;
    object-fit: contain;
}

.producto h3 {
    color: white;
    font-size: 22px;
    margin: 20px 0 10px;
}

.descripcion {
    color: #cbd5e1;
    font-size: 15px;
}

.precio {
    color: #00eaff;
    font-size: 22px;
    font-weight: bold;
    margin: 20px 0;
}

.stock {
    color: white;
}

.cantidad{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:10px;
    margin-top:12px;
    margin-bottom:12px;
}

.cantidad button{
    width:42px;
    height:42px;
    border-radius:14px;
    border:1px solid #00eaff;
    background:rgba(0,234,255,0.10);
    color:white;
    font-size:20px;
    font-weight:bold;
    cursor:pointer;
    transition:.3s ease;
}

.cantidad button:hover{
    background:#00eaff;
    color:#071018;
    box-shadow:0 0 20px rgba(0,234,255,.8);
    transform:translateY(-3px);
}

.cantidad button:disabled{
    opacity:0.35;
    cursor:not-allowed;
    border-color:#666;
    background:rgba(255,255,255,0.05);
    box-shadow:none;
    transform:none;
}


/* RESPONSIVE */

@media(max-width:900px){
    .grid-productos{
        grid-template-columns:1fr;
    }
}
/* AJUSTE FINAL TARJETAS */

.producto {
    min-height: 360px;
    padding: 20px;
}

.logo-producto {
    height: 90px;
    margin-bottom: 10px;
}

.logo-producto img {
    width: 75px;
    height: 75px;
}

.producto h3 {
    margin: 10px 0;
    font-size: 20px;
}

.descripcion {
    margin-top: 8px;
}

.precio {
    margin: 12px 0;
    font-size: 20px;
}

.producto button{
    width:100%;
    padding:12px 20px;
    border-radius:14px;
    border:1px solid #00eaff;
    background:rgba(0,234,255,0.12);
    color:white;
    font-size:14px;
    font-weight:bold;
    cursor:pointer;
    transition:.3s ease;
    box-shadow:0 0 15px rgba(0,234,255,.25);
}

.producto button:hover{
    background:linear-gradient(90deg,#00eaff,#ff00d4);
    border-color:transparent;
    color:white;
    box-shadow:0 0 25px rgba(0,234,255,.6);
    transform:translateY(-3px);
}
.stock{
    display:block;
    margin-bottom:12px;
    color:white;
}
.numero.sin-cantidad{
    color:#ff4d6d;
    opacity:0.8;
}
.categorias {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 20px 40px;
    margin: 0 auto;
}
.categoria {
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(0,234,255,0.35);
    color: white;
    border-radius: 22px;
    padding: 10px 22px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: .3s ease;
    box-shadow: 0 0 12px rgba(0,234,255,.08);
}

.categoria:hover {
    border-color:#00eaff;
    box-shadow:0 0 20px rgba(0,234,255,.35);
    transform:translateY(-3px);
}
/* BUSCADOR NAVBAR */

.buscar{
    display:flex;
    align-items:center;
    justify-content:center;
}

.buscar input{
    width:250px;
    height:42px;
    padding:0 18px;

    background:#111827;
    color:white;

    border:1px solid #00eaff;
    border-radius:20px;

    font-size:14px;
    outline:none;

    transition:.3s ease;
}

.buscar input::placeholder{
    color:#b8c4d6;
}

.buscar input:focus{
    border-color:#ff00d4;
    box-shadow:0 0 20px rgba(255,0,212,.5);
    transform:translateY(-2px);
}
.agregar{
    margin-top: auto;
}

/* MODALES */

.modal {
    display: none;
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.75);
    justify-content: center;
    align-items: center;
}

.modal-contenido {
    position: relative;
    background: linear-gradient(145deg, #0b0b18, #11112b);
    width: 420px;
    padding: 40px 35px;
    border-radius: 30px;
    text-align: center;
    color: white;
    border: 2px solid #8b5cff;
    box-shadow: 0 0 35px rgba(139,92,255,0.35);
}

.logo-registro {
    width: 80px;
    margin-bottom: 15px;
}

.modal-contenido input {
    width: 90%;
    padding: 12px;
    margin: 6px auto;
    display: block;
    border-radius: 10px;
    border: none;
    outline: none;
}

.modal-contenido button {
    width: 90%;
    padding: 13px;
    margin-top: 15px;
    border-radius: 25px;
    border: none;
    background: linear-gradient(90deg,#ff00c8,#00d9ff);
    color: white;
    font-weight: bold;
    cursor: pointer;
}

.modal-contenido button:hover {
    opacity: .9;
}

.cerrar {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    cursor: pointer;
    color: white;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.25);
    transition: 0.3s ease;
}

.cerrar:hover {
    background: linear-gradient(90deg,#ff00ff,#00eaff);
    transform: rotate(90deg);
}

.password-box {
    position: relative;
    width: 90%;
    margin: 6px auto;
}

.password-box input {
    width: 100%;
    padding-right: 45px;
}

.ojo {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    font-size: 18px;
}
.mensaje-validacion{
    font-size:12px;
    margin-top:6px;
    margin-bottom:8px;
    text-align:left;
    padding-left:8px;
    font-weight:600;
}

.mensaje-ok{
    color:#00e676;
}

.mensaje-error{
    color:#ff5252;
}

#btn-registro:disabled{
    opacity:0.35;
    cursor:not-allowed;
    filter:grayscale(80%);
    transform:none;
}

#btn-registro{
    transition:0.3s ease;
}