/* ==== LOADER ==== */
:root{
	--brand-red:#d70000;   /* ajustá al rojo de tu header */
	--loader-fg:#ffffff;
	--loader-bg:#0b0b0b;   /* se usa para el blur de fondo detrás */
}

#app-loader{
	position: fixed;
	inset: 0;
	display: grid;
	place-items: center;
	background: var(--brand-red);
	z-index: 9999;
	transition: opacity .45s ease, visibility .45s ease;
}

#app-loader.hidden{
	opacity: 0;
	visibility: hidden;
}

/* Caja central */
#app-loader .loader-box{
	display: grid;
	gap: .75rem;
	place-items: center;
	padding: 2.25rem 2.5rem;
	border-radius: 18px;
	color: var(--loader-fg);
	backdrop-filter: blur(6px) saturate(1.2);
	background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.08));
	animation: pop-in .5s cubic-bezier(.2,.7,.2,1) both;
}

.loader-logo{
	font: 800 1.25rem/1.1 system-ui, -apple-system, Segoe UI, Roboto, Arial;
	letter-spacing:.18em;
	text-transform: uppercase;
}

/* Puntitos */
.loader-dots{
	display:flex; gap:.45rem; margin-top:.15rem;
}
.loader-dots span{
	width:.55rem; height:.55rem; border-radius:50%;
	background: var(--loader-fg);
	opacity:.35;
	animation: dot 1.2s infinite ease-in-out;
}
.loader-dots span:nth-child(2){ animation-delay:.15s }
.loader-dots span:nth-child(3){ animation-delay:.30s }

.loader-text{
	margin:0; font: 500 .9rem/1.2 system-ui, -apple-system, Segoe UI, Roboto, Arial;
	opacity:.85;
}

/* Animaciones */
@keyframes dot{
	0%, 80%, 100%{ transform: translateY(0); opacity:.35 }
	40%{ transform: translateY(-6px); opacity:1 }
}
@keyframes pop-in{
	0%{ transform: translateY(10px) scale(.98); opacity:0 }
	100%{ transform: translateY(0) scale(1); opacity:1 }
}

/* Tip: si querés que el contenido aparezca suave al liberar el loader */
body:not(.is-ready) main, body:not(.is-ready) header, body:not(.is-ready) footer{
	opacity:0; transform: translateY(6px);
	transition: opacity .35s ease .15s, transform .35s ease .15s;
}
body.is-ready main, body.is-ready header, body.is-ready footer{
	opacity:1; transform:none;
}

/* FONDO con degradé + viñeta */
/* Fondo con degradé + viñeta */
#app-loader{
	position: fixed; inset: 0; display: grid; place-items: center;
	background:
		radial-gradient(1400px 700px at 50% 40%, rgba(0,0,0,.28), transparent 60%),
		linear-gradient(115deg, #e50914, #b50f15 70%);
	z-index: 9999; transition: opacity .45s ease, visibility .45s ease;
}
#app-loader.hidden{ opacity:0; visibility:hidden }

/* Caja GRANDE y llamativa */
#app-loader .loader-box{
	position: relative; display:grid; gap:1rem; place-items:center;
	padding: 3.2rem 3.6rem;              /* más grande */
	border-radius: 24px;
	color:#fff;
	backdrop-filter: blur(10px) saturate(1.25);
	background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(0,0,0,.12));
	box-shadow:
		0 35px 80px rgba(0,0,0,.35),
		0 0 0 1px rgba(255,255,255,.06) inset,
		0 0 30px rgba(255,255,255,.10) inset;  /* glow interior */
	overflow: hidden;
	animation: pop-overshoot .6s cubic-bezier(.2,.9,.2,1.2) both;
}
#app-loader .loader-box::after{           /* Shine barrido */
	content:""; position:absolute; inset:-40% -120% -40% -120%;
	background: linear-gradient(75deg, transparent 45%, rgba(255,255,255,.45) 50%, transparent 55%);
	transform: translateX(-45%);
	animation: shine 2.2s linear infinite;
	pointer-events:none;
}

.loader-logo{
	font: 800 clamp(1.1rem, 1.8vw + .6rem, 1.8rem)/1.05 system-ui, -apple-system, Segoe UI, Roboto, Arial;
	letter-spacing:.22em; text-transform:uppercase;
}

/* Puntitos */
.loader-dots{ display:flex; gap:.55rem; margin-top:.15rem }
.loader-dots span{
	width:.7rem; height:.7rem; border-radius:50%;
	background:#fff; opacity:.35; animation: dot 1.2s infinite ease-in-out
}
.loader-dots span:nth-child(2){ animation-delay:.15s }
.loader-dots span:nth-child(3){ animation-delay:.30s }

/* Barra de progreso más gruesa */
.loader-progress{
	width: 320px; height: 10px; border-radius: 999px; overflow: hidden;
	background: rgba(255,255,255,.25);
	box-shadow: 0 2px 10px rgba(0,0,0,.25) inset;
}
.loader-progress__bar{
	width: 0%; height: 100%; background: #fff; border-radius: inherit;
	transform-origin: left center; transition: width .22s ease;
}

.loader-text{ margin:0; font: 600 1rem/1.15 system-ui, -apple-system, Segoe UI, Roboto, Arial; opacity:.92 }

/* Fade-in del sitio */
body:not(.is-ready) main, body:not(.is-ready) header, body:not(.is-ready) footer{
	opacity:0; transform: translateY(8px);
	transition: opacity .35s ease .10s, transform .35s ease .10s;
}
body.is-ready main, body.is-ready header, body.is-ready footer{ opacity:1; transform:none }

/* Animaciones */
@keyframes dot{ 0%,80%,100%{ transform:translateY(0); opacity:.35 } 40%{ transform:translateY(-7px); opacity:1 } }
@keyframes shine{ from{ transform: translateX(-50%) } to{ transform: translateX(50%) } }
@keyframes pop-overshoot{
	0%{ transform: translateY(12px) scale(.94); opacity:0 }
	60%{ transform: translateY(0) scale(1.02); opacity:1 }
	100%{ transform: translateY(0) scale(1) }
}

/* ===== Loader con video ===== */
#app-loader {
	position: fixed;
	inset: 0;
	background: #000; /* fallback */
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 9999;
	overflow: hidden;
  }
  
  .loader-video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
  }
  
  .loader-overlay {
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,0.5); 
	z-index: 1;
  }
  
  .loader-box {
	position: relative;
	z-index: 2; 
	color: #fff;
	text-align: center;
  }