/* =============================== */
/* FONDO GENERAL */
/* =============================== */

body{
background:radial-gradient(circle at top,#0b1224,#000);
color:#e5e7eb;
font-family:'Poppins',sans-serif;
margin:0;
overflow-x:hidden;
}


/* =============================== */
/* GLOW BACKGROUND */
/* =============================== */

#particles{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
z-index:-1;
background:radial-gradient(circle at center,rgba(0,255,255,.12),transparent 70%);
filter:blur(80px);
animation:moveGlow 10s ease-in-out infinite alternate;
}

@keyframes moveGlow{

0%{
transform:translateY(0) scale(1);
}

100%{
transform:translateY(-30px) scale(1.15);
}

}


/* =============================== */
/* CONTENEDOR PRINCIPAL */
/* =============================== */

main{

max-width:1000px;
margin:120px auto;
padding:50px;

background:rgba(15,23,42,.85);

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

box-shadow:0 30px 80px rgba(0,0,0,.6);

backdrop-filter:blur(12px);

animation:fadeUp .9s ease;

}


/* =============================== */
/* TITULO */
/* =============================== */

main .section-title{

color:#00ffff;
text-align:center;

font-size:42px;
font-weight:700;

margin-bottom:10px;

text-shadow:0 0 25px rgba(0,255,255,.35);

}


/* =============================== */
/* INTRO */
/* =============================== */

main .intro-text{

text-align:center;
font-size:18px;

color:#a5f3fc;

margin-bottom:20px;

}

main .last-updated{

text-align:center;
color:#94a3b8;

margin-bottom:40px;

font-size:14px;

}


/* =============================== */
/* TEXTO LEGAL */
/* =============================== */

main .terms-text h2{

color:#00ffff;
margin-top:50px;

font-size:22px;

border-left:4px solid #00ffff;
padding-left:12px;

}

main .terms-text p{

margin-top:12px;
color:#cbd5e1;
font-size:15px;

}

main .terms-text ul{

margin-top:10px;
margin-left:25px;

}

main .terms-text li{

margin-bottom:6px;

}


/* =============================== */
/* CAJAS REEMBOLSO */
/* =============================== */

main .refund-section{

margin-top:30px;
display:flex;
flex-direction:column;
gap:30px;

}

main .refund-box{

background:rgba(0,255,255,.05);
border:1px solid rgba(0,255,255,.2);

border-radius:18px;
padding:30px;

box-shadow:0 10px 40px rgba(0,0,0,.5);

transition:.35s;

position:relative;
overflow:hidden;

}

main .refund-box::before{

content:"";
position:absolute;

top:0;
left:-120%;

width:120%;
height:100%;

background:linear-gradient(
120deg,
transparent,
rgba(0,255,255,.2),
transparent
);

transition:.6s;

}

main .refund-box:hover::before{

left:120%;

}

main .refund-box:hover{

transform:translateY(-6px);

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

}

main .refund-box h3{

color:#00ffff;
margin-bottom:10px;

}


/* =============================== */
/* LINKS SOLO EN CONTENIDO */
/* =============================== */

main a{

color:#00ffff;
text-decoration:none;

}

main a:hover{

text-decoration:underline;

}


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

footer{

margin-top:120px;

background:rgba(0,0,0,.7);
border-top:1px solid rgba(0,255,255,.1);

text-align:center;

padding:40px;

}

footer h3{

color:#00ffff;

margin-bottom:10px;

}

footer p{

color:#94a3b8;

}


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

@keyframes fadeUp{

from{
opacity:0;
transform:translateY(40px);
}

to{
opacity:1;
transform:translateY(0);
}

}


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

@media(max-width:900px){

main{
margin:80px 20px;
padding:35px;
}

main .section-title{
font-size:32px;
}

main .terms-text h2{
font-size:20px;
}

}

/* ========================= */
/* 🌞 MODO CLARO - TERMS */
/* ========================= */

/* FONDO */
body.light{
background:#f8fafc;
color:#111;
}

/* GLOW BACKGROUND */
body.light #particles{
background:radial-gradient(circle at center,rgba(0,188,212,.08),transparent 70%);
filter:blur(80px);
}

/* CONTENEDOR */
body.light main{
background:#ffffff;
border:1px solid rgba(0,0,0,.08);
box-shadow:0 20px 50px rgba(0,0,0,.08);
}

/* TITULO */
body.light main .section-title{
color:#00bcd4;
text-shadow:0 0 10px rgba(0,188,212,.2);
}

/* INTRO */
body.light main .intro-text{
color:#0ea5b7;
}

body.light main .last-updated{
color:#64748b;
}

/* TITULOS */
body.light main .terms-text h2{
color:#00bcd4;
border-left:4px solid #00bcd4;
}

/* TEXTO */
body.light main .terms-text p{
color:#374151;
}

/* LISTAS */
body.light main .terms-text li{
color:#374151;
}

/* CAJAS REEMBOLSO */
body.light main .refund-box{
background:rgba(0,188,212,.05);
border:1px solid rgba(0,188,212,.2);
box-shadow:0 10px 25px rgba(0,0,0,.05);
}

body.light main .refund-box:hover{
box-shadow:0 0 20px rgba(0,188,212,.15);
}

body.light main .refund-box h3{
color:#00bcd4;
}

/* LINKS */
body.light main a{
color:#00bcd4;
}

body.light main a:hover{
color:#0891b2;
}

/* FOOTER */
body.light footer{
background:#f1f5f9;
border-top:1px solid rgba(0,0,0,.08);
}

body.light footer h3{
color:#00bcd4;
}

body.light footer p{
color:#64748b;
}