/* ======================================
   EL QFRAO FREEROL
   PREMIUM SERVER DESIGN
====================================== */


:root{

    --main:#ffb000;
    --red:#e60000;
    --dark:#080808;
    --card:#111318;
    --border:#252525;
    --text:#e8e8e8;

}



*{

margin:0;
padding:0;
box-sizing:border-box;

}



body{

background:
radial-gradient(circle at top,#202020,#050505 55%);

font-family:'Montserrat',sans-serif;

color:var(--text);

min-height:100vh;

}



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


header{

padding:35px 20px;

text-align:center;

background:
linear-gradient(
135deg,
#090909,
#1b1b1b
);

border-bottom:2px solid var(--main);

}


.logo img{

width:120px;

filter:
drop-shadow(0 0 20px var(--main));

}



header h1{

font-family:'Orbitron';

margin-top:15px;

font-size:42px;

color:white;

letter-spacing:3px;

text-transform:uppercase;


}



header h1::first-letter{

color:var(--main);

}



/* ======================
NAV
====================== */


nav{

display:flex;

justify-content:center;

gap:15px;

flex-wrap:wrap;

padding:20px;

background:#090909;

}



nav a{


color:white;

text-decoration:none;

font-weight:600;

padding:12px 25px;

border-radius:30px;


background:#151515;

border:1px solid #333;


transition:.3s;


}



nav a:hover{


background:var(--main);

color:black;


box-shadow:

0 0 20px var(--main);


transform:translateY(-3px);


}




/* ======================
CARDS
====================== */


.card{


width:92%;

max-width:1200px;

margin:35px auto;


background:

linear-gradient(
145deg,
rgba(20,20,20,.95),
rgba(8,8,8,.95)
);


padding:35px;


border-radius:18px;


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


box-shadow:

0 15px 50px rgba(0,0,0,.8);


animation:show .5s;


}



@keyframes show{

from{

opacity:0;

transform:translateY(20px);

}


to{

opacity:1;

transform:none;

}


}




h2{

text-align:center;

font-family:'Orbitron';

color:var(--main);

font-size:28px;

margin-bottom:25px;


}



p{

line-height:1.8;

color:#cfcfcf;

}



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


.news,
.staff,
.features,
.tienda{


display:grid;

grid-template-columns:
repeat(auto-fit,minmax(260px,1fr));

gap:25px;


}




.news-box,
.staff-box,
.feature-box,
.producto{


background:#151515;


padding:25px;


border-radius:15px;


border:1px solid #292929;


transition:.3s;


}



.news-box:hover,
.staff-box:hover,
.feature-box:hover,
.producto:hover{


border-color:var(--main);


transform:translateY(-8px);


box-shadow:

0 10px 30px rgba(0,0,0,.8);


}



h3{

margin-bottom:15px;

color:white;

}




/* ======================
TIENDA
====================== */


.producto{


text-align:center;

}



.producto span{


display:block;

font-size:32px;

font-weight:bold;

color:#00ff88;

margin:20px;


}



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


.btn-neon{


display:inline-block;


padding:14px 30px;


border-radius:30px;


background:linear-gradient(
45deg,
var(--red),
#ff4d00
);


color:white;


font-weight:bold;


border:none;


cursor:pointer;


text-decoration:none;


transition:.3s;


}



.btn-neon:hover{


transform:scale(1.05);


box-shadow:

0 0 25px var(--red);


}



.big{


padding:17px 45px;

font-size:18px;

}




/* ======================
SOPORTE FORM
====================== */


.support-form{


max-width:750px;

margin:auto;

}



.support-form input,
.support-form select,
.support-form textarea{


width:100%;


padding:16px;


margin-bottom:18px;


background:#090909;


border:1px solid #333;


border-radius:10px;


color:white;


font-size:15px;


transition:.3s;


}



.support-form textarea{

height:160px;

resize:none;

}



.support-form input:focus,
.support-form select:focus,
.support-form textarea:focus{


outline:none;


border-color:var(--main);


box-shadow:

0 0 15px rgba(255,176,0,.3);


}




/* ======================
SERVIDOR
====================== */


.server-box{


text-align:center;


}



.server-box strong{

color:var(--main);

}



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


#carrito{


background:#050505;


padding:20px;


border-radius:10px;


border:1px solid #222;


}



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


footer{


text-align:center;


padding:35px;


background:#050505;


border-top:1px solid #333;


color:#888;


}



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


.ws-float{


position:fixed;


right:25px;

bottom:25px;


width:65px;

height:65px;


display:flex;

align-items:center;

justify-content:center;


background:#25d366;


border-radius:50%;


font-size:30px;


color:white;


text-decoration:none;


box-shadow:

0 0 25px #25d366;


}



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


