/* ============================================================================
   LIGAMETROPOLITANA.COM — THEME (estilo fresh-ligamix)
   Capa de presentación que sobrescribe css/ligastyle.css.
   NO toca lógica de negocio, consultas ni estructura de datos.
   Todo el sistema de diseño se define en :root con variables CSS.
   ============================================================================ */

:root {
    --bg: #0b1524;
    --surface: #132135;
    --surface-2: #182a42;
    --border: rgba(120, 150, 190, .28);
    --text: #eef4fb;
    --muted: #9db0c8;
    --brand: #1f6feb;
    --brand-glow: #35c3f3;
    --brand-soft: rgba(31, 111, 235, .16);
    --chip: rgba(24, 42, 66, .45);
    --gradient-brand: linear-gradient(135deg, var(--brand), var(--brand-glow));
    --gradient-surface: linear-gradient(160deg, #182a42, #101c2e);
    --radius-sm: 12px;
    --radius: 16px;
    --radius-lg: 24px;
    --radius-pill: 999px;
    --shadow: 0 18px 40px -22px rgba(0, 10, 30, .9);
    --shadow-glow: 0 0 0 1px rgba(31, 111, 235, .35), 0 20px 50px -20px rgba(31, 111, 235, .45);
    --font-display: "Barlow Condensed", Impact, sans-serif;
    --font-body: "Inter", system-ui, sans-serif;
    --container: 1152px;
}

/* ==================== RESET / BASE ==================== */

html, body {
    min-width: 0;
    margin: 0;
    padding: 0;
    overflow-x: clip;
}

body {
    background: var(--bg);
    font-family: var(--font-body);
    color: var(--text);
    line-height: 1.55;
    font-size: 16px;
}

img {
    max-width: 100%;
    height: auto;
    border: 0;
}

a {
    color: var(--brand-glow);
    transition: color .2s ease;
}

a:hover {
    color: #fff;
}

a.campo-link,
.cc-meta-item.cc-campo .cc-meta-val {
    text-decoration: none;
    cursor: pointer;
}

.cc-meta-item.cc-campo .cc-meta-val:hover {
    color: var(--brand-glow);
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

:focus-visible {
    outline: 2px solid var(--brand-glow);
    outline-offset: 2px;
}

::selection {
    background: var(--brand-glow);
    color: #fff;
}

/* Neutralizar fondos de imagen heredados (mantener el fondo base oscuro) */
html, body {
    background-color: var(--bg);
}

/* Footer siempre pegado abajo: body como columna flex y el contenido crece */
html {
    height: auto;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

#main-tail-top {
    flex: 1 0 auto;
}

#main-tail-top, section#content, footer {
    background-image: none;
    background-color: transparent;
}

/* ==================== RESET NAV (ligastyle.css heredado) ==================== */
/* La hoja base posiciona absolutamente TODO <nav> (position:absolute; top:8px; left:0)
   y flota sus <li>, lo que descuadra site-nav, comp-nav y footer-cols. Neutralizar. */
nav {
    position: static;
}

nav ul li {
    float: none;
    padding: 0;
}

nav ul li a {
    position: static;
    float: none;
    height: auto;
    line-height: inherit;
    overflow: visible;
}

/* ==================== CONTAINER ==================== */

#main-tail-top {
    width: 100%;
}

#main {
    position: static;
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 20px;
    font-size: 15px;
    box-sizing: border-box;
}

/* OJO: #main ya hace de contenedor (max-width del --container y 20px de
   padding) y hace falta en todas las paginas. Una pagina que se anada un
   .container encima suma los dos paddings y se queda 40px mas estrecha que
   la cabecera. Es lo que le pasaba a la portada, que ya no lo lleva. */
.container {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 20px;
    width: 100%;
    box-sizing: border-box;
}

#content #indent {
    padding: 32px 0;
}

#content p {
    padding: 0 0 18px 0;
    line-height: 1.6;
    font-size: 1em;
    color: var(--muted);
}

/* ==================== TIPOGRAFÍA ==================== */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    text-transform: uppercase;
    color: var(--text);
    letter-spacing: .5px;
    font-weight: 700;
}

h1 {
    position: static;
}

h2, h3 {
    background: none;
    height: auto;
    overflow: visible;
}

h2 span, h2 span span, h3 span, h3 span span {
    background: none;
    display: block;
    width: auto;
    height: auto;
    overflow: visible;
}

h2 a, h3 a {
    float: none;
    margin: 0;
    padding: 0;
    background: none;
    color: var(--brand-glow);
}

h2 strong, h3 strong {
    display: block;
    padding: 0;
    margin: 0 0 18px 0;
    line-height: 1.15;
    font-size: 1.5em;
    font-weight: 700;
    color: var(--text);
}

/* Títulos de sección (JORNADA, CLASIFICACIÓN, sancionados…):
   texto grande en blanco + línea de acento */
.sec-title {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 14px 0 16px;
    padding-bottom: 12px;
    height: auto;
    overflow: visible;
}

.sec-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 70px;
    height: 3px;
    border-radius: 2px;
    background: var(--brand-glow);
    box-shadow: 0 0 14px rgba(31, 174, 235, .5);
}

.sec-title-main {
    display: block;
    margin: 0;
    line-height: 1.12;
    font-size: 1.7em;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #fff;
}

@media (max-width: 640px) {
    .sec-title-main {
        font-size: 1.4em;
    }
}

/* Título de página (nombre de competición, p. ej. "FUT 7 SÁBADO - 2ª LALIGA"):
   grande en blanco con una línea de acento centrada debajo */
h3 #ncompet {
    position: relative;
    display: block;
    margin: 0 0 18px;
    padding: 2px 0 14px;
    line-height: 1.12;
    font-size: 2.1em;
    font-weight: 900;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    text-align: center;
    color: #fff;
    text-shadow: 0 2px 12px rgba(0, 0, 0, .45);
}

h3 #ncompet::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 120px;
    height: 3px;
    border-radius: 2px;
    background: var(--brand-glow);
    box-shadow: 0 0 14px rgba(31, 174, 235, .5);
}

@media (max-width: 640px) {
    h3 #ncompet {
        font-size: 1.55em;
        letter-spacing: 2px;
        padding-bottom: 2px;
    }
    h3 #ncompet::after {
        display: none;
    }
}

h6 {
    padding: 0 0 10px 0;
    line-height: 1.3;
    font-size: 1.2em;
    font-weight: 700;
    color: var(--text);
}

.text-gradient-brand {
    background: var(--gradient-brand);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ==================== HEADER STICKY ==================== */

.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    height: auto;
    background: rgba(11, 21, 36, .94);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(120, 150, 190, .18);
}

.header-inner {
    position: relative;
    max-width: var(--container);
    margin: 0 auto;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px 16px;
}

/* Logo: badge LM + texto LigaMetropolitana */
.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    min-width: 0;
}

/* El logo va por ALTURA, no por anchura, para que la cabecera no dependa de
   la proporción del archivo.

   59px y no 40px: a 59px de alto y con la proporcion actual de 3.93:1 el
   logo mide 232px de ancho, que es lo que ocupaba antes; bajarlo a 40px lo
   dejaba en 157px y se veia claramente mas pequeno. El aire transparente del
   PNG va recortado en la generacion para que la altura sea la del logo y no
   la del lienzo.

   max-width sube a 260px porque a 59px el ancho natural son 232px: con el
   tope en 230px el navegador recortaba y deformaba el logo, que es
   exactamente lo que pasaba con el logo anterior. El min(..., 100%) evita
   que se salga en pantallas muy estrechas. */
.brand-logo {
    display: block;
    height: 59px;
    width: auto;
    max-width: min(260px, 100%);
    object-fit: contain;
}

@media (max-width: 640px) {
    .site-header {
        padding-top: 14px;
    }
    /* Misma proporcion que en escritorio: 34/40 de los 59px. */
    .brand-logo {
        height: 50px;
    }
}

.brand-badge {
    width: 38px;
    height: 38px;
    flex: none;
    border-radius: var(--radius-sm);
    background: var(--gradient-brand);
    color: #fff;
    display: grid;
    place-items: center;
    font-family: var(--font-display);
    font-size: 19px;
    font-weight: 800;
    line-height: 1;
    box-shadow: 0 8px 20px -8px rgba(31, 111, 235, .8);
}

.brand-txt {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 800;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: #fff;
    line-height: 1;
    white-space: nowrap;
}

/* Buscador redondeado con lupa */
.site-search {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(24, 42, 66, .6);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    padding: 8px 16px;
    order: 3;
}

.site-search .search-icon {
    display: inline-flex;
    color: var(--muted);
    flex: none;
}

.site-search input {
    background: transparent;
    border: none;
    outline: none;
    color: var(--text);
    font: inherit;
    font-size: 14px;
    width: 140px;
}

.site-search input::placeholder {
    color: var(--muted);
    opacity: 1;
}

/* Navegación principal (pastillas) */
.site-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    list-style: none;
    margin: 0;
    padding: 0;
    order: 4;
}

.site-nav a {
    display: inline-block;
    padding: 8px 12px;
    border-radius: var(--radius-pill);
    color: var(--muted);
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background .2s ease, color .2s ease;
}

.site-nav a:hover {
    background: var(--surface-2);
    color: var(--text);
}

.site-nav a.current {
    background: var(--gradient-brand);
    color: #fff;
}

/* Toggle hamburguesa (visible en móvil) */
.nav-toggle,
.nav-share {
    display: none;
    order: 2;
    margin-left: auto;
    background: rgba(24, 42, 66, .6);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    width: 44px;
    height: 42px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
}

/* Compartir va a la izquierda del menú, así que se queda con el "margin-left"
   que empuja el grupo a la derecha; el menú lo anula y los separa el "gap" de
   .header-inner. */
.nav-toggle {
    order: 3;
    margin-left: 0;
}

.nav-toggle svg,
.nav-share svg {
    display: block;
}

/* Aviso de "enlace copiado" (solo si el navegador no tiene hoja de compartir) */
.nav-share-toast {
    position: fixed;
    left: 50%;
    bottom: 26px;
    transform: translateX(-50%);
    z-index: 60;
    margin: 0;
    padding: 10px 18px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: 14px;
    box-shadow: var(--shadow);
}

/* ==================== NAV COMPETICIONES ==================== */

