/* ==========================================================
   Banner de cabecera INVICTO.VIP (perfil, ranking, soporte,
   novedades, comunidad…)

   Uso:
     <div class="inv-banner" style="--banner-img:url('/static/img/xxx-header.webp')">
       <div class="inv-banner-txt">
         <div class="inv-banner-title">Título</div>
         <div class="inv-banner-sub">Subtítulo</div>
       </div>
     </div>

   Cómo evita el recorte: la imagen NUNCA se estira ni se recorta
   con "cover". Se pinta a la altura del banner (auto 100%) en DOS
   mitades: la izquierda (rayas + puntos) anclada a la izquierda y la
   derecha (círculo con icono) anclada a la derecha, difuminadas hacia
   el centro. En pantallas anchas el centro es un degradado liso, así
   que el banner se ve completo a cualquier ancho.
   ========================================================== */
.inv-banner {
    --h: 112px;                      /* altura del banner en escritorio */
    --w: calc(var(--h) * 5.479);     /* ancho de la imagen a esa altura (1600x292) */
    position: relative;
    isolation: isolate;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    min-height: var(--h);
    padding: 14px 175px 14px 112px;
    border: 1px solid var(--border-em);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0,0,0,.25);
    /* Relleno del centro: mismo tono que el centro de la imagen */
    background: linear-gradient(180deg, #004a69 0%, #012a45 50%, #004868 100%);
}
.inv-banner::before,
.inv-banner::after {
    content: "";
    position: absolute;
    top: 0; bottom: 0;
    width: min(50%, calc(var(--w) * .62));
    background-image: var(--banner-img);
    background-repeat: no-repeat;
    background-size: auto 100%;
    z-index: -1;
    pointer-events: none;
}
.inv-banner::before {
    left: 0;
    background-position: left center;
    -webkit-mask-image: linear-gradient(to right, #000 60%, transparent);
            mask-image: linear-gradient(to right, #000 60%, transparent);
}
.inv-banner::after {
    right: 0;
    background-position: right center;
    -webkit-mask-image: linear-gradient(to left, #000 60%, transparent);
            mask-image: linear-gradient(to left, #000 60%, transparent);
}

.inv-banner-txt { min-width: 0; }
.inv-banner-eyebrow {
    color: #fbbf24; font-size: .65rem; letter-spacing: 3px;
    font-weight: 700; text-transform: uppercase; margin-bottom: 2px;
}
.inv-banner-title {
    color: #f8fafc; font-weight: 700; font-size: 1.5rem; line-height: 1.15;
    margin: 0; text-shadow: 0 2px 8px rgba(0,0,0,.5);
}
.inv-banner-sub  { color: #b4c3d6; font-size: .85rem; margin: 2px 0 0; }
.inv-banner-meta { color: #8fa3bb; font-size: .72rem; margin-top: 4px; }
.inv-banner .badge-dorsal {
    background: rgba(0,245,212,.12); border-color: rgba(0,245,212,.35); color: #00f5d4;
    margin-right: 1rem; flex-shrink: 0;
}

/* Móvil: solo la parte derecha (el icono manda).
   El icono ocupa ~1.16 x --h por la derecha; el padding derecho se calcula
   a partir de --h para que el texto nunca se monte encima. Importante: la
   imagen se escala con la altura REAL del banner, así que el contenido debe
   caber en --h (por eso el título se limita a 2 líneas). Si un banner lleva
   más texto, usa .inv-banner--alto. */
@media (max-width: 767px) {
    .inv-banner { --h: 88px; padding: 12px calc(var(--h) * 1.2 + 12px) 12px 16px; }
    .inv-banner--alto { --h: 104px; }
    .inv-banner::before { display: none; }
    .inv-banner::after  { width: 100%; -webkit-mask-image: none; mask-image: none; }
    .inv-banner-title {
        font-size: 1.1rem;
        display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
    }
    .inv-banner-sub   { font-size: .72rem; }
    .inv-banner .badge-dorsal { margin-right: .6rem; }
}