@media(max-width:700px){


header h1{

font-size:28px;

}



.card{

width:95%;

padding:22px;

}



nav a{

width:90%;

text-align:center;

}



h2{

font-size:22px;

}

/* ===================================
      HERO CON PARTICULAS
=================================== */


.hero{


position:relative;

height:650px;

display:flex;

align-items:center;

justify-content:center;


overflow:hidden;


background:


radial-gradient(
circle at center,
#292929,
#050505 70%
);


border-bottom:3px solid var(--main);


}




/* CAPA OSCURA */

.hero::before{


content:"";

position:absolute;

inset:0;


background:

linear-gradient(
180deg,
rgba(0,0,0,.3),
rgba(0,0,0,.9)
);


z-index:1;


}





/* LOGO */


.logo{


position:absolute;

top:30px;

left:40px;


z-index:5;


}



.logo img{


width:120px;


filter:

drop-shadow(
0 0 20px var(--main)
);


transition:.4s;


}



.logo img:hover{


transform:scale(1.1)
rotate(5deg);


}




/* TEXTO */


.hero-text{


position:relative;

z-index:3;


text-align:center;


max-width:850px;


}



.hero-text h1{


font-family:'Orbitron';


font-size:65px;


color:white;


letter-spacing:5px;


text-transform:uppercase;


text-shadow:


0 0 20px #000;


}



.hero-text h1::first-letter{


color:var(--main);


}



.hero-text p{


font-size:20px;


margin:25px;


color:#ddd;


}



/* BOTONES */


.hero-buttons{


display:flex;

justify-content:center;

gap:20px;


}



/* =========================
 PARTICULAS
========================= */


.particles{


position:absolute;

inset:0;


z-index:2;


overflow:hidden;


}



.particles span{


position:absolute;


width:5px;

height:5px;


background:#ffb000;


border-radius:50%;


box-shadow:


0 0 10px #ffb000,


0 0 25px #ffb000;


animation:float 12s linear infinite;


opacity:.7;


}




.particles span:nth-child(1){

left:10%;
animation-duration:14s;

}


.particles span:nth-child(2){

left:20%;
animation-duration:10s;

}



.particles span:nth-child(3){

left:35%;
animation-duration:18s;

}



.particles span:nth-child(4){

left:50%;
animation-duration:12s;

}



.particles span:nth-child(5){

left:65%;
animation-duration:20s;

}



.particles span:nth-child(6){

left:75%;
animation-duration:15s;

}



.particles span:nth-child(7){

left:85%;
animation-duration:11s;

}



.particles span:nth-child(8){

left:90%;
animation-duration:17s;

}



.particles span:nth-child(9){

left:40%;
animation-duration:13s;

}



.particles span:nth-child(10){

left:55%;
animation-duration:16s;

}




@keyframes float{


0%{


transform:

translateY(700px)
scale(.5);


opacity:0;


}



30%{


opacity:1;


}



100%{


transform:

translateY(-100px)
scale(1.5);


opacity:0;


}


}





/* MOVIL */


@media(max-width:700px){


.hero{


height:550px;


}



.logo{


top:15px;

left:15px;


}


.logo img{


width:80px;


}



.hero-text h1{


font-size:35px;


}



.hero-text p{


font-size:15px;


}



.hero-buttons{


flex-direction:column;


align-items:center;


}


}

}
/* =====================================
           CHECKOUT
===================================== */

.checkout-card,
.card{

    max-width:700px;
    margin:60px auto;

}

hr{

    border:none;
    height:1px;

    background:#2a2a2a;

    margin:30px 0;

}

/* Títulos */

.card h3{

    margin:20px 0 15px;

    color:var(--main);

    font-family:'Orbitron';

    font-size:20px;

}

/* Labels */

.card label{

    display:block;

    margin:18px 0 8px;

    font-weight:600;

    color:#ddd;

}

/* Inputs */

.card input,
.card select{

    width:100%;

    padding:15px;

    border-radius:12px;

    border:1px solid #2d2d2d;

    background:#0d0d0d;

    color:white;

    font-size:15px;

    transition:.25s;

}

.card input:focus,
.card select:focus{

    outline:none;

    border-color:var(--main);

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

}

/* Resumen */

#resumen{

    background:#0d0d0d;

    border:1px solid #242424;

    border-radius:15px;

    padding:25px;

    margin-bottom:25px;

}

/* Lista */

#resumen ul{

    list-style:none;

}

#resumen li{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:12px 0;

    border-bottom:1px solid #222;

    color:#ddd;

}

#resumen li:last-child{

    border-bottom:none;

}

/* Total */

#resumen p{

    margin-top:20px;

    text-align:right;

    font-size:22px;

    font-weight:bold;

    color:var(--main);

}

/* Botón */

.card .btn-neon{

    width:100%;

    margin-top:30px;

    padding:16px;

    font-size:18px;

}

/* Mensaje */

.card p{

    color:#aaa;

}

/* Responsive */

@media(max-width:700px){

    .card{

        margin:25px 15px;

        padding:25px;

    }

}