.comp-nav {
    border-top: 1px solid rgba(120, 150, 190, .15);
    border-bottom: 1px solid rgba(120, 150, 190, .20);
    background: linear-gradient(180deg, rgba(26, 44, 70, .78), rgba(14, 26, 44, .58));
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: 0 14px 32px -22px rgba(0, 0, 0, .85);
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

.comp-nav-inner {
    max-width: var(--container);
    margin: 0 auto;
    padding: 16px 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

/* Píldoras de modalidad: mismo lenguaje que las tarjetas de la web */
.comp-pill-group {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 12px;
}

.comp-pill {
    position: relative;
    flex: none;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 22px;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(28, 48, 76, .9), rgba(18, 32, 52, .92));
    border: 1px solid var(--border);
    border-left: 3px solid var(--brand-glow);
    border-right: 3px solid var(--brand-glow);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 14px 26px -18px rgba(0, 0, 0, .9);
    color: #fff;
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
    text-decoration: none;
    transition: transform .18s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

.comp-pill:hover {
    transform: translateY(-2px);
    background: linear-gradient(180deg, rgba(32, 48, 84, .95), rgba(21, 40, 66, .96));
    border-color: rgba(53, 195, 243, .55);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 16px 30px -18px rgba(31, 111, 235, .75);
}

.comp-pill.current {
    border: 1px solid transparent;
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    background:
        var(--gradient-brand) padding-box,
        var(--gradient-brand) border-box;
    color: #fff;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .35);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
}

.comp-pill:focus-visible {
    outline: 2px solid var(--brand-glow);
    outline-offset: 2px;
}

/* HISTORICO: desplegable sin JS (details/summary) */
.comp-hist {
    position: relative;
}

.comp-hist summary {
    list-style: none;
    cursor: pointer;
}

.comp-hist summary::-webkit-details-marker {
    display: none;
}

.hist-panel {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    z-index: 40;
    min-width: 230px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 12px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.hist-panel a {
    display: block;
    padding: 8px 12px;
    border-radius: var(--radius);
    color: var(--text);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

.hist-panel a:hover {
    background: var(--surface-2);
    color: #fff;
}

/* ==================== NAVBAR: COMPETICIONES ==================== */

.comp-hist.nav-comp {
    position: relative;
}

.site-nav .nav-comp summary {
    display: block;
    list-style: none;
    cursor: pointer;
    padding: 8px 12px;
    border-radius: var(--radius-pill);
    color: var(--muted);
    font-size: 13.5px;
    font-weight: 600;
    white-space: nowrap;
    transition: background .2s ease, color .2s ease;
}

.site-nav .nav-comp summary::-webkit-details-marker {
    display: none;
}

.site-nav .nav-comp summary:hover,
.site-nav .nav-comp[open] summary {
    background: var(--surface-2);
    color: var(--text);
}

.site-nav .nav-comp summary.current {
    background: var(--gradient-brand);
    color: #fff;
}

.comp-panel {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 45;
    width: min(620px, 92vw);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 16px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.comp-panel h4 {
    margin: 0 0 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--brand-glow);
}

.comp-panel ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 2px;
}

.comp-panel ul a {
    display: block;
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

.comp-panel ul a:hover {
    background: var(--surface-2);
    color: #fff;
}

.comp-panel .comp-all {
    margin: 8px 0 0;
}

.comp-panel .comp-all a {
    color: var(--brand-glow);
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
}

/* ==================== FRANJA DE AVISO ==================== */
.aviso {
    background: var(--gradient-brand);
    border-bottom: 1px solid rgba(120, 150, 190, .18);
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

.aviso p {
    max-width: var(--container);
    margin: 0 auto;
    padding: 8px 20px;
    text-align: center;
    color: #fff;
    font-size: 12.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
}

/* ==================== BANNER ANUNCIO ==================== */

.ads-banner {
    max-width: var(--container);
    margin: 14px auto 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 90px;
    background: rgba(24, 42, 66, .35);
    border: 1px solid rgba(120, 150, 190, .18);
    border-radius: var(--radius);
    overflow: hidden;
}

/* ==================== FACEBOOK ==================== */

.fb-wrap {
    max-width: 460px;
    margin: 0 auto;
    text-align: center;
}

.fb-page {
    width: 100%;
    min-height: 480px;
    background: rgba(19, 33, 53, .5);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    text-align: left;
}

.fb-fallback {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    color: var(--brand-glow);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}

.fb-fallback:hover {
    color: #fff;
}

.fb-fallback .icon {
    width: 18px;
    height: 18px;
}

/* ==================== SELECTOR DE TEMPORADA (liga) ==================== */

.lm-tempbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    padding: 12px 16px;
    background: rgba(24, 42, 66, .45);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.lm-tempbar-label {
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--muted);
}

.lm-select {
    appearance: none;
    -webkit-appearance: none;
    background-color: var(--surface);
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239db0c8' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 9px 34px 9px 12px;
    font: inherit;
    font-size: 14px;
    cursor: pointer;
}

.lm-select:focus-visible {
    outline: 2px solid var(--brand-glow);
    outline-offset: 2px;
}

.lm-tempbar-note {
    color: var(--muted);
    font-size: 12.5px;
    margin-left: auto;
}

/* ==================== NOTICIAS ==================== */

.news-grid {
    display: grid;
    gap: 16px;
    margin-top: 20px;
}

@media (min-width: 640px) {
    .news-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 639px) {
    .news-grid {
        grid-template-columns: 1fr;
    }
}

.news-card {
    background: rgba(255, 255, 255, .02);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
}

.news-card h3 {
    margin: 10px 0 10px;
    font-size: 17px;
}

.news-card p {
    margin: 0;
    color: var(--muted);
    font-size: 13.5px;
    line-height: 1.55;
}

/* Vista previa del canal de YouTube dentro de una noticia. */
.news-card .channel-preview {
    margin-top: 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--chip);
}

.news-card .channel-banner {
    aspect-ratio: 21 / 6;
}

.news-card .channel-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.news-card .channel-body {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 12px 16px 16px;
}

.news-card .channel-avatar img {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 2px solid var(--surface);
    display: block;
}

.news-card .channel-info {
    flex: 1 1 160px;
    min-width: 0;
}

.news-card .channel-name {
    display: block;
    font-weight: 600;
    color: var(--text);
    text-decoration: none;
}

.news-card .channel-name:hover {
    color: var(--brand-glow);
}

.news-card .channel-meta {
    display: block;
    color: var(--muted);
    font-size: 12.5px;
    margin-top: 2px;
}

.news-date {
    display: inline-block;
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    background: var(--brand-soft);
    color: var(--brand-glow);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* ==================== CONTACTO ==================== */

.contact-page {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.contact-page > h2 {
    font-size: 24px;
    margin: 0;
}

.contact-grid {
    display: grid;
    gap: 32px;
    align-items: stretch;
    grid-template-columns: 1fr;
}

@media (min-width: 640px) {
    .contact-grid {
        grid-template-columns: 1.4fr 1fr;
    }
}

.contact-intro {
    color: var(--muted);
    margin: 14px 0 18px;
    font-size: 14px;
}

.contact-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 22px;
}

.contact-aside h3 {
    font-size: 16px;
    margin: 0 0 10px;
}

.contact-aside p {
    color: var(--muted);
    font-size: 14px;
    line-height: 1.55;
    margin: 0 0 20px;
}

/* El segundo h3 del bloque lateral (Inscripciones / Web) necesita aire por
   arriba: el p anterior ya trae 20px de margen abajo, asi que sin esto los dos
   pares titulo+texto quedan pegados. */
.contact-aside h3:not(:first-child) {
    margin-top: 8px;
}

.contact-card,
.contact-aside-card {
    height: 100%;
}

/* Alineacion de los items de las dos tarjetas de contacto. Antes esta regla
   solo aplicaba a .contact-card (la tarjeta izquierda) y la derecha se
   quedaba con el align-items:center por defecto de .footer-contact li, con lo
   que los circulos de icono quedaban en alturas distintas entre las dos
   tarjetas. Ahora comparten regla y por eso los iconos caen a la misma linea.

   align-items:center en vez de flex-start porque cada item tiene dos lineas
   (etiqueta + valor): con flex-start el circulo se pegaba al borde de arriba
   de la etiqueta y dejaba un hueco raro debajo. Centrado sobre el bloque de
   texto queda simetrico.

   El padding vertical es el separador entre items y NO el desplazamiento: el
   gap:8px de .footer-contact separa los items entre si, y este padding suma
   aire dentro de cada uno. */
/* Cada item es: circulo de icono + etiqueta + valor. El objetivo es que el
   centro del circulo caiga en la linea de la ETIQUETA (Correo / Teléfono) y
   no en el centro del bloque entero.

   Con flexbox + align-items:center el circulo se centraba contra las dos
   lineas, o sea entre "Correo" y el email, y por eso se veía descuadrado
   respecto a la etiqueta. Aqui se usa retícula: el .icon va en la columna 1 y
   el .contact-row en la columna 2, y el li alinea sus items al inicio. El
   circulo queda con su propia celda, de altura 36px, y la etiqueta queda en
   la primera linea de texto de la columna 2.

   Para que las dos lineas (etiqueta y valor) caigan una debajo de otra sin
   depender de un <br>, el .contact-row tambien es retícula: la etiqueta en la
   fila 1 y el enlace en la fila 2. Por eso quité los <br> del HTML: con ellos
   la etiqueta se partia en dos lineas de mas. */
.contact-card .footer-contact li,
.contact-aside-card .footer-contact li {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    column-gap: 12px;
    align-items: start;
    padding: 3px 0;
}

/* La etiqueta y el valor, en filas propias, alineados a la izquierda contra
   la columna del circulo. */
.contact-card .contact-row,
.contact-aside-card .contact-row {
    display: grid;
    grid-template-rows: auto auto;
    row-gap: 2px;
    min-width: 0;
}

/* Los circulos de icono son cuadrados de 36px con borde de 1px, asi que sin
   esto se encogen si el texto de al lado es largo (el correo del creador
   es el caso limite) y se ven mas pequeños que los del otro item. */
.contact-card .footer-contact .icon,
.contact-aside-card .footer-contact .icon {
    width: 36px;
    height: 36px;
}

/* La etiqueta y el valor son dos filas de la retícula. Les fijo el mismo
   interlineado a los dos para que el bloque tenga una altura estable y el
   circulo, que ocupa su propia celda, quede opticamente centrado respecto a
   la etiqueta y no descentrado. */
.contact-card .contact-label,
.contact-aside-card .contact-label {
    line-height: 1.3;
    margin: 0;
}

.contact-card .footer-contact a,
.contact-aside-card .footer-contact a {
    line-height: 1.3;
}

/* ============ CREDITO ============ */

/* Linea de credito al pie de la tarjeta de contacto. Va a todo el ancho de la
   tarjeta, por debajo de las dos columnas del contact-grid, y no dentro de
   ninguna: asi queda en la base del bloque y no compite con el contenido.

   El separador de arriba es el mismo rgba(120, 150, 190, .20) que usa el borde
   del header y del footer, para que el ritmo de lineas sea el de la web.

   Sin fondo, sin borde propio, sin caja: es texto en --muted, el mismo tono
   que el resto de notas de la pagina. El strong va en blanco porque es el
   nombre y es lo unico que quiero que se lea.

   El cuerpo es de 14px, el mismo de .contact-intro, para que la frase se lea
   igual que "¿Quieres inscribir tu equipo...?" que tiene justo encima. Los
   enlaces se quedan en 12.5px porque son el dato secundario. */
.credit {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 20px;
    margin-top: 22px;
    padding-top: 16px;
    border-top: 1px solid rgba(120, 150, 190, .20);
    font-family: var(--font-display);
    font-size: 14px;
    letter-spacing: .4px;
    color: var(--muted);
}

.credit-txt strong {
    color: #fff;
    font-weight: 700;
}

/* Los dos contactos del creador. Icono plano a 14px en --brand-glow, no el
   circulo de 36px de .footer-contact: aqui van en linea con el texto y un
   boton de ese tamano se comeria media linea. */
.credit-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 18px;
    font-size: 12.5px;
}

.credit-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--muted);
    text-decoration: none;
    transition: color .2s ease;
}

.credit-link:hover,
.credit-link:focus-visible {
    color: #fff;
}

.credit-link .icon {
    width: 14px;
    height: 14px;
    flex: none;
    color: var(--brand-glow);
}

.contact-label {
    display: block;
    color: var(--text);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .8px;
    margin-bottom: 2px;
}

.contact-aside-card h3 {
    font-size: 16px;
}

/* Titulo de las dos tarjetas de /contactar. Ambas llevan el mismo marcado
   (h3 + .footer-contact), asi que comparten clase y por definicion quedan
   igual. Mismo 16px del h3 del aside y 14px de separation con la lista, el
   ritmo que ya usaba el h3 + .contact-intro de la tarjeta del formulario. */
.contact-card-title {
    /* !important por una colision de nombres, no por mania.

       .contact-aside h3 (mas abajo, linea ~1614) pone 18px a los subtitulos de
       tarjeta de la portada: .news-card h3, .sponsor-card h3 y .contact-aside
       h3. Ese .contact-aside es el mismo que envuelve la tarjeta derecha de
       /contactar, asi que su "Contacto Web" salia a 18px mientras que
       "Contacto Liga" (que no esta dentro de .contact-aside) se quedaba en
       16px de esta regla.

       Sin !important no hay forma limpia: porluquear la especificidad
       (0,1,1) contra (0,1,0) habria que duplicar .contact-aside h3 aqui y
       depender del orden del archivo. !important en el sitio concreto del
       conflicto es mas honesto y sobrevive a que se reordene la hoja. */
    font-size: 16px !important;
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 14px;
    padding: 0;
    background: none;
    height: auto;
    color: #fff;
}

.contact-card-title + .footer-contact {
    margin-top: 0;
}

/* Formulario de contacto */
.contact-form-card > h3 {
    font-size: 20px;
    margin: 0;
}

.contact-form-card .contact-intro {
    margin: 8px 0 22px;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 640px;
}

.form-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .6px;
}

.form-input {
    width: 100%;
    padding: 12px 14px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 14px;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.form-input:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(31, 111, 235, .2);
}

.form-input::placeholder {
    color: var(--muted);
}

.contact-form textarea.form-input {
    resize: vertical;
    min-height: 120px;
}

.contact-form .btn {
    align-self: flex-start;
    margin-top: 4px;
}

/* ==================== HERO ==================== */

/* El hero son dos capas apiladas, de abajo arriba:
     1. la foto, como background-image de la propia section;
     2. .hero-shade, el velo oscuro y el brillo azul electrico.
   El texto va directamente sobre la foto, en .hero-body. Nada de <img> ni
   <picture>: la foto es decorativa y va tapada por el velo, asi que como
   fondo se comporta mejor y el texto no compite con ella.

   La section NO se sale del contenedor: ocupa el mismo ancho que los bloques
   de de abajo (el div#main de parts.js aporta el max-width y el padding).

   El webp va primero en el image-set() y el jpeg detras como red de seguridad:
   178 KB el webp contra 226 KB del jpeg, y el jpeg es el propio fichero de
   partida asi que no ocupa espacio extra.

   OJO con el ../../ del url(): una url() de CSS se resuelve contra el
   FICHERO DE ESTILOS, no contra la pagina, y este css vive en /assets/css/
   con las imagenes en /img/. Con "img/banner.webp" se pedia
   /assets/css/img/banner.webp y salia un 404. La ruta relativa aguanta
   ademas que la web cuelgue de un subdirectorio.

   El alto ya no sale de un aspect-ratio con topes: manda el min-height mas el
   padding, y el texto nunca se recorta porque el bloque crece si hace falta.

   OJO: ya no hay width:100vw ni margin:calc(50% - 50vw). El bloque se pide
   al ancho de los de abajo, asi que basta con dejar que herede el ancho del
   .container que lo envuelve (1152px menos sus 20px de padding a cada lado).
   Por eso el radio y el overflow:hidden ya no son cosmeticamente opcionales:
   sin ellos la foto se sale de las esquinas de la caja. */
.hero {
    position: relative;
    margin-top: 24px;
    isolation: isolate;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background-color: #0f1b3d;
    /* Tres formatos en cadena, el navegador se queda con el primero que
       entienda. El AVIF va primero porque es el que de verdad recorta: 83 KB
       con la misma fidelidad que el webp a 213 KB, y es el que ve practicamente
       todo el mundo. El webp queda para Safari 15 y anteriores, que es lo
       unico que se ha quedado sin AVIF, y el jpeg para lo que no entienda de
       webp, que ya es practicamente nada.

       Los dos ultimos bajan de tamano a proposito porque ya no son el camino
       normal: el webp baja a q75 y el jpeg a 1200 px. El AVIF, que es el
       que se ve casi siempre, va a tamano completo.

       El ?v= no es opcional en ninguno: la foto se regenera manteniendo los
       nombres, asi que sin esto el navegador seguiria sacando del disco la
       version anterior aunque el CSS sea nuevo. */
    background-image: image-set(
        url("../../img/banner.avif?v=9.32") type("image/avif"),
        url("../../img/banner.webp?v=9.32") type("image/webp"),
        url("../../img/banner.jpeg?v=9.32") type("image/jpeg")
    );
    background-size: cover;
    /* "center" a proposito. Con el banner de 1600x912 la caja 1112x440 es mas
       ancha que la foto (2.53 contra 1.754), asi que cover recorta en
       vertical: escalada al ancho queda a 1112x634, con 194px de desborde que
       "center" reparte a partes iguales, 97 arriba y 97 abajo. El logo de la
       esquina superior derecha esta en las filas 182..251, o sea por debajo
       de las 139 que se come el recorte, asi que se ve sin tocar nada.

       Antes esto era "center 8%" porque el logo de la foto anterior si caia
       por encima del corte. Al volver al banner original el ajuste sobra y
       ademas descuadraba el recorte (16px arriba contra 178 abajo), asi que
       se ha revertido. Si algun dia se cambia la foto y el logo vuelve a
       quedar tapado, el 8% es un porcentaje DEL DESBORDE, no de la imagen,
       y sube la foto al bajar el numero:
         visible_arranca_en_fila = Y% * 194 / (1112/1.754)
       En movil da igual: alli la caja es mas alta que ancha, cover recorta en
       horizontal y no queda desborde vertical que repartir. */
    background-position: center;
    background-repeat: no-repeat;
    min-height: 440px;
    display: flex;
    align-items: center;
    padding: 64px 56px;
}

/* El velo y el brillo. Al no haber tarjeta, el velo es lo unico que sostiene
   el contraste del texto, asi que va mas cargado que antes: la foto es muy
   oscura de por si (brillo medio 21/255, percentil 90 en 45) pero tiene
   focos claros repartidos (percentil 99 en 134) y el titular en blanco
   necesita el suelo muy abajo.

   El degradado va a 100deg y denso a la izquierda, que es donde se apoya el
   texto, para que la parte derecha de la foto se vea casi limpia. La ultima
   parada baja a .30 porque el brillo de las focos del fondo es justo lo que
   hace legible el lado derecho en vez de tapar la foto entera.

   El radial de arriba es el azul electrico del diseno: al 18% y sin difuminar
   mucho, solo insinua la esquina. */
.hero-shade {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 58% 76% at 86% 6%, rgba(53, 195, 243, .18) 0%, rgba(53, 195, 243, 0) 62%),
        linear-gradient(100deg, rgba(8, 16, 36, .88) 0%, rgba(8, 16, 36, .80) 30%, rgba(8, 16, 36, .55) 62%, rgba(8, 16, 36, .32) 100%);
}

/* El contenedor del texto. Sin fondo, sin borde y sin sombra: esto ya no es
   una tarjeta, solo el sitio donde vive el texto y donde se decide cuanto
   mide. El max-width de 620px es lo que evita que el titular se estire
   hacia la foto limpia de la derecha y lo deja con un ritmo legible. */
.hero-body {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 620px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
}

/* .hero-card, .hero-bg, .hero-bg-mobile y .hero-text ya no se usan: el texto
   vive en .hero-body directamente sobre la foto. .hero-overlay sigue
   notwithstanding por si algun dia hace falta. */
.hero-card,
.hero-bg,
.hero-bg-mobile,
.hero-text,
.hero-overlay {
    display: none;
}

/* El logo de la liga sustituye al chip de temporada. Es el <picture> entero
   el que lleva la clase, no el <img>: asi el navegador les pone a los dos el
   mismo ancho y no hay forma de que se descuadren si elige el webp en lugar
   del png.

   Este logo es vertical (emblema arriba, wordmark abajo, proporcion 1.64), no
   una franja como el anterior, asi que la medida va por el ancho y no por la
   altura: a 180px de ancho el emblema queda a 110px de alto, que es lo que
   cabe sin empujar el titular fuera del encuadre. El tope de 190px evita que
   en pantallas anchas se coma la mitad del hero.

   El recorte del png original no esta en el fichero: se corta al generar,
   porque si se dejara el logo se veria un margen transparente alrededor. */
.hero-logo {
    display: block;
    width: clamp(132px, 15vw, 190px);
    height: auto;
}

/* El <img> va con display:block a proposito: en linea deja debajo el hueco de
   la linea base, que en un bloque de altura calculada es un escalon visible
   entre el logo y el titular. El width/height del HTML reserva el hueco
   mientras carga, asi que esto no produce salto. */
.hero-logo img {
    display: block;
    width: 100%;
    height: auto;
}

/* El titular. Barlow Condensed a 800 es la cara mas pesada que hay cargada
   (solo 700 y 800 en el link de Google Fonts), y el clamp sube el tope a
   72px porque ahora el titular es corto y solo le compite el boton. */
.hero-title {
    max-width: 20ch;
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(40px, 6.4vw, 72px);
    font-weight: 800;
    line-height: .95;
    letter-spacing: .5px;
    text-transform: uppercase;
    /* balance reparte las lineas del titular en vez de dejar una suelta y
       corta, que es lo que pasa al repartir por ancho fijo. */
    text-wrap: balance;
    color: #fff;
}

/* El subtitulo es el mismo texto en un tono mas claro y mas pequeno, para
   que el h1 mande sin necesitar un segundo color de titulo. */
.hero-sub {
    max-width: 46ch;
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(17px, 2vw, 22px);
    font-weight: 700;
    letter-spacing: 2.2px;
    line-height: 1.25;
    text-transform: uppercase;
    color: #a9c9e8;
}

/* Email y telefono justo encima del boton. No reutiliza .footer-contact a
   proposito: aquella lista trae un ul con li, padding y separadores pensados
   para el pie, y arrastrarla al hero meteria bordes y sangrias que aqui no
   existen. Aqui es una fila de dos enlaces planos.

   El color es el mismo blanco del titular, no el azul electrico del chip que
   habia antes: sobre la foto, un texto claro a 86% se lee sin needing un
   borde, y los iconos si van en --brand-glow para que se separen del texto
   sin gritar. */
.hero-contact {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 22px;
    margin-top: 2px;
}

.hero-contact-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .4px;
    line-height: 1.2;
    color: rgba(255, 255, 255, .86);
    text-decoration: none;
    transition: color .18s ease;
}

.hero-contact-link:hover,
.hero-contact-link:focus-visible {
    color: #fff;
}

.hero-contact-link .icon {
    flex: 0 0 auto;
    color: var(--brand-glow);
}

