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

:root{

--bg:#071422;

--glass:rgba(255,255,255,0.08);

--glass-border:rgba(255,255,255,0.12);

--green:#4caf50;

--green-hover:#66bb6a;

--text:#ffffff;

--text-secondary:#cfd8dc;

--shadow:0 8px 30px rgba(0,0,0,0.35);

--radius:25px;

}


/* =========================
RESET
========================= */

*{

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

}


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

body{

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

background:linear-gradient(
135deg,
#071422,
#0b1f33
);

color:var(--text);

min-height:100vh;

overflow-x:hidden;

}


/* =========================
TÍTULOS
========================= */

h1,h2,h3,h4{

font-weight:700;
letter-spacing:1px;

}


/* =========================
TEXTOS
========================= */

p{

color:var(--text-secondary);

line-height:1.7;

}


/* =========================
GLASS CARD
========================= */

.glass-card{

background:var(--glass);

backdrop-filter:blur(18px);

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

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

border-radius:var(--radius);

box-shadow:var(--shadow);

transition:0.4s ease;

}


.glass-card:hover{

transform:translateY(-5px);

box-shadow:0 20px 40px rgba(0,0,0,0.4);

}


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

.btn{

padding:14px 30px;

border:none;

border-radius:50px;

font-size:16px;

font-weight:600;

cursor:pointer;

transition:0.3s ease;

text-decoration:none;

display:inline-flex;

align-items:center;

justify-content:center;

gap:10px;

}


/* BOTÓN VERDE */

.btn-green{

background:var(--green);

color:white;

}

.btn-green:hover{

background:var(--green-hover);

transform:scale(1.05);

}


/* BOTÓN TRANSPARENTE */

/* =========================
BOTON OUTLINE
========================= */

.btn-outline{

padding:14px 34px;

border-radius:18px;

background:rgba(255,255,255,0.08);

border:1px solid rgba(255,255,255,0.25);

backdrop-filter:blur(10px);

color:white;

font-weight:600;

font-size:15px;

text-decoration:none;

display:inline-flex;

align-items:center;

justify-content:center;

transition:0.35s ease;

box-shadow:
0 10px 25px rgba(0,0,0,0.25);

}

.btn-outline:hover{

transform:translateY(-3px);

background:rgba(255,255,255,0.18);

box-shadow:
0 18px 35px rgba(0,0,0,0.35);

}


.btn-outline:hover{

background:white;

color:#071422;

}


/* =========================
IMÁGENES
========================= */

img{

max-width:100%;

display:block;

}


/* =========================
LOADER
========================= */

.loader{

width:60px;
height:60px;

border-radius:50%;

border:5px solid rgba(255,255,255,0.15);

border-top:5px solid var(--green);

animation:girar 1s linear infinite;

margin:auto;

}


@keyframes girar{

100%{
transform:rotate(360deg);
}

}


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

.fade-in{

animation:fade 0.8s ease;

}


@keyframes fade{

from{

opacity:0;
transform:translateY(20px);

}

to{

opacity:1;
transform:translateY(0);

}

}


/* =========================
SCROLLBAR
========================= */

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#08131f;

}

::-webkit-scrollbar-thumb{

background:var(--green);

border-radius:20px;

}


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

@media(max-width:768px){

body{

padding:15px;

}

.glass-card{

padding:20px !important;

border-radius:20px;

}

h1{

font-size:32px !important;

}

h2{

font-size:26px !important;

}

p{

font-size:15px;

}

.btn{

width:100%;

}

}