/* La tarjeta de la portada: en su ventana de arranque y en Ayuda › Acerca de. Todo bajo .portada-orea para
   no tocar el resto de la app. */
.portada-orea {
  --p-noche: #070c14; --p-verde: #2bb08f; --p-naranja: #f2643a; --p-texto: #eef3f1; --p-suave: #9fb0aa;
  position: relative; overflow: hidden; border-radius: 14px; color: var(--p-texto);
  font-family: Barlow, "Segoe UI", system-ui, sans-serif; user-select: none;
  background: radial-gradient(120% 70% at 70% 18%, #16263a 0%, #0b1420 45%, var(--p-noche) 75%);
}
.portada-orea * { box-sizing: border-box; }
.portada-orea .lienzo { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.portada-orea .velo-portada {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(7,12,20,.96) 0%, rgba(7,12,20,.82) 28%, rgba(7,12,20,.25) 50%, rgba(7,12,20,0) 62%);
}
.portada-orea .texto { position: absolute; left: 6.5%; top: 11%; bottom: 8%; width: 46%; display: flex; flex-direction: column; }
.portada-orea .marca img { width: 64px; height: 64px; border-radius: 14px; display: block; }
.portada-orea h1 { margin: 22px 0 0; font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 60px; letter-spacing: -.02em; line-height: 1; color: var(--p-texto); }
.portada-orea h1 span { color: var(--p-verde); font-weight: 500; }
.portada-orea .lema { margin-top: 14px; font-size: 18px; color: var(--p-suave); letter-spacing: .02em; }
.portada-orea .abajo { margin-top: auto; }
.portada-orea .estado { font-size: 14px; opacity: .85; min-height: 1.3em; }
.portada-orea .estado b { color: var(--p-naranja); font-weight: 500; }
.portada-orea .version { margin-top: 6px; font-size: 13px; color: var(--p-suave); opacity: .8; }
.portada-orea .lugar { position: absolute; right: 3.2%; top: 4.5%; text-align: right; font-size: 12px; color: var(--p-suave); line-height: 1.5; }
.portada-orea .lugar strong { color: var(--p-texto); font-weight: 500; }
.portada-orea .lugar small { font-size: 10px; opacity: .75; }
.portada-orea .marcador { position: absolute; transform: translate(-50%, -50%); pointer-events: none; }
.portada-orea .marcador .txt { position: absolute; left: 12px; bottom: 6px; white-space: nowrap; font-family: "Space Grotesk", sans-serif; }
.portada-orea .m-alc .txt { font-size: 11.5px; color: var(--p-suave); }
.portada-orea .m-alc .tri { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 8px solid rgba(238,243,241,.7); }
.portada-orea .m-cima { opacity: 0; transition: opacity .4s; }
.portada-orea .m-cima.ver { opacity: 1; }
.portada-orea .m-cima .punto { width: 11px; height: 11px; border-radius: 50%; background: var(--p-naranja); position: relative; }
.portada-orea .m-cima .punto::after { content: ""; position: absolute; inset: -1px; border-radius: 50%; border: 1.5px solid var(--p-naranja); animation: portada-pulso 1.8s ease-out infinite; }
/* El Mulhacén queda junto al borde derecho: su nombre, a la izquierda del punto. */
.portada-orea .m-cima .txt { font-size: 13px; font-weight: 600; color: var(--p-texto); left: auto; right: 14px; }
@keyframes portada-pulso { from { transform: scale(1); opacity: .8; } to { transform: scale(3.2); opacity: 0; } }
/* Acerca de: los enlaces y el aviso, en lugar del estado de la carga. */
.portada-orea .enlaces { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 10px; font-size: 13px; }
.portada-orea .enlaces a { color: var(--p-texto); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.portada-orea .enlaces a:hover { color: var(--p-verde); }
.portada-orea .creditos { margin-top: 10px; font-size: 11px; color: var(--p-suave); opacity: .8; line-height: 1.45; }
.portada-orea .cerrar-portada {
  position: absolute; right: 10px; bottom: 10px; width: 30px; height: 30px; border-radius: 8px; border: 1px solid rgba(238,243,241,.25);
  background: rgba(7,12,20,.6); color: var(--p-texto); cursor: pointer; font-size: 16px; line-height: 1;
}
.portada-orea .cerrar-portada:hover { border-color: var(--p-verde); }