/* En movil los dos enlaces se apilan centrados, porque a una columna el
   correo (28 caracteres) no cabe junto al telefono. min-width:0 + el permitir
   el corte es lo que evita que el correo desborde la caja a 320px en vez de
   bajar de linea. El bloque entero esta en la seccion movil del final, junto
   al resto de reglas del hero. */

.hero-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 4px;
}

/* El hover pedido: cambio de brillo, no de color, y transicion corta. Se
   limita a .hero-cta para no tocar el comportamiento del resto de botones
   .btn-primary de la web.

   OJO con el filter: .btn solo transiciona transform/background/color/
   border-color/box-shadow, asi que brightness() se aplicaria de golpe. Hay que
   añadir filter a la lista o el cambio de brillo no se suaviza. */
.hero-cta .btn {
    transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}

.hero-cta .btn-primary:hover {
    filter: brightness(1.12) saturate(108%);
    transform: translateY(-1px);
    box-shadow: 0 18px 34px -14px rgba(31, 111, 235, .95);
}

/* ==================== BOTONES ==================== */

.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 26px;
    border-radius: var(--radius-pill);
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    text-decoration: none;
    transition: transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.btn-primary {
    background: var(--gradient-brand);
    color: #fff;
    box-shadow: 0 14px 30px -14px rgba(31, 111, 235, .9);
}

.btn-primary:hover {
    color: #fff;
    transform: scale(1.02);
}

.btn-outline {
    background: transparent;
    border: 1px solid rgba(31, 111, 235, .6);
    color: var(--brand-glow);
}

.btn-outline:hover {
    background: var(--brand-soft);
    color: var(--brand-glow);
    border-color: var(--brand);
}

.btn-secondary {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--muted);
    font-family: var(--font-body);
    font-size: 14px;
    letter-spacing: 0;
}

.btn-secondary:hover {
    background: var(--surface-2);
    color: var(--text);
}

/* ==================== SUPERFICIES / TARJETAS ==================== */

.surface-card, .card {
    background: var(--gradient-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 28px;
}

/* Misma tarjeta para los contenedores heredados */
.box {
    background: var(--gradient-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.box .inner {
    padding: 24px;
    border-radius: var(--radius);
}

/* Banner publicitario a lo ancho (bajo la clasificación) */
.swiper-ad {
    width: 100%;
    height: 340px;
    margin: 32px 0 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.swiper-ad .swiper {
    width: 100%;
    height: 100%;
}

.swiper-ad .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
}

.swiper-ad .swiper-slide a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.swiper-ad .swiper-slide img {
    display: block;
    max-width: 100%;
    max-height: 300px;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* En la portada el slider es el unico contenido de su tarjeta: la tarjeta
   centra el slider en vertical y este ocupa el 90% de su altura. Las
   imagenes vuelven a su tamano natural (regla base .swiper-ad), centradas. */

/* Sin min-width:0 un elemento ancho (el swiper con sus slides) hace crecer el
   track de la columna hasta su minimo de contenido y el contenedor se realimenta
   hasta desbordar la pantalla (millones de px). Esto deja la columna a su fr. */
.home-section-grid > * {
    min-width: 0;
}

.home-section .surface-card.swiper-card {
    display: flex;
    align-items: center;
}

.home-section .surface-card > .swiper-ad {
    margin: 0;
    height: 90%;
}

.home-section .surface-card > .swiper-ad .swiper,
.home-section .surface-card > .swiper-ad .swiper-wrapper,
.home-section .surface-card > .swiper-ad .swiper-slide {
    min-width: 0;
}

/* En la portada el contenedor solo mide el 90% de la tarjeta, asi que el
   max-height:300px base dejaria el logo sobresaliendo y recortado. Se limita
   al 100% del contenedor conservando la proporcion (no se estira). */
.home-section .surface-card > .swiper-ad .swiper-slide img {
    max-height: 100%;
}

.full-row {
    background: var(--gradient-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
    margin-bottom: 24px;
    box-shadow: var(--shadow);
}

.inner-scroll {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ==================== PORTADA: SECCIONES ==================== */

.home-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 28px 0 48px;
}

.home-section {
    margin-top: 24px;
}

.home-section h2 {
    font-size: 24px;
    margin: 0 0 4px;
}

/* Subtítulos de tarjeta en portada: tamaño uniforme (Ges Seguros, noticias, contactos).
   Los títulos de documento quedan fuera a proposito: los lleva su propia regla
   .doc-card .doc-title mas abajo, a 15px y sin negrita. */
.news-card h3,
.sponsor-card h3,
.contact-aside h3 {
    font-size: 18px;
}

.home-section-grid {
    display: grid;
    gap: 24px;
}

@media (min-width: 1024px) {
    .home-section-grid.two-70-30 { grid-template-columns: 1.4fr 1fr; }
    .home-section-grid.two-50 { grid-template-columns: 1fr 1fr; }
    .home-section-grid.four { grid-template-columns: repeat(4, 1fr); }
}

/* Documentos (tarjetas con icono) */
.doc-grid {
    display: grid;
    gap: 12px;
    margin-top: 20px;
}

@media (min-width: 640px) {
    .doc-grid { grid-template-columns: 1fr 1fr; }
}

/* Con 3 documentos la tercera queda sola en la fila de abajo. Ocupar el ancho
   completo se lee como intencion; si se deja en su columna parece un fallo. */
@media (min-width: 640px) {
    .doc-grid .doc-card:nth-child(3):last-child {
        grid-column: 1 / -1;
    }
}

.doc-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--chip);
    text-decoration: none;
    transition: background .2s ease, border-color .2s ease;
}

.doc-card:hover {
    background: var(--surface-2);
    border-color: rgba(31, 111, 235, .6);
}

.doc-card .doc-icon {
    width: 40px;
    height: 40px;
    flex: none;
    border-radius: var(--radius-sm);
    background: var(--brand-soft);
    color: var(--brand-glow);
    display: grid;
    place-items: center;
}

.doc-card .doc-title {
    display: block;
    color: var(--text);
    /* font-weight: 600; */
    font-size: 15px;
    line-height: 1.3;
}

.doc-card .doc-desc {
    display: block;
    color: var(--muted);
    font-size: 13px;
    margin-top: 3px;
}

/* Colaboradores (aside) */
.sponsor-card {
    margin-top: 16px;
    border: 1px solid var(--border);
    background: var(--chip);
    border-radius: var(--radius);
    padding: 20px;
    text-align: center;
}

.sponsor-card h3 {
    font-size: 18px;
    margin: 0 0 2px;
}

.sponsor-card p {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 14px;
}

.sponsor-card .btn-outline {
    margin-top: 16px;
}

/* Premios en metálico */
.premios {
    display: grid;
    gap: 16px;
    margin-top: 20px;
}

@media (min-width: 640px) {
    .premios { grid-template-columns: repeat(3, 1fr); }
}

.premio {
    border: 1px solid var(--border);
    background: var(--chip);
    border-radius: var(--radius);
    padding: 20px;
    text-align: center;
}

.premio-monto {
    display: block;
    font-family: var(--font-display);
    font-size: 40px;
    font-weight: 800;
    line-height: 1;
    background: var(--gradient-brand);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.premio-label {
    display: block;
    margin-top: 8px;
    color: var(--muted);
    font-size: 14px;
}

.premio-nota {
    margin: 16px 0 0;
    color: var(--muted);
    font-size: 12.5px;
    line-height: 1.5;
}

/* Nota destacada (ascensos/copa) */
.note-box {
    margin-top: 16px;
    border: 1px solid var(--border);
    background: var(--chip);
    border-radius: var(--radius);
    padding: 16px;
    font-size: 12.5px;
    color: var(--muted);
    line-height: 1.55;
}

/* Nuestras competiciones (4 tarjetas con icono) */
.comp-cards {
    display: grid;
    gap: 16px;
    margin-top: 20px;
}

@media (min-width: 640px) {
    .comp-cards { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1024px) {
    .comp-cards { grid-template-columns: repeat(4, 1fr); }
}

.comp-card {
    background: var(--gradient-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 24px;
    text-decoration: none;
    transition: transform .2s ease, border-color .2s ease;
}

.comp-card:hover {
    transform: translateY(-4px);
    border-color: rgba(31, 111, 235, .6);
}

.comp-card .comp-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-sm);
    background: var(--brand-soft);
    color: var(--brand-glow);
    display: grid;
    place-items: center;
}

.comp-card h3 {
    margin: 16px 0 0;
    font-size: 20px;
}

.comp-card p {
    margin: 6px 0 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.5;
}

/* Galería de trofeos */
.gal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.gal-grid {
    display: grid;
    gap: 16px;
    margin-top: 20px;
}

@media (min-width: 640px) {
    .gal-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
    .gal-grid { grid-template-columns: repeat(3, 1fr); }
}

.gal-card {
    border-radius: var(--radius);
    border: 1px solid var(--border);
    overflow: hidden;
    background: var(--chip);
}

.gal-card img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    display: block;
    transition: transform .3s ease;
}

.gal-card:hover img {
    transform: scale(1.04);
}

.gal-card figcaption {
    padding: 12px 16px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text);
}

/* ==================== LISTAS DE DATOS (goleadores, sanciones) ==================== */

.list-1, .list-2, .list-4 {
    width: 100%;
    overflow: visible;
}

.list-1 li, .list-2 li {
    background: transparent;
    border-top: none;
    border-right: none;
    border-bottom: 1px solid rgba(120, 150, 190, .16);
    border-left: none;
    padding: 14px 6px;
}

.list-1 li:last-child, .list-2 li:last-child {
    border-bottom: none;
}

.list-1 li a, .list-2 li a {
    text-decoration: none;
}

.list-1 li p, .list-2 li p {
    color: var(--muted) !important;
    padding: 0 !important;
    line-height: 1.5 !important;
    font-size: 1em !important;
}

.list-4 li {
    background: var(--chip);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
    margin-bottom: 16px;
}

.list-4 li:last-child {
    margin-bottom: 0;
}

.list-full {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Clases de los JS */
.whitebold {
    color: var(--text);
    font-weight: 700;
}

.whiteboldlink {
    display: block;
    font-size: 1.15em;
    font-weight: 700;
    color: #fff;
}

/* ==================== SUBMENU: LISTADO DE LIGAS ==================== */

#lstdiv {
    width: 100%;
}

#lstdiv h3:first-child {
    margin-top: 4px;
}

#lstdiv h3 {
    position: relative;
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #fff;
    margin: 28px 0 20px;
}

#lstdiv h3.sec-title .sec-title-main {
    font-size: 1.3em;
    letter-spacing: 1px;
}

/* Raya de acento degradada bajo los títulos de modalidad */
#lstdiv h3.sec-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 70px;
    height: 3px;
    border-radius: 2px;
    background: var(--brand-glow);
    box-shadow: 0 0 14px rgba(31, 174, 235, .5);
}

#lstdiv ul.list-2 {
    list-style: none;
    margin: 0 0 18px;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 12px;
}

#lstdiv ul.list-2 li {
    background: transparent;
    border: none;
    padding: 0;
}

#lstdiv ul.list-2 .whiteboldlink {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    height: 100%;
    padding: 15px 18px;
    background: linear-gradient(180deg, rgba(28, 48, 76, .9), rgba(18, 32, 52, .92));
    border: 1px solid var(--border);
    border-left: 3px solid var(--brand-glow);
    border-radius: 14px;
    color: #fff;
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .3px;
    text-transform: uppercase;
    text-decoration: none;
    transition: transform .18s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

#lstdiv ul.list-2 .whiteboldlink::after {
    content: "";
    flex: none;
    width: 9px;
    height: 9px;
    border-right: 2px solid var(--brand-glow);
    border-top: 2px solid var(--brand-glow);
    transform: rotate(45deg);
    transition: transform .18s ease;
}

#lstdiv ul.list-2 .whiteboldlink:hover {
    transform: translateY(-2px);
    background: linear-gradient(180deg, rgba(32, 48, 84, .95), rgba(21, 40, 66, .96));
    border-color: rgba(53, 195, 243, .55);
    box-shadow: 0 16px 30px -18px rgba(31, 111, 235, .75);
}

#lstdiv ul.list-2 .whiteboldlink:hover::after {
    transform: rotate(45deg) translate(2px, -2px);
}

/* COPA: sección aparte con acento dorado */
#lstdiv ul.list-2 .cup-link {
    border-left-color: #ffc44d;
}

#lstdiv ul.list-2 .cup-link::after {
    border-right-color: #ffc44d;
    border-top-color: #ffc44d;
}

#lstdiv ul.list-2 .cup-link:hover {
    border-color: rgba(255, 196, 77, .45);
    box-shadow: 0 16px 30px -18px rgba(255, 196, 77, .65);
}

/* ==================== HISTÓRICO DE TEMPORADAS ==================== */

.hist-intro {
    margin: 0 0 4px;
    color: var(--muted);
    font-size: 14px;
}

#lstdiv ul.list-2 .whiteboldlink .hist-now {
    margin: 0 14px 0 auto;
    padding: 3px 10px;
    background: var(--brand-glow);
    border-radius: 999px;
    color: #0c2a46;
    font-family: var(--font-base);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    white-space: nowrap;
}

