:root{
    --gold:#b88a32;
    --gold-light:#d8b45a;
    --text:#eee5d2;
	--panel-dark:#0f1c33;
}

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

.container{
   /* width:1250px; 
	width: 90%;
    max-width:100%; */
	width:min(95%, 1400px);
    margin:0 auto;

    display:flex;
    flex-direction:column;
	gap: 3rem;
	margin-bottom: 2rem;
}

.titleMain {
	width: 100%;
	padding: 20px 30px;
}

.logoNombre {
	margin: 0;
}

.hrBar {
	width: 100%;
}

.ranking-container {
    min-height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    /* padding:60px; */
	padding:clamp(20px, 3vw, 60px);
    background:
        radial-gradient(circle at top,#31496f,transparent 40%),
        linear-gradient(145deg,#111c31,#050912);
    color:var(--text);
    font-family:Inter,sans-serif;
}

.castle-wall{
    /* width:1250px; */
    width:100%;
    /* padding:80px; */
	/* se ve: móviles -> 20px; tablet -> 40px aprox; desktop -> 80px; */
	padding:clamp(20px, 4vw, 80px);
    position:relative;
    overflow:hidden;
    background:
        linear-gradient(145deg,rgba(255,255,255,.05),transparent),
        rgba(8,15,28,.8);
    border:1px solid rgba(184,138,50,.35);
    backdrop-filter:blur(12px);
    box-shadow: inset 0 0 120px rgba(0,0,0,.8), 0 50px 120px rgba(0,0,0,.8);
	margin: 0 auto;
}

.castle-wall::before{
    content:"";
    position:absolute;
    inset:0;
    opacity:.15;
    background: repeating-linear-gradient(45deg, rgba(255,255,255,.08), transparent 3px, transparent 14px);
}

.castle-wall::after{
    content:"";
    position:absolute;
    width:600px;
    height:400px;
    top:-250px;
    left:50%;
    transform:translateX(-50%);
    background:radial-gradient( circle, rgba(216,180,90,.18), transparent 70%);
}

.title{
    text-align:center;
    font-family:Cinzel,serif;
    /* font-size:48px; */
	font-size:clamp(2rem, 5vw, 3rem);
    font-weight:800;
    letter-spacing:4px;
    color:var(--gold);
    margin-bottom:70px;
    text-transform:uppercase;
}

.subtitle{
    text-align:center;
    color:#b9ae8d;
    letter-spacing:3px;
    margin-top:-40px;
    margin-bottom:70px;
    /* font-size:14px; */ 
	font-size:clamp(.8rem, 2vw, 1rem);
}

.podium{
    /* display:grid;
    grid-template-columns:1fr 1.2fr 1fr;
    align-items:end;
    gap:40px; */
	display:grid;
    grid-template-columns: minmax(220px,1fr) minmax(260px,1.2fr) minmax(220px,1fr);
    align-items:end;
    gap:2rem;
}

.banner{
    position:relative;
    overflow:hidden;
    background:linear-gradient(180deg,#1b2d4f 0%,#13233e 55%,#0f1b32 100%);
    border:2px solid rgba(212,167,58,.25);
    transition:.35s ease;
}

.banner:hover{ transform:translateY(-10px); }

.banner::before{
    content:"";
    position:absolute;
    inset:0;
    background: repeating-linear-gradient(90deg, transparent 0, transparent 4px, rgba(255,255,255,.02) 5px, transparent 6px);
    pointer-events:none;
}

.banner::after{
    content:"";
    position:absolute;
    bottom:-55px;
    left:50%;
    transform:translateX(-50%);
    width:110px;
    height:70px;
    background:var(--panel-dark);
    clip-path:polygon(0 0,100% 0,80% 100%,50% 65%,20% 100%);
    border-bottom:2px solid var(--gold);
}

.banner-top{ height:12px; background:linear-gradient(90deg,#7a5c1d,#f0c75e,#7a5c1d); }

.stitch-left,
.stitch-right{
    position:absolute;
    top:20px;
    bottom:20px;
    width:2px;
    background:rgba(212,167,58,.7);
}

.stitch-left{
    left:14px;
}

.stitch-right{
    right:14px;
}

.content{
    position:relative;
    z-index:2;
    padding:35px 30px 80px;
}

.first{
    /* height:460px; */
	min-height:460px;
    border-color:var(--gold);
    box-shadow:
        0 0 30px rgba(212,167,58,.15),
        0 0 80px rgba(212,167,58,.05);
}

.second,
.third{
    /* height:360px; */
	min-height:360px;
}

.crown{
    font-size:52px;
    text-align:center;
    color:var(--gold);
    margin-bottom:15px;
}

.medal{
    width:80px;
    height:80px;
    margin:0 auto 25px;
    border-radius:50%;
    border:2px solid var(--gold);
    display:flex;
    justify-content:center;
    align-items:center;
    font-family:Cinzel,serif;
    font-size:28px;
    color:var(--gold);
}

.name{
    text-align:center;
    font-family:Cinzel,serif;
    font-weight:700;
    margin-top:15px;
    color:var(--text);
}

.first .name{
    /* font-size:42px; */
	font-size:clamp(1.8rem, 3vw, 2.6rem);
}

.second .name,
.third .name{
    /* font-size:30px; */
	font-size:clamp(1.3rem, 2.5vw, 1.8rem);
}

.ornament{
    text-align:center;
    color:var(--gold);
    letter-spacing:10px;
    margin:20px 0;
}

.points{
    text-align:center;
    font-size:24px;
    font-weight:700;
    margin-bottom:18px;
}

.rank{
    text-align:center;
    color:var(--gold-light);
    font-size:14px;
    letter-spacing:2px;
    text-transform:uppercase;
}

.rank::before{
    content:"⚜ ";
}

.place-label{
    text-align:center;
    margin-top:18px;
    color:#b6ab89;
    letter-spacing:3px;
    font-size:12px;
    text-transform:uppercase;
}


/* por categoría */
.ranking-section{
    background-color: rgba(0,0,0,.58);
    border:1px solid #d4af37;
    border-radius:8px;
    padding:30px;
 
	box-shadow:0 0 10px rgba(212,175,55,.15);
}


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

.overview-card{
    background:rgba(217,217,73,.12);
    border:1px solid rgba(212,175,55,.3);
    border-radius:8px;
    padding:25px;
    text-align:center;
    transition:.3s;
}

.overview-card:hover{
    transform:translateY(-5px);
}

.overview-card i{
    font-size:2rem;
    color:#d4af37;
    margin-bottom:15px;
}

.overview-card span{
    display:block;
    color:white;
}

.overview-card strong{
    display:block;
    margin-top:10px;

    font-size:2rem;
    color:#ebd691;

    font-family:"Almendra", serif;
}

.category-grid{
    display:grid;
    grid-template-columns: repeat(auto-fit,minmax(220px,1fr));
    gap:20px;
	margin-top: 1rem;
}

.category-card{
    position:relative;
    background:
    linear-gradient(180deg, rgba(217,217,73,.15), rgba(0,0,0,.25));
    border:1px solid rgba(212,175,55,.25);
    border-radius:8px;
    padding:25px;
    text-align:center;
    transition:.3s;
}

.category-card::before{
    content:"";

    position:absolute;
    top:0;
    left:0;

    width:100%;
    height:4px;

    background:#d4af37;
}

.category-card:hover{
    transform:translateY(-5px);

    box-shadow:
      0 0 10px rgba(212,175,55,.25);
}

.category-card span{
    font-size:2rem;
}

.category-card h3{
    color:#d4af37;
}

.category-card p{
    color:white;
}

.category-card strong{
    color:#ebd691;
    font-size:1.6rem;
    font-family:"Almendra", serif;
}

.table-info {
    position:relative;
    right:0;
    width: 100%;
	padding: 30px;
	
	margin: 0 0 2rem 0;
}

.filters-container {
	display: none;
}

@media (max-width: 1200px){

    .castle-wall{
        padding:40px;
    }

    .podium{
        gap:1rem;
    }
}


@media(max-width:900px){
	.titleMain { width: 100%; }
    .podium{ grid-template-columns:1fr; /* gap:60px; */ gap:3rem; }
    .first{ order:1; }
    .second{ order:2; }
    .third{ order:3; }
    .banner{ /* height:auto!important; */  min-height:auto;width:100%; }
	.content{ padding:25px 20px 70px; }
	.castle-wall{ padding:20px; }
    .title{ /* font-size:30px; */  margin-bottom:30px; }
	.subtitle{ margin-top:0;margin-bottom:40px; }
}

@media (max-width: 600px){
    .category-grid{ grid-template-columns:1fr; }
    .overview-grid{ grid-template-columns:1fr; }
    .ranking-section{ padding:20px; }
    .category-card{ padding:20px; }
}