:root{
    --bg:#08111f;
    --panel:#111c2f;
    --panel2:#1a2740;
    --gold:#ffd54a;
    --green:#2ecc71;
    --silver:#9fb3c8;
    --text:#f5f7fa;
    --muted:#b8c3d1;
    --accent:#2d8cff;
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family:Arial,Helvetica,sans-serif;
    background:
        radial-gradient(circle at top,#16345d 0%,#08111f 60%);
    color:var(--text);
    padding:25px;
}

h1{
    text-align:center;
    margin-bottom:10px;
    font-size:42px;
}

.subtitulo{
    text-align:center;
    color:var(--muted);
    margin-bottom:35px;
}

.grupo{
    margin-bottom:60px;
}

.grupo h2{
    background:linear-gradient(90deg,#0d5eff,#34a8ff);
    border-radius:12px;
    padding:14px;
    margin-bottom:20px;
    text-align:center;
    letter-spacing:1px;
}

.grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    gap:22px;
}

.card{
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.08);
    border-radius:18px;
    overflow:hidden;
    backdrop-filter:blur(10px);
    transition:.25s;
}

.card:hover{
    transform:translateY(-6px);
    box-shadow:0 12px 30px rgba(0,0,0,.35);
}

.card img{
    width:100%;
    display:block;
    cursor:pointer;
}

.nombre{
    text-align:center;
    font-size:20px;
    font-weight:bold;
    padding:12px;
    min-height:68px;
}

.votos{
    text-align:center;
    color:var(--gold);
    font-size:20px;
    font-weight:bold;
    transition:.3s;
}

.barra{
    width:90%;
    height:12px;
    background:#273548;
    margin:12px auto;
    border-radius:20px;
    overflow:hidden;
}

.progreso{
    height:100%;
    width:0%;
    background:linear-gradient(90deg,#00d084,#49ffaf);
    transition:width .6s;
}

.porcentaje{
    text-align:center;
    color:var(--muted);
    margin-bottom:10px;
    font-size:14px;
}

.btn-votar{
    display:block;
    width:85%;
    margin:0px auto 18px;
    padding:12px;
    border:none;
    border-radius:10px;
    background:linear-gradient(90deg,#18b65b,#31d96d);
    color:white;
    font-size:16px;
    font-weight:bold;
    cursor:pointer;
    transition:.25s;
}

.btn-votar:hover{
    transform:scale(1.03);
}

.ranking{
    margin:25px auto 25px;
    background:rgba(255,255,255,.05);
    border-radius:15px;
    padding:18px;
	max-width:900px;
}

.ranking-titulo{
    color:var(--gold);
    font-size:24px;
    margin-bottom:15px;
}

.fila-ranking{
    display:flex;
    justify-content:space-between;
    padding:10px 0;
    border-bottom:1px solid rgba(255,255,255,.08);
}

.fila-ranking.top1{
    color:#5dff94;
    font-weight:bold;
}

.fila-ranking.top2{
    color:#93d7ff;
    font-weight:bold;
}

.modal-imagen{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.88);
    z-index:9999;
}

.modal-contenido{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
}

.modal-contenido img{
    max-width:95vw;
    max-height:92vh;
    border-radius:15px;
}

.cerrar-modal{
    position:absolute;
    top:15px;
    right:25px;
    color:white;
    font-size:44px;
    cursor:pointer;
}

.toast{
    position:fixed;
    bottom:20px;
    right:20px;
    background:#1bb35d;
    color:white;
    padding:15px 20px;
    border-radius:10px;
    display:none;
    box-shadow:0 10px 30px rgba(0,0,0,.35);
}
/*
@media(max-width:700px){
    body{padding:15px;}
    h1{font-size:30px;}
    .grid{
        grid-template-columns:1fr;
    }
}

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

.header-mundial{
    position:sticky;
    top:0;
    z-index:999;

    background:#111;
    border-bottom:2px solid #d4af37;

    box-shadow:0 5px 15px rgba(0,0,0,.35);

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

    padding:12px 0;
    margin-bottom:30px;
}
.logo-link{
    display:inline-block;
    text-decoration:none;
}

.logo_blanco_header_dos{
    width:165px;
    height:auto;
    transition:.3s;
    filter:drop-shadow(0 0 8px rgba(255,255,255,.25));
}

.logo_blanco_header_dos:hover{
    transform:scale(1.12) rotate(-4deg);
    filter:drop-shadow(0 0 18px rgba(255,215,0,.8));
}


/*
Tabla resumen
*/

.lideres{
	background:#1b1b1b;
	border:2px solid #d4af37;
	border-radius:12px;
	padding:18px;
	margin:25px auto;
	max-width:600px;
	box-shadow:0 6px 20px rgba(0,0,0,.35);
	font-size:16px;
}

.lideres h3{
	margin:0 0 15px;
	text-align:center;
	color:#ffd54a;
	font-size:24px;
}

.fila-lider{
    display:grid;
    grid-template-columns:110px 1fr 90px;
    align-items:center;
    gap:15px;
    padding:10px 0;
    border-bottom:1px solid #333;
}

.lider-grupo{
    color:#4db8ff;
    font-weight:bold;
}

.lider-equipo{
    font-weight:bold;
    color:white;
}

.lider-votos{
    text-align:right;
    color:#ffd54a;
    font-weight:bold;
}


/* ===== CELULARES ===== */

@media screen and (max-width: 1200px){

    .grid{
        display:grid;
        grid-template-columns:repeat(1,1fr);
        gap:114px;
    }

    .card{
        width:100%;
        margin:0;
    }

    .card img{
        width:100%;
        height:auto;
    }

	/* Nombre del producto */
	.nombre{
		font-size:56px;
		font-weight:bold;
		line-height:1.3;
		min-height:55px;
	}
	
	/* Votos */
	.votos{
		font-size:40px;
		font-weight:bold;
		margin:12px 0;
	}
	
	/* Porcentaje */
	.porcentaje{
		font-size:36px;
		font-weight:bold;
		margin-top:8px;
	}

	.ranking-titulo{
		font-size:48px;
	}

	
	/* Botón */
	.btn-votar{
		font-size:36px;
		font-weight:bold;
		padding:14px;
	}
	
	/* Ranking */
	.ranking{
		font-size:36px;
	}
	
	/* Título del grupo */
	.grupo h2{
		font-size:56px;
	}
	
	/* Título principal */
	h1{
		font-size:60px;
	}
	
	/* Subtítulo */
	.subtitulo{
		font-size:40px;
		line-height:1.5;
	}
	.logo_blanco_header_dos{
		width:265px;
	}
	
	.lideres{
		max-width:900px;
		font-size:32px;
	}

	.lideres h3{
		font-size:48px;
	}

	.fila-lider{
		display:grid;
		grid-template-columns:minmax(70px,20%) 1fr minmax(60px,20%);
		align-items:center;
		gap:15px;
		padding:10px 0;
		border-bottom:1px solid #333;
	}

}