:root{
--brand:#a41519;
--brand-dark:#5a0a0c;
--white:#fff;
--gold:#d4af37;
--gold-2:#f2d479;
--glass: rgba(255,255,255,.08);
}

html.preloader-lock, body.preloader-lock { overflow: hidden; }

#preloader{ 
position: fixed; inset: 0;
z-index: 999999;
display: grid; place-items: center;
color: var(--white);
background:
radial-gradient(130% 120% at 80% 15%, rgba(255,255,255,.08) 0%, transparent 40%),
radial-gradient(120% 120% at 20% 85%, rgba(0,0,0,.25) 0%, transparent 45%),
linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
}

.pl-frame{
position: relative;
width: min(72vw, 680px);
aspect-ratio: 16/9;
display: grid; place-items: center;
}

/* Tarjeta “glass” para el logo */
.logo-card{
position: relative;
width: min(62vw, 560px);
padding: clamp(10px, 1.8vw, 18px);
border-radius: 24px;
background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
backdrop-filter: blur(6px);
border: 1px solid rgba(255,255,255,.12);
box-shadow:
0 20px 40px rgba(0,0,0,.35),
inset 0 0 0 1px rgba(255,255,255,.06);
overflow: hidden;
}

.logo{
width: 100%;
height: auto;
display: block;
opacity: 0;
transform: scale(.98);
filter: blur(2px);
}

/* Borde dorado vivo (se anima con GSAP) */
.gold-stroke{
position: absolute; inset: 0;
border-radius: 24px;
pointer-events: none;
background:
conic-gradient(from 0deg, transparent 0 18%, var(--gold) 20% 28%, transparent 30% 48%, var(--gold-2) 50% 58%, transparent 60% 78%, var(--gold) 80% 88%, transparent 90% 100%);
opacity: .0;
padding: 2px;

/* Estándar */
mask:
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
mask-composite: exclude;

/* WebKit */
-webkit-mask:
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
}

/* Halo exterior */
.ring{
position: absolute;
inset: -10% -5% -10% -5%;
border-radius: 28px;
pointer-events: none;
filter: drop-shadow(0 0 26px rgba(212,175,55,.25));
background:
conic-gradient(from 0deg,
transparent 0 32deg, var(--gold) 56deg 116deg,
transparent 140deg 200deg, var(--gold-2) 224deg 284deg,
transparent 308deg 360deg);
padding: clamp(2px, 0.6vw, 6px);

/* Estándar */
mask:
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
mask-composite: exclude;

/* WebKit */
-webkit-mask:
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
}

/* Brillo deslizante */
.shine{
position: absolute; inset: 0;
background:
linear-gradient(100deg, transparent 0 40%, rgba(255,255,255,.85) 50%, transparent 60% 100%);
mix-blend-mode: screen;
transform: skewX(-12deg) translateX(-120%);
pointer-events: none;
opacity: 0;
}

/* Texto de estado + porcentaje */
.status{
position: absolute;
bottom: -2.6rem;
width: 100%;
display: flex; gap: .6rem;
align-items: center; justify-content: center;
font-weight: 600;
text-shadow: 0 2px 10px rgba(0,0,0,.35);
letter-spacing: .3px;
white-space: nowrap;
}
.status .label{
font-size: clamp(0.9rem, 1.8vw, 1.05rem);
opacity: .9;
}
.status .percent{
font-variant-numeric: tabular-nums;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
font-size: clamp(1rem, 2.2vw, 1.25rem);
padding: .14rem .5rem;
border-radius: .6rem;
background: rgba(255,255,255,.1);
border: 1px solid rgba(255,255,255,.16);
box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 6px 14px rgba(0,0,0,.28);
}

/* Barra de progreso */
.progress{
position: absolute;
left: 8%; right: 8%;
bottom: -14%;
height: clamp(3px, .7vw, 8px);
border-radius: 999px;
background: rgba(255,255,255,.14);
overflow: hidden;
box-shadow: inset 0 1px 2px rgba(0,0,0,.25);
}
.progress .bar{
display: block; height: 100%; width: 0%;
background: linear-gradient(90deg, var(--gold), var(--gold-2), var(--gold));
background-size: 200% 100%;
}

/* Partículas */
.particles{ position: absolute; inset: 0; pointer-events:none; }
.particles .p{
position: absolute;
width: clamp(4px, 0.9vw, 12px);
height: clamp(2px, 0.5vw, 6px);
background: linear-gradient(90deg, var(--gold-2), var(--gold));
border-radius: 999px;
opacity: 0;
filter: drop-shadow(0 0 6px rgba(242,212,121,.6));
}

/* Fallback sin máscaras */
@supports not ((mask-composite: exclude) or (-webkit-mask-composite: xor)) {
.ring{ padding: 0; background: radial-gradient(100% 100% at 50% 50%, rgba(212,175,55,.22), transparent 60%); outline: 2px solid rgba(212,175,55,.7); outline-offset: 8px; }
.gold-stroke{ display:none; }
}

/* Reduce Motion */
@media (prefers-reduced-motion: reduce){
.ring, .shine, .gold-stroke{ animation: none !important; }
}