.lm-season {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
    padding: 6px 14px 6px 12px;
    border: 1px solid rgba(255, 196, 77, .35);
    border-left: 3px solid #ffc44d;
    border-radius: 999px;
    background: rgba(255, 196, 77, .08);
    color: #ffcf7a;
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.orangeboldlink {
    display: block;
    font-size: 1.15em;
    font-weight: 700;
    color: var(--brand-glow);
}

.req {
    font-size: 1.25em;
    font-weight: 700;
    color: #ffc44d;
}

.pos-gold { color: #ffc44d; font-weight: 800; }
.pos-silver { color: #c9d4e0; font-weight: 700; }
.pos-bronze { color: #d58a5b; font-weight: 700; }

/* Clasificación: números alineados y filas ascendentes/descendentes */
.tbl-clasif td {
    font-variant-numeric: tabular-nums;
    letter-spacing: .3px;
    vertical-align: middle;
}

.tbl-clasif td:nth-child(2) a {
    display: inline-block;
    font-weight: 700;
    color: #fff;
    vertical-align: middle;
}

.tbl-clasif td:nth-child(2) a:hover {
    color: var(--brand-glow);
}

/* Escudos compartidos por calendario, clasificación y ficha de equipo. */
.team-shield {
    display: inline-block;
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    object-fit: contain;
    vertical-align: middle;
    margin-right: 7px;
}

.team-shield-calendar {
    width: 48px;
    height: 48px;
}

.team-shield-classification {
    width: 42px;
    height: 42px;
}

.tbl-cal td:nth-child(2) .team-shield-calendar {
    margin-left: 5px;
    margin-right: 0;
}

.tbl-cal td:nth-child(2) .whiteboldlink {
    display: inline;
}

.tbl-cal td:nth-child(6) .whiteboldlink {
    display: inline;
}

.tbl-cal td:nth-child(6) .team-shield-calendar {
    margin-left: 0;
    margin-right: 5px;
}

/* En escritorio el nombre y el escudo forman un bloque único: ambos quedan
   centrados en la misma línea que el marcador, aunque el nombre parta en dos. */
.calendar-team-side {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    gap: 5px;
    line-height: 1.15;
    vertical-align: middle;
}

.calendar-team-side-local {
    justify-content: flex-end;
}

.calendar-team-side-visit {
    justify-content: flex-start;
}

.calendar-team-side > a,
.calendar-team-side > span:not(.team-shield) {
    min-width: 0;
    overflow-wrap: anywhere;
}

.calendar-team-side .team-shield-calendar {
    flex: 0 0 48px;
    margin: 0;
}

.tbl-clasif td:nth-child(2) {
    white-space: nowrap;
}

.tbl-clasif td:first-child,
.tbl-clasif th:first-child {
    text-align: center;
}

/* Mensaje de ascensos/descensos bajo la clasificación (temporada actual) */
.asc-desc-info {
    margin-top: 10px;
    padding: 8px 12px;
    border-left: 3px solid var(--brand-glow);
    background: rgba(53, 195, 243, .07);
    border-radius: 6px;
    font-size: 12.5px;
    line-height: 1.4;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.asc-desc-info .asc-desc-line {
    margin: 0;
    font-weight: 700;
    color: #fff;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 3px 8px;
}

.asc-desc-up {
    color: #6ee7b7;
}

.asc-desc-down {
    color: #fda4af;
}

.asc-desc-sep {
    color: rgba(255, 255, 255, .4);
    font-weight: 400;
}

.asc-desc-info .asc-desc-note {
    margin: 0;
    font-size: 11.5px;
    color: rgba(255, 255, 255, .55);
}

/* Clasificación en móvil: POS y EQUIPO fijas, resto con scroll horizontal */
@media (max-width: 640px) {
    #divclasif {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .table.tbl-clasif {
        width: auto;
        max-width: none;
        min-width: 480px;
        table-layout: fixed;
        border-collapse: separate;
        border-spacing: 0;
        overflow: visible;
    }

    .table.tbl-clasif td,
    .table.tbl-clasif th {
        padding: 11px 4px;
        white-space: nowrap;
    }

    .table.tbl-clasif th {
        text-align: center;
    }

    .table.tbl-clasif td:nth-child(n+3) {
        text-align: center;
    }

    /* En móvil cada columna de datos ocupa el ancho visible, así se ve una
       por una (PT -> JU -> GAN -> ...) según se hace scroll lateral */
    .table.tbl-clasif td:nth-child(n+3),
    .table.tbl-clasif th:nth-child(n+3) {
        width: calc(100vw - 260px);
        min-width: 90px;
    }

    .table.tbl-clasif td:first-child,
    .table.tbl-clasif th:first-child {
        position: sticky;
        left: 0;
        width: 40px;
        min-width: 40px;
        max-width: 40px;
        z-index: 3;
        background-color: #10203a !important;
        text-align: center;
    }

    .table.tbl-clasif td:nth-child(2),
    .table.tbl-clasif th:nth-child(2) {
        position: sticky;
        left: 40px;
        width: 180px;
        min-width: 180px;
        max-width: 180px;
        z-index: 3;
        background-color: #10203a !important;
        text-align: left;
        padding-left: 14px;
        box-shadow: 6px 0 10px -6px rgba(0, 0, 0, .55);
    }

    .table.tbl-clasif thead th:first-child,
    .table.tbl-clasif thead th:nth-child(2) {
        background-color: #10203a !important;
        text-align: center;
    }

.table.tbl-clasif td:nth-child(2) a {
        color: #fff;
    }

    /* Cuerpo con fondos solidos por fila: al hacer scroll no se ven
       columnas pasar por debajo (ni bajo el nombre del equipo) */
    .table.tbl-clasif tbody tr td {
        background-color: #10203a !important;
    }

    .table.tbl-clasif tbody tr.row-up td {
        background-color: #14403a !important;
    }

    .table.tbl-clasif tbody tr.row-down td {
        background-color: #4a2833 !important;
    }

    /* Fila del equipo actual en móvil: tinte dorado sobre el fondo fijo */
    .table.tbl-clasif tbody tr.row-this td {
        background-color: rgba(255, 196, 77, .16) !important;
    }

    /* En móvil las celdas fijas (POS + nombre) de la fila del equipo actual
       deben quedar opacas: si no, las columnas se ven por debajo al hacer
       scroll lateral */
    .table.tbl-clasif tbody tr.row-this td:first-child,
    .table.tbl-clasif tbody tr.row-this td:nth-child(2) {
        background-color: #363a3d !important;
    }

    /* Celdas fijas siempre opacas también en hover (tras tapar una fila en
       móvil el hover se queda activo y con fondos traslúcidos) */
    .table.tbl-clasif tbody tr.row-up:hover td:first-child,
    .table.tbl-clasif tbody tr.row-up:hover td:nth-child(2),
    .table.tbl-clasif tbody tr.row-up td:first-child,
    .table.tbl-clasif tbody tr.row-up td:nth-child(2) {
        background-color: #14403a !important;
    }

    .table.tbl-clasif tbody tr.row-down:hover td:first-child,
    .table.tbl-clasif tbody tr.row-down:hover td:nth-child(2),
    .table.tbl-clasif tbody tr.row-down td:first-child,
    .table.tbl-clasif tbody tr.row-down td:nth-child(2) {
        background-color: #4a2833 !important;
    }

    .table.tbl-clasif tbody tr.row-this:hover td:first-child,
    .table.tbl-clasif tbody tr.row-this:hover td:nth-child(2) {
        background-color: #363a3d !important;
    }

    .table.tbl-clasif tbody tr:hover td:first-child,
    .table.tbl-clasif tbody tr:hover td:nth-child(2) {
        background-color: #10203a !important;
    }

    /* Nombre a la derecha del escudo, centrado en la mitad del escudo, y
       envuelto en varias líneas dentro de la columna fija (si un nombre no
       cabe se recorta por overflow, sin tres puntos). */
    .table.tbl-clasif tbody tr td:nth-child(2) {
        display: flex;
        align-items: center;
        overflow: hidden;
        white-space: normal;
    }

    .table.tbl-clasif tbody tr td:nth-child(2) a {
        min-width: 0;
        overflow-wrap: break-word;
    }
}

.table tbody tr.row-up td {
    background-color: rgba(45, 212, 191, .14) !important;
}

.table tbody tr.row-down td {
    background-color: rgba(244, 63, 94, .14) !important;
}

.table tbody tr.row-up:hover td {
    background-color: rgba(45, 212, 191, .20) !important;
}

.table tbody tr.row-down:hover td {
    background-color: rgba(244, 63, 94, .20) !important;
}

/* Selector de jornada en calendario */
.jor-bar {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    margin: 0 0 18px;
}

.jor-bar select {
    padding: 10px 34px 10px 16px;
    border-radius: 12px;
    border: 1px solid rgba(120, 150, 190, .30);
    background: rgba(10, 18, 32, .85);
    color: #fff;
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .7px;
    text-transform: uppercase;
    cursor: pointer;
    background-image: linear-gradient(45deg, transparent 50%, #ffc44d 50%), linear-gradient(135deg, #ffc44d 50%, transparent 50%);
    background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    appearance: none;
    -webkit-appearance: none;
}

.jor-bar select:focus-visible {
    outline: 2px solid var(--brand-glow);
    outline-offset: 2px;
}
/* Sanciones bajo el calendario: bloques a ancho completo */
.sanc-box {
    width: 100%;

    padding: 20px;
    margin-top: 28px;
}

/* Bloques de sanciones: separados del listado de resultados */
.cal-sanc {
    margin-top: 28px;
}

/* MVP por partido: celda en la tabla de resultados y chip en tarjetas móviles */
.cal-mvp-cell {
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
}

.cal-mvp-cell img,
.cc-mvp img {
    width: 52px;
    height: 68px;
    object-fit: cover;
    object-position: top center;
    border: 1px solid rgba(120, 150, 190, .35);
    border-radius: 6px;
    box-shadow: 0 4px 12px -4px rgba(0, 0, 0, .6);
    vertical-align: middle;
}

.cal-mvp-cell:empty {
    color: var(--muted);
}

.cal-mvp-cell:not(:empty) {
    white-space: nowrap;
}

.cal-mvp-cell .cal-mvp-license {
    display: inline-block;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    margin-left: 10px;
    white-space: normal;
}

/* Dentro de la burbuja el texto usa la misma medida que campo y árbitro
   (ver .cc-meta-val); el flex gap ya pone el espacio respecto al icono. */
.cc-mvp .cal-mvp-license {
    display: inline-block;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    margin-left: 0;
    white-space: nowrap;
    /* Igual que el resto de los globos para que el trofeo quede a la misma
       altura que el texto de campo y arbitro. */
    line-height: 12px;
}

.cc-mvp-ico {
    color: #ffc44d;
}

.cc-mvp img {
    width: 42px;
    height: 54px;
}

/* El mensaje "Sin sanciones" centrado dentro de su caja */
.sanc-holder {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 150px;
}

#content .sanc-holder .empty-state {
    padding: 0;
}

.sanc-holder .table {
    width: 100%;
}

.sanc-box > h3 {
    margin: 0 0 12px;
    font-size: 20px;
    letter-spacing: .05em;
}

.sanc-box .table {
    margin-top: 4px;
}

.sanc-box .table tbody td:first-child {
    font-weight: 600;
    color: #fff;
}

/* Tabla de jugadores sancionados */
.tbl-sanc.tbl-pl {
    width: 100%;
    table-layout: fixed;
}

.tbl-sanc.tbl-pl th,
.tbl-sanc.tbl-pl td {
    vertical-align: middle;
}

/* El estado vacío ocupa y centra el mismo espacio que una tarjeta de equipos. */
.tbl-sanc.tbl-pl td.empty-state {
    width: auto;
    height: 150px;
    text-align: center;
    vertical-align: middle;
}

.tbl-sanc td {
    font-variant-numeric: tabular-nums;
    letter-spacing: .3px;
}

/* Tabla de jugadores sancionados: cada columna conserva la misma alineación
   en cabecera y contenido. */
.tbl-sanc.tbl-pl td:nth-child(1),
.tbl-sanc.tbl-pl th:nth-child(1),
.tbl-sanc.tbl-pl td:nth-child(2),
.tbl-sanc.tbl-pl td:nth-child(4),
.tbl-sanc.tbl-pl td:nth-child(5),
.tbl-sanc.tbl-pl th:nth-child(1),
.tbl-sanc.tbl-pl th:nth-child(2),
.tbl-sanc.tbl-pl th:nth-child(4),
.tbl-sanc.tbl-pl th:nth-child(5) {
    text-align: center;
    white-space: nowrap;
}

.tbl-sanc.tbl-pl td:nth-child(3),
.tbl-sanc.tbl-pl th:nth-child(3) {
    text-align: left;
}

.tbl-sanc.tbl-pl th:nth-child(1),
.tbl-sanc.tbl-pl td:nth-child(1) { width: 64px; }
.tbl-sanc.tbl-pl th:nth-child(2) { width: 20%; }
.tbl-sanc.tbl-pl th:nth-child(3) { width: 36%; }
.tbl-sanc.tbl-pl th:nth-child(4),
.tbl-sanc.tbl-pl th:nth-child(5) { width: 18%; }

.tbl-sanc.tbl-pl .sanc-photo {
    width: 64px;
    padding: 4px 6px;
}

.tbl-sanc.tbl-pl .sanc-photo img {
    width: 48px;
    height: 62px;
    object-fit: cover;
    object-position: top center;
    border: 1px solid rgba(120, 150, 190, .35);
    border-radius: 6px;
    box-shadow: 0 4px 12px -4px rgba(0, 0, 0, .6);
    display: block;
    margin: 0 auto;
}

.tbl-sanc.tbl-eq td:nth-child(2),
.tbl-sanc.tbl-eq th:nth-child(2) {
    text-align: center;
}

/* Sancion larga: comprimida con elipsis, se expande al pasar el raton */
/* Sanción larga: texto recortado y botón "más…" que amplía (pc y móvil) */
.tbl-sanc.tbl-eq .enc-name {
    display: inline;
}

.tbl-sanc.tbl-eq .enc-name + .enc-name::before {
    content: ' - ';
    white-space: pre;
}

/* Equipos sancionados: tarjeta con los mismos acabados que jugadores */
.tbl-sanc.tbl-eq {
    width: 100%;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.tbl-sanc.tbl-eq thead th {
    padding: 12px 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
    background: rgba(120, 150, 190, .08);
    border-bottom: 1px solid rgba(120, 150, 190, .2);
}

.tbl-sanc.tbl-eq tbody td {
    padding: 10px 12px;
    vertical-align: middle;
}

.tbl-sanc.tbl-eq tbody tr:last-child td {
    border-bottom: none;
}

.tbl-sanc.tbl-eq td:first-child {
    font-weight: 700;
    font-size: 14px;
    letter-spacing: .4px;
    color: #fff;
    white-space: nowrap;
}

.tbl-sanc.tbl-eq td:first-child a {
    font-weight: 800;
    color: var(--brand-glow);
    text-decoration: none;
}

.tbl-sanc.tbl-eq .j-chip {
    display: inline-block;
    padding: 2px 12px;
    border-radius: 999px;
    background: var(--chip);
    border: 1px solid rgba(120, 150, 190, .4);
    color: #fff;
    font-size: 12.5px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: .6px;
    line-height: 1.5;
    white-space: nowrap;
}

.tbl-sanc.tbl-eq td:nth-child(3),
.tbl-sanc.tbl-eq th:nth-child(3) {
    text-align: left;
    white-space: nowrap;
    color: rgba(255, 255, 255, .8);
    font-variant-numeric: tabular-nums;
    letter-spacing: .3px;
}

.tbl-sanc.tbl-eq td:nth-child(4) {
    text-align: left;
    color: var(--muted);
    font-size: 13.5px;
    line-height: 1.45;
    overflow-wrap: anywhere;
    white-space: normal;
}

.tbl-sanc th {
    font-size: 12.5px;
    letter-spacing: .08em;
}

.tbl-sanc tbody tr:hover td {
    background: rgba(31, 111, 235, .12);
}

/* ---- Jugadores sancionados: pulido estético ---- */
.cal-sanc .box.sanc-filled {
    background: transparent;
    border: 0;
    box-shadow: none;
    overflow: visible;
}

.sanc-holder.sanc-filled {
    display: block;
    min-height: 0;
}

.tbl-sanc.tbl-pl {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.tbl-sanc.tbl-pl thead th {
    padding: 12px 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
    background: rgba(120, 150, 190, .08);
    border-bottom: 1px solid rgba(120, 150, 190, .2);
}

.tbl-sanc.tbl-pl tbody td {
    padding: 10px;
}

.tbl-sanc.tbl-pl tbody tr:last-child td {
    border-bottom: none;
}

.sanc-lic {
    display: inline-block;
    padding: 3px 14px;
    border-radius: 999px;
    background: var(--chip);
    border: 1px solid var(--border);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: .4px;
    line-height: 1.4;
}

.tbl-sanc.tbl-pl .sanc-photo img {
    width: 54px;
    height: 70px;
    border-radius: 8px;
    border: 1px solid rgba(120, 150, 190, .45);
    box-shadow: 0 8px 18px -8px rgba(0, 0, 0, .85);
}

.empty-sanc {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 150px;
    color: rgba(120, 150, 190, .55);
}

.empty-sanc p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* ===================================================================
   SANCIONES: que se note, sin gritar
   -------------------------------------------------------------------
   Todo cuelga de ".has-sanc", clase que el JS pone en el <article> del
   panel SOLO cuando la tabla viene con filas. Con el panel vacio no se
   aplica nada de este bloque: sigue el estado vacio en gris de siempre.

   El rojo (#ff6b57, el mismo de .flag-roj) se queda en tres sitios y poco
   mas: el subrayado del titulo, el contador, y dentro de la tabla las
   letras del nombre y la chip de la licencia. La primera version de este
   bloque era al reves: wash por fila, franja de 3px, cabecera y todas las
   celdas en rojo, y con una sola fila de sanction ya cargaba demasiado y
   tapaba los datos. Aqui manda lo contrario: la tabla se lee como una tabla
   cualquiera y lo rojo es solo el nombre, que es quien identifica al
   sancionado.
   =================================================================== */

/* Subrayado del titulo: el mismo pelo de 70px de siempre, solo que rojo. */
.cal-sanc .has-sanc .sec-title::after {
    background: #ff6b57;
    box-shadow: 0 0 10px rgba(255, 107, 87, .35);
}

/* Contador junto al titulo. Sin borde, solo fondo suave: informa de cuantos
   hay sin competir con las letras de la tabla. */
.cal-sanc .has-sanc .sanc-count {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: var(--radius-pill);
    background: rgba(255, 107, 87, .12);
    color: #ff9b8a;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .06em;
    line-height: 1.6;
    white-space: nowrap;
    align-self: center;
}

/* Ni marco ni cabecera en rojo a proposito: .tbl-sanc.tbl-eq no tiene borde
   (solo la de jugadores lo tiene, y ese --border neutro se deja como esta),
   asi que tintar el marco de una y no de otra solo haria que las dos tablas
   del panel se vieran distintas entre si. El marco no es lo que tiene que
   avisar de la sancion; las letras de la fila ya lo hacen. */

/* ---- Lo unico rojo dentro de la tabla: las letras ----
   EQUIPO va en la celda 1 de la tabla de equipos y en la celda 3 de la de
   jugadores, que es donde cae porque la 1 es la foto.

   Solo el color del texto: el fondo de la celda se deja como lo pone
   .table-striped, sin tinte rojo. Con el nombre ya en rojo, un lavado detras
   era contenido de mas.

   El enlace hay que nombrarlo tambien en hover: .table-hover devuelve el
   color a azul y el nombre parpadeaba de rojo a azul al pasar el raton. */
.cal-sanc .has-sanc .tbl-sanc.tbl-eq tbody tr td:first-child,
.cal-sanc .has-sanc .tbl-sanc.tbl-pl tbody tr td:nth-child(3) {
    color: #ff6b57;
    font-weight: 700;
}

.cal-sanc .has-sanc .tbl-sanc.tbl-eq tbody tr td:first-child a,
.cal-sanc .has-sanc .tbl-sanc.tbl-eq tbody tr td:first-child a:hover,
.cal-sanc .has-sanc .tbl-sanc.tbl-eq tbody tr:hover > td:first-child a {
    color: #ff6b57;
}

/* LICENCIA del sancionado: la chip pasa a rojo claro. Al ser una sola por
   fila, no carga la tabla como cargaba antes el rojo en todas las celdas. */
.cal-sanc .has-sanc .tbl-sanc.tbl-pl .sanc-lic {
    background: rgba(255, 107, 87, .12);
    border-color: rgba(255, 107, 87, .3);
    color: #ff6b57;
}

/* En movil solo se encoge el contador. Ni wash por fila ni fondo rojo en las
   celdas: el nombre en rojo y la chip de la licencia ya identifican al
   sancionado, y el fondo se queda como lo pinte .table-striped. */
@media (max-width: 640px) {
    .cal-sanc .has-sanc .sanc-count {
        font-size: 11px;
        padding: 1px 8px;
    }
}

/* Tabla de máximos goleadores (diseño moderno) */
.tbl-gol {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.tbl-gol thead th {
    background: var(--surface-2);
    color: var(--muted);
    font-size: 10.5px;
    letter-spacing: .12em;
    text-transform: uppercase;
    border-bottom: 2px solid var(--border);
    white-space: nowrap;
    padding: 12px 14px;
}

.tbl-gol thead th:nth-child(1),
.tbl-gol thead th:nth-child(2),
.tbl-gol thead th:nth-child(n+5) {
    text-align: center;
}

.tbl-gol thead th:nth-child(3),
.tbl-gol thead th:nth-child(4) {
    text-align: left;
}

.tbl-gol tbody tr {
    border-bottom: 1px solid rgba(120, 150, 190, .12);
}

.tbl-gol tbody tr:last-child {
    border-bottom: none;
}

.tbl-gol tbody tr:hover td {
    background: rgba(31, 111, 235, .12);
}

.tbl-gol tbody td {
    padding: 12px 14px;
    border: none;
    vertical-align: middle;
    font-size: 14px;
}

.tbl-gol tbody td:nth-child(1),
.tbl-gol tbody td:nth-child(2),
.tbl-gol tbody td:nth-child(n+5) {
    text-align: center;
}

.tbl-gol tbody td:nth-child(3),
.tbl-gol tbody td:nth-child(4) {
    text-align: left;
}

.tbl-gol .gol-pos {
    color: var(--muted);
    font-weight: 700;
    font-size: 13px;
}

.tbl-gol .gol-photo {
    width: 52px;
    height: 68px;
    object-fit: cover;
    object-position: top center;
    border: 1px solid rgba(120, 150, 190, .35);
    border-radius: 6px;
    box-shadow: 0 4px 12px -4px rgba(0, 0, 0, .6);
    vertical-align: middle;
}

.tbl-gol .gol-name {
    font-weight: 700;
    color: #fff;
    font-size: 14.5px;
    white-space: normal;
}

.tbl-gol .gol-nm,
.tbl-gol .gol-sn {
    display: inline;
    white-space: normal;
    overflow-wrap: anywhere;
}

.tbl-gol .gol-sn::before {
    content: ' ';
    white-space: pre;
}

.tbl-gol .gol-team {
    display: none;
}

.tbl-gol .gol-num {
    color: var(--brand-glow);
    font-weight: 800;
    font-size: 18px;
    font-variant-numeric: tabular-nums;
}

.tbl-gol .gol-gp {
    color: var(--muted);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* Movil: las tablas de sanciones pasan a tarjetas apiladas, el texto se lee entero */
@media (max-width: 640px) {
    .sanc-box {
        padding: 16px;
    }

    .tbl-sanc thead {
        display: none;
    }

    .tbl-sanc,
    .tbl-sanc tbody {
        display: block;
    }

    .tbl-sanc tbody tr {
        display: block;
        border: 1px solid var(--border);
        border-radius: 12px;
        background: var(--surface);
        margin-bottom: 10px;
        padding: 0;
    }

    .tbl-sanc tbody tr:last-child {
        margin-bottom: 0;
    }

    .tbl-sanc tbody td {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 8px;
        width: 100%;
        padding: 5px 0;
        border: none;
        white-space: normal;
        overflow-wrap: anywhere;
        text-align: right;
        color: var(--text);
        font-size: 13.5px;
    }

    .tbl-sanc tbody td::before {
        content: attr(data-label);
        flex: 0 0 36%;
        font-weight: 700;
        text-transform: uppercase;
        font-size: 11px;
        letter-spacing: .05em;
        color: var(--muted);
        text-align: left;
    }

    /* Jugadores sancionados: datos a la izquierda y foto a la derecha. */
    .tbl-sanc.tbl-pl tbody tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 70px;
        column-gap: 12px;
        align-items: center;
        padding: 12px 14px;
        background: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, 0) 55%), var(--surface);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 14px 30px -22px rgba(0, 0, 0, .95);
    }

    .tbl-sanc.tbl-pl .sanc-photo {
        display: flex;
        justify-content: center;
        align-items: center;
        grid-column: 2;
        grid-row: 1 / span 4;
        align-self: center;
        width: auto;
        padding: 0;
    }

    .tbl-sanc.tbl-pl .sanc-photo::before {
        display: none;
    }

    .tbl-sanc.tbl-pl .sanc-photo img {
        width: 58px;
        height: 74px;
        border-radius: 10px;
        border: 1px solid rgba(120, 150, 190, .45);
    }

    .tbl-sanc.tbl-pl td:nth-child(n+2) {
        grid-column: 1;
        align-items: flex-start;
        text-align: left;
        width: auto;
        min-width: 0;
        padding: 8px 0;
    }

    .tbl-sanc.tbl-pl td:nth-child(n+2)::before {
        flex-basis: 42%;
    }

    .tbl-sanc.tbl-pl td:nth-child(4),
    .tbl-sanc.tbl-pl td:nth-child(5) {
        text-align: left;
        white-space: normal;
    }

    .tbl-sanc td.empty-state {
        display: block;
        padding: 22px 12px;
        text-align: center;
    }

    .tbl-sanc.tbl-pl td.empty-state {
        grid-column: 1 / -1;
        width: auto;
        min-height: 150px;
        height: auto;
    }

    .tbl-sanc td.empty-state::before {
        display: none;
    }

    .tbl-sanc.tbl-eq tbody tr {
        padding: 10px 12px;
    }

    .tbl-sanc.tbl-eq tbody td {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        text-align: left;
        gap: 3px;
        padding: 6px 10px;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .tbl-sanc.tbl-eq tbody td::before {
        content: attr(data-label);
        flex: none;
        width: 100%;
        font-weight: 700;
        text-transform: uppercase;
        font-size: 11px;
        letter-spacing: .05em;
        color: var(--muted);
        text-align: left;
    }

    .tbl-sanc.tbl-eq tbody td:first-child {
        padding-top: 4px;
    }

    .tbl-sanc.tbl-eq .j-chip {
        border: none;
        background: transparent;
        padding: 0;
        font-size: 14px;
        color: #fff;
    }

    .tbl-sanc.tbl-eq .enc-name {
        display: block;
    }

    .tbl-sanc.tbl-eq .enc-name + .enc-name::before {
        content: none;
    }

    .sanc-box .table tbody td:first-child,
    .tbl-sanc tbody td:first-child {
        color: #fff;
        font-weight: 600;
        font-size: 14.5px;
    }
}

/* Goleadores en móvil: # / FOTO / JUGADOR fijas y el resto con scroll
   lateral (GOL, P.JUG, G/P), igual que la tabla de clasificación.
   El scroll va en cada panel, no en #divgoleadores: si el contenedor
   con scroll incluye a .rank-nav, la barra de pestañas se arrastra
   junto con la tabla. */
@media (max-width: 640px) {
    #rankGol,
    #rankMvp {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .table.tbl-gol {
        width: auto;
        min-width: 480px;
        max-width: none;
        table-layout: fixed;
        border-collapse: separate;
        border-spacing: 0;
        overflow: visible;
        box-shadow: none;
        background: transparent;
        border: none;
        border-radius: 0;
    }

    .table.tbl-gol td,
    .table.tbl-gol th {
        padding: 12px 4px;
        white-space: nowrap;
        border: none;
        text-align: center;
    }

    /* EQUIPO ya no es columna en móvil: el equipo va debajo del nombre.
       Descartamos esa celda y GOL pasa a ser la primera columna visible. */
    .table.tbl-gol td:nth-child(4),
    .table.tbl-gol th:nth-child(4) {
        display: none;
    }

    /* Columnas de datos que se mueven con el scroll (GOL, P.JUG, G/P).
       Cada una ocupa el ancho visible, así se ven una por una. */
    .table.tbl-gol td:nth-child(n+5),
    .table.tbl-gol th:nth-child(n+5) {
        width: calc(100vw - 250px);
        min-width: 100px;
    }

    .table.tbl-gol tbody tr:first-child td {
        border-top: none;
    }

    /* # fija */
    .table.tbl-gol td:first-child,
    .table.tbl-gol th:first-child {
        position: sticky;
        left: 0;
        width: 40px;
        min-width: 40px;
        max-width: 40px;
        z-index: 3;
        background-color: #10203a !important;
        text-align: center;
    }

    /* FOTO fija */
    .table.tbl-gol td:nth-child(2),
    .table.tbl-gol th:nth-child(2) {
        position: sticky;
        left: 40px;
        width: 50px;
        min-width: 50px;
        max-width: 50px;
        z-index: 3;
        background-color: #10203a !important;
        text-align: center;
    }

    /* JUGADOR fija */
    .table.tbl-gol td:nth-child(3),
    .table.tbl-gol th:nth-child(3) {
        position: sticky;
        left: 90px;
        width: 140px;
        min-width: 140px;
        max-width: 140px;
        z-index: 3;
        background-color: #10203a !important;
        text-align: left;
        padding-left: 10px;
        box-shadow: 6px 0 10px -6px rgba(0, 0, 0, .55);
    }

    .table.tbl-gol thead th:first-child,
    .table.tbl-gol thead th:nth-child(2),
    .table.tbl-gol thead th:nth-child(3) {
        background-color: #10203a !important;
        text-align: center;
    }

    .table.tbl-gol thead th:nth-child(3) {
        text-align: left;
        padding-left: 10px;
    }

    /* Cuerpo con fondos solidos por fila: al hacer scroll no se ven
       columnas pasar por debajo */
    .table.tbl-gol tbody tr td {
        background-color: #10203a !important;
    }

    /* Nombre y equipo del jugador en la columna fija */
    .table.tbl-gol tbody tr td:nth-child(3) {
        overflow: hidden;
    }

    .tbl-gol .gol-nm {
        display: block;
        white-space: normal;
        overflow-wrap: anywhere;
        line-height: 1.2;
    }

    .tbl-gol .gol-sn {
        display: block;
        white-space: normal;
        overflow-wrap: anywhere;
        font-size: 12px;
        font-weight: 600;
        color: var(--muted);
        line-height: 1.2;
        margin-top: 1px;
    }

    .tbl-gol .gol-sn::before {
        content: none;
    }

    .tbl-gol .gol-team {
        display: block;
        white-space: normal;
        overflow-wrap: anywhere;
        font-size: 10.5px;
        line-height: 1.2;
        color: var(--muted);
        margin-top: 2px;
    }

    .tbl-gol .gol-team a {
        color: var(--brand-glow);
        text-decoration: none;
    }

    .tbl-gol .gol-team a:hover {
        text-decoration: underline;
    }

    .tbl-gol .gol-photo {
        width: 48px;
        height: 62px;
    }

    .tbl-gol .gol-pos {
        font-size: 12px;
    }

    .tbl-gol .gol-num {
        font-size: 15px;
    }

    .tbl-gol .gol-gp {
        font-size: 12px;
    }
}

/* Movil: sanciones en listas legacy (division.php / jugador.php / equipo.php)
   neutralizan los anchos fijos en línea y dejan que el texto se lea completo. */
@media (max-width: 640px) {
    #eqsanc li, #plyrsanc li {
        box-sizing: border-box;
        width: 100%;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    #eqsanc li div[style],
    #plyrsanc li div[style] {
        float: none !important;
        width: auto !important;
        height: auto !important;
        max-width: none !important;
    }

    #plyrsanc li img[style] {
        width: 45px !important;
        height: 53px !important;
        margin: 4px 0 0 !important;
    }

    .popeq, .popplyr, .whiteboldlink {
        overflow-wrap: anywhere;
        word-break: break-word;
    }
}

.empty-state {
    color: var(--muted);
    padding: 26px;
    text-align: center;
    margin: 0;
}

/* Equipo en descanso: no es clickable y se diferencia en dorado */
.team-rest {
    color: #ffc44d;
    font-weight: 600;
    letter-spacing: .3px;
}

.btn-doc {
    display: inline-block;
    padding: 11px 22px;
    border-radius: var(--radius-pill);
    background: var(--gradient-brand);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 10px 24px -12px rgba(31, 111, 235, .8);
    transition: transform .2s ease, box-shadow .2s ease;
}

.btn-doc:hover {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 14px 28px -12px rgba(31, 111, 235, .9);
}

/* ==================== TABLAS (clasificaciones, resultados) ==================== */

.table {
    width: 100%;
    min-width: 0;
    border-collapse: separate;
    border-spacing: 0;
    border-radius: var(--radius);
    overflow: hidden;
    font-size: 14px;
    color: var(--text);
}

.table thead th {
    background: var(--surface-2);
    color: var(--text);
    text-align: left;
    padding: 12px 14px;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: .5px;
    text-transform: uppercase;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

.table tbody td {
    padding: 11px 14px;
    border-top: 1px solid rgba(120, 150, 190, .14);
}

.table tbody tr:hover {
    background: rgba(31, 111, 235, .1);
}

/* Tablas de deportividad (CLASIFICACIÓN DEPORTIVIDAD / RESUMEN COMITÉ) en
   la pestaña de clasificación: sin barras de scroll, adaptadas a móvil */
.tbl-ccpt {
    min-width: 0;
    width: 100%;
}

.tbl-ccpt thead th,
.tbl-ccpt tbody td {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.tbl-ccpt thead th.req,
.tbl-ccpt tbody td.req {
    width: 70px;
    text-align: center;
}

.tbl-ccpt tbody td.req {
    font-weight: 700;
    color: var(--brand-glow);
}

.tbl-ccpt thead th.num,
.tbl-ccpt tbody td.num {
    width: 70px;
    text-align: center;
}

@media (max-width: 640px) {
    .tbl-ccpt thead th,
    .tbl-ccpt tbody td {
        padding: 10px 8px;
        font-size: 13px;
    }
}

/* ==================== FICHA DE EQUIPO ==================== */

.team-hero {
    position: relative;
    margin: 24px 0 30px;
    text-align: center;
}

.team-hero-title {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin: 0 0 16px;
}

.team-hero-heading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    max-width: 100%;
}

.team-hero-bg {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    object-fit: cover;
    object-position: center;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-glow);
}

/* Escudo junto al nombre del equipo. */
.team-hero-shield {
    display: none;
    width: 96px;
    height: 96px;
    flex: 0 0 96px;
    object-fit: contain;
    filter: drop-shadow(0 3px 10px rgba(0, 0, 0, .45));
}

/* Segunda copia del escudo, grande y muy transparente sobre la cabecera. */
.team-hero-shield-bg {
    display: none;
    position: absolute;
    z-index: 0;
    top: -18px;
    right: 2%;
    width: min(38vw, 420px);
    height: min(38vw, 420px);
    object-fit: contain;
    opacity: .10;
    pointer-events: none;
}

.team-hero-eyebrow {
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--brand-glow);
    background: rgba(8, 16, 34, .55);
    border: 1px solid rgba(53, 195, 243, .35);
    padding: 6px 14px;
    border-radius: 999px;
    backdrop-filter: blur(4px);
}

.team-hero-name {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(28px, 5vw, 48px);
    line-height: 1;
    color: #fff;
    text-shadow: 0 2px 20px rgba(0, 0, 0, .6);
}

/* Fila del equipo actual: solo un tinte dorado suave */
.tbl-clasif tbody tr.row-this td {
    background: rgba(255, 196, 77, .16) !important;
}

@media (max-width: 640px) {
    .team-hero {
        margin: 16px 0 24px;
    }

    .team-hero-title {
        padding: 0 12px;
        margin-bottom: 12px;
    }

    .team-hero-heading {
        gap: 10px;
    }

    .team-hero-shield {
        width: 72px;
        height: 72px;
        flex-basis: 72px;
    }

    .team-hero-shield-bg {
        top: -8px;
        right: -4px;
        width: 240px;
        height: 240px;
    }

    .team-hero-bg {
        max-width: none;
        margin: 0 auto;
    }

    .team-hero-eyebrow {
        font-size: 11px;
        letter-spacing: 1.5px;
    }
}

/* Tarjetas de sección en la ficha de equipo */
.team-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    margin: 0 0 30px;
}

.team-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 20px;
    box-shadow: var(--shadow);
    min-width: 0;
}

.team-card-wide {
    grid-column: 1 / -1;
}

.team-card-title {
    margin: 0 0 16px;
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--brand-glow);
    border-bottom: 2px solid rgba(53, 195, 243, .25);
    padding-bottom: 10px;
}

