.rfep-app-banner {
	/* Paleta World Skate Games ASU26 tomada de la imagen */
	--ws-verde:         #085C27;  /* verde principal oscuro (texto RINK, botones) */
	--ws-verde-oscuro:  #043B17;  /* verde más oscuro para el gradiente de fondo */
	--ws-verde-medio:   #547B53;  /* verde oliva (barra superior) */
	--ws-naranja:       #F15A31;  /* naranja coral (texto HOCKEY, botones) */
	--ws-rosa:          #EE6899;  /* rosa sacado del logo de la estrella */
	--ws-beige:         #F4F5EC;  /* color de fondo claro de la web */
	--rfep-font: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;

	/* FACTOR DE ESCALA — lo calcula el JS.
	   En una web no responsive el móvil dibuja la página a ~980 px y luego la
	   reduce, así que todo saldría diminuto. El JS mide cuánto la reduce y pone
	   aquí el factor inverso (≈2.5 en un iPhone). Todas las medidas van
	   multiplicadas por él, así el banner se ve igual de grande que en una web
	   adaptada. En una web responsive vale 1 y no cambia nada. */
	--rfep-u: 1;
}

/* Oculto hasta que el JS decida que es un móvil.
   NO se usa media query: en una web no responsive nunca se cumpliría. */
.rfep-app-banner[hidden] { display: none; }

/* Bloquea el scroll del fondo mientras el banner está abierto */
body.rfep-app-banner-open { overflow: hidden; }

.rfep-app-banner {
	/* Ocupa TODO el viewport del dispositivo */
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100vh;          /* fallback navegadores antiguos */
	height: 100dvh;         /* altura real en móvil, sin saltos con la barra del navegador */
	z-index: 999999;

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

	/* Respeta notch / barra inferior en iPhone */
	padding: calc(env(safe-area-inset-top) + 64px * var(--rfep-u))
			 calc(26px * var(--rfep-u))
			 calc(env(safe-area-inset-bottom) + 28px * var(--rfep-u));
	box-sizing: border-box;

	/* Gradiente ajustado a los tonos verdes de la nueva web */
	background:
	  radial-gradient(120% 80% at 50% 0%, #1B7A36 0%, rgba(27,122,54,0) 62%),
	  linear-gradient(180deg, var(--ws-verde) 0%, var(--ws-verde-oscuro) 100%);
	color: #fff;
	font-family: var(--rfep-font);

	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	animation: rfepAppBannerIn .28s ease-out both;
}

@keyframes rfepAppBannerIn {
	from { opacity: 0; transform: scale(1.02); }
	to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
	.rfep-app-banner { animation: none; }
}

/* --- Franja multicolor adaptada a los colores del logo de ASU26 --- */
.rfep-app-banner__stripe {
	position: absolute;
	top: 0; left: 0; right: 0;
	height: calc(5px * var(--rfep-u));
	background: linear-gradient(90deg,
	  var(--ws-rosa) 0%, 
	  var(--ws-naranja) 33%, 
	  var(--ws-verde-medio) 66%, 
	  var(--ws-verde) 100%);
}

/* --- Cabecera institucional --- */
.rfep-app-banner__kicker {
	position: absolute;
	top: calc(env(safe-area-inset-top) + 22px * var(--rfep-u));
	left: calc(26px * var(--rfep-u));
	right: calc(78px * var(--rfep-u));
	margin: 0;
	font-weight: 600;
	font-size: calc(9px * var(--rfep-u));
	line-height: 1.3;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: rgba(255,255,255,.55);
}

/* --- Botón cerrar --- */
.rfep-app-banner__close {
	position: absolute;
	top: calc(env(safe-area-inset-top) + 10px * var(--rfep-u));
	right: calc(14px * var(--rfep-u));
	width: calc(44px * var(--rfep-u));    /* área táctil mínima recomendada */
	height: calc(44px * var(--rfep-u));
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(255,255,255,.22);
	border-radius: 50%;
	background: rgba(255,255,255,.08);
	color: #fff;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
.rfep-app-banner__close svg {
	width: calc(22px * var(--rfep-u));
	height: calc(22px * var(--rfep-u));
}
.rfep-app-banner__close:active {
	background: var(--ws-naranja);
	border-color: var(--ws-naranja);
	color: var(--ws-verde);
}

/* --- Contenido --- */
.rfep-app-banner__inner {
	width: 100%;
	max-width: calc(420px * var(--rfep-u));
	text-align: center;
}

.rfep-app-banner__logo {
	width: calc(96px * var(--rfep-u));
	height: calc(96px * var(--rfep-u));
	margin: 0 auto calc(26px * var(--rfep-u));
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: #fff;               
	color: var(--ws-verde);
	font-weight: 800;
	font-size: calc(24px * var(--rfep-u));
	line-height: 1;
	letter-spacing: .06em;
	box-shadow: 0 0 0 calc(6px * var(--rfep-u)) rgba(255,255,255,.08);
}
/* Si usas <img> en lugar del div: */
img.rfep-app-banner__logo {
	display: block;
	object-fit: contain;
	padding: calc(10px * var(--rfep-u));
	box-sizing: border-box;
}

/* Etiqueta adaptada al naranja/coral vibrante */
.rfep-app-banner__eyebrow {
	display: inline-block;
	margin: 0 0 calc(18px * var(--rfep-u));
	padding: calc(6px * var(--rfep-u)) calc(14px * var(--rfep-u));
	background: var(--ws-naranja);
	color: #fff; /* Blanco contrasta mejor con el naranja que el verde oscuro */
	font-weight: 700;
	font-size: calc(11px * var(--rfep-u));
	line-height: 1;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.rfep-app-banner__title {
	margin: 0 0 calc(14px * var(--rfep-u));
	font-weight: 700;
	font-size: calc(30px * var(--rfep-u));
	line-height: 1.15;
	text-transform: uppercase;
	letter-spacing: .01em;
}
.rfep-app-banner__title em {
	font-style: normal;
	color: var(--ws-naranja);
}

/* Filete bajo el titular, modificado al rosa del logo (o puede ser naranja) */
.rfep-app-banner__title::after {
	content: "";
	display: block;
	width: calc(46px * var(--rfep-u));
	height: calc(4px * var(--rfep-u));
	margin: calc(18px * var(--rfep-u)) auto 0;
	background: var(--ws-rosa);
}

.rfep-app-banner__text {
	margin: calc(18px * var(--rfep-u)) 0 calc(32px * var(--rfep-u));
	font-weight: 400;
	font-size: calc(15.5px * var(--rfep-u));
	line-height: 1.6;
	color: rgba(255,255,255,.78);
}

.rfep-app-banner__actions {
	display: flex;
	flex-direction: column;
	gap: calc(12px * var(--rfep-u));
	align-items: stretch;
}

.rfep-app-banner__btn {
	display: block;
	padding: calc(17px * var(--rfep-u)) calc(20px * var(--rfep-u));
	background: var(--ws-naranja);
	color: #fff;
	font-weight: 700;
	font-size: calc(15px * var(--rfep-u));
	line-height: 1;
	letter-spacing: .06em;
	text-transform: uppercase;
	text-decoration: none;
	-webkit-tap-highlight-color: transparent;
}
.rfep-app-banner__btn:active { filter: brightness(.92); }

.rfep-app-banner__link {
	border: 0;
	background: none;
	padding: calc(12px * var(--rfep-u));
	color: rgba(255,255,255,.6);
	font-family: inherit;
	font-weight: 500;
	font-size: calc(13px * var(--rfep-u));
	line-height: 1;
	letter-spacing: .08em;
	text-transform: uppercase;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}