/* ============================================================================
   LOBBY · Planes (lobby/planes.php) — estética "Navy Glass"
   Se carga después de lobby-apple.css. El iframe tiene fondo transparente: las tarjetas flotan sobre el navy.
   ============================================================================ */

.lxa-planes .pg-hero { padding: clamp(8rem, 15vw, 11.5rem) 0 clamp(1.5rem, 3vw, 2.5rem); }
.lxa-planes .pg-hero .a-head { margin-bottom: 0; position: relative; z-index: 1; }

/* ---- Banner (imagen o GIF animado) que se difumina hacia abajo y se funde con el bloque de planes ---- */
.lxa-planes .pg-hero.has-banner { position: relative; isolation: isolate; padding-bottom: clamp(3rem, 7vw, 5.5rem); }
.lxa-planes .pg-hero.pg-h-bajo  { min-height: clamp(22rem, 38vw, 28rem); }
.lxa-planes .pg-hero.pg-h-medio { min-height: clamp(28rem, 50vw, 38rem); }
.lxa-planes .pg-hero.pg-h-alto  { min-height: clamp(34rem, 64vw, 48rem); }
.lxa-planes .pg-banner { position: absolute; inset: 0 0 -1px 0; z-index: -1; overflow: hidden; pointer-events: none;
  /* el bajo del banner se desvanece a transparente: no hay borde, queda el navy de la página (y el bloque de abajo) */
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 52%, rgba(0,0,0,.55) 75%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 52%, rgba(0,0,0,.55) 75%, transparent 100%); }
.lxa-planes .pg-banner img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; display: block; }
/* velo para que el título se lea sobre cualquier imagen */
.lxa-planes .pg-banner::after { content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(7,13,28,.55) 0%, rgba(7,13,28,.35) 45%, rgba(7,13,28,0) 100%); }
.lxa-planes .pg-hero.has-banner .a-head { padding-top: clamp(0rem, 2vw, 1rem); }
.lxa-planes .pg-hero.has-banner + .pg-planes { margin-top: -2.5rem; position: relative; z-index: 1; }
.lxa-planes .pg-hero .a-h2 { max-width: 22ch; }

.lxa-planes .pg-planes { padding: 0 0 clamp(3.5rem, 8vw, 6rem); }
/* columna central: aloja uno o varios planes y los centra sola */
.lxa-planes .pg-col { max-width: 1120px; margin: 0 auto; display: flex; justify-content: center; }
.lxa-planes .pg-iframe { width: 100%; border: 0; min-height: 480px; background: transparent; display: block; color-scheme: normal; }

.lxa-planes .pg-final { padding: clamp(4rem, 8vw, 6.5rem) 0; }
.lxa-planes .pg-final .a-h2 { max-width: 20ch; }