/* Card de equipacion: la equipacion en panel a la izquierda y las etiquetas
   al lado, las dos mitades centradas verticalmente en la misma fila. Antes
   iban apiladas (texto a la izquierda, imagenes centradas debajo) y los bordes
   no cuadraban entre si. Solo esta card lleva la clase: el resto de cards del
   grid sigue en flujo normal. */
.team-card-kit {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 24px;
    align-items: center;
}

.team-card-kit .team-card-title {
    grid-column: 1 / -1;
    grid-row: 1;
}

.team-card-kit .team-shirts {
    grid-column: 1;
    grid-row: 2;
}

.team-card-kit .team-kit {
    grid-column: 2;
    grid-row: 2;
}

/* En movil la card ya es de una sola columna (ver .team-grid): apilarla, que
   a 390px no queda sitio para el panel (181px) y las etiquetas a lo ancho. */
@media (max-width: 640px) {
    .team-card-kit {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 16px;
    }

    .team-card-kit .team-card-title {
        grid-column: 1;
        grid-row: 1;
    }

    .team-card-kit .team-shirts {
        grid-column: 1;
        grid-row: 2;
    }

    .team-card-kit .team-kit {
        grid-column: 1;
        grid-row: 3;
    }
}

/* Etiquetas: "Camiseta" / "Pantalon" en una columna y los valores en otra,
   los dos cortados a max-content para que las dos lineas arranquen igual. */
