/* ============================================================ CBAT / 24 — Sistema visual de la web pública ------------------------------------------------------------ Fase 1 del proyecto "nueva web pública" (17/08/2026). Referencia aprobada por el usuario: docs/project-control/referencias/cbat24_home_concept_02.html Paleta OFICIAL del club (extraída del PNG del club con un lector de píxeles, no estimada a ojo): docs/project-control/referencias/cbat_paleta_oficial.png ------------------------------------------------------------ POR QUÉ ESTE ARCHIVO TIENE SU PROPIO :root ------------------------------------------------------------ El front público es una SUPERFICIE AISLADA con estética propia — el caso (b) que contempla `.claude/rules/workflow.md`, igual que `assets/css/fan-album.css`. Su paleta es la OFICIAL del club (azul #004f9f + amarillo #fdc300), que NO coincide con la del Manager (navy #071432 + dorado #f1c84c). Meter estos valores en `tokens.css` retematizaría la plataforma entera —Manager y Portal Coach—, que NO es lo que se ha pedido. Por eso: las DEFINICIONES viven aquí, en un único bloque, y el resto del archivo es 100 % `var()`. Cero hex fuera de la capa de tokens. Tintes con `color-mix`, nunca `rgba()` de canales fijos (un rgba fijo no seguiría al club si algún día cambia). ------------------------------------------------------------ LA REGLA DEL AMARILLO (heredada de la web actual, medida) ------------------------------------------------------------ Sobre superficies oscuras y sobre el azul, el amarillo es texto libre (10,2:1 sobre el navy; 5,1:1 sobre el azul). Sobre superficie clara da 1,5:1 y NO se usa como texto: solo como fondo, filete o subrayado. Es la misma regla que ya aplica `front.css`. ============================================================ */ :root { /* ---- 1 · PALETA OFICIAL (única capa con hex del archivo) ---- */ /* Azules */ --f24-blue: #004f9f; /* AZUL CBAT — superficie de sección */ --f24-blue-mid: #2968a0; --f24-blue-soft: #4f78a0; --f24-blue-pale: #6f879f; /* Oscuros */ --f24-navy: #021f47; /* el más profundo — hero y footer */ --f24-navy-800: #122b46; --f24-navy-700: #233347; --f24-navy-600: #313b46; /* ⚠️ EL NEGRO SE RETIRÓ del sistema el 17/08/2026 — decisión del usuario: «no podemos tener fondos en negro, todo colores CBAT y colores claros». No se deja el token "por si acaso": un token que nadie usa acaba usándose sin pensar. Para oscurecer sobre foto se usa `--f24-navy`, que tiñe en la marca en vez de apagar. */ /* Amarillos */ --f24-yellow: #fdc300; /* AMARILLO CBAT */ --f24-yellow-mid: #fcd44d; --f24-yellow-soft: #fbe07f; --f24-yellow-pale: #fbecb1; --f24-amber: #efaa00; /* estado activo / hover */ /* Neutros */ --f24-grey: #706f6f; --f24-grey-soft: #9d9d9c; /* ---- 2 · SEMÁNTICAS ---------------------------------------- */ /* El claro y el blanco los toma de la plataforma: son los mismos de la web actual y así el front no inventa un segundo "casi blanco" (decisión del usuario: "el resto como está la web actual"). */ --f24-paper: var(--bg); --f24-white: var(--card); /* Superficie EDITORIAL (noticias): claro con un velo del azul del club. Se deriva del azul en vez de ser un color suelto, así sigue al club si cambia su azul y nunca desafina. Sustituye al negro que había aquí. */ --f24-editorial: color-mix(in srgb, var(--f24-blue) 6%, var(--f24-white)); --f24-ink: var(--f24-navy); /* texto sobre claro */ --f24-ink-soft: var(--f24-grey); /* metadatos sobre claro */ --f24-on-dark: var(--f24-white); /* texto sobre oscuro */ --f24-on-dark-soft: color-mix(in srgb, var(--f24-white) 72%, var(--f24-blue-pale)); --f24-line-dark: color-mix(in srgb, var(--f24-white) 16%, transparent); --f24-line-light: color-mix(in srgb, var(--f24-navy) 14%, transparent); --f24-veil: color-mix(in srgb, var(--f24-navy) 82%, transparent); /* ---- 3 · TIPOGRAFÍA ---------------------------------------- */ /* La familia sale del tema del club (Sistema → Configuración). Hoy `tema.font_heading` está sin fijar, así que resuelve a Inter; si el club activa Bison, los títulos cambian solos y este archivo no se toca. */ --f24-display: var(--font-heading, var(--font-body)); --f24-body: var(--font-body); --f24-d1: clamp(3.25rem, 11.5vw, 11rem); /* titular del hero */ --f24-d2: clamp(2.75rem, 8vw, 7.5rem); /* título de sección */ --f24-d3: clamp(1.75rem, 5.5vw, 5rem); /* equipo en el marcador */ --f24-d4: clamp(2rem, 5vw, 4.75rem); /* titular de evento */ --f24-d5: clamp(1.5rem, 3.2vw, 3rem); /* titular de noticia */ --f24-d6: clamp(4rem, 15vw, 13.75rem); /* firma del pie */ --f24-label: .6875rem; /* 11px — micro-etiquetas */ --f24-label-sm: .5625rem; /* 9px — pills */ --f24-lead: 1rem; --f24-track-display: -.055em; --f24-track-label: .16em; --f24-leading-display: .82; /* ---- 4 · RITMO Y FORMA ------------------------------------- */ --f24-gutter: 5vw; --f24-section: clamp(3.5rem, 11vh, 8.75rem); --f24-nav-h: 72px; --f24-tap: 44px; /* mínimo táctil */ } /* ============================================================ BASE ============================================================ */ .f24 { margin: 0; background: var(--f24-navy); color: var(--f24-on-dark); font-family: var(--f24-body); font-size: var(--font-base, 15px); line-height: 1.5; overflow-x: hidden; -webkit-font-smoothing: antialiased; } /* `:where()` a propósito: aporta 0 de especificidad. Escrito como `.f24 a` (clase + tipo) GANABA a `.f24-btn` (clase sola) y todos los botones y enlaces se quedaban con el color heredado de su sección: texto navy sobre botón navy —invisible— y texto blanco sobre amarillo —1,6:1— en el hero. Es la clase de fallo que solo se ve mirando la pantalla, no leyendo el CSS. */ .f24 :where(a) { color: inherit; text-decoration: none; } .f24 img { max-width: 100%; display: block; } .f24 h1, .f24 h2, .f24 h3 { font-family: var(--f24-display); font-weight: 900; text-transform: uppercase; letter-spacing: var(--f24-track-display); line-height: var(--f24-leading-display); margin: 0; /* Los titulares gigantes parten palabra antes que desbordar: con nombres de rival largos (los hay en BD) es la diferencia entre "se ve apretado" y "se sale de la pantalla". */ overflow-wrap: break-word; } /* Foco visible SIEMPRE, y con contraste en las dos superficies. */ .f24 :focus-visible { outline: 3px solid var(--f24-yellow); outline-offset: 3px; } .f24 .f24-section--claro :focus-visible, .f24 .f24-section--editorial :focus-visible, .f24 .f24-section--amarillo :focus-visible { outline-color: var(--f24-blue); } .f24-skip { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--f24-yellow); color: var(--f24-navy); padding: 12px 18px; font-weight: 900; text-transform: uppercase; letter-spacing: var(--f24-track-label); font-size: var(--f24-label); } .f24-skip:focus { left: 8px; top: 8px; } /* Etiqueta pequeña de broadcast: el contrapunto del display gigante. */ .f24-kicker { display: block; font-size: var(--f24-label); font-weight: 800; letter-spacing: var(--f24-track-label); text-transform: uppercase; color: var(--f24-yellow); margin: 0 0 .75rem; } .f24-section--claro .f24-kicker, .f24-section--editorial .f24-kicker { color: var(--f24-blue); } .f24-section--amarillo .f24-kicker { color: var(--f24-navy); } /* Acciones sueltas dentro de una sección (p. ej. el CTA del estado vacío del Match Center). */ .f24-acciones { margin: 1.5rem 0 0; } /* ------------------------------------------------------------ EQUIPACIONES (18/08) — el escaparate de las camisetas ------------------------------------------------------------ La del ratón se adelanta un poco y se endereza: el movimiento sugiere que se puede coger, sin llegar a ser un juguete. */ .f24-equipaciones { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: clamp(1rem, 3vw, 2.5rem); margin-top: 2.5rem; } .f24-equipacion { margin: 0; text-align: center; } .f24-equipacion img { display: block; width: 100%; height: auto; transform: rotate(-1.5deg); transition: transform .3s ease-out, filter .3s ease-out; filter: drop-shadow(0 1rem 1.5rem color-mix(in srgb, var(--f24-navy) 45%, transparent)); } .f24-equipacion:hover img { transform: rotate(0) translateY(-.75rem) scale(1.04); filter: drop-shadow(0 1.75rem 2rem color-mix(in srgb, var(--f24-navy) 65%, transparent)); } .f24-equipacion:nth-child(even) img { transform: rotate(1.5deg); } .f24-equipacion:nth-child(even):hover img { transform: rotate(0) translateY(-.75rem) scale(1.04); } .f24-equipacion figcaption { margin-top: 1rem; } .f24-equipacion figcaption strong { display: block; font-family: var(--f24-display); font-size: 1.125rem; font-weight: 900; text-transform: uppercase; letter-spacing: .04em; } .f24-equipacion figcaption span { display: block; margin-top: .25rem; font-size: var(--f24-label); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--f24-yellow); } /* ------------------------------------------------------------ BLOQUE LIBRE (18/08) — la sección comodín del club ------------------------------------------------------------ Sin foto es una columna de texto centrada en su superficie; con foto, dos columnas. Se apoya en las piezas que ya existen (`f24-kicker`, `f24-lead`, `f24-btn`) para que no parezca de otra web. */ .f24-libre { max-width: 46rem; } .f24-libre h2 { font-size: var(--f24-d2); margin: 0 0 1rem; } .f24-libre .f24-lead { margin: 0; } .f24-libre-foto { margin: 0; } .f24-libre-foto img { display: block; width: 100%; height: auto; border-radius: var(--f24-radio, 0); } @media (min-width: 900px) { .f24-libre--con-foto { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 22rem); gap: clamp(2rem, 5vw, 4rem); align-items: center; max-width: 68.75rem; } } /* Aviso temporal del hero: algo puntual y con fecha de caducidad. Amarillo sobre navy —pastilla, no texto suelto— para que se lea como un anuncio del club y no como parte del titular. */ .f24-aviso { display: inline-block; margin: 0 0 1rem; padding: .4rem .85rem; border-radius: 999px; background: var(--f24-yellow); color: var(--f24-navy); font-size: var(--f24-label); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; } /* ------------------------------------------------------------ GEOMETRÍA DE PISTA ------------------------------------------------------------ La zona y el círculo de tiros libres, con la proporción real de una pista FIBA (zona 4,9 × 5,8 m · círculo de 3,6 m). No es un fondo decorativo: ancla la sección clara como si fuera el parqué y ocupa el hueco derecho que dejaba la composición a una columna. ------------------------------------------------------------ */ .f24-paint { position: absolute; right: -6vw; top: 50%; width: 30vw; height: 25.4vw; transform: translateY(-50%); border: 2px solid var(--f24-line-light); border-right: 0; pointer-events: none; } .f24-paint::before { content: ""; position: absolute; left: -9vw; top: 50%; width: 18vw; height: 18vw; transform: translateY(-50%); border: 2px solid var(--f24-line-light); border-radius: 50%; } /* Palabra destacada dentro de un titular. Sobre oscuro es color; sobre claro es subrayado (contraste). */ .f24-mark { font-style: normal; color: var(--f24-yellow); } .f24-section--claro .f24-mark, .f24-section--editorial .f24-mark, .f24-section--amarillo .f24-mark { color: inherit; box-shadow: inset 0 -.14em 0 var(--f24-yellow); } .f24-lead { font-size: var(--f24-lead); line-height: 1.5; color: var(--f24-on-dark-soft); max-width: 34rem; margin: 0; } /* Botón: rectángulo puro. Sin radio, sin sombra, sin degradado. */ .f24-btn { display: inline-flex; align-items: center; gap: .5rem; min-height: var(--f24-tap); padding: 0 1.5rem; background: var(--f24-yellow); color: var(--f24-navy); font-size: var(--f24-label); font-weight: 900; letter-spacing: .12em; text-transform: uppercase; border: 0; cursor: pointer; transition: background .15s ease, transform .15s ease; } .f24-btn:hover { background: var(--f24-amber); transform: translateY(-2px); } .f24-btn--ink { background: var(--f24-navy); color: var(--f24-yellow); } .f24-btn--ink:hover { background: var(--f24-navy-800); } .f24-pill { display: inline-block; padding: .5rem .625rem; border: 1px solid var(--f24-line-dark); font-size: var(--f24-label-sm); font-weight: 800; letter-spacing: .15em; text-transform: uppercase; } /* ============================================================ BARRA SUPERIOR — el "24" es el botón, no un adorno ============================================================ */ .f24-nav { position: sticky; top: 0; z-index: 50; min-height: var(--f24-nav-h); display: flex; align-items: center; padding: 0 var(--f24-gutter); background: color-mix(in srgb, var(--f24-navy) 88%, transparent); backdrop-filter: blur(14px); border-bottom: 1px solid var(--f24-line-dark); } .f24-brand { display: flex; align-items: center; gap: .625rem; font-family: var(--f24-display); font-weight: 900; font-size: 1.5rem; letter-spacing: -.06em; text-transform: uppercase; } .f24-brand img { height: 38px; width: auto; } .f24-brand b { color: var(--f24-yellow); } .f24-menu { margin-left: auto; display: flex; align-items: center; gap: 1.5rem; list-style: none; padding: 0; margin-block: 0; } .f24-menu a { display: inline-flex; align-items: center; min-height: var(--f24-tap); font-size: var(--f24-label); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--f24-on-dark-soft); } .f24-menu a:hover { color: var(--f24-on-dark); } .f24-menu a[aria-current="page"] { color: var(--f24-yellow); box-shadow: inset 0 -3px 0 var(--f24-yellow); } /* ------------------------------------------------------------ EL RELOJ DE POSESIÓN — uno solo, vivo, en la barra ------------------------------------------------------------ Antes había un número dentro de una caja repetido en cada sección. Un 24 suelto seis veces es un adorno; un reloj que CORRE es el concepto. Ahora es un anillo que se vacía y unos dígitos que bajan de 24 a 00 según avanzas por la página, como la posesión de un partido. Sigue siendo el acceso al Match Center. `--f24-clock-p` (1 → 0) lo escribe el JS. ------------------------------------------------------------ */ .f24-clock { position: relative; margin-left: 1.5rem; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto; background: conic-gradient( var(--f24-yellow) calc(var(--f24-clock-p, 1) * 360deg), color-mix(in srgb, var(--f24-white) 16%, transparent) 0 ); transition: background .25s linear; } .f24-clock::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--f24-navy); } .f24-clock b { position: relative; z-index: 1; font-family: var(--f24-display); font-size: 1rem; font-weight: 900; letter-spacing: -.04em; color: var(--f24-yellow); font-variant-numeric: tabular-nums; } /* Últimos segundos: el reloj avisa, como en un pabellón. */ .f24-clock[data-final="true"] { background: conic-gradient( var(--f24-amber) calc(var(--f24-clock-p, 1) * 360deg), color-mix(in srgb, var(--f24-white) 16%, transparent) 0 ); } .f24-clock[data-final="true"] b { color: var(--f24-amber); } .f24-clock:hover::after { background: var(--f24-navy-700); } /* BOTÓN DE MENÚ (21/09/2026, usuario: «el menú es una caja fea de cojones»). Era un cuadrado de 44×44 con filete alrededor y la palabra apretada dentro: un recuadro que no se parecía a nada más del sitio. Ahora es la PALABRA con el subrayado dorado — el mismo recurso que marca la sección activa en el menú de escritorio, así que no se inventa un patrón nuevo, se reutiliza el que ya existe. Se mantiene la altura de 44 px de zona táctil aunque el borde desaparezca: lo que se quita es la caja, no el sitio donde se pulsa. ✅ El dorado aquí es filete, nunca texto: sobre claro no llega a contraste. */ .f24-burger { display: none; margin-left: auto; min-height: var(--f24-tap); padding: 0 .25rem; background: none; border: 0; border-bottom: 2px solid var(--f24-yellow); color: var(--f24-on-dark); cursor: pointer; align-items: center; justify-content: center; font-family: inherit; font-size: var(--f24-label); font-weight: 900; letter-spacing: var(--f24-track-label); text-transform: uppercase; transition: opacity 140ms ease-out; } .f24-burger:hover { opacity: .78; } /* Abierto: el subrayado se apaga y el texto se atenúa, para que se lea como «esto ya está desplegado» sin cambiar el tamaño del botón ni mover el resto. */ .f24-burger[aria-expanded="true"] { border-bottom-color: color-mix(in srgb, var(--f24-yellow) 35%, transparent); opacity: .8; } /* ============================================================ HERO — la entrada en pista ============================================================ */ /* ALTURA DEL HERO — decisión del usuario (17/08): «la imagen y el texto es súper alto, no podemos hacer tanto scroll en solo eso». Antes ocupaba la pantalla entera (100svh) y había que bajar un viewport completo para llegar al primer dato. Ahora es una banda: entra el titular y ya se intuye lo que viene debajo, que es lo que invita a seguir. */ .f24-hero { position: relative; min-height: clamp(19rem, 52vh, 30rem); display: flex; align-items: flex-end; padding: clamp(2.5rem, 7vh, 4.5rem) var(--f24-gutter) clamp(1.75rem, 5vh, 3rem); background: radial-gradient(circle at 78% 30%, color-mix(in srgb, var(--f24-blue) 55%, transparent), transparent 33%), linear-gradient(135deg, var(--f24-navy) 0%, var(--f24-navy-800) 100%); overflow: hidden; } /* Foto del club en duotono: nunca a color (regla de la web actual). */ .f24-hero--foto::before { content: ""; position: absolute; inset: 0; background-image: var(--f24-hero-img); background-size: cover; background-position: center 30%; filter: grayscale(1); opacity: .22; } .f24-hero--velo-suave::before { opacity: .38; } .f24-hero--velo-fuerte::before { opacity: .12; } /* ------------------------------------------------------------ MARCA DE FONDO — el escudo del club, no un círculo cualquiera ------------------------------------------------------------ Antes había aquí una circunferencia dibujada con `border`, que era la línea de campo. El usuario preguntó de dónde salía ese círculo y propuso el escudo amarillo sin fondo (17/08): tiene razón — el escudo YA es un círculo, y además es el del club. Sangra por el borde derecho y va a opacidad baja: acompaña el titular, no compite con él. ------------------------------------------------------------ */ .f24-marca { position: absolute; right: -7vw; top: 50%; transform: translateY(-50%); width: min(30rem, 55vw); height: auto; opacity: .12; pointer-events: none; user-select: none; } /* ⚠️ EL "24" GIGANTE DEL HERO SE RETIRÓ (usuario, 17/08): «me gusta arriba en el menú pero el grande no». El concepto vive donde funciona —el reloj de la barra, que además CORRE— y no repetido a 620px de fondo. No reintroducir la marca de agua: se probó, se vio y se descartó. */ .f24-hero-in { position: relative; z-index: 2; width: 100%; max-width: 68.75rem; } .f24-hero h1 { font-size: var(--f24-d1); letter-spacing: -.075em; margin: .5rem 0 1.75rem; } .f24-hero-foot { display: flex; flex-wrap: wrap; gap: 2rem; align-items: center; } /* Alto de la cabecera, elegible desde Configuración (18/08). El valor medio es el de siempre: quien no toque nada no nota el cambio. */ .f24-hero--compacta { min-height: clamp(14rem, 34vh, 20rem); } .f24-hero--completa { min-height: clamp(24rem, 82vh, 46rem); } /* ------------------------------------------------------------ FIGURA DEL HERO (18/08) — la camiseta del club, un balón… ------------------------------------------------------------ Va a la derecha del titular y se mueve MUY despacio: la animación está para dar vida, no para llamar la atención. Solo desde 900px: en móvil robaría el sitio al titular, que es lo que tiene que leerse. */ .f24-hero-figura { display: none; } @media (min-width: 900px) { .f24-hero--con-figura { align-items: center; } .f24-hero--con-figura .f24-hero-in { max-width: 60%; } .f24-hero-figura { display: block; position: absolute; right: clamp(1rem, 5vw, 5rem); top: 50%; z-index: 2; width: clamp(11rem, 26vw, 20rem); transform: translateY(-50%); animation: f24-flota 7s ease-in-out infinite alternate; filter: drop-shadow(0 1.5rem 2rem color-mix(in srgb, var(--f24-navy) 55%, transparent)); } /* La perspectiva va en el CONTENEDOR y el giro en la imagen: así el balanceo (animación CSS del contenedor) y la inclinación que sigue al ratón (transform por JS en la imagen) no se pisan. Si ambos escribieran `transform` sobre el mismo elemento, el último ganaría y se perdería uno de los dos. */ .f24-hero-figura { perspective: 900px; } .f24-hero-figura img { display: block; width: 100%; height: auto; transform: rotateX(0) rotateY(0); transition: transform .25s ease-out; will-change: transform; } } /* El recorrido es de 14px en 7 segundos: se percibe como que respira, no como que se mueve. Con `prefers-reduced-motion` el reset global de tokens.css la deja quieta, sin necesidad de repetirlo aquí. */ @keyframes f24-flota { from { transform: translateY(-50%) rotate(-1.2deg); } to { transform: translateY(calc(-50% - 14px)) rotate(1.2deg); } } /* ============================================================ TICKER — CBAT PULSE en directo ============================================================ */ .f24-ticker { background: var(--f24-yellow); color: var(--f24-navy); overflow: hidden; padding: .8125rem 0; } .f24-ticker-track { display: flex; gap: 2rem; width: max-content; white-space: nowrap; padding-left: var(--f24-gutter); animation: f24-ticker 38s linear infinite; } .f24-ticker:hover .f24-ticker-track, .f24-ticker:focus-within .f24-ticker-track { animation-play-state: paused; } .f24-ticker span { font-size: var(--f24-label); font-weight: 900; letter-spacing: .12em; text-transform: uppercase; } .f24-ticker-dot { color: var(--f24-blue); } /* Mensaje de la cinta que lleva a algún sitio. Subrayado, porque sobre el amarillo el color no puede ser la única señal de que es un enlace. La cinta ya se para al pasar por encima o al recibir foco, así que se puede pinchar sin perseguirlo. */ .f24-tick-link { color: inherit; text-decoration: underline; text-underline-offset: .25em; text-decoration-thickness: 2px; } .f24-tick-link:hover { text-decoration-thickness: 3px; } @keyframes f24-ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ============================================================ SECCIONES — cada una es una superficie a sangre, no una card ============================================================ */ /* `overflow: visible` a propósito: el CORTE de cada sección se dibuja fuera de su caja (translateY -99%) para montarse sobre la anterior. Con `hidden` se recortaba y no se veía ni uno. Lo que sobresale por los lados lo recorta `.f24 { overflow-x: hidden }` del body. */ /* ⚠️ `overflow-x: clip` y NO `hidden`, y el vertical visible a propósito (21/09/2026, el usuario grabó el móvil: «el margen derecho que queda»). La portada se podía arrastrar 23 px en horizontal y quedaba una franja muerta a la derecha con el titular cortado. El culpable es `.f24-paint` —el parqué decorativo— que sangra por la derecha con `right: -6vw`: en una pantalla de 390 px son exactamente esos 23 px. El `overflow-x: hidden` que lleva `.f24` (el body) no lo frenaba. Por qué `clip` y no `hidden`: esta sección tenía `overflow: visible` PORQUE los cortes (`.f24-corte`) se dibujan FUERA, por encima del borde superior con `translateY(-99%)`. Con `hidden` se decapitan todos. `clip` recorta solo el eje que sobra, no crea contenedor de scroll y es la única forma de combinarse con `overflow-y: visible` sin que el navegador lo convierta en `auto`. En un navegador viejo que no lo entienda, se ignora y queda como estaba: no empeora nada. */ .f24-section { position: relative; overflow-x: clip; overflow-y: visible; padding: var(--f24-section) var(--f24-gutter); } .f24-section > *:not(.f24-paint):not(.f24-corte) { position: relative; z-index: 1; } .f24-section--claro { background: var(--f24-paper); color: var(--f24-ink); } .f24-section--azul { background: var(--f24-blue); color: var(--f24-on-dark); } .f24-section--editorial { background: var(--f24-editorial); color: var(--f24-ink); } .f24-section--amarillo { background: var(--f24-yellow); color: var(--f24-navy); } .f24-section--navy { background: var(--f24-navy); color: var(--f24-on-dark); } /* ------------------------------------------------------------ CORTES ENTRE SECCIONES (17/08/2026) ------------------------------------------------------------ Encargo del usuario: «los cortes entre una y otra sección, rollo montañita, libro…». Cada sección dibuja su propia frontera SUPERIOR con SU color y se monta encima de la anterior: así encaja siempre sin saber de qué color era la de arriba, y cambiar el fondo de una sección no obliga a tocar la vecina. `color` se hereda de la superficie y el `` usa `fill="currentColor"` — por eso cada modificador de fondo fija el color del corte al suyo. ------------------------------------------------------------ */ .f24-corte { position: absolute; left: 0; top: 0; width: 100%; height: clamp(28px, 4.5vw, 70px); transform: translateY(-99%); /* el -99 evita la costura de 1px del subpíxel */ pointer-events: none; line-height: 0; } .f24-corte svg { display: block; width: 100%; height: 100%; } .f24-section--claro > .f24-corte { color: var(--f24-paper); } .f24-section--editorial > .f24-corte { color: var(--f24-editorial); } .f24-section--azul > .f24-corte { color: var(--f24-blue); } .f24-section--navy > .f24-corte { color: var(--f24-navy); } .f24-section--amarillo > .f24-corte { color: var(--f24-yellow); } .f24-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1.25rem; flex-wrap: wrap; margin-bottom: 2.75rem; } .f24-head h2 { font-size: var(--f24-d2); } .f24-more { display: inline-flex; align-items: center; gap: .5em; min-height: var(--f24-tap); font-size: var(--f24-label); font-weight: 800; letter-spacing: .15em; text-transform: uppercase; color: var(--f24-yellow); } .f24-more:hover { box-shadow: inset 0 -2px 0 currentColor; } /* Sobre claro el amarillo no se lee (1,5:1): el enlace es azul y el amarillo entra como subrayado al pasar. */ .f24-section--claro .f24-more, .f24-section--editorial .f24-more { color: var(--f24-blue); } .f24-section--claro .f24-more:hover, .f24-section--editorial .f24-more:hover { box-shadow: inset 0 -.5em 0 -.35em var(--f24-yellow); } .f24-section--amarillo .f24-more { color: var(--f24-navy); } /* Estado vacío: se escribe como titular, no como "no hay datos". La web del club no puede tener huecos con cara de error. */ .f24-empty { font-family: var(--f24-display); font-size: var(--f24-d5); font-weight: 900; text-transform: uppercase; letter-spacing: var(--f24-track-display); line-height: .95; margin: 0; max-width: 20ch; } /* La frase de "todavía no hay" es el TITULAR de esa sección, no un aviso apagado: se escribe a plena tinta con la palabra clave subrayada. Un gris al 55 % la dejaba con cara de error. */ .f24-empty em { font-style: normal; box-shadow: inset 0 -.12em 0 var(--f24-yellow); } .f24-empty + .f24-lead { margin-top: 1.25rem; } .f24-section--claro .f24-lead, .f24-section--editorial .f24-lead { color: var(--f24-ink-soft); } .f24-section--amarillo .f24-lead { color: var(--f24-navy); } /* ============================================================ MATCH CENTER — un marcador de retransmisión, no una tarjeta ============================================================ */ .f24-board { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; padding: 2.375rem 0; border-top: 2px solid currentColor; border-bottom: 2px solid currentColor; } /* NOMBRE EN EL MARCADOR — dos alturas. Un marcador de retransmisión enseña el CLUB en grande y el equipo en pequeño. Aquí es además lo que evita el desastre: con "CBAT Senior Masc." o "CB Rincón de la Victoria" a 7rem, el navegador partía las palabras con guiones ("CB MARBE-LLA"). Nada de `hyphens: auto` en nombres propios. */ /* 🛡️ EL ESCUDO DEL RIVAL EN EL MARCADOR (13/09/2026). Tamaño en `em` para que siga al nombre del equipo cuando el marcador encoge en móvil, y `contain` porque los escudos llegan en todas las proporciones: cuadrados, apaisados y con forma de escudo de verdad. No se le pone fondo: los que traen transparencia se apoyan en la tarjeta, y ponerles un cuadro blanco los ensuciaría. */ .f24-board-escudo { display: block; /* Se subió de 2,125em a 3,5em el 13/09/2026: a ojo del usuario se quedaban pequeños al lado del nombre del equipo, que en este marcador es tipografía display. Sigue en `em` para que encoja con el nombre. */ width: 3.5em; height: 3.5em; object-fit: contain; margin-bottom: .25rem; } .f24-board-team--away .f24-board-escudo { margin-left: auto; } .f24-board-team { margin: 0; min-width: 0; } .f24-board-team strong { display: block; font-family: var(--f24-display); font-size: var(--f24-d3); font-weight: 900; letter-spacing: -.06em; line-height: .88; text-transform: uppercase; text-wrap: balance; } .f24-board-team span { display: block; margin-top: .5rem; font-family: var(--f24-body); font-size: var(--f24-label); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--f24-ink-soft); } .f24-board-team--away { text-align: right; } .f24-board-mid { text-align: center; } .f24-board-mid strong { display: block; font-family: var(--f24-display); font-size: clamp(1.75rem, 6vw, 5.5rem); font-weight: 900; letter-spacing: -.06em; } .f24-board-mid small { display: block; font-size: var(--f24-label-sm); font-weight: 800; letter-spacing: .15em; text-transform: uppercase; color: var(--f24-ink-soft); margin-top: .375rem; } /* Resultado: el ganador manda tipográficamente. */ .f24-board-mid strong .f24-score-win { color: var(--f24-blue); } .f24-board-mid strong .f24-score-sep { opacity: .35; margin: 0 .15em; } /* «Jugado» (Baby y Premini, que no llevan marcador). Es una PALABRA donde el marcador pone cifras: al tamaño del resultado —hasta 5.5rem— se comería los nombres de los dos equipos, así que baja de escala y suelta el interletraje negativo, que es para números. */ .f24-board-mid strong.f24-board-jugado { font-size: clamp(1.25rem, 3.5vw, 2.75rem); letter-spacing: -.02em; } /* 🤝 «Partido patrocinado por». Una línea discreta bajo la meta: el patrocinador tiene que verse en cada partido, pero lo primero que se lee sigue siendo quién juega y cuándo. */ .f24-board-patro { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .5rem .75rem; margin: .75rem 0 0; } .f24-board-patro-txt { font-size: var(--f24-label-sm); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--f24-ink-soft); } .f24-board-patro-marca { display: inline-flex; align-items: center; gap: .625rem; text-decoration: none; color: inherit; } /* El alto lo manda la marca mas apretada que tenemos: el logotipo de Invermoneda es una palabra ancha y baja (466x86), asi que a 1,5rem de alto las letras quedaban en 10 px y solo se leia la M. A 2,5rem la palabra se lee entera. */ .f24-board-patro-marca img { height: 2.5rem; width: auto; max-width: 12rem; object-fit: contain; } /* 🏷️ AQUÍ VA EL LOGO NORMAL Y SIN PLACA, porque esta línea vive sobre superficie clara. `patrocinadores` guarda las dos versiones de cada logotipo desde antes de todo esto: `logo` (el de color, para fondo claro) y `logo_blanco` (para fondo oscuro, el de los muros). ⚠️ Antes se intentó salir del paso con UNA sola versión: placa blanca bajo el logo del muro (desaparecieron los ocho) y placa navy bajo el de la línea (se leía, pero encajonado). Ninguna de las dos era el problema: el problema era pretender que un archivo sirviera para los dos fondos. */ /* 🔴 ESTA REGLA VA DESPUES DE `.f24-board-patro` A PROPOSITO: las dos tienen la misma especificidad, así que escrita antes ganaba la base y la línea seguía saliendo centrada por mucho `flex-start` que se le pusiera. Pasó al escribirla (13/09/2026) y se vio en la ficha del Invermoneda. Encabezando una LISTA se alinea con el título; acompañando a un marcador, centrada. */ .f24-board-patro--bloque { justify-content: flex-start; margin: -.5rem 0 1.25rem; } .f24-board-patro-marca strong { font-size: var(--f24-label); font-weight: 900; letter-spacing: .1em; text-transform: uppercase; } /* Sobre fondo oscuro el gris de la meta se apaga demasiado. */ .f24-section--navy .f24-board-patro-txt { color: var(--f24-blue-pale); } .f24-board-meta { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: 1rem; font-size: var(--f24-label); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; } /* Lista de partidos: filas con filete de estado. Sin cajas. */ .f24-fixtures { margin-top: 3rem; display: grid; } .f24-fixture { display: grid; /* La segunda columna es el hueco FIJO del escudo: se reserva aunque ese partido no tenga, para que los nombres de todas las filas empiecen en la misma vertical. */ /* 11,5 rem y no 10: esa columna dejó de ser solo la categoría —ahora lleva debajo la competición y a la derecha el logo del patrocinador—. Con 10 rem al texto le quedaban ~80 px y «VI Supercopa Diputación Provincial Málaga» salía a renglón por palabra en la portada. */ grid-template-columns: 11.5rem 2.5rem 1fr auto; align-items: baseline; gap: 1.25rem; padding: 1.125rem 0 1.125rem 1rem; border-top: 1px solid var(--f24-line-light); border-left: 3px solid var(--f24-blue); transition: background-color 140ms ease-out; } /* Al pasar por encima, la fila se tiñe de azul del club (21/09/2026, pedido del usuario: «que cambien de color, se ponga azulito»). El tinte va con `color-mix` sobre `--f24-blue` y no con un color fijo: así sigue al azul del club si algún día cambia, y al ser un 7 % no compite con el verde/rojo del marcador, que es lo único que debe destacar en la fila. Solo donde hay ratón: en táctil el `:hover` se queda pegado al tocar. */ @media (hover: hover) { .f24-fixture:hover { background-color: color-mix(in srgb, var(--f24-blue) 7%, transparent); } } .f24-fixture:last-child { border-bottom: 1px solid var(--f24-line-light); } /* La crónica del partido, en su propia fila del grid (13/09/2026). Empieza en la columna del NOMBRE y no en el margen, para que se lea como lo que es: lo que se cuenta de ESE partido, no un texto suelto de la página. Filete amarillo, igual que en la ficha de la jornada — es la misma pieza editorial y no debe tener dos caras. */ .f24-fixture-cronica { grid-column: 3 / -1; max-width: 46rem; margin: .75rem 0 0; padding-left: 1rem; border-left: 3px solid var(--f24-yellow); color: var(--f24-ink); font-size: .9375rem; line-height: 1.55; } .f24-fixtures--oscuro .f24-fixture-cronica { color: var(--f24-on-dark-soft); } /* El filete de la izquierda, por estado (21/09/2026): ganado verde · perdido rojo · en casa azul · fuera amarillo · descansa gris. El amarillo de `--final` se queda como respaldo para los partidos jugados SIN marcador publicado (baby y premini), donde no hay ganador que pintar. */ .f24-fixture--final { border-left-color: var(--f24-yellow); } .f24-fixture--rest { border-left-color: var(--f24-grey-soft); } .f24-fixture--gana { border-left-color: var(--green); } .f24-fixture--pierde { border-left-color: var(--red); } .f24-fixture--casa { border-left-color: var(--f24-blue); } .f24-fixture--fuera { border-left-color: var(--f24-yellow); } /* La celda de la categoría es una rejilla de dos columnas: a la izquierda las dos líneas (categoría y competición) y a la derecha el logo del patrocinador, centrado sobre las DOS (21/09/2026, usuario: «el mejor sitio no es debajo sino a la misma altura […] en la derecha una como si fuesen las dos»). Puesto debajo empujaba la fila hacia abajo y dejaba la columna más alta que el partido. */ .f24-fixture-cat { font-size: var(--f24-label-sm); font-weight: 800; letter-spacing: .15em; text-transform: uppercase; color: var(--f24-ink-soft); display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: .5rem; align-items: center; } .f24-fixture-cat-txt, .f24-fixture-competi { grid-column: 1; } /* La competición, bajo la categoría: en minúsculas, más floja y a DOS LÍNEAS como mucho. Sin el tope, «VI Supercopa Diputación Provincial Málaga» se partía en cinco renglones dentro de una columna de 11 rem y la fila parecía un párrafo; lo que manda ahí es la categoría, esto es el apellido. */ .f24-fixture-competi { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: .3rem; font-size: .6875rem; font-weight: 700; font-style: normal; letter-spacing: .02em; text-transform: none; line-height: 1.25; opacity: .68; } /* El logo del patrocinador dentro de la fila: chiquito, en escala de grises y con poca opacidad hasta que se pasa por encima. Así firma el partido sin competir con el marcador ni con el escudo del rival, que son los dos elementos que sí hay que leer de un vistazo. */ /* ⚠️ Va con `.f24` delante A PROPOSITO: `.f24 img { max-width: 100% }` tiene una clase MAS de especificidad que `.f24-fixture-patro` a secas, asi que se comia el tope de ancho y el logo salia a 104 px —el doble— aplastando la columna de la categoria hasta dejarla en 72 px de texto. */ .f24 .f24-fixture-patro { grid-column: 2; grid-row: 1 / span 2; align-self: center; display: block; max-width: 4.25rem; max-height: 1.4rem; width: auto; height: auto; object-fit: contain; object-position: left center; opacity: .55; filter: grayscale(1); transition: opacity 160ms ease-out, filter 160ms ease-out; } @media (hover: hover) { .f24-fixture:hover .f24-fixture-patro { opacity: 1; filter: grayscale(0); } } /* Cuál de las dos versiones del logo se ve: la de color sobre claro y la BLANCA sobre navy (21/09/2026, usuario: «en últimos resultados el patrocinador en formato blanco, si no los que son azules ni los vemos»). Si el patrocinador solo tiene una versión, esa se queda. */ .f24-fixture-patro--blanco { display: none; } .f24-fixtures--oscuro .f24-fixture-patro--color { display: none; } .f24-fixtures--oscuro .f24-fixture-patro--blanco { display: block; opacity: .75; filter: none; } @media (hover: hover) { .f24-fixtures--oscuro .f24-fixture:hover .f24-fixture-patro--blanco { opacity: 1; } } @media (max-width: 900px) { /* En móvil la categoría ocupa toda la fila y hay sitio de sobra al lado de la etiqueta: el logo respira un poco más. */ .f24 .f24-fixture-patro { max-height: 1.5rem; } } .f24-fixture-tie strong { font-family: var(--f24-display); font-size: clamp(1.125rem, 2.2vw, 1.75rem); font-weight: 900; letter-spacing: -.03em; text-transform: uppercase; display: block; } .f24-fixture-tie em { font-style: normal; color: var(--f24-ink-soft); font-size: .875rem; } /* DERBI (02/10/2026): pegatina junto al nombre cuando juegan dos equipos del club entre sí. Amarillo con tinta navy, un pelín girada: es una pegatina. */ .f24-derbi { display: inline-block; vertical-align: middle; margin-left: .375rem; padding: .2rem .5rem; background: var(--f24-yellow); color: var(--f24-navy); font-family: var(--f24-body); font-size: var(--f24-label-sm); font-weight: 900; letter-spacing: .15em; transform: rotate(-4deg); border-radius: var(--radius-sm); } .f24-fixture-when { font-size: var(--f24-label); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; } /* LA PISTA, bajo la fecha y la hora (20/09/2026). Va en otra línea, más pequeña y sin mayúsculas forzadas: es un dato de apoyo, no un titular, y los nombres de pabellón son largos. */ /* El pabellon, cuando lleva mapa, sigue siendo el mismo texto: subrayado discreto al pasar por encima y nada mas. No es una llamada a la accion, es un dato que ademas resulta que se puede abrir. */ .f24-fixture-pista--mapa { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 140ms ease-out; } @media (hover: hover) { .f24-fixture-pista--mapa:hover { border-bottom-color: currentColor; } } .f24-fixture-pista--mapa:focus-visible { outline: 2px solid var(--f24-yellow); outline-offset: 2px; } .f24-fixture-pista { display: block; margin-top: .25rem; font-size: .78em; font-weight: 700; font-style: normal; letter-spacing: .02em; text-transform: none; white-space: normal; opacity: .72; } /* La fecha que acompaña al marcador NO hereda el verde de ganar ni el rojo de perder: el color ahí significa resultado, y una fecha no se gana ni se pierde. Va en el gris de metadatos y más pequeña, que el marcador es tipografía grande y si no se lee como parte del número. */ .f24-fixture-score .f24-fixture-pista { color: var(--f24-ink-soft); opacity: 1; font-size: .42em; letter-spacing: .08em; text-transform: uppercase; margin-top: .35rem; } .f24-fixtures--oscuro .f24-fixture-score .f24-fixture-pista { color: var(--f24-on-dark-soft); } /* Suscripcion al calendario: el boton y su letra pequena. La nota va en gris de metadatos y no en rojo de aviso — informa, no asusta. */ .f24-calsub { display: flex; gap: 1.25rem; flex-wrap: wrap; /* Anclado arriba y NO centrado: con `center`, al desplegar el «cómo funciona» el botón se iba hacia abajo buscando el centro de la fila, y un botón que se mueve solo cuando pulsas al lado parece que algo falla. */ align-items: flex-start; margin-bottom: 2.5rem; } /* El desplegable de info: cerrado es una linea discreta con su simbolo; abierto, tres parrafos cortos. Nada de amarillo — esto informa, no avisa de un problema, y el dorado en esta paleta no vale ni para texto. */ .f24-info { flex: 1 1 20rem; min-width: 0; font-size: .8125rem; line-height: 1.5; color: var(--f24-ink-soft); } .f24-info > summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: .45rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; font-size: var(--f24-label); color: var(--f24-blue); padding: .25rem 0; } .f24-info > summary::-webkit-details-marker { display: none; } /* El simbolo de informacion, dibujado con el borde: un icono menos que cargar. */ .f24-info > summary::before { content: "i"; flex: 0 0 auto; width: 1.05rem; height: 1.05rem; border: 1.5px solid currentColor; border-radius: 50%; font-family: var(--f24-display); font-style: italic; font-size: .75rem; line-height: 1; display: inline-flex; align-items: center; justify-content: center; } .f24-info[open] > summary { margin-bottom: .5rem; } .f24-info-cuerpo { border-left: 2px solid var(--f24-line-light); padding-left: .9rem; max-width: 34rem; } .f24-info-cuerpo p { margin: 0 0 .5rem; } .f24-info-cuerpo p:last-child { margin-bottom: 0; } .f24-info > summary:focus-visible { outline: 2px solid var(--f24-yellow); outline-offset: 3px; } @media (max-width: 760px) { .f24-calsub { gap: .75rem; } .f24-calsub .f24-btn { width: 100%; justify-content: center; } } /* ── Calendario en DOS COLUMNAS (20/09/2026) ────────────────────────────── «Próximos partidos y resultados en dos columnas para no tener tanto scroll»: con el calendario entero son 20-25 partidos por equipo y en fila india había que recorrer la página para ver un resultado. */ .f24-calgrid { display: grid; gap: 3rem 2.5rem; align-items: start; /* `auto-fit` y no `1fr 1fr`: un equipo que aún no ha jugado solo tiene la columna de próximos, y con dos columnas fijas se quedaba encogida en la mitad izquierda con medio folio en blanco al lado. */ grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); } .f24-calgrid .f24-calcol { min-width: 0; /* Tope de ancho AUNQUE haya una sola columna: un equipo que todavía no ha jugado solo tiene «Próximos partidos», y sin esto la fila se estiraba a toda la página dejando la fecha a medio metro del nombre del rival. */ max-width: 46rem; } /* En columna, los dos titulares van en UNA línea («Próximos partidos» perdió su salto): así arrancan las dos listas a la misma altura sin reservar hueco. */ .f24-calgrid .f24-head h2 { text-wrap: balance; } .f24-calgrid .f24-fixtures { margin-top: 1.5rem; } /* Texto más grande en la lista de partidos (21/09/2026, pedido del usuario). Sube el rival, la fecha y la pista; el nombre del equipo ya escala solo con `clamp()`. Se toca únicamente dentro de `.f24-calgrid` —la ficha de equipo— para no cambiar de paso el Match Center ni la portada. */ .f24-calgrid .f24-fixture-tie em { font-size: 1rem; } .f24-calgrid .f24-fixture-when { font-size: .8125rem; } .f24-calgrid .f24-fixture-cat { font-size: .75rem; } .f24-calgrid .f24-fixture-competi { font-size: .75rem; } /* El MARCADOR, más grande (21/09/2026, usuario: «los de resultado se han descuadrado un poco o el resultado se ve pequeñito»). En dos columnas el `clamp` con `vw` se quedaba corto: el `vw` mide la VENTANA, no la columna, así que al partir la lista en dos el número siguió creciendo igual pero al lado de un bloque la mitad de ancho parecía pequeño. */ .f24-calgrid .f24-fixture-score { font-size: clamp(2rem, 3.2vw, 3.25rem); line-height: 1; } /* Y la fecha de debajo pasa de .42em translúcido a tamaño absoluto con el gris de metadatos: es un dato que se lee, no una marca de agua. */ .f24-calgrid .f24-fixture-score .f24-fixture-pista { font-size: .8125rem; letter-spacing: .04em; color: var(--f24-ink-soft); opacity: 1; margin-top: .4rem; } /* LA PISTA, LEGIBLE (21/09/2026, usuario: «la pista sigue sin verse»). Estaba en `em` colgando de la fecha, que ya es un texto pequeño: el .78em se quedaba en ~9 px, y encima con opacidad .72 sobre gris claro. Se pasa a tamaño ABSOLUTO, sin opacidad y con el gris de metadatos, que sí tiene contraste. Dónde se juega no es decoración: es lo que busca un padre para saber a qué pabellón ir. ⚠️ Acotado al bloque de FECHA/HORA (`--when`) y no a cualquier `-pista`: la fecha que acompaña al marcador usa la misma clase y es deliberadamente diminuta. Sin acotar, esta regla la agrandaba y descuadraba la columna. */ .f24-calgrid .f24-fixture-when .f24-fixture-pista { font-size: .8125rem; font-weight: 600; letter-spacing: 0; text-transform: none; opacity: 1; color: var(--f24-ink-soft); } @media (max-width: 760px) { .f24-calgrid .f24-fixture-when .f24-fixture-pista { font-size: .875rem; } } /* La columna de fecha/hora/pista, de ANCHO FIJO y alineada a la derecha: con `auto` cada fila empezaba donde terminaba el nombre del rival, así que las fechas quedaban desparramadas —una a cada altura— en vez de formar columna. */ /* Centrado vertical dentro de la fila (21/09/2026, usuario: «habría que centrar en cuanto al alto»). La fila original alinea por `baseline`, que funciona cuando todo son textos de un renglón; aquí la celda de categoría puede ocupar cuatro líneas («VI Supercopa Diputación Provincial Málaga») y el marcador es tipografía grande, así que por baseline todo quedaba colgando de arriba. Centrado, cada bloque se sitúa respecto a la altura real de la fila. Solo dentro de `.f24-calgrid`: el Match Center sigue como estaba. */ .f24-calgrid .f24-fixture { grid-template-columns: 11.5rem 2.5rem 1fr 10.5rem; align-items: center; } /* La fecha y la pista van una debajo de otra y con longitudes distintas: si se alinean a la derecha, el borde IZQUIERDO queda dentado y cada fila parece colocada a su aire. A la izquierda comparten el mismo punto de partida y se leen como columna. El marcador sí va a la derecha: es un número. */ .f24-calgrid .f24-fixture-when { text-align: left; } /* El marcador, CENTRADO en su columna y grande (21/09/2026, elección del usuario). Pegado a la derecha quedaba descolgado del partido al que pertenece; centrado en su hueco se lee como lo que es, el dato principal de la fila. La fecha se centra con él para que formen un bloque. */ .f24-calgrid .f24-fixture-score { text-align: center; } /* 🔴 Y LO MISMO EN MÓVIL, o la fila se rompe. La fila de partido ya tenía su propia rejilla para pantallas pequeñas (`2.5rem 1fr auto` y `2.5rem 1fr`), pero esas reglas viven en un `@media` con UNA clase de especificidad; la de arriba lleva DOS, así que ganaba en todos los anchos. Resultado medido a 390 px: las columnas fijas sumaban más que la pantalla y el nombre del equipo salía a palabra por línea («VIVE / CBAT / SENIOR / FEM»). */ @media (max-width: 900px) { .f24-calgrid .f24-fixture { grid-template-columns: 2.5rem 1fr auto; } } @media (max-width: 520px) { .f24-calgrid .f24-fixture { grid-template-columns: 2.5rem 1fr; } } @media (max-width: 900px) { .f24-calgrid { grid-template-columns: 1fr; gap: 2.5rem; } } /* 🛡️ El escudo del rival en la fila. Cuadrado fijo y no en `em`: aquí la fila es densa y el escudo es un icono de lista, no un protagonista. */ .f24-fixture-escudo { width: 2.5rem; height: 2.5rem; display: flex; align-items: center; justify-content: center; align-self: center; } .f24-fixture-escudo img { max-width: 100%; max-height: 100%; object-fit: contain; } /* 🟢🔴 Ganado y perdido. El color va en el MARCADOR, no en la fila entera: una fila verde y otra roja convierten la lista en un semáforo y lo primero que hay que leer sigue siendo quién juega contra quién. */ .f24-fixture-score--gana { color: var(--green); } .f24-fixture-score--pierde { color: var(--red); } .f24-fixture-score { font-family: var(--f24-display); font-size: clamp(1.25rem, 3vw, 2.25rem); font-weight: 900; letter-spacing: -.04em; white-space: nowrap; } /* Misma posición que el marcador, pero es texto: sin el aire de una cifra grande, para que no compita con los resultados de al lado. */ .f24-fixture-score--jugado { font-size: clamp(.95rem, 1.8vw, 1.3rem); letter-spacing: .02em; } /* Las mismas filas sobre superficie OSCURA (sección de resultados): solo cambian las líneas y los grises, la anatomía es idéntica —un partido se lee igual esté donde esté. */ .f24-fixtures--oscuro .f24-fixture { border-top-color: var(--f24-line-dark); } .f24-fixtures--oscuro .f24-fixture:last-child { border-bottom-color: var(--f24-line-dark); } .f24-fixtures--oscuro .f24-fixture-cat, .f24-fixtures--oscuro .f24-fixture-tie em { color: var(--f24-on-dark-soft); } /* ============================================================ EVENTOS — rejilla asimétrica, dorsal de fondo ============================================================ */ .f24-events { display: grid; grid-template-columns: 1.35fr .65fr; gap: 1.125rem; } .f24-event { position: relative; min-height: 35rem; overflow: hidden; display: flex; align-items: flex-end; padding: 1.875rem; background: var(--f24-navy-800); } /* Los velos van con el NAVY del club, no con negro: oscurecen igual y tiñen en la marca en vez de apagar (decisión del usuario, 17/08). */ .f24-event--main { background: linear-gradient(0deg, color-mix(in srgb, var(--f24-navy) 80%, transparent), transparent 70%), radial-gradient(circle at 65% 35%, color-mix(in srgb, var(--f24-blue-mid) 90%, var(--f24-white)), transparent 30%), var(--f24-navy-800); } .f24-event--side { background: linear-gradient(0deg, color-mix(in srgb, var(--f24-navy) 85%, transparent), transparent), var(--f24-navy); } .f24-event-num { position: absolute; right: -.625rem; top: -2.2rem; font-family: var(--f24-display); font-size: 15.625rem; font-weight: 900; letter-spacing: -.1em; color: color-mix(in srgb, var(--f24-white) 6%, transparent); pointer-events: none; user-select: none; } .f24-event-txt { position: relative; } .f24-event-txt h3 { font-size: var(--f24-d4); line-height: .86; margin: .625rem 0; } .f24-event-txt p { color: var(--f24-on-dark-soft); margin: 0; } /* ============================================================ NOTICIAS — separadas por filete de 1px, nunca por caja ============================================================ */ /* Flex y no grid: con `1.2fr .8fr .8fr` fijas, una sola noticia dejaba dos columnas vacías pintadas de gris —el mismo agujero que tenían los partners—. Así la primera sigue mandando cuando hay varias, y cuando hay una ocupa el ancho entero. */ .f24-news { display: flex; flex-wrap: wrap; gap: 1px; background: var(--f24-line-light); } .f24-article { position: relative; flex: 1 1 20rem; background: var(--f24-white); color: var(--f24-ink); min-height: 24rem; padding: 1.5rem; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; transition: background .18s ease; } /* 🔑 CLASE EXPLÍCITA, NO POSICIÓN (08/09/2026). Esto era `.f24-article:first-child`, y los selectores posicionales ya han mordido dos veces aquí: `a:first-child` el 16/08 (los primeros hijos eran `
`) y `td:last-child` el 25/08. Quién es la grande lo decide ahora la vista, que es la única que sabe cuántas noticias hay. */ .f24-article--principal { flex: 1.4 1 26rem; min-height: 32rem; } /* Si es la única, no tiene sentido que sea "la grande" a doble altura. */ .f24-article--sola { min-height: 24rem; } /* Sin fotografía es una tarjeta de TEXTO, y entonces sobra la mitad del alto: un bloque enorme vacío está pidiendo una imagen que no existe. */ .f24-article:not(.f24-article--foto) { min-height: 11rem; justify-content: flex-start; /* el titular arriba: no hay foto que dejar ver */ } /* Con fotografía, la tarjeta ES la foto: velo navy de abajo arriba para que el titular se lea siempre, tenga la foto que tenga. */ .f24-article--foto { background-image: linear-gradient(0deg, var(--f24-navy) 2%, color-mix(in srgb, var(--f24-navy) 55%, transparent) 45%, transparent 80%), var(--f24-art-img); background-size: cover; background-position: center; color: var(--f24-on-dark); } .f24-article--foto::before { content: none; } .f24-article--foto .f24-article-date { color: var(--f24-yellow); } /* 🛡️ SIN FOTO, EL ESCUDO DEL CLUB (13/09/2026). Una tarjeta de texto sobre blanco al lado de otra con fotografía se lee como un hueco. Con el escudo detrás sigue siendo una tarjeta de texto —el alto no crece, no hay nada que enseñar— pero con identidad del club en vez de vacío. Mismo tratamiento que las tarjetas de EQUIPO sin foto: navy de fondo, logo amarillo a la derecha y velo encima para que mande el titular. */ .f24-article--logo { background-color: var(--f24-navy); background-image: var(--f24-art-logo); background-repeat: no-repeat; background-size: auto 130%; background-position: right -2.5rem center; color: var(--f24-on-dark); } /* El radial claro de `.f24-article::before` está pensado para superficie blanca: sobre navy ensucia. Se retira, igual que en `--foto`. */ .f24-article--logo::before { content: none; } .f24-article--logo::after { /* Capa aparte y no opacidad del fondo, porque `background-image` no tiene opacidad propia. Mismo recurso que `.f24-equipo--logo`. */ content: ""; position: absolute; inset: 0; background: color-mix(in srgb, var(--f24-navy) 72%, transparent); pointer-events: none; } .f24-article--logo > * { position: relative; z-index: 1; } .f24-article--logo .f24-article-date { color: var(--f24-yellow); } /* Velo del azul del club en la esquina, muy tenue: da profundidad sin oscurecer. Antes era un radial sobre negro. */ .f24-article::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 70% 15%, color-mix(in srgb, var(--f24-blue) 10%, transparent), transparent 45%); } /* 🔴 `background-color` Y NO EL SHORTHAND `background` (13/09/2026). Aquí ponía `background: var(--f24-editorial)` y **la noticia se volvía BLANCA al pasar el ratón**: `--f24-editorial` es blanco con un 6 % de azul, y el shorthand RESETEA `background-image` — que en una tarjeta con foto es la foto y su velo navy. O sea que el hover borraba la imagen y dejaba la tarjeta en blanco con el titular encima. 👉 La regla general: en un elemento que pueda tener imagen de fondo, el hover se escribe con `background-color`. El shorthand no cambia un color: rehace la capa entera. */ .f24-article:hover { background-color: var(--f24-editorial); } /* ⚠️ Y VA DESPUÉS DE LA DE ARRIBA A PROPÓSITO. `.f24-article--foto:hover` y `.f24-article:hover` tienen EXACTAMENTE la misma especificidad (una clase + una pseudoclase), así que decide el orden. Estaba escrita antes y perdía — la misma trampa que mordió dos días seguidos el 12 y el 13/09. Si algún día alguien reordena este archivo, esto se rompe sin avisar. Sobre la foto el color casi no se ve (lo tapa el `cover`), pero refuerza el velo por los bordes y evita el destello claro de la regla general. */ .f24-article--foto:hover { background-color: var(--f24-navy); } /* Misma trampa, mismo sitio: si esta regla subiera por encima de `.f24-article:hover` perdería por orden y la tarjeta parpadearía en blanco al pasar el ratón, que es justo el fallo que se arregló hoy. */ .f24-article--logo:hover { background-color: var(--f24-navy); } .f24-article > * { position: relative; } .f24-article-date { font-size: var(--f24-label-sm); font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--f24-blue); } .f24-article h3 { font-size: var(--f24-d5); line-height: .96; letter-spacing: -.04em; margin: .625rem 0 0; } .f24-article:hover h3 { box-shadow: inset 0 -.08em 0 var(--f24-yellow); } /* ============================================================ PARTNERS — los patrocinadores reales del club ------------------------------------------------------------ Muro de logos separados por filete de 1px, la misma gramática que las noticias. Nada de cajas redondeadas ni "banner". Los logos van en su versión BLANCA sobre superficie oscura, a opacidad contenida: acompañan, no gritan. Al pasar, el logo sube a plena tinta y el nombre se lee. ============================================================ */ /* Flex y no grid a propósito: con `auto-fit` la última fila dejaba un hueco muerto cuando el nº de partners no es múltiplo de las columnas (9 sobre 5). En flex, la última fila ESTIRA y el muro queda cerrado siempre, con los partners que haya. */ .f24-partners { display: flex; flex-wrap: wrap; border-top: 1px solid var(--f24-line-dark); border-left: 1px solid var(--f24-line-dark); } .f24-partner { flex: 1 1 11rem; border-right: 1px solid var(--f24-line-dark); border-bottom: 1px solid var(--f24-line-dark); /* Más alto para que el logo respire: la celda mandaba sobre la imagen y por eso se veía diminuta (usuario, 19/08). */ /* 👀 La CELDA manda sobre la imagen: con la celda muy alta y la imagen con techo, sobra hueco arriba y abajo y el logo parece pequeño aunque esté a su tamaño. Visto en beta el 13/09/2026: se baja la celda y se sube la imagen. */ min-height: 12.5rem; padding: 1.25rem 1rem 1rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .75rem; text-align: center; } /* 👀 EL LOGO MANDA. Estaba a `3.25rem` de alto y al 72 % de opacidad: «la imagen debe ser más grande, es diminuta», y era verdad — quien paga por salir en la web tiene que verse. Se sube el alto y se quita casi todo el velo; el `--principal` (el de nivel más alto, que ocupa doble ancho) sube en proporción y va ya a plena opacidad. */ /* 🔑 ALTO FIJO + `contain`, no `max-height` + `width:auto`. `max-height` solo pone un techo: NO agranda. Un logo de 88 px se quedaba en 88 aunque la celda diera para el doble, y por eso seguía viéndose diminuto después de subir el límite. Con una caja de alto fijo y el ancho completo, `contain` escala la imagen hasta el máximo que quepa sin deformarla. */ /* 📈 Subido otra vez el 13/09/2026: «en patrocinadores las imágenes son diminutas, y en la portada un pelín más grandes también». El muro se comparte entre la portada y la ficha de equipo, así que un solo cambio vale para los dos sitios. */ /* ⚠️ AQUI NO HACE FALTA PLACA, Y PONERLA LO ESTROPEA (probado y revertido el 13/09/2026). Los logos que ha subido el club son las versiones BLANCAS, hechas para fondo oscuro, y este muro es navy: se leen perfectamente. Al ponerles una placa blanca detrás desaparecieron los ocho de golpe. El problema del logo invisible está en las superficies CLARAS —la línea de «partido patrocinado por»—, y se resuelve allí. */ .f24-partner img { width: 100%; height: 8.75rem; object-fit: contain; opacity: 1; transition: opacity .18s ease, transform .18s ease; } .f24-partner:hover img, .f24-partner:focus-visible img { transform: translateY(-2px); } .f24-partner span { font-size: var(--f24-label-sm); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--f24-blue-pale); } /* El nivel del acuerdo (MVP, Sexto Hombre…) sale de `patrocinador_niveles`, y con él se ORDENA el muro: el de nivel más alto va primero y ocupa el doble de ancho. */ .f24-partner-nivel { font-size: var(--f24-label-sm); font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--f24-yellow); } .f24-partner--principal { flex: 2 1 22rem; min-height: 15rem; } .f24-partner--principal img { height: 12rem; opacity: 1; } .f24-partner:hover span { color: var(--f24-yellow); } /* Sin logo: el nombre hace de logotipo, no se deja el hueco vacío. */ .f24-partner strong { font-family: var(--f24-display); font-size: 1.25rem; font-weight: 900; letter-spacing: -.03em; text-transform: uppercase; } /* ============================================================ PÁGINAS INTERIORES — filtros, día, equipos, plantilla ============================================================ */ /* Filtros con aire de retransmisión: micro-etiqueta encima y el control debajo. Se envían solos; el