body {
  background: url("../assets/fondo-marciano.png") center / cover no-repeat fixed;
}

.overlay{
  position:fixed;
  inset:0;
  background:
  radial-gradient(circle at top,
  rgba(59,130,246,0.25),
  rgba(8,10,20,0.92));
}

/* APP */

.app {
  position: relative;
  z-index: 1;
  padding: 24px;
  max-width: 1200px;
  margin: 0 auto;
}

/* HEADER */

.header {
  display: flex;
  align-items: center;
  justify-content: space-between; /* separa izquierda y derecha */
  gap: 16px;
  margin-bottom: 28px;
  padding: 16px 20px;
  border-radius: 16px;
  background: rgba(20,25,45,0.75);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.08);
  position:relative;
}

.header-left{
  display:flex;
  align-items:center;
  gap:16px;
}

.header img {
  width: 48px;
}

.header h1 {
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.header h1::after {
  content: " Comunidad del Marciano";
  color: var(--primary);
}

/*- BOTON HOME HEADER-*/
.back-home{

display:flex;
align-items:center;
gap:8px;
margin-left:auto;
padding:10px 16px;

border-radius:12px;

background:rgba(59,130,246,0.15);
border:1px solid rgba(59,130,246,0.35);

color:white;
text-decoration:none;

font-size:14px;
font-weight:600;

transition:all .25s ease;

box-shadow:0 4px 12px rgba(0,0,0,.35);

}

/* icono */
.back-home::before{
content:"⬅";
font-size:14px;
}

/* hover */
.back-home:hover{

background:rgba(59,130,246,0.35);

transform:translateY(-2px);

box-shadow:0 8px 20px rgba(0,0,0,.45);

}
/* NAV */
.nav {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(140px,1fr));
  gap: 18px;
  margin-bottom: 28px;
}

.nav-btn{
  display:flex;
  align-items:center;
  gap:10px;
  padding:14px 18px;
  border-radius:12px;
  background:rgba(18,24,42,0.85);
  border:1px solid rgba(255,255,255,0.08);
  cursor:pointer;
  transition:all .25s ease;
  font-weight:600;
  font-size:14px;
}

.nav-btn img{
  width:22px;
  height:22px;
}

.nav-btn span{
  white-space:nowrap;
}

.nav-btn:hover{
  transform: translateY(-5px);
  background: linear-gradient(
    180deg,
    rgba(59,130,246,0.35),
    rgba(59,130,246,0.15)
  );
  box-shadow: 0 12px 30px rgba(59,130,246,0.25);
}

.nav-btn.active{
  background: linear-gradient(
    180deg,
    rgba(59,130,246,0.45),
    rgba(59,130,246,0.2)
  );
}
/* CONTENT */
#view-container {
  min-height: 300px;
}

/* CARD */
.card {
  background: rgba(20,25,45,0.85);
  border-radius: 22px;
  padding: 30px;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 15px 40px rgba(0,0,0,0.6);
  margin-bottom:20px;
}

/* VIDEO */
.video-box {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  border-radius: 14px;
  overflow: hidden;
  background: #020617;
  margin-top: 16px;
}

.video-box iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* SOCIAL */
.social-title {
  margin-top: 28px;
  margin-bottom: 12px;
  font-size: 1.1rem;
  font-weight: 600;
}

.social-bar{
  display:flex;
  justify-content:center;
  gap:20px;
  margin-top:28px;
}

.social-btn{
display:flex;
align-items:center;
gap:10px;
padding:12px 18px;
border-radius:12px;
background:rgba(255,255,255,0.06);
border:1px solid rgba(255,255,255,0.1);
text-decoration:none;
color:white;
font-weight:600;
transition:all .25s ease;
}

.social-btn img{
width:22px;
height:22px;
}

.social-btn:hover{
transform:translateY(-2px);
background:rgba(59,130,246,0.25);
}

.social-btn img {
  width: 80px;                /* mucho más grande */
  height: 80px;
  object-fit: contain;
}

.nav-btn:hover img,
.social-btn:hover img {
  transform: scale(1.08);
  transition: transform 0.2s ease;
}