.team-kit {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    column-gap: 16px;
    row-gap: 12px;
    align-items: baseline;
}

/* Solo agrupa; el display:contents deja que las 4 etiquetas entren
   directamente en la rejilla del padre. */
.team-kit-line {
    display: contents;
}

.team-kit-key {
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: var(--muted);
}

.team-kit-val {
    font-size: 16px;
    font-weight: 600;
    color: var(--text);
    min-width: 0;
    overflow-wrap: anywhere;
}

/* Equipacion: la camiseta va encima del pantalon, en columna y centradas, para
   que se lean como una prenda sola en vez de dos fotos sueltas en fila. Las dos
   se tocan pero NO se pisan: el solape va a 0, así que el bajo de la camiseta
   es donde empieza el pantalon.

   Los dos van con "height" y "width:auto" (no se fija el ancho) porque las
   imagenes del origen no todas miden igual: las camisetas van de 105x93 a
   113x92 y los pantalones de 84x51 a 84x55. El alto si es estable y de ahi
   sale el ancho solo. El pantalón se pone a 60px porque 51/93 * 110 = 60: a
   los mismos píxeles que la camiseta quedarían desproporcionados.

   Van en panel propio (surface-2 sobre surface) para que se lean como una
   vitrina y no como dos imagenes sueltas. */
.team-shirts {
    --kit-camiseta: 110px; /* alto de la camiseta */
    --kit-pantalon: 60px;  /* alto del pantalon, a la misma escala */
    --kit-solape: 0px;     /* separacion vertical: 0 = se tocan, sin pisarse */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 18px 26px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.team-shirts img {
    display: block;
    width: auto;
}

/* Camiseta: encima del pantalon en la columna, z-index por si algun dia se
   llegan a solapar. */
.team-shirts #eqcam {
    position: relative;
    z-index: 2;
    height: var(--kit-camiseta);
}

.team-shirts #eqpant {
    position: relative;
    z-index: 1;
    height: var(--kit-pantalon);
    margin-top: calc(var(--kit-solape) * -1);
}

/* Tabla de jugadores / cuerpo técnico en la ficha de equipo */
.tbl-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.team-tbl {
    min-width: 0;
    width: 100%;
}

.team-tbl th {
    white-space: nowrap;
}

.team-tbl .team-plyr-photo {
    display: block;
    width: 56px;
    height: 68px;
    object-fit: cover;
    object-position: top;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 4px;
    margin: 0 auto;
}

/* Enlace del MVP de un encuentro: mismo aspecto que el texto que había antes
   (sin fondo, marco ni subrayado) y con la pista de que es pulsable solo al
   pasar por encima o al recibir el foco por teclado. */
.mvp-jump {
    display: inline;
    padding: 0;
    margin: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    font-weight: inherit;
    font-size: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    cursor: pointer;
    text-align: inherit;
    /* El navegador subraya los <a> por defecto y aquí no hay regla que lo
       quite fuera de las tablas, por eso se anula de forma explicita. */
    text-decoration: none;
}

.mvp-jump:hover,
.mvp-jump:focus-visible {
    color: #ffc44d;
}

.mvp-jump:focus-visible {
    outline: 2px solid #ffc44d;
    outline-offset: 2px;
}

/* Fila de la plantilla resaltada al llegar desde el MVP de un partido.

   El dorado va como CAPA (background-image) sobre un fondo opaco, no como
   background-color translúcido: en móvil las columnas FOTO y LICENCIA son
   sticky y se mueven con el scroll, así que con alpha se veían los números de
   licencia de las filas que pasaban por debajo. Con la capa encima, el fondo
   opaco de la celda sigue tapando lo que pasa por detrás.

   El fondo también va en las celdas por lo mismo: las sticky pintan el suyo y
   taparían el de la fila. En móvil el #10203a lo impone la regla de
   "cuerpo con fondos sólidos" de abajo; aquí el color opaco solo se ve en
   escritorio, donde las celdas no tienen fondo propio. */
.team-tbl tbody tr.team-plyr-hl {
    background-color: #10203a;
    background-image: linear-gradient(rgba(255, 196, 77, .16), rgba(255, 196, 77, .16));
    box-shadow: inset 3px 0 0 rgba(255, 196, 77, .6);
}

.team-tbl.tbl-team tbody tr.team-plyr-hl > td {
    background-image: linear-gradient(rgba(255, 196, 77, .16), rgba(255, 196, 77, .16));
    color: #fff;
}

.team-tbl.tbl-team tbody tr.team-plyr-hl > td:nth-child(1) {
    box-shadow: inset 3px 0 0 rgba(255, 196, 77, .6);
}

.team-tbl tbody td {
    vertical-align: middle;
}

.team-tbl td.team-dorsal,
.team-tbl td.team-rol {
    font-weight: 800;
    color: var(--brand-glow);
    white-space: nowrap;
}

/* Rol del cuerpo técnico bajo el nombre (solo se muestra en móvil, donde la
   columna ROL está oculta y queda espacio para el rol debajo del nombre) */
.team-tbl .team-ctec-rol {
    display: none;
}

/* Licencia bajo el rol en la columna ROL (escritorio) */
.team-tbl .team-ctec-lic {
    display: block;
    font-size: 10.5px;
    font-weight: 400;
    letter-spacing: .3px;
    color: var(--muted);
    margin-top: 2px;
    text-transform: none;
}

.team-tbl td.team-plyr-name-td {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px;
    font-weight: 800;
    letter-spacing: .5px;
}

