:root{
    	--bg:#0b0f14;
    	--fg:#e9eef5;
    	--muted:rgba(233,238,245,.75);
    	--card:rgba(255,255,255,.04);
    	--stroke:rgba(255,255,255,.10);
    	--glow:rgba(255,255,255,.06);
    	--accent:#fd8700;
    }

    html{scroll-behavior:smooth}
    body{background:var(--bg);color:var(--fg)}
    a{color:inherit}
    .muted{color:var(--muted)}

    .nav-blur{
    	backdrop-filter: blur(10px);
    	background: rgba(11,15,20,.60);
    	border-bottom:1px solid rgba(255,255,255,.08);
    }

    .anchor{scroll-margin-top:90px}

    .cardx{
    	background:var(--card);
    	border:1px solid var(--stroke);
    	border-radius:18px;
    }

    .section{padding:30px 0}

    .btn-primary{
    	background: var(--accent);
    	border-color: var(--accent);
    	color:#111;
    	font-weight:700;
    }
    .btn-primary:hover{filter:brightness(.95)}

    .btn-outline-light{border-color:rgba(255,255,255,.22)}
    .btn-outline-light:hover{background:rgba(255,255,255,.06)}

    .hero{
    	min-height:82vh;
    	display:flex;
    	align-items:center;
    	background:
    	radial-gradient(1200px 600px at 20% 20%, rgba(253,135,0,.12), transparent 55%),
    	linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.88)),
    	url('../img/gal/gravel-mexico-2025/IMG_7833.jpg') center/cover no-repeat;
    	position:relative;
    	overflow:hidden;
    }

    .hero:after{
    	content:"";
    	position:absolute;
    	inset:-2px;
    	background: radial-gradient(600px 300px at 70% 30%, rgba(255,255,255,.08), transparent 60%);
    	pointer-events:none;
    }

    .hero .container{
    	position:relative;
    	z-index:2;
    }

    .accent-line{
    	height:2px;
    	width:64px;
    	background: var(--accent);
    	border-radius:999px;
    }

    .prize-card{
    	background:
    	radial-gradient(700px 360px at 20% 10%, rgba(253,135,0,.10), transparent 60%),
    	rgba(255,255,255,.04);
    	border:1px solid rgba(255,255,255,.10);
    	border-radius:18px;
    }

    .prize-amount{
    	font-size: clamp(26px, 3.2vw, 44px);
    	font-weight: 800;
    	letter-spacing: -0.02em;
    }

    .rank-dot{
    	width:10px;
    	height:10px;
    	border-radius:999px;
    	background:var(--accent);
    	display:inline-block;
    	margin-right:10px;
    }

    .ig-cta{
    	border:1px solid rgba(253,135,0,.55);
    	border-radius:999px;
    	background: rgba(253,135,0,.10);
    	color: var(--fg);
    	transition:
    	transform .18s ease,
    	filter .18s ease,
    	box-shadow .18s ease,
    	background .18s ease;
    }

    .ig-cta:hover{
    	transform: translateY(-1px);
    	background: rgba(253,135,0,.16);
    	box-shadow:
    	0 0 0 6px rgba(253,135,0,.10),
    	0 10px 30px rgba(0,0,0,.35);
    	filter: brightness(1.03);
    }

    :root{
  --accent:#fd8700;          /* naranja base */
  --accent-hover:#ff9a1f;    /* naranja hover */
  --accent-active:#e67600;   /* naranja active */
}

/* Estado normal */
.btn-primary{
  background-color: var(--accent) !important;
  border-color: var(--accent) !important;
  color:#111 !important;
}

/* Hover */
.btn-primary:hover{
  background-color: var(--accent-hover) !important;
  border-color: var(--accent-hover) !important;
  color:#111 !important;
}

/* Focus (cuando haces click o tab) */
.btn-primary:focus,
.btn-primary:focus-visible{
  background-color: var(--accent-hover) !important;
  border-color: var(--accent-hover) !important;
  box-shadow: 0 0 0 .25rem rgba(253,135,0,.35) !important;
}

/* Active (click sostenido) */
.btn-primary:active,
.btn-primary.active{
  background-color: var(--accent-active) !important;
  border-color: var(--accent-active) !important;
  color:#111 !important;
}

/* Disabled */
.btn-primary:disabled,
.btn-primary.disabled{
  background-color: rgba(253,135,0,.45) !important;
  border-color: rgba(253,135,0,.45) !important;
  color:#222 !important;
}