.social-btn.facebook { background: rgba(59,130,246,.15); }
.social-btn.youtube { background: rgba(239,68,68,.15); }
.social-btn.kick     { background: rgba(34,197,94,.15); }
.social-btn.twitch   { background: rgba(168,85,247,.15); }


/* ============================= */
/* VISTAS CREAR / REGISTRO / RETIRO */
/* ============================= */

.app-selector {
  display: flex;
  gap: 12px;
  margin: 18px 0 22px;
}

.app-btn {
  flex: 1;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  color: var(--text);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s ease;
}

.app-btn:hover {
  background: rgba(59,130,246,0.25);
}

.app-btn.active {
  background: var(--primary);
  border-color: var(--primary);
}

/* Contenedores por App */
.steps.app-content {
  display: none;
}

.steps.app-content.active {
  display: block;
}

/* Pasos */
.steps {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.step {
  background: rgba(255,255,255,0.04);
  border-radius: 16px;
  padding: 18px;
}

.step h4 {
  color: var(--primary);
  font-size: 1rem;
  margin-bottom: 6px;
}

.step p {
  color: var(--muted);
  font-size: 0.95rem;
  margin-bottom: 10px;
}

.step img {
  width: 100%;
  max-width: 420px;
  border-radius: 12px;
  display: block;
}

.card,
.nav-btn{
  animation: fadeUp .5s ease;
}

@keyframes fadeUp{
  from{
    opacity:0;
    transform:translateY(15px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}
/*--HOME CSS--*/

.home-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:20px;
margin-top:20px;
}

@media(max-width:800px){
.home-grid{
grid-template-columns:1fr;
}
}

@media(max-width:700px){

.promo-content{
flex-direction:column;
align-items:flex-start;
}

.promo-cta{
width:100%;
text-align:center;
}

}
@media(max-width:600px){

.back-home{
  font-size:12px;
  padding:8px 12px;
}
.promo-content{
font-size:13px;
}
}

/* FORMULARIO MARCIANO */

.marciano-form{
display:flex;
flex-direction:column;
gap:12px;
margin-top:15px;
}

.marciano-form input,
.marciano-form select{
padding:12px;
border-radius:10px;
border:1px solid rgba(255,255,255,0.15);
background:rgba(0,0,0,0.35);
color:white;
font-size:14px;
}

.marciano-form button{
margin-top:10px;
padding:12px;
border:none;
border-radius:12px;
background:var(--primary);
color:white;
font-weight:600;
cursor:pointer;
transition:.2s;
}

.marciano-form button:hover{
transform:scale(1.05);
box-shadow:0 10px 20px rgba(59,130,246,0.3);
}


/* RANKING */

.ranking-list{
display:flex;
gap:20px;
padding:10px;
list-style:none;
overflow-x:auto;
scrollbar-width:none;
}

.ranking-list li{
padding:10px 14px;
background:rgba(255,255,255,0.05);
border-radius:10px;
font-weight:500;
}


.rank-card{
background:#0f172a;
padding:18px;
border-radius:14px;
text-align:center;
min-width:140px;
transition:.2s;
}

.rank-card:hover{
transform:scale(1.05);
box-shadow:0 10px 25px rgba(0,0,0,0.6);
}

.rank-pos{
font-size:28px;
margin-bottom:6px;
}

.rank-name{
font-weight:bold;
color:white;
}

.rank-points{
font-size:13px;
color:#94a3b8;
}

.loader{
margin-top:10px;
font-size:14px;
color:#00ff9c;
animation: blink 1s infinite;
}

.hidden{
display:none;
}

@keyframes blink{
0%{opacity:1;}
50%{opacity:0.3;}
100%{opacity:1;}
}



/* ============================= */
/* VISTA COMUNIDAD MARCIANO */
/* ============================= */

.comunidad-hero{
text-align:center;
padding-top:10px;
}

.comunidad-title{
font-size:32px;
font-weight:800;
line-height:1.2;
margin-bottom:10px;
letter-spacing:.3px;
}

.comunidad-sub{
font-size:15px;
color:var(--muted);
max-width:520px;
margin:0 auto 25px auto;
}
/* ============================= */
/* BOTON COMUNIDAD WHATSAPP */
/* ============================= */

.whatsapp-btn{

display:flex;
align-items:center;
justify-content:center;
gap:12px;

margin:0 auto;

padding:14px 22px;

background:#25D366;
color:white;

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

border-radius:14px;

text-decoration:none;

transition:all .25s ease;

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

}

.whatsapp-btn img{
width:26px;
height:26px;
object-fit:contain;
}

.whatsapp-btn:hover{
transform:translateY(-3px) scale(1.03);
box-shadow:0 14px 35px rgba(0,0,0,.6);
}
/* ============================= */
/* LISTA BENEFICIOS */
/* ============================= */

.benefit-list{
list-style:none;
padding:0;
margin:0;

display:flex;
flex-direction:column;
gap:14px;
}

.benefit-list li{

display:flex;
align-items:center;
gap:12px;

padding:14px;

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

border-radius:12px;

font-weight:500;

transition:.2s;

}

.benefit-list li:hover{
background:rgba(59,130,246,0.18);
transform:translateX(4px);
}

.benefit-icon{
font-size:20px;
}
/* ============================= */
/* RESPONSIVE COMUNIDAD */
/* ============================= */

@media(max-width:600px){

.comunidad-title{
font-size:26px;
}

.whatsapp-btn{
width:100%;
}

}

/* ============================= */
/* CONTADOR COMUNIDAD */
/* ============================= */

.comunidad-count{

margin-bottom:18px;

font-size:14px;

color:#9ca3af;

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

padding:8px 14px;

border-radius:20px;

display:inline-block;

}

/* ============================= */
/* PREVIEW COMUNIDAD */
/* ============================= */

.comunidad-preview{

margin-top:22px;

}

.comunidad-preview img{

width:100%;

border-radius:18px;

box-shadow:0 12px 35px rgba(0,0,0,0.6);

transition:transform .25s ease;

}

.comunidad-preview img:hover{

transform:scale(1.02);

}

/* ============================= */
/* WRAPPER DE VISTAS */
/* ============================= */

.view-wrapper{
max-width:1200px;
margin:0 auto;
}

/* ============================= */
/* PROMO AUSPICIADOR */
/* ============================= */

.promo-banner{

margin-bottom:22px;

padding:14px 18px;

border-radius:14px;

background:linear-gradient(
  180deg,
  rgba(59,130,246,0.18),
  rgba(59,130,246,0.08)
);

border:1px solid rgba(59,130,246,0.35);

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

}

.promo-content{
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
font-size:14px;
font-weight:500;
color:#cbd5f5;
line-height:1.5;
text-align:left;
}
.promo-text{
flex:1;
}
.promo-code{
color:#60a5fa;
font-weight:800;
letter-spacing:.5px;
}

.promo-money{
color:#22c55e;
font-weight:800;
}

/* BOTON PROMO */

.promo-cta{
display:flex;
align-items:center;
justify-content:center;
white-space:nowrap;
padding:12px 20px;
background:var(--primary);
color:white;
font-weight:700;
border-radius:12px;
text-decoration:none;
transition:.25s;
box-shadow:0 10px 25px rgba(59,130,246,0.35);
}

.promo-cta:hover{

transform:translateY(-2px);

box-shadow:0 14px 35px rgba(59,130,246,0.55);

}

/* ============================= */
/* DESCARGA APP */
/* ============================= */

.app-download{
margin-top:30px;
padding:22px;
border-radius:18px;
background:rgba(20,25,45,0.75);
border:1px solid rgba(255,255,255,0.08);
text-align:center;
box-shadow:0 12px 30px rgba(0,0,0,0.45);
}

.download-title{
font-size:18px;
font-weight:700;
margin-bottom:18px;
}

.download-buttons{
display:flex;
justify-content:center;
gap:16px;
flex-wrap:wrap;
}

.download-btn{
padding:14px 26px;
border-radius:14px;
font-weight:700;
text-decoration:none;
color:white;
transition:.25s;
box-shadow:0 8px 20px rgba(0,0,0,.45);
}

.download-btn.android{
background:#22c55e;
}

.download-btn.ios{
background:#6366f1;
}

.download-btn:hover{
transform:translateY(-3px) scale(1.04);
box-shadow:0 14px 30px rgba(0,0,0,.6);
}