.team-tbl td.flag-gol { color: var(--brand-glow); font-weight: 700; }
.team-tbl td.flag-ama { color: #ffd84d; font-weight: 700; }
.team-tbl td.flag-roj { color: #ff6b57; font-weight: 700; }
.team-tbl td.flag-mvp { color: #ffc44d; font-weight: 700; }

.team-tbl thead th,
.team-tbl tbody td {
    text-align: center;
}

/* Jugadores: JUGADOR (col 2) a la izquierda */
.team-tbl.tbl-team thead th:nth-child(2),
.team-tbl.tbl-team tbody td:nth-child(2) {
    text-align: left;
}

/* Cuerpo técnico: NOMBRE (col 3) a la izquierda */
.team-tbl.tbl-ctec thead th:nth-child(3),
.team-tbl.tbl-ctec tbody td:nth-child(3) {
    text-align: left;
}

@media (max-width: 640px) {
    .team-grid {
        grid-template-columns: 1fr;
        margin-bottom: 24px;
    }

    .tbl-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin-bottom: 4px;
    }

    /* Ficha de equipo en móvil: FOTO + JUGADOR fijas y las estadísticas
       (P.JUG, GOL, AMA, ROJ) con scroll lateral, igual que en la tabla
       de clasificación y goleadores. La licencia solo en escritorio. */
    .team-tbl {
        width: auto;
        min-width: 0;
        table-layout: fixed;
        border-collapse: separate;
        border-spacing: 0;
        overflow: visible;
        box-shadow: none;
        background: transparent;
        border: none;
        border-radius: 0;
    }

    .team-tbl td,
    .team-tbl th {
        padding: 12px 4px !important;
        white-space: nowrap;
        border: none;
    }

    /* Jugadores en móvil: FOTO y LICENCIA fijas, y las columnas de datos
       (P.JUG, GOL, AMA, ROJ, MVP'S) se ven una por una al hacer scroll
       lateral, cada una del ancho visible (64px de foto + 106px de licencia
       fijas → el ancho restante queda repartido de forma centrada). */
    .team-tbl.tbl-team td:nth-child(n+3),
    .team-tbl.tbl-team th:nth-child(n+3) {
        width: calc(100vw - 170px);
        min-width: 110px;
        text-align: center;
    }

    /* Foto con más espacio en móvil para que se vea completa */
    .team-tbl .team-plyr-photo {
        width: 64px;
        height: 78px;
    }

    /* FOTO fija */
    .team-tbl.tbl-team td:nth-child(1),
    .team-tbl.tbl-team th:nth-child(1) {
        position: sticky;
        left: 0;
        width: 64px;
        min-width: 64px;
        max-width: 64px;
        z-index: 3;
        background-color: #10203a !important;
        text-align: center;
    }

    /* LICENCIA fija: centrada (vence al text-align:left global) */
    .team-tbl.tbl-team td:nth-child(2),
    .team-tbl.tbl-team th:nth-child(2) {
        position: sticky;
        left: 64px;
        width: 106px;
        min-width: 106px;
        max-width: 106px;
        z-index: 3;
        background-color: #10203a !important;
        text-align: center !important;
        box-shadow: 6px 0 10px -6px rgba(0, 0, 0, .55);
    }

    .team-tbl.tbl-team thead th:nth-child(2),
    .team-tbl.tbl-team tbody td:nth-child(2) {
        text-align: center !important;
        padding-left: 4px !important;
        padding-right: 4px !important;
    }

    .team-tbl.tbl-team thead th:nth-child(1),
    .team-tbl.tbl-team thead th:nth-child(2) {
        background-color: #10203a !important;
    }

    /* Cuerpo con fondos solidos por fila: al hacer scroll no se ven
       columnas pasar por debajo */
    .team-tbl tbody tr td {
        background-color: #10203a !important;
    }

    .team-tbl tbody tr td:nth-child(2) {
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .team-tbl td.team-plyr-name-td {
        max-width: none;
    }

    /* Cuerpo técnico en móvil: se oculta la columna ROL y el rol se muestra
       debajo del nombre. La tabla ocupa todo el ancho del contenedor. */
    .team-tbl.tbl-ctec {
        width: 100%;
        min-width: 0;
    }

    .team-tbl.tbl-ctec td:nth-child(1),
    .team-tbl.tbl-ctec th:nth-child(1) {
        display: none;
    }

    /* FOTO fija */
    .team-tbl.tbl-ctec td:nth-child(2),
    .team-tbl.tbl-ctec th:nth-child(2) {
        position: sticky;
        left: 0;
        width: 64px;
        min-width: 64px;
        max-width: 64px;
        z-index: 3;
        background-color: #10203a !important;
        text-align: center;
    }

    /* NOMBRE fija (con el rol debajo) */
    .team-tbl.tbl-ctec td:nth-child(3),
    .team-tbl.tbl-ctec th:nth-child(3) {
        position: sticky;
        left: 64px;
        width: 150px;
        min-width: 150px;
        max-width: 150px;
        z-index: 3;
        background-color: #10203a !important;
        text-align: left;
        padding-left: 10px;
        box-shadow: 6px 0 10px -6px rgba(0, 0, 0, .55);
    }

    .team-tbl.tbl-ctec thead th:nth-child(2),
    .team-tbl.tbl-ctec thead th:nth-child(3) {
        background-color: #10203a !important;
        text-align: center;
    }

    .team-tbl.tbl-ctec thead th:nth-child(3) {
        text-align: left;
        padding-left: 10px;
    }

    /* Rol bajo el nombre en la columna NOMBRE fija */
    .team-tbl .team-ctec-rol {
        display: block;
        white-space: normal;
        overflow-wrap: anywhere;
        font-size: 10.5px;
        font-weight: 700;
        letter-spacing: .6px;
        text-transform: uppercase;
        color: var(--brand-glow);
        margin-top: 2px;
    }
}

/* ==================== PESTAÑAS Y JORNADAS (division.php) ==================== */

/* Calendario en móvil: tarjetas de partid, apiladas, sin scroll lateral */
.cal-cards {
    display: none;
}

.tbl-cal {
    width: 100%;
    table-layout: fixed;
}

/* Mantiene las columnas del calendario alineadas aunque un árbitro o un
   nombre de equipo sea más largo que los demás. Las celdas de texto pueden
   partirse dentro de su columna, pero no empujan las columnas vecinas. */
.tbl-cal th,
.tbl-cal td {
    box-sizing: border-box;
    vertical-align: middle;
    overflow-wrap: anywhere;
}

.tbl-cal th:first-child {
    text-align: center;
}

.tbl-cal th:nth-child(1), .tbl-cal td:nth-child(1) { width: 10%; }
.tbl-cal th:nth-child(2), .tbl-cal td:nth-child(2) { width: 20%; }
.tbl-cal th:nth-child(3), .tbl-cal td:nth-child(3),
.tbl-cal th:nth-child(4), .tbl-cal td:nth-child(4),
.tbl-cal th:nth-child(5), .tbl-cal td:nth-child(5) { width: 4%; }
.tbl-cal th:nth-child(6), .tbl-cal td:nth-child(6) { width: 20%; }
.tbl-cal th:nth-child(7), .tbl-cal td:nth-child(7) { width: 16%; }
.tbl-cal th:nth-child(8), .tbl-cal td:nth-child(8) { width: 10%; }
.tbl-cal th:nth-child(9), .tbl-cal td:nth-child(9) { width: 10%; }

.tbl-cal td:nth-child(1),
.tbl-cal td:nth-child(2),
.tbl-cal td:nth-child(6),
.tbl-cal td:nth-child(7),
.tbl-cal td:nth-child(8),
.tbl-cal td:nth-child(9) {
    word-break: break-word;
}

.cal-fecha-cell {
    text-align: center;
    white-space: nowrap;
}

.cal-fecha-dia,
.cal-fecha-hora {
    display: block;
}

.cal-fecha-dia {
    font-weight: 700;
}

.cal-fecha-hora {
    margin-top: 2px;
    color: var(--muted);
    font-size: .9em;
    font-weight: 700;
}

@media (max-width: 640px) {
    .cal-cards {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .tbl-cal {
        display: none;
    }

    .cal-card {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 16px;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
        padding: 18px 14px 16px;
    }

    .cc-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 16px;
    }

    .cc-date {
        text-transform: uppercase;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: .12em;
        color: var(--muted);
    }

    .cc-hora {
        font-size: 12.5px;
        font-weight: 700;
        letter-spacing: .5px;
        padding: 5px 12px;
        border-radius: var(--radius-pill);
        background: var(--chip);
        border: 1px solid var(--border);
        color: #fff;
    }

    /* --- Fila del partido: tres columnas de ancho fijo -----------------
       1fr | marcador | 1fr, con el marcador en un ancho fijo, da lo que
       pide el diseño:
         · local y visitante miden EXACTAMENTE lo mismo (1fr = 1fr)
         · el marcador cae siempre en el centro de la card
         · todas las filas miden lo mismo, valga el resultado que valga
       minmax(0, 1fr) en vez de 1fr para que un nombre largo pueda encogerse
       y no empuje a la columna de al lado. */
    .cc-game {
        /* 70px y no 78px: el marcador mas largo de una temporada real
           ("12 - 2") entra con fuente menor; los px que se ahorran van para
           los nombres, que ganan 4px a cada lado. */
        --cc-score-w: 70px;
        --cc-name-lh: 1.3;
        display: grid;
        grid-template-columns: minmax(0, 1fr) var(--cc-score-w) minmax(0, 1fr);
        align-items: center;
        gap: 10px;
        /* Divisor finito DEBAJO del marcador, que separa los nombres y el
           resultado de la fila de campo, MVP y árbitro. Va como borde de
           .cc-game y no de .cc-meta para que la línea se dibuje pegada al
           bloque del resultado, que es lo que separa, y no metida dentro de
           la fila de datos: así el aire queda entero por debajo de la línea
           (el margin-top de .cc-meta) y por encima (este padding).

           "Muy fino" de verdad: 1px a .10 de alfa, cuando --border (el de los
           globos de la fila de datos) va a .28. Se lee como una guía, no como
           un separador de tabla. */
        padding-bottom: 22px;
        border-bottom: 1px solid rgba(120, 150, 190, .10);
    }

    /* --- Nombre de equipo: dos filas, centradas -------------------------
       El grid es simétrico respecto al marcador, así que centrar el texto de
       cada nombre dentro de su columna es lo mismo que centrarlo sobre el
       marcador: los tres textos se leen sobre el mismo eje.

       El nombre parte en DOS filas y las dos quedan centradas. En particular
       la de arriba, que es la que se lee primero: text-align:center la
       centra de verdad porque al partirse el nombre cada línea cabe en su
       caja. Ojo que esto solo funciona así: si el texto no cabe entero en
       una línea, el navegador IGNORA la alineación y lo ancla a la
       izquierda. Por eso el nombre se deja partir y no se recorta a una
       sola línea.

       Mismo cuerpo para todos los nombres. Si uno bajara de tamaño para
       caber, cada nombre se leería distinto, que es justo lo que no se
       quiere en una lista de equipos.

       El selector cubre las tres plantillas, que anidan el nombre de forma
       distinta:
         · calendario.js -> .cc-team > a.cc-link | .cc-team > .team-rest
         · equipos.js     -> .cc-team > a | .cc-team > .team-rest
         · copa.js        -> el <a> ES el .cc-team

       grid y no flex a propósito: con una sola columna que llena, la caja del
       <a> ocupa todo el ancho del hueco y entonces text-align mueve el texto
       de verdad. Con flex el hijo se pegaba a flex-start (izquierda) y
       text-align no movía nada, porque la caja media justo lo que el texto.

       white-space:normal es imprescindible: con el nowrap de una sola línea
       el nombre no se parte nunca. */
    .cc-team,
    .cc-team > * {
        display: grid;
        grid-template-columns: 1fr;
        /* El texto se pega al PRINCIPIO de la caja de dos filas, no al centro:
           asi la primera fila cae siempre a la misma altura, la del marcador,
           y la segunda cuelga por debajo. Centrado seria al reves: un nombre
           de una sola linea quedaria en el centro y uno de dos pondria su
           primera fila media linea mas arriba, con lo que las primeras filas
           de los dos lados NO cairian a la misma altura. */
        align-content: start;
        min-width: 0;
        max-width: 100%;
        text-align: center;
        white-space: normal;
        /* break-word parte incluso un token sin espacios (COTOGRANDE,
           U.D.ESPIÑEIRO) que no entre en una línea. */
        overflow-wrap: break-word;
    }

    /* El escudo queda en el borde de su columna y el nombre sigue centrado.
       Al sacarlo del flujo no altera la altura ni el reparto simétrico de la
       tarjeta respecto al marcador. */
    .cc-team {
        position: relative;
    }

    .team-shield-card {
        position: absolute;
        top: 50%;
        width: 46px;
        height: 46px;
        margin: 0;
        transform: translateY(-50%);
        z-index: 1;
    }

    .cc-local .team-shield-card {
        right: 0;
    }

    .cc-visit .team-shield-card {
        left: 0;
    }

    /* El hueco del escudo solo se reserva donde hay escudo: en un descanso
       (.team-rest, sin img) la caja no guarda distancia y el nombre aprovecha
       todo el ancho de su columna. */
    .cc-local:has(.team-shield-card) {
        padding-right: 50px;
        padding-left: 0;
    }

    .cc-visit:has(.team-shield-card) {
        padding-right: 0;
        padding-left: 50px;
    }

    .cc-local:not(:has(.team-shield-card)) {
        padding-right: 0;
        padding-left: 0;
    }

    .cc-visit:not(:has(.team-shield-card)) {
        padding-right: 0;
        padding-left: 0;
    }

    /* El texto del nombre queda centrado en vertical sobre la MITAD del
       escudo: la caja .cc-team garantiza 46px (el alto del escudo) para que
       el escudo nunca se recorte arriba/abajo, y el nombre se centra dentro;
       si el nombre llena más que 46px la caja crece y el eje sigue siendo el
       centro de ambos. */
    .cc-team,
    a.cc-team,
    span.cc-team {
        min-height: 46px;
        align-content: center;
        font-size: 13px;
        font-weight: 700;
        line-height: var(--cc-name-lh);
    }

    /* Nombre COMPLETO: envuelve en todas las líneas que haga falta, sin clamp
       ni recorte con tres puntos. El reparto de líneas lo hace el navegador,
       sin medir nada. */
    .cc-team > *,
    a.cc-team,
    span.cc-team {
        overflow-wrap: break-word;
        white-space: normal;
    }

    /* Nombre de UNA sola palabra, que es lo que marca ajuste-cards.js con
       .lm-1fila (MONTEPEQUENO, TORALLACTICOS, MONTEPORRILLO,
       U.D.ESPIÑEIRO). Sin espacios ni barra no hay por donde partir, y a lo
       bruto se parte a media palabra ("MONTEPOR / RILLO"), que se lee como
       si fueran dos equipos distintos. Asi que van en una sola fila y se
       recortan contra el borde de la columna.

       Deja el align-content:start de arriba, asi que la fila unica sigue
       cayendo en el centro del marcador igual que la primera fila de un
       nombre de dos. */
    .lm-1fila {
        /* Sin clamp: aqui solo cabe y sobra una fila. */
        -webkit-line-clamp: none;
        line-clamp: none;
        /* nowrap es lo que impide que se parta por la mitad. */
        white-space: nowrap;
        /* El recorte lo hace la caja al cortar el texto, sin medir nada, asi
           que se reajusta solo al ancho de cada momento. */
        overflow: hidden;
    }

    /* El centrado y el alto ya vienen en los bloques de arriba: aquí solo el
       color, que es el mismo en los dos lados. El dorado de .team-rest se
       reafirma más abajo con más especificidad. */
    .cc-local,
    .cc-visit {
        color: #fff;
    }

    /* El nombre hereda el color de la caja que lo envuelve para que el <a> no
       salga en el azul global del tema. En calendario.js y equipos.js el <a>
       es un hijo de .cc-team; en copa.js el <a> ES el .cc-team y lo cubre la
       regla de arriba. */
    .cc-team a {
        color: inherit;
        text-decoration: none;
    }

    .cc-team a:hover {
        color: var(--brand-glow);
    }

    /* Descanso: se mantiene el dorado de .team-rest. En copa.js el
       .team-rest ES el .cc-team, y .cc-local/.cc-visit (0,1,0) le pondrian
       blanco, asi que se reafirma el dorado con mayor especificidad. */
    .cc-team .team-rest,
    .cc-team.team-rest {
        color: #ffc44d;
    }

    /* Marcador: ocupa el ancho fijo de su columna, asi que la pastilla es
       igual de ancha en todas las cards y el numero queda centrado.
       border-box es imprescindible: sin el, width:100% son 66px de
       contenido MAS el padding y el borde, la pastilla se salia 14px de su
       columna (7 a cada lado) y el marcador quedaba descentrado. */
    .cc-score {
        box-sizing: border-box;
        width: 100%;
        text-align: center;
        font-variant-numeric: tabular-nums;
        font-size: 19px;
        font-weight: 800;
        letter-spacing: .5px;
        line-height: 1.2;
        color: #ffc44d;
        /* Mas aire entre el borde y los numeros. nowrap impide que el
           resultado parta en dos lineas y ajuste-cards.js baja la fuente
           solo si aun asi no cabe CON HOLGURA (5px a cada lado), de modo que
           ninguna cifra pueda quedar pegada al borde del globo.

           min-height fija el alto del globo (19*1.2 + 16 + 2 = 40.8, redondeado
           a 41) para que bajarle la fuente a un marcador no cambie la altura
           de la fila: todas las cards miden igual valga el resultado que
           valga. */
        padding: 8px;
        min-height: 41px;
        white-space: nowrap;
        border-radius: var(--radius-pill);
        background: var(--chip);
        border: 1px solid var(--border);
    }

    /* Partido sin jugar: el marcador es un simple guion, asi que se atenua
       para que no pese igual que un resultado real. El selector exige que el
       atributo exista porque las cards de copa.js no lo ponen, y sin esto se
       apagarian todas. */
    .cal-card[data-jugado]:not([data-jugado="1"]) .cc-score {
        color: var(--muted);
    }

    .cc-meta {
        display: flex;
        /* nowrap: campo, MVP y árbitro tienen que verse en una sola línea. */
        flex-wrap: nowrap;
        align-items: center;
        gap: 8px;
        /* El aire de aquí es el que queda entre el divisor de .cc-game y los
           globos. El divisor va en .cc-game, no aquí. */
        margin-top: 14px;
        font-size: 12px;
        color: var(--muted);
    }

    .cc-meta-item {
        display: inline-flex;
        align-items: center;
        /* Los tres globos (campo, MVP y árbitro) se reparten la fila a partes
           iguales: 1 1 0 hace que midan lo mismo y, al descontar el gap, cada
           uno queda en un tercio exacto sin desbordar. */
        flex: 1 1 0;
        justify-content: center;
        text-align: center;
        gap: 6px;
        padding: 6px 10px;
        border-radius: var(--radius-pill);
        background: var(--chip);
        border: 1px solid var(--border);
        min-width: 0;
        max-width: 100%;
    }

    .cc-meta-ico {
        flex: 0 0 auto;
        /* block para que el svg no deje el hueco de linea de un inline y el
           centrado sea exacto. */
        display: block;
        width: 12px;
        height: 12px;
        color: var(--brand-glow);
    }

    .cc-meta-val {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        text-align: center;
        color: #fff;
        font-weight: 600;
        font-size: 12px;
        /* La altura de linea se iguala a la del icono. Si el texto cogiera el
           interlineado de la pagina (~18px) su caja seria mas alta que el svg
           y, al centrar, el icono quedaria por debajo del centro de las
           letras. */
        line-height: 12px;
    }

    .cc-arbitro {
        margin-left: 0;
    }
}

/* Pestañas de ficha de liga: selector segmentado centrado */
#divtabs ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    list-style: none;
    margin: 0 0 42px;
    padding: 0;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, 0)) padding-box,
        rgba(10, 18, 32, .70);
    border: 1px solid rgba(120, 150, 190, .28);
    border-radius: 16px;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, .45), 0 14px 30px -22px rgba(0, 0, 0, .9);
}

#divtabs ul li {
    display: flex;
    white-space: nowrap;
    padding: 0;
    margin: 0;
    background: none;
    flex: 1 1 0%;
    min-width: 0;
    align-items: stretch;
}

#divtabs ul li a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 12px 16px;
    border-radius: 12px;
    background: transparent;
    border: 1px solid transparent;
    color: #aebed8;
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .9px;
    text-transform: uppercase;
    text-decoration: none;
    transition: background .2s ease, color .2s ease, transform .15s ease, box-shadow .2s ease;
}

#divtabs ul li:not(.current) a:hover {
    background: rgba(24, 42, 66, .45);
    border-color: rgba(120, 150, 190, .28);
    color: #fff;
}

#divtabs ul li.current a {
    background: var(--gradient-brand);
    color: #fff;
    border-color: transparent;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .35);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 8px 22px -10px rgba(31, 111, 235, .95);
}

.rank-nav {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin: 0 0 24px;
    padding: 6px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, 0)) padding-box,
        rgba(10, 18, 32, .70);
    border: 1px solid rgba(120, 150, 190, .28);
    border-radius: 14px;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, .45), 0 12px 26px -20px rgba(0, 0, 0, .9);
}

#divgoleadores .rank-tab,
.jor-nav .rank-tab,
.ccpt-nav .rank-tab {
    flex: 1 1 0%;
    min-width: 0;
    padding: 10px 14px;
    border-radius: 10px;
    background: transparent;
    border: 1px solid transparent;
    color: #aebed8;
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}

#divgoleadores .rank-tab:hover,
.jor-nav .rank-tab:hover,
.ccpt-nav .rank-tab:hover {
    background: rgba(24, 42, 66, .45);
    border-color: rgba(120, 150, 190, .28);
    color: #fff;
}

#divgoleadores .rank-tab.current,
.jor-nav .rank-tab.current,
.ccpt-nav .rank-tab.current {
    background: var(--gradient-brand);
    color: #fff;
    border-color: transparent;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .35);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 8px 22px -10px rgba(31, 111, 235, .95);
}

#navjor {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    list-style: none;
    margin: 16px 0 0;
    padding: 0;
}

#navjor li {
    display: inline-block;
    padding: 0;
}

#navjor li a {
    display: inline-block;
    padding: 7px 14px;
    border-radius: var(--radius-pill);
    background: var(--chip);
    border: 1px solid var(--border);
    color: var(--muted);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: background .2s ease, color .2s ease;
}

#navjor li a:hover,
#navjor li.current a {
    background: var(--gradient-brand);
    color: #fff;
    border-color: transparent;
}

/* ==================== LAYOUT COLUMNAS (páginas interiores) ==================== */

.col-1, .col-2, .col-3, .col-4 {
    float: none;
    overflow: visible;
}

.row-2 .wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}

.row-2 .wrapper > * {
    flex: 1 1 100%;
    min-width: 0;
}

@media (min-width: 1024px) {
    .row-2 .wrapper > .col-1 { flex: 1 1 300px; }
    .row-2 .wrapper > .col-2 { flex: 2 1 640px; }
}

/* Deportividad + Comité de Competición: cajas del mismo alto para que queden simétricas */
.row-2.ccpt-eq .wrapper > article {
    display: flex;
    flex-direction: column;
}

.row-2.ccpt-eq .wrapper > article .box {
    flex: 1 1 auto;
}

.row-2.ccpt-eq .wrapper > article h2,
.row-2.ccpt-eq .wrapper > article h3 {
    min-height: 44px;
    display: flex;
    align-items: center;
    margin: 0 0 12px;
}

/* Alternancia Deportividad / Comité en móvil (mismos botones que las jornadas) */
.ccpt-nav {
    display: none;
}

@media (max-width: 1023px) {
    .ccpt-nav {
        display: flex;
    }
    .row-2.ccpt-eq .wrapper > article {
        display: none;
    }
    .row-2.ccpt-eq .wrapper > article.ccpt-visible {
        display: flex;
    }
}

.page-head {
    padding: 40px 0 8px;
}

.page-head h1 {
    margin: 0;
    font-size: clamp(34px, 5vw, 52px);
    line-height: 1;
}

.page-head p {
    color: var(--muted);
    margin: 10px 0 0;
    max-width: 640px;
}

/* Colaboradores (rejilla de logos) */
.colab-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

@media (min-width: 640px) {
    .colab-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
    .colab-grid { grid-template-columns: repeat(3, 1fr); }
}

.colab-item {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    padding: 18px;
    background: var(--chip);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: border-color .2s ease, transform .2s ease;
}

.colab-item a {
    display: flex;
    align-items: center;
    justify-content: center;
}

.colab-item:hover {
    border-color: rgba(31, 111, 235, .6);
    transform: translateY(-3px);
}

.colab-item img {
    max-height: 90px;
    width: auto;
    border-radius: 8px;
}

/* Mapa y lista de campos */
.map-frame {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

.map-frame #map_canvas {
    width: 100% !important;
    height: 440px;
}

/* ==================== FOOTER ==================== */

.site-footer {
    position: relative;
    margin-top: 32px;
    background:
        radial-gradient(920px 460px at 50% -60%, rgba(31, 111, 235, .18), transparent 62%),
        linear-gradient(180deg, rgba(24, 42, 66, .55), rgba(9, 17, 31, .96));
    border-top: 1px solid rgba(120, 150, 190, .22);
    box-shadow: 0 -30px 50px -45px rgba(0, 0, 0, .9);
    height: auto;
    overflow: visible;
}

.site-footer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--brand-glow), transparent);
    opacity: .45;
}

.footer-grid {
    max-width: var(--container);
    margin: 0 auto;
    padding: 32px 20px 24px;
    display: grid;
    gap: 28px 40px;
    grid-template-columns: 1fr;
}

@media (min-width: 640px) and (max-width: 1023px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 1024px) {
    .footer-grid {
        grid-template-columns: 1.7fr 1fr;
    }
}

.footer-brand {
    display: block;
    width: fit-content;
}

.footer-brand-logo {
    display: block;
    height: 40px;
    width: auto;
    max-width: 260px;
    object-fit: contain;
}

.footer-brand-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.footer-brand-txt {
    font-family: var(--font-display);
    font-size: 25px;
    font-weight: 800;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: #fff;
    line-height: 1;
}

.footer-desc {
    color: var(--muted);
    font-size: 14px;
    line-height: 1.5;
    margin: 12px 0 14px;
    max-width: 340px;
}

.footer-contact {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 14px;
    color: var(--muted);
}

.footer-contact li {
    display: flex;
    align-items: center;
    gap: 12px;
}

.footer-contact a {
    color: var(--muted);
    text-decoration: none;
    transition: color .2s ease;
}

.footer-contact a:hover {
    color: #fff;
}

