.rfep-app-banner {
	/* Paleta RFEP tomada de hockeylinea.fep.es */
	--rfep-azul:        #101D3F;  /* barra superior, titulares, nav */
	--rfep-azul-oscuro: #091639;
	--rfep-azul-medio:  #5581B0;  /* cabeceras de tablas */
	--rfep-ambar:       #EAA93F;  /* etiqueta "HOCKEY LÍNEA", botón + */
	--rfep-granate:     #9A1F13;  /* filete rojo de sección */
	--rfep-gris:        #F0F0F0;
	--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;

	background:
	  radial-gradient(120% 80% at 50% 0%, #1B2F63 0%, rgba(27,47,99,0) 62%),
	  linear-gradient(180deg, var(--rfep-azul) 0%, var(--rfep-azul-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 (los puntos del logo RFEP) --- */
  .rfep-app-banner__stripe {
	position: absolute;
	top: 0; left: 0; right: 0;
	height: calc(5px * var(--rfep-u));
	background: linear-gradient(90deg,
	  #CF5555 0%, #E27233 17%, #DDB54E 33%,
	  #C5CD6A 50%, #A4CC72 67%, #4090AA 84%, #2254A2 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(--rfep-ambar);
	border-color: var(--rfep-ambar);
	color: var(--rfep-azul);
  }

  /* --- 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;               /* el logo RFEP vive sobre blanco */
	color: var(--rfep-azul);
	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 ámbar, igual que la de "HOCKEY LÍNEA" en la web */
  .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(--rfep-ambar);
	color: var(--rfep-azul);
	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(--rfep-ambar);
  }

  /* Filete granate bajo el titular, como el de "COMPETICIONES" */
  .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(--rfep-granate);
  }

  .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(--rfep-ambar);
	color: var(--rfep-azul);
	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;
  }