/* MatchScan — cabecera en caja (AIB-53, 4-oct-2026). FUENTE ÚNICA del componente.
   Copia exacta de la caja del Analizador (.ms-hero de analyzer.html, que ahora la usa desde aquí). Se enlaza en el <head> de cada
   página con ?v=<sha1>, para que la caja salga bien desde el primer pintado (el CSS de ms-shared.js se inyecta más tarde).
   Variantes: completa (por defecto: antetítulo, título, entradilla y extras) y compacta (.ms-hero--compact: título y entradilla,
   para las páginas de documento). Sin colores, fuentes ni radios nuevos: sólo los del Analizador.
   Prueba: node --test lib/ms-hero.test.js (cada página principal enlaza esta hoja y su sello coincide). */

.ms-hero { position: relative; box-sizing: border-box; max-width: 1100px; margin: 4px auto 16px; padding: 18px 20px 16px; text-align: center;
    background: rgba(15,22,38,0.96); border: 1px solid var(--ms-border, rgba(0,229,255,0.18)); border-radius: 18px; }
/* Cristal sólo donde hay backdrop-filter; si no, el fondo sólido de arriba (legible sin desenfoque). */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .ms-hero { background: var(--ms-card, rgba(15,22,38,0.78));
        backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); }
}
.ms-hero .ms-hero-kicker { display: inline-flex; align-items: center; gap: 10px; font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
    color: #94a3b8; margin-bottom: 8px; }
.ms-hero .ms-hero-kicker::before, .ms-hero .ms-hero-kicker::after { content: ''; width: 22px; height: 1px; background: linear-gradient(90deg, transparent, rgba(34,211,238,.6)); }
.ms-hero .ms-hero-kicker::after { transform: scaleX(-1); }
/* Título: cian liso si el navegador no recorta el degradado al texto; con recorte, el degradado del Analizador. */
.ms-hero .ms-hero-title { margin: 0 0 10px; padding: 0; font-size: clamp(1.35rem, 2.8vw, 1.9rem); font-weight: 800; letter-spacing: -0.5px; line-height: 1.12;
    color: #00E5FF; text-align: center; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .ms-hero .ms-hero-title { background: linear-gradient(135deg, #00E5FF 0%, #00FF9F 100%); -webkit-background-clip: text; background-clip: text;
        -webkit-text-fill-color: transparent; }
}
.ms-hero .ms-hero-lead { margin: 0 auto 12px; max-width: 680px; font-size: .95rem; line-height: 1.55; color: #9ca3af; }
.ms-hero .ms-hero-lead strong { color: #e5e7eb; }
.ms-hero .ms-hero-stats { display: flex; justify-content: center; gap: 22px; flex-wrap: wrap; margin: 0 auto 14px; color: #94a3b8;
    font-size: 12px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; }
.ms-hero .ms-hero-stats b { font-family: 'Barlow Condensed', sans-serif; font-size: 20px; color: #22d3ee; letter-spacing: 0; margin-right: 2px; vertical-align: -2px; }
/* Sin márgenes vacíos al pie de la caja. */
.ms-hero > :last-child { margin-bottom: 0; }

/* Extras de las páginas de producto (sólo los que ya existían en cada página). */
/* Píldora (PREMIUM) junto al título: el título recorta su degradado al texto, así que la píldora repone su propio color. */
.ms-hero .ms-hero-title .ms-hero-pill { -webkit-text-fill-color: currentColor; vertical-align: middle; }
/* Línea de datos bajo la entradilla (email + plan en Mi perfil): datos reales, nunca se ocultan. */
.ms-hero .ms-hero-meta { display: flex; justify-content: center; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 auto 12px; color: #9ca3af; font-size: 13px; }
/* «Volver» dentro de la caja: arriba a la izquierda en escritorio; en móvil, en su línea. */
.ms-hero .ms-hero-back { position: absolute; left: 14px; top: 14px; margin: 0; }
/* Pestañas (Picks de hoy / Histórico). */
.ms-hero .ms-hero-tabs { margin: 2px auto 0; }

/* Compacta (documentos): misma caja y misma escala; sin antetítulo, cifras ni extras. */
.ms-hero--compact { padding: 16px 20px 14px; margin-bottom: 24px; }
.ms-hero--compact .ms-hero-title { margin-bottom: 6px; }
.ms-hero--compact .ms-hero-lead { margin-bottom: 0; }

/* Fichas de la base de datos y de partidos (liga, equipo, jugador, árbitro, partido, listados y portada de partidos). Las pintan
   lib/seo-pages.js, lib/seo-matches.js, lib/db-lists.js y la SPA de database.html con sus propias clases (.db-head, .db-ehead,
   .db-sticker, .db-mhead). Llevan la MISMA caja y el MISMO título en degradado que .ms-hero, pero conservan su disposición:
   escudo o foto, cifras, botones y marcador. Tamaños y rellenos siguen siendo los de cada ficha (4-oct, AIB-53, 2.ª vuelta). */
.db-glass.db-head, .db-glass.db-ehead, .db-glass.db-sticker, .db-glass.db-mhead {
    background: rgba(15,22,38,0.96); border: 1px solid var(--ms-border, rgba(0,229,255,0.18)); border-radius: 18px; }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .db-glass.db-head, .db-glass.db-ehead, .db-glass.db-sticker, .db-glass.db-mhead { background: var(--ms-card, rgba(15,22,38,0.78));
        backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); }
}
/* Título: el nombre de la ficha y, en el partido, el marcador o la hora del saque (su h1 va oculto para lectores de pantalla). */
.db-glass.db-head h1, .db-glass.db-ehead h1, .db-glass.db-sticker h1, .db-glass.db-mhead .big { color: #00E5FF; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .db-glass.db-head h1, .db-glass.db-ehead h1, .db-glass.db-sticker h1, .db-glass.db-mhead .big {
        background: linear-gradient(135deg, #00E5FF 0%, #00FF9F 100%); -webkit-background-clip: text; background-clip: text;
        -webkit-text-fill-color: transparent; }
}
/* Páginas principales de la base de datos y de partidos (/partidos, /database/equipos, /database/jugadores, /database/arbitros; también
   la 404): headBlock() de lib/seo-pages.js, .db-head SIN .db-ehead. Llevan la caja de las páginas principales ENTERA: centrada, mismo
   ancho, relleno y tamaño de título que .ms-hero (operador, 4-oct, AIB-53). Las fichas (.db-ehead, .db-sticker, .db-mhead) no cambian. */
.db-glass.db-head:not(.db-ehead) { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
    box-sizing: border-box; width: 100%; max-width: 1100px; margin: 4px auto 16px; padding: 18px 20px 16px; }
.db-glass.db-head:not(.db-ehead) .grow { flex: none; width: 100%; min-width: 0; display: flex; flex-direction: column; align-items: center; }
.db-glass.db-head:not(.db-ehead) h1 { margin: 0 0 6px; font-size: clamp(1.35rem, 2.8vw, 1.9rem); font-weight: 800; letter-spacing: -0.5px;
    line-height: 1.12; text-align: center; }
.db-glass.db-head:not(.db-ehead) .meta { justify-content: center; }

/* Móvil: los valores finales del Analizador (caja ≈283 px con sus pasos; aquí, sin ellos, bastante menos). Altura automática:
   nunca se recorta texto; se ocultan sólo el antetítulo y las cifras ornamentales. */
@media (max-width: 720px) {
    .ms-hero { padding: 10px 12px 11px; margin: 2px auto 10px; }
    .ms-hero .ms-hero-kicker, .ms-hero .ms-hero-stats { display: none; }
    .ms-hero .ms-hero-title { font-size: 1.06rem; line-height: 1.18; margin: 0 0 4px; }
    .db-glass.db-head:not(.db-ehead) { padding: 10px 12px 11px; margin: 2px auto 10px; }
    .db-glass.db-head:not(.db-ehead) h1 { font-size: 1.06rem; line-height: 1.18; margin: 0 0 4px; }
    .ms-hero .ms-hero-lead { font-size: .8rem; line-height: 1.38; margin: 0 auto 8px; max-width: none; }
    .ms-hero .ms-hero-meta { font-size: 12px; margin-bottom: 8px; }
    .ms-hero .ms-hero-back { position: static; display: inline-flex; margin: 0 0 6px; }
    .ms-hero--compact { margin-bottom: 16px; }
    .ms-hero--compact .ms-hero-lead { margin-bottom: 0; }
}