.footer-contact .icon {
    width: 36px;
    height: 36px;
    padding: 8px;
    background: rgba(31, 111, 235, .14);
    border: 1px solid rgba(31, 111, 235, .38);
    border-radius: 50%;
    box-shadow: 0 0 14px rgba(31, 111, 235, .25);
    color: var(--brand-glow);
    flex: none;
}

.footer-cols h5, .footer-cols h3 {
    display: flex;
    align-items: center;
    gap: 9px;
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: #fff;
    margin: 0 0 12px;
}

.footer-cols h3::before {
    content: "";
    flex: none;
    width: 6px;
    height: 6px;
    border-radius: 3px;
    background: var(--brand-glow);
    box-shadow: 0 0 10px var(--brand-glow);
}

.footer-cols ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 18px;
}

.footer-cols a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--muted);
    font-size: 14px;
    text-decoration: none;
    transition: color .2s ease, transform .2s ease;
}

.footer-cols a::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    opacity: .35;
    transition: opacity .2s ease, transform .2s ease;
}

.footer-cols a:hover {
    color: #fff;
    transform: translateX(3px);
}

.footer-cols a:hover::before {
    opacity: 1;
    background: var(--brand-glow);
    box-shadow: 0 0 8px var(--brand-glow);
}

.footer-bottom {
    max-width: var(--container);
    margin: 0 auto;
    padding: 12px 20px;
    border-top: 1px solid rgba(120, 150, 190, .20);
    background: rgba(9, 17, 31, .55);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    color: var(--muted);
    font-size: 12.5px;
}

.footer-bottom strong {
    color: #fff;
}

/* ==================== ICONOS ==================== */

.icon {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.icon-sm {
    width: 20px;
    height: 20px;
}

/* ==================== RESPONSIVE ==================== */

@media (max-width: 1023px) {
    .site-nav {
        display: none;
        order: 5;
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
        padding: 10px 0 4px;
    }

    .site-nav.open {
        display: flex;
    }

    .site-nav a {
        padding: 12px 18px;
        border: 1px solid var(--border);
        color: var(--text);
    }

    .brand {
        position: static;
        transform: none;
        margin-right: auto;
    }

    .nav-toggle {
        display: inline-flex;
    }

    .nav-share {
        display: inline-flex;
    }

    .site-nav .nav-comp {
        position: static;
    }

    .site-nav .nav-comp summary {
        border: 1px solid var(--border);
        padding: 12px 18px;
    }

    .site-nav .nav-comp summary.current {
        border-color: transparent;
    }

    .site-nav .nav-comp[open] summary {
        border-color: var(--gradient-brand);
    }

    .comp-panel {
        position: static;
        width: 100%;
        grid-template-columns: 1fr;
        gap: 16px;
        margin-top: 8px;
        box-shadow: none;
    }

    .header-inner {
        padding: 12px 16px;
    }

    /* #main baja a 16px aqui y no en el breakpoint de 640, para que el
       recorte lateral que empieza en la cabecera llegue a la vez al
       contenido. Con 20px de #main y 16px de .header-inner el logo se
       quedaba 4px a la izquierda de los bloques de abajo. */
    #main {
        padding: 0 16px;
    }

    #lstdiv h3 {
        font-size: 17px;
        margin: 26px 0 16px;
    }

    #lstdiv ul.list-2 {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .site-footer {
        display: none;
    }

    /* 16px y no 14px: es el mismo padding que usan por debajo .header-inner y
       los pies, y con 14 el contenido de las paginas quedaba 2px a la derecha
       que el logo de la cabecera. */
    #main {
        padding: 0 16px;
    }

    .container {
        padding: 0;
    }

    #content #indent {
        padding: 22px 0;
    }

    .surface-card, .card {
        padding: 22px;
    }

    .box .inner {
        padding: 18px;
    }

    .home-section {
        margin-top: 24px;
    }

    /* En móvil el bloque de Contacto es lo último de la portada, justo antes
       del pie. Sin este margen inferior la tarjeta queda pegada al borde de
       la pantalla y parece que se corta. */
    .home-section.contact-section {
        margin-bottom: 24px;
    }

    /* Escala tipográfica de portada en móvil: más contenida y legible */
    .home-section h2 {
        font-size: 18px;
    }

    .home-section .doc-card .doc-title,
    .home-section .news-card h3,
    .home-section .sponsor-card h3,
    .home-section .contact-aside h3 {
        font-size: 16px;
    }

    /* En movil el credito se apila: el texto y los dos enlaces no caben en una
       linea a 320px y el justify-content:space-between los separaria de la
       parte de la derecha que ya no existe. */
    .credit {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        margin-top: 18px;
        padding-top: 14px;
    }

    .home-section .doc-card .doc-title {
        font-size: 14px;
    }

    .home-section .doc-desc,
    .home-section .sponsor-card p,
    .home-section .news-card p,
    .home-section .contact-intro,
    .home-section .contact-aside p,
    .home-section .footer-contact {
        font-size: 13px;
    }

    .home-section .premio-monto {
        font-size: 28px;
    }

    .home-section .premio-label {
        font-size: 13px;
    }

    .home-section .premio-nota {
        font-size: 12px;
    }

    .hero {
        /* Solo margen arriba, como .home-section. Sin margen lateral a
           proposito: el pedido es ocupar el mismo ancho que los bloques de
           abajo, y esos van a pelo del .container. */
        margin: 12px 0 0;
        min-height: 0;
        padding: 44px 22px 48px;
        /* Sigue siendo la misma foto que en escritorio, asi que aqui ya no se
           cambia el image-set(): con una sola imagen sobra. Lo que si cambia
           es donde se recorta. La foto es apaisada (16:9) y una caja estrecha
           y alta hace que cover recorte por los lados, asi que un 68%
           horizontal deja el sujeto a la vista en vez de partirlo. */
        background-position: 68% center;
    }

    .hero-shade {
        /* En vertical el texto ocupa la caja entera, asi que el degradado
           horizontal de escritorio ya no protege nada y el velo pasa a ser
           vertical: denso arriba, donde caen el logo y el titular, y mas
           abierto abajo, que es donde la foto tiene mas que enseñar. */
        background:
            radial-gradient(ellipse 120% 62% at 80% 0%, rgba(53, 195, 243, .30) 0%, rgba(53, 195, 243, 0) 66%),
            linear-gradient(172deg, rgba(8, 16, 36, .88) 0%, rgba(8, 16, 36, .78) 52%, rgba(8, 16, 36, .52) 100%);
    }

    .hero-body {
        /* En movil todo se centra y el boton ocupa el ancho completo, que es
           lo unico que se lee bien a una columna. El max-width de escritorio
           se queda para que a 700px el titular no se arranque de lado. */
        max-width: 520px;
        margin: 0 auto;
        align-items: center;
        text-align: center;
        gap: 14px;
    }

    .hero-logo {
        /* En movil el centrado no se toca: lo hace el align-items:center que
           ya tiene .hero-body, y como el <picture> es un bloque con ancho
           explicito se ajusta al contenido y queda centrado solo. Aqui solo
           se recorta el tope de 190px, que a 375px de pantalla daria 56px y
           se veria pequeno al lado del titular. */
        width: clamp(118px, 38vw, 150px);
    }

    /* Email y telefono apilados y centrados: a una columna el correo no cabe
       junto al telefono. min-width:0 y el permitir el corte evitan que el
       correo desborde la caja a 320px en vez de bajar de linea. */
    .hero-contact {
        flex-direction: column;
        gap: 8px;
    }

    .hero-contact-link {
        max-width: 100%;
        min-width: 0;
        overflow-wrap: anywhere;
        font-size: 14px;
    }

    .hero-title {
        font-size: clamp(34px, 11vw, 52px);
    }

    .hero-sub {
        font-size: clamp(15px, 4.2vw, 19px);
        letter-spacing: 1.6px;
    }

    .hero-cta {
        width: 100%;
        margin-top: 6px;
    }

    .hero-cta .btn {
        width: 100%;
        justify-content: center;
    }

    h2 strong, h3 strong {
        font-size: 1.35em;
    }

    .comp-nav-inner, .header-inner, .footer-grid, .footer-bottom {
        padding-left: 16px;
        padding-right: 16px;
    }

    .site-footer .footer-cols {
        display: none;
    }

    .comp-nav-inner {
        gap: 10px;
    }

    .comp-pill-group {
        flex: 1 1 100%;
        flex-wrap: nowrap;
        gap: 8px;
    }

    .comp-pill {
        flex: 1 1 0%;
        min-width: 0;
        justify-content: center;
        text-align: center;
        padding: 14px 7px;
        font-size: 14px;
        letter-spacing: .2px;
        border-left-width: 2px;
        border-right-width: 2px;
    }

    .comp-pill.current {
        border-left-width: 2px;
        border-right-width: 2px;
    }

    #divtabs {
        margin: 0;
    }

    #divtabs ul {
        margin-top: 0;
        margin-bottom: 18px;
        height: auto;
        padding: 5px;
        gap: 5px;
        flex-wrap: nowrap;
        border-radius: 14px;
    }

    #divtabs ul li {
        min-width: 0;
        flex: 1 1 0%;
    }

    #divtabs ul li a {
        padding: 12px 4px;
        font-size: 12px;
        letter-spacing: .3px;
        border-radius: 10px;
        white-space: normal;
        line-height: 1.15;
        overflow-wrap: anywhere;
    }

    .cal-sanc {
        margin-top: 4px;
    }

    .swiper-ad {
        height: 260px;
    }

    .swiper-ad .swiper-slide img {
        max-height: 240px;
    }

    .footer-bottom {
        flex-direction: column;
        text-align: center;
    }
}

/* ==================== COLABORADORES: SLIDER ==================== */

.colab-slider {
    max-width: 760px;
    margin: 0 auto;
    padding: 24px 0 0;
}

.colab-slider .swiper {
    width: 100%;
    height: 380px;
    position: relative;
    overflow: hidden;
}

.colab-slider .swiper-wrapper {
    height: 100%;
}

.colab-slider .swiper-slide {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.colab-slider .swiper-slide a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.colab-slider .swiper-slide img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: var(--radius);
}

.colab-slider .swiper-button-next,
.colab-slider .swiper-button-prev {
    color: var(--brand-glow);
    top: calc(50% - 30px);
    margin-top: 0;
}

.colab-slider .swiper-button-next::after,
.colab-slider .swiper-button-prev::after {
    font-size: 22px;
    font-weight: 700;
}

.colab-slider .swiper-pagination {
    position: static;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin: 16px 0 0;
}

.colab-slider .swiper-pagination-bullet {
    background: rgba(120, 150, 190, .5);
    opacity: 1;
}

.colab-slider .swiper-pagination-bullet-active {
    background: var(--brand-glow);
}

.colab-title {
    text-align: center;
    margin: 16px 0 0;
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: #fff;
}

@media (max-width: 640px) {
    .colab-slider .swiper {
        height: 250px;
    }

    .colab-slider .swiper-button-next,
    .colab-slider .swiper-button-prev {
        display: none;
    }
}

/* ==================== REGLAMENTO: CARDS PDF ==================== */

.reg-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 24px;
}

.reg-card {
    background: var(--gradient-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.reg-card h3 {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: #fff;
    margin: 0;
}

.reg-card a {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--brand-glow);
    text-decoration: none;
    font-size: 14px;
    line-height: 1.4;
    transition: color .2s ease;
}

.reg-card a:hover {
    color: #fff;
}

.reg-card a img {
    flex: none;
    width: 32px;
    height: 50px;
    object-fit: contain;
}

.reg-card-name {
    overflow-wrap: anywhere;
}

@media (max-width: 640px) {
    .reg-cards {
        grid-template-columns: 1fr;
        gap: 14px;
    }
}

/* ==================== INSTALACIONES / CAMPOS ==================== */

.campos-tools {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 24px;
    align-items: start;
    margin-top: 24px;
}

.campos-map-box,
.campos-list-box {
    background: var(--gradient-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 18px;
    box-shadow: var(--shadow);
}

.campos-box-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.campos-box-head h3 {
    position: relative;
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: #fff;
    margin: 0;
    padding-bottom: 12px;
}

.campos-box-head h3 strong {
    margin: 0;
}

.campos-box-head h3::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 70px;
    height: 3px;
    border-radius: 2px;
    background: var(--brand-glow);
    box-shadow: 0 0 14px rgba(31, 174, 235, .5);
}

.dot-fs {
    background: #f43f5e;
    box-shadow: 0 0 8px rgba(244, 63, 94, .8);
}

.campos-map {
    width: 100%;
    height: 480px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--surface);
    z-index: 1;
    overflow: hidden;
}

.campos-map-action {
    display: flex;
    justify-content: center;
    padding-top: 14px;
}

.campo-maps-button {
    align-items: center;
    padding: 9px 14px;
    border-radius: var(--radius-sm);
    background: var(--brand-glow);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: background .2s ease, transform .2s ease;
}

.campo-maps-button:hover {
    background: var(--brand-glow);
    color: #fff;
    transform: translateY(-1px);
}

.campos-list-box {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.campos-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding-right: 4px;
}

.campos-list::-webkit-scrollbar {
    width: 8px;
}

.campos-list::-webkit-scrollbar-thumb {
    background: rgba(120, 150, 190, .35);
    border-radius: 4px;
}

.campos-list::-webkit-scrollbar-track {
    background: transparent;
}

.campos-list h6 {
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin: 18px 0 8px;
}

.campos-list ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.campos-list a {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 9px 12px;
    border-radius: var(--radius-sm);
    border-left: 3px solid transparent;
    color: var(--muted);
    font-size: 14px;
    text-decoration: none;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.campos-list a::before {
    margin-top: 7px;
}

.campo-list-copy {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.campo-list-name {
    color: inherit;
    font-weight: 700;
}

.campo-list-address {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.35;
}

.campos-list a:hover .campo-list-address {
    color: #c9d8ea;
}

.campos-list a::before {
    content: "";
    flex: none;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    opacity: .35;
}

.campos-list a:hover::before,
.campos-list a.active::before {
    opacity: 1;
}

.campos-list a:hover {
    background: rgba(31, 111, 235, .12);
    color: #fff;
}

.campos-list a.active {
    background: rgba(31, 111, 235, .22);
    color: #fff;
    border-left-color: var(--brand-glow);
}

.lm-pin {
    background: transparent;
    border: none;
}

.lm-pin-active {
    filter: drop-shadow(0 4px 10px rgba(245, 158, 11, .55));
}

.leaflet-container {
    font-family: inherit;
}

.leaflet-popup-content-wrapper {
    background: var(--surface-2);
    color: var(--text);
    border: 1px solid var(--border);
}

.leaflet-popup-tip {
    background: var(--surface-2);
}

.leaflet-popup-content {
    margin: 12px 14px;
    font-size: 13px;
    line-height: 1.4;
}

@media (max-width: 900px) {
    .campos-tools {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .campos-map {
        height: 320px;
    }

    .campos-box-head {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ==================== AUDITORÍA DE COLOR (overrides de ligastyle.css) ==================== */

/* Tablas bootstrap heredadas: nada de fondos claros ni hover en blanco */
.table {
    background: var(--surface);
    color: var(--text);
}

.table td a {
    color: var(--brand-glow);
}

.table thead tr {
    background: var(--surface-2);
}

.table-hover tbody tr:hover > td,
.table-hover tbody tr:hover > th {
    background-color: rgba(31, 111, 235, .12);
    color: var(--text);
}

.table-hover tbody tr:hover > td a {
    color: var(--brand-glow);
}

/* Listas heredadas con fondos claros / texto oscuro */
.list-3 li {
    background: transparent;
    border: none;
}

.list-3 li a {
    border-bottom: 1px solid rgba(120, 150, 190, .16);
    padding: 12px 6px;
}

.list-3 li strong {
    color: var(--text);
}

.list-3 li p {
    color: var(--muted) !important;
}

.list-3 li a:hover {
    background: var(--surface-2);
    border-radius: var(--radius-sm);
}

.list-3 li a:hover strong {
    color: #fff;
}

.list-4 li strong {
    color: var(--text);
}

.list-4 li p {
    color: var(--muted) !important;
}

.list-4 li b,
.list-5 li b {
    background: var(--surface-2);
    color: var(--brand-glow);
    border-radius: var(--radius-sm);
    padding-left: 12px;
    height: auto;
    line-height: 24px;
}

.list-4 li b a,
.list-5 li b a {
    color: var(--brand-glow);
}

.list-5 li {
    background: transparent;
    border: none;
}

.list-5 li strong {
    color: var(--text);
}

.list-5 li p {
    color: var(--muted) !important;
}

#divtabs {
    height: auto;
    background: none;
}

#divtabs ul li a {
    height: auto;
    line-height: 1.2;
}

/* Enlace "más información" heredado */
.link {
    background: none;
    height: auto;
    line-height: 1.4;
    color: var(--brand-glow);
}