/* Theme Name: BM Sanse Theme URI: https://www.balonmanosanse.es/ Author: Club Balonmano Sanse Author URI: https://www.balonmanosanse.es/ Description: Tema del Club Balonmano San Sebastián de los Reyes. Implementa la estructura de contenidos oficial del club: portada con carrusel de destacados y próxima jornada, partidos y resultados, equipos, programas, salud y rendimiento, vida institucional y participación. Los tipos de contenido viven en el plugin «BM Sanse · Contenidos», no en el tema. Version: 5.32.0 Requires at least: 6.0 Requires PHP: 7.4 License: GPLv2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: bm-sanse Tags: sports, club, one-column, custom-menu, featured-images, translation-ready */ /* Una sola familia, alojada en el propio tema: ni una petición a servidores de terceros, que es lo que exige el RGPD para no mandar la IP de cada visitante a Google. ARCHIVO, de Omnibus-Type. Es la gramática de un marcador moderno: grotesca de poco contraste, dibujada para leerse de lejos y en tamaños pequeños, y variable en dos ejes —peso del 100 al 900 y ANCHURA del 62 al 125—. Ese segundo eje es lo que hace que no hagan falta dos tipografías: la misma letra, estrechada al 70 % y en negra, titula como un rótulo de pista; a anchura normal y peso 400, sostiene un párrafo sin cansar. Un archivo por subconjunto y se acabó. Trae cifras tabulares, que en una web de balonmano no es un detalle: es lo que mantiene en columna los marcadores, las horas de la jornada, los dorsales y los precios. Archivo · SIL Open Font License 1.1 · fonts/LICENSE-Archivo.txt */ @font-face{ font-family:"Archivo"; font-style:normal; font-display:swap; font-weight:100 900; font-stretch:62% 125%; src:url("fonts/archivo-latin-wdth-normal.woff2") format("woff2-variations"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face{ font-family:"Archivo"; font-style:normal; font-display:swap; font-weight:100 900; font-stretch:62% 125%; src:url("fonts/archivo-latin-ext-wdth-normal.woff2") format("woff2-variations"); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } :root{ /* El rojo del cartel del club, medido sobre la propia imagen: #FC2F40. Es el que manda en las superficies grandes. Para el texto pequeño hay un segundo rojo un punto más profundo, porque sobre el del cartel el texto blanco de 12 px se queda en 3,7:1 y la norma pide 4,5:1. */ --rojo:#FC2F40; --rojo-texto:#D31026; --rojo-osc:#B81224; --navy:#1A1A1A; --navy-2:#2B2B2B; --ink:#161616; --muted:#5F6166; --soft:#F6F6F7; --line:#E4E4E6; --surface:#FFFFFF; --ground:#FFFFFF; --badge-bg:#FDEDEF; --badge-line:#F2C9CE; --badge-ink:#B81224; /* El semáforo del resultado. El verde está bajado de luz a propósito: un verde de bandera se queda en 2:1 sobre blanco y el signo no se leería. Así da 5,4:1, por encima del mínimo. */ --verde:#0F7B34; --gris-signo:#5F6166; --nav-hover:#FBEAEC; --footer:#111111; --focus:#0B5FD1; --banda:#FC2F40; --radius:22px; --radius-s:14px; --shadow:0 8px 24px rgba(0,0,0,.06); --shadow-l:0 18px 46px rgba(0,0,0,.13); /* Toda la web en Archivo: titulares, texto y datos. El eje de anchura resuelve los tres registros con un solo archivo. Cambiar de titular es cambiar «--display» y nada más. */ --sans:"Archivo",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; --display:"Archivo",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; --datos:"Archivo",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; --ancho-display:72%; --ancho-dato:82%; /* La textura del cartel: el rojo base con manchas del rojo profundo, como la pared pintada del original. Son degradados, no una imagen, así que no pesa nada y se adapta a cualquier tamaño. */ /* La primera capa es un velo del rojo profundo al 35 %. No es decoración: el rojo del cartel deja el blanco de 12 px en 3,7:1 y la norma AA pide 4,5:1. Con el velo, la peor zona de la mezcla queda en 4,6:1. Si se quita, las cabeceras vuelven a incumplir. */ /* El fondo estándar de todas las cabeceras del tema: la foto de la pared pintada del cartel del club, con el mismo velo del rojo profundo que sostiene el contraste. Se cambia aquí y cambian todas las páginas. */ --cabecera: linear-gradient(rgba(158,10,30,.35), rgba(158,10,30,.35)), url("assets/textura-roja.webp"); --textura-roja: linear-gradient(rgba(158,10,30,.35), rgba(158,10,30,.35)), radial-gradient(58% 46% at 16% 18%, rgba(158,10,30,.46), transparent 64%), radial-gradient(46% 38% at 80% 10%, rgba(158,10,30,.34), transparent 62%), radial-gradient(54% 48% at 64% 86%, rgba(158,10,30,.40), transparent 66%), radial-gradient(38% 34% at 6% 82%, rgba(255,120,132,.20), transparent 62%), radial-gradient(30% 26% at 92% 56%, rgba(255,120,132,.16), transparent 60%); /* Declara la página como clara para que el navegador no repinte por su cuenta campos de formulario, barras de desplazamiento o controles nativos cuando el móvil tiene el modo oscuro del sistema activado. */ color-scheme:light; } /* El tema oscuro no se activa solo. La mayoría de los móviles llevan el modo oscuro del sistema puesto, y eso hacía que la web se viera con otros colores que en escritorio; el club tiene una sola identidad. Los tokens oscuros se quedan escritos y se aplican solo si alguien fija data-theme="dark" en el html, por si más adelante se añade un conmutador. */ :root[data-theme="dark"]{ color-scheme:dark; --rojo:#FF5566; --rojo-texto:#FF7C8A; --rojo-osc:#FF8894; --navy:#0E0E0E; --navy-2:#1C1C1C; --ink:#F2F2F3; --muted:#B2B3B7; --soft:#161616; --line:#2C2C2E; --surface:#1A1A1A; --ground:#111111; --badge-bg:rgba(255,85,102,.16); --badge-line:rgba(255,85,102,.38); --badge-ink:#FF8894; --verde:#4ADE80; --gris-signo:#B2B3B7; --nav-hover:rgba(255,85,102,.16); --footer:#0A0A0A; --focus:#7FB4FF; --banda:#B81224; --shadow:0 8px 24px rgba(0,0,0,.35); --shadow-l:0 18px 46px rgba(0,0,0,.45); } *{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--sans);line-height:1.5;-webkit-font-smoothing:antialiased} a{color:inherit;text-decoration:none} img{max-width:100%;height:auto} h1,h2,h3,h4{margin:0;letter-spacing:-.045em;line-height:1.05;text-wrap:balance;font-weight:900} p{margin:0} :focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:6px} .container{width:min(1240px,calc(100% - 40px));margin:auto} .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap} .skip{position:absolute;left:-9999px} .skip:focus{position:fixed;left:16px;top:16px;z-index:99;background:var(--rojo-texto);color:#fff;padding:12px 18px;border-radius:999px;font-weight:800;font-size:13px} .kicker{color:var(--rojo-texto);font-size:11px;font-weight:900;letter-spacing:.12em;text-transform:uppercase} .tabnum{font-variant-numeric:tabular-nums} .muted{color:var(--muted)} /* topbar */ .topbar{background:var(--navy);color:#fff;font-size:12px} .topbar .container{min-height:36px;display:flex;align-items:center;justify-content:space-between;gap:20px} .topbar a{opacity:.86} .topbar a:hover{opacity:1;text-decoration:underline} .topbar .links{display:flex;gap:18px} /* cabecera */ .site-header{position:sticky;top:0;z-index:40;border-bottom:1px solid var(--line);background:var(--surface)} @supports (backdrop-filter:blur(2px)){.site-header{background:color-mix(in srgb,var(--surface) 94%,transparent);backdrop-filter:blur(16px)}} .header-inner{min-height:82px;display:flex;align-items:center;gap:24px} /* min-width:0 en los dos para que puedan encoger dentro del flex en vez de desbordar el contenedor: sin esto, un elemento flexible nunca baja del ancho de su contenido y lo que sobra se sale de la pantalla. */ .brand{display:flex;align-items:center;gap:11px;font-weight:900;line-height:1;font-size:15px;min-width:0} .brand .escudo{width:52px;height:56px;flex:0 0 auto;display:grid;place-items:center;color:#fff;font-size:20px;font-weight:900;background:linear-gradient(150deg,var(--rojo),var(--rojo-osc));clip-path:polygon(0 0,100% 0,100% 66%,50% 100%,0 66%);letter-spacing:-.04em} .brand strong{display:inline;white-space:nowrap;color:var(--rojo-texto);font-size:23px;letter-spacing:-.025em} .brand em{display:inline;font-style:normal;color:inherit;font-size:inherit;letter-spacing:inherit} .nav{margin-left:auto} .nav>ul{display:flex;align-items:center;gap:2px;margin:0;padding:0;list-style:none} .nav>ul>li{position:relative} .nav a,.nav .top{display:block;padding:10px 13px;border-radius:999px;font-size:13px;font-weight:800;background:none;border:0;font-family:var(--sans);color:inherit;cursor:pointer;white-space:nowrap} .nav a:hover,.nav .top:hover{color:var(--rojo-osc);background:var(--nav-hover)} .nav a[aria-current="page"],.nav li.activa>.top,.nav li.activa>a{color:var(--rojo-osc);background:var(--nav-hover)} .nav .top::after{content:"▾";margin-left:6px;font-size:10px;opacity:.55} .sub{position:absolute;left:0;top:calc(100% + 8px);min-width:236px;margin:0;padding:8px;list-style:none;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-s);box-shadow:var(--shadow-l);display:none;z-index:5} .nav li:hover>.sub,.nav li:focus-within>.sub,.sub.abierta{display:block} .sub a{border-radius:9px;font-weight:700;font-size:13px;padding:9px 12px} .acciones-head{display:flex;align-items:center;gap:8px;min-width:0;flex-wrap:wrap;justify-content:flex-end} .button{display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;border:1px solid transparent;border-radius:999px;padding:13px 19px;background:var(--rojo-texto);color:#fff;font-family:var(--sans);font-size:13px;font-weight:900;white-space:nowrap} .button:hover{background:var(--rojo-osc)} .button--white{background:#fff;color:#B81224} .button--white:hover{background:#F1F1F2} .button--outline{background:transparent;color:var(--ink);border-color:var(--line)} .button--outline:hover{background:var(--soft);border-color:var(--rojo-texto);color:var(--rojo-osc)} .button--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.85)} .button--ghost:hover{background:rgba(255,255,255,.14)} .button--sm{padding:10px 14px;font-size:12px} .icon-btn{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--ink);cursor:pointer;font-size:15px} .icon-btn:hover{border-color:var(--rojo-texto);color:var(--rojo-osc)} .menu-btn{display:none;border:1px solid var(--line);background:transparent;color:var(--ink);border-radius:999px;padding:10px 15px;font-family:var(--sans);font-size:12px;font-weight:900;cursor:pointer} /* aviso */ .aviso{background:var(--soft);border-bottom:1px solid var(--line)} .aviso .container{display:flex;align-items:center;gap:14px;padding:12px 0;font-size:13px;color:var(--muted)} .aviso button{margin-left:auto;background:none;border:0;color:var(--muted);cursor:pointer;font-size:18px;line-height:1;padding:2px 8px;border-radius:999px} .aviso button:hover{color:var(--ink)} /* carrusel destacados */ .carrusel{position:relative;background:var(--navy)} /* Alto del destacado: 500px, pero nunca tanto como para llenar la pantalla. En un portátil bajo se recorta hasta dejar ver doscientos píxeles de lo que viene después —la cabecera ocupa 83px—, que es lo que le dice a quien entra que la portada sigue hacia abajo. */ .carrusel{--bms-alto-slide:min(500px,calc(100dvh - 283px))} .slide{display:none;position:relative;min-height:var(--bms-alto-slide);color:#fff;overflow:hidden} .slide.activa{display:block} .slide .fondo{position:absolute;inset:0} /* El carrusel de portada usa el mismo fondo que las cabeceras del tema: es lo primero que se ve de la web y no tenía sentido que fuera por libre con tres degradados que iban rotando. El del destacado con foto es el mismo, con la imagen en su propio panel al lado. */ .slide--liso .fondo,.slide--foto .fondo{ background-color:var(--rojo); background-image:var(--cabecera); background-size:cover; background-position:50% 42%; background-repeat:no-repeat} .slide .pista{position:absolute;inset:0;width:100%;height:100%;opacity:.18;pointer-events:none} .slide .inner{position:relative;min-height:var(--bms-alto-slide);display:flex;align-items:flex-start; padding:40px 0 88px} .slide .copy{max-width:760px} .slide .kicker{color:#fff} .slide h1{margin:16px 0;font-size:clamp(44px,6.6vw,74px);line-height:.94;letter-spacing:-.06em} .slide p{max-width:660px;color:#fff;font-size:18px;line-height:1.55} .slide .copy__texto{max-width:660px;color:#fff;font-size:18px;line-height:1.55} .slide .copy__texto p{margin:0 0 12px} .slide .copy__texto p:last-child{margin-bottom:0} .slide .copy__texto strong{font-weight:700} .slide .copy__texto ul,.slide .copy__texto ol{margin:0 0 12px;padding-left:22px} .slide .copy__texto li{margin:0 0 6px} .slide .copy__texto li::marker{color:rgba(255,255,255,.72)} .slide .copy__texto a{color:#fff;text-decoration:underline;text-underline-offset:3px} .slide--foto .copy__texto{max-width:none} .slide .acciones{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px} /* Destacado con foto: dos columnas. La letra nunca se apoya sobre la imagen, así que el contraste no depende de cómo sea la fotografía que se suba. */ .slide--foto .pista{opacity:.14} .slide--foto .inner{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);gap:clamp(28px,4.4vw,64px);align-items:start} .slide--foto .copy{max-width:none} .slide--foto h1{font-size:clamp(38px,4.6vw,60px)} .slide--foto p{max-width:none} .retrato{position:relative;margin:0;border-radius:var(--radius);overflow:hidden;background:#111111;border-top:4px solid var(--banda);box-shadow:0 26px 60px rgba(0,0,0,.5)} .retrato img{display:block;width:100%;height:clamp(220px,24vw,300px);object-fit:cover} .retrato figcaption{position:absolute;left:0;right:0;bottom:0;padding:34px 18px 12px;font-size:12px;line-height:1.4;color:#F1E4E6;background:linear-gradient(180deg,rgba(10,10,10,0),rgba(10,10,10,.88))} .carrusel-ctrl{position:absolute;left:0;right:0;bottom:0;padding-bottom:48px} .carrusel-ctrl .container{display:flex;align-items:center;gap:12px} .puntos{display:flex;gap:8px;margin-right:auto} .punto{position:relative;overflow:hidden;width:34px;height:6px;border-radius:999px;border:0;background:rgba(255,255,255,.34);cursor:pointer;padding:0} .punto::after{content:"";position:absolute;left:0;top:0;bottom:0;width:0;background:#fff;border-radius:999px} .punto[aria-current="true"]::after{width:100%} /* Mientras pasa solo, el punto activo se va llenando: dice cuánto queda. */ .carrusel[data-auto="on"] .punto[aria-current="true"]::after{width:0;animation:bms-progreso var(--bms-intervalo,7s) linear forwards} .carrusel[data-suspendido="true"] .punto[aria-current="true"]::after{animation-play-state:paused} @keyframes bms-progreso{from{width:0}to{width:100%}} .flecha--pausa{font-size:12px;letter-spacing:1px;line-height:1} .slide.activa{animation:bms-aparece .45s ease} @keyframes bms-aparece{from{opacity:0}to{opacity:1}} .flecha{width:44px;height:44px;border-radius:999px;border:1px solid rgba(255,255,255,.6);background:rgba(17,17,17,.4);color:#fff;cursor:pointer;font-size:16px;line-height:1} .flecha:hover{background:rgba(255,255,255,.16)} /* intro de página */ /* Banda de página: solo el título, sobre el rojo del club. */ /* Cabecera de página interior. Va a sangre, con la textura del cartel, para que cualquier página del club se abra con el mismo golpe rojo que la portada. El contenido empieza debajo, sobre blanco, que es donde se lee. */ .page-intro{padding:clamp(52px,8vw,92px) 0 clamp(54px,8vw,94px); background-color:var(--rojo);background-image:var(--textura-roja); color:#fff;position:relative;overflow:hidden} .page-intro .pista{position:absolute;inset:0;width:100%;height:100%;opacity:.5;pointer-events:none} .page-intro .container{position:relative} .page-intro h1{margin:0;font-size:clamp(36px,6vw,66px);line-height:.96;letter-spacing:.005em;color:#fff;text-transform:uppercase;max-width:20ch} .page-intro+.section{padding-top:52px} /* secciones */ .section{padding:70px 0} .section--soft{background:var(--soft)} .section-head{margin-bottom:26px;display:flex;align-items:flex-end;gap:20px;flex-wrap:wrap} .section-head h2{margin:7px 0 0;font-size:clamp(30px,4.4vw,44px);line-height:1} .section-head p{max-width:660px;margin:9px 0 0;color:var(--muted);line-height:1.55;flex-basis:100%} .section-head .mas{margin-left:auto;color:var(--rojo-texto);font-size:13px;font-weight:900} .section-head .mas:hover{text-decoration:underline} .section-head .sello{margin-left:auto;color:var(--muted);font-size:12px;font-weight:700;text-align:right;line-height:1.5} /* tarjetas */ .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:19px} .grid--2{grid-template-columns:repeat(2,1fr)} .grid--4{grid-template-columns:repeat(4,1fr)} .card{overflow:hidden;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow);display:flex;flex-direction:column} .card__image{display:block;width:100%;height:206px;background:linear-gradient(150deg,var(--navy-2),var(--rojo-osc));position:relative} .card__image::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(118deg,transparent 0 26px,rgba(255,255,255,.07) 26px 27px)} .card__body{padding:20px;display:flex;flex-direction:column;gap:9px;flex:1} .card time,.card .cat{color:var(--rojo-texto);font-size:11px;font-weight:900;letter-spacing:.04em} .card h3{font-size:21px;line-height:1.12;letter-spacing:-.025em} .card p{color:var(--muted);font-size:13px;line-height:1.55} .text-link{display:inline-block;margin-top:auto;padding-top:8px;color:var(--rojo-texto);font-size:13px;font-weight:900} .text-link:hover{text-decoration:underline} /* partidos */ /* Cuatro tarjetas por fila. Con el contenedor a 1.240 px y 18 px de hueco cada una queda en unos 296 px, así que la tarjeta se compacta: menos relleno, escudos y tipos más pequeños y la lista de datos en una sola columna. */ .match-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,258px),1fr));gap:18px} .match-card{padding:16px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow)} .match-card .escudo-eq{width:40px;height:40px} .match-card .escudo-eq__iniciales{font-size:12px} .match-top{display:flex;justify-content:space-between;align-items:center;gap:10px;color:var(--muted);font-size:11px;font-weight:900;letter-spacing:.06em;text-transform:uppercase} .badge{display:inline-block;padding:6px 11px;border:1px solid var(--badge-line);border-radius:999px;background:var(--badge-bg);color:var(--badge-ink);font-size:11px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap} .badge--quiet{border-color:var(--line);background:transparent;color:var(--muted)} .teams{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;margin:16px 0;text-align:center;font-weight:900} .teams .eq{font-size:13.5px;letter-spacing:-.02em;line-height:1.22} .teams .eq.sanse{color:var(--rojo-osc)} .versus{color:#9A9DA3;font-size:12px;font-weight:900;letter-spacing:.1em} .match-meta{display:flex;justify-content:space-between;gap:12px;padding-top:14px;border-top:1px solid var(--line);color:var(--muted);font-size:12px;font-weight:600} .result-list{overflow:hidden;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow)} .jornada-grid>.result-list{height:100%} .result{display:grid;grid-template-columns:132px 1fr 128px 1fr;align-items:center;gap:14px;padding:16px 22px;border-bottom:1px solid var(--line);font-size:13px;font-weight:800} .result:last-child{border-bottom:0} .result-list--scroll{max-height:428px;overflow-y:auto;overscroll-behavior:contain} .result-list--scroll:focus-visible{outline:3px solid var(--focus);outline-offset:2px} /* Caja unica de competicion en portada: resultados y proximos partidos en el mismo marco, conmutados por dos botones. Solo entran los partidos marcados en la hoja, asi que la lista es corta; el cuerpo desplaza por si acaso y el pie sostiene la salida al listado completo. */ .pj-panel{display:flex;flex-direction:column;min-height:0;overflow:hidden; border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow)} .jornada-grid>.pj-panel{height:100%} .pj-panel__cabeza{display:flex;flex-wrap:wrap;gap:8px;padding:14px 18px;border-bottom:1px solid var(--line);background:var(--soft)} .pj-pestana{border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--muted); font-family:inherit;font-size:12px;font-weight:900;letter-spacing:.04em;text-transform:uppercase; padding:9px 16px;cursor:pointer;transition:background .15s ease,color .15s ease,border-color .15s ease} .pj-pestana:hover{color:var(--rojo-texto);border-color:var(--badge-line)} .pj-pestana.es-activa{background:var(--rojo-texto);border-color:var(--rojo-texto);color:#fff} .pj-panel__filtros{display:flex;flex-wrap:wrap;gap:7px;padding:11px 18px; border-bottom:1px solid var(--line);background:var(--surface)} .pj-chip{border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--muted); font-family:inherit;font-size:11.5px;font-weight:800;letter-spacing:.04em; padding:6px 13px;cursor:pointer;transition:background .15s ease,color .15s ease,border-color .15s ease} .pj-chip:hover{color:var(--rojo-texto);border-color:var(--badge-line)} .pj-chip.es-activa{background:var(--navy);border-color:var(--navy);color:#fff} /* El filtro de categoria se resuelve en CSS: el panel lleva escrito el grupo elegido y las filas que no son ese grupo se esconden. Sin «todos» escrito, se ven todas. */ .pj-panel[data-pj-filtro="senior-m"] .pj-fila:not([data-pj-fila="senior-m"]), .pj-panel[data-pj-filtro="senior-f"] .pj-fila:not([data-pj-fila="senior-f"]), .pj-panel[data-pj-filtro="base"] .pj-fila:not([data-pj-fila="base"]){display:none} .pj-panel__cuerpo .pj-fila:last-child .result{border-bottom:0} .pj-vacio--filtro{border-top:1px solid var(--line)} .pj-panel__cuerpo{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain} .pj-panel__cuerpo .result:last-child{border-bottom:0} .pj-vacio{margin:0;padding:24px 22px;color:var(--muted);font-size:14px;line-height:1.6} .pj-panel__pie{display:flex;align-items:center;justify-content:flex-end; border-top:1px solid var(--line);padding:12px 18px;background:var(--soft)} .pj-panel__pie .mas{font-size:12.5px} .result--proximo .versus{text-align:center;color:var(--muted);font-size:12px;font-weight:900;letter-spacing:.12em;text-transform:uppercase} .result--proximo .resultado-meta{display:flex;align-items:center;justify-content:space-between;gap:14px} .section-head--sub{align-items:center;min-height:24px;margin-bottom:14px} .section-head--sub h3{margin:0;font-size:15px;font-weight:900;letter-spacing:.02em;color:var(--muted)} .ver-directo--mini{width:34px;height:34px;flex:0 0 auto} .ver-directo--mini svg{width:18px;height:18px} /* Franja de competición a dos columnas: partidos a la izquierda, patrocinio a la derecha. Se apila antes que otras rejillas porque la fila de partido necesita ancho para no romper los nombres de los equipos. */ /* Dos columnas y dos filas, rellenadas por columnas: en cada una, primero su titular y debajo su caja. Compartiendo filas, los dos titulares miden lo mismo y las dos cajas empiezan y acaban a la misma altura, mida lo que mida la creatividad del patrocinador. */ /* La fila mide lo que diga «--bms-alto-jornada», no lo que ocupen los partidos ni la creatividad del patrocinador. Antes la altura la imponía la columna más alta, así que la caja de resultados estiraba la fila y la pieza de patrocinio quedaba flotando entre dos franjas blancas. Con la altura fija, la lista desplaza por dentro y la creatividad llena su caja. */ .jornada-grid{--bms-alto-jornada:clamp(430px,40vw,560px); display:grid;grid-auto-flow:column;grid-template-rows:auto var(--bms-alto-jornada); grid-auto-columns:minmax(0,1fr);gap:14px 26px;align-items:stretch} .jornada-grid>.section-head{align-self:end;margin-bottom:0} .jornada-col{display:flex;flex-direction:column;min-width:0} /* La altura la fija la columna de patrocinio. El listado de partidos se saca del flujo con posición absoluta para que sus trece tarjetas no estiren la fila: así las dos columnas miden exactamente lo mismo, mida lo que mida la creatividad del patrocinador. */ .jornada-scroll{position:relative;flex:1;min-height:340px} .match-mini-grid{position:absolute;inset:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:min-content;gap:12px;overflow-y:auto;overscroll-behavior:contain;padding:2px 4px 44px 2px} .match-mini-grid:focus-visible{outline:3px solid var(--focus);outline-offset:2px} /* Aviso de que hay más abajo. Se desvanece al llegar al final. */ .jornada-scroll__aviso{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:flex-end;justify-content:center;height:74px;padding-bottom:10px;color:var(--muted);font-size:11px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;pointer-events:none;background:linear-gradient(to top,var(--soft) 34%,transparent);transition:opacity .2s ease} .jornada-scroll.es-final .jornada-scroll__aviso{opacity:0} /* Tarjeta compacta de partido. */ .match-mini{display:flex;flex-direction:column;gap:10px;border:1px solid var(--line);border-radius:16px;background:var(--surface);padding:14px} .match-mini__top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px} .match-mini__cuando{display:flex;flex-direction:column;color:var(--muted);font-size:11.5px;font-weight:800;line-height:1.35} .match-mini__cuando b{color:var(--ink);font-size:12.5px;font-weight:900} .match-mini__equipos{display:flex;flex-direction:column;gap:8px} .match-mini__eq{display:flex;align-items:center;gap:9px;min-width:0} .match-mini__nombre{font-size:13px;font-weight:800;line-height:1.25;color:var(--ink)} .match-mini__eq.sanse .match-mini__nombre{color:var(--rojo-osc)} .match-mini__pie{display:flex;align-items:center;gap:8px;flex-wrap:wrap;border-top:1px dashed var(--line);padding-top:10px} .match-mini__meta{color:var(--muted);font-size:10.5px;font-weight:700;line-height:1.35} .match-mini .escudo-eq--mini{width:26px;height:26px;flex:0 0 auto} /* Carrusel de patrocinadores. */ /* La creatividad manda: ocupa la tarjeta de lado a lado y de arriba abajo, sin recorte y con la proporción que traiga el archivo. El único texto es la salida hacia Patrocina, en su franja de pie. */ .patro{display:flex;flex-direction:column;min-width:0;height:100%;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow);overflow:hidden} .patro__pista{flex:1;display:grid;align-content:stretch;min-width:0;min-height:0} /* Solo se ve la diapositiva activa: las demás llevan el atributo «hidden», que vale display:none. Ponerle «display» a la clase a secas lo pisaba y salían las tres piezas apiladas, así que la regla va sobre las que no están ocultas. */ .patro__pieza{width:100%;min-width:0;min-height:0} .patro__pieza:not([hidden]){display:flex} .patro__pieza[hidden]{display:none} .patro__creatividad{display:block;background:var(--soft);flex:1;min-height:0;padding:10px} .patro__creatividad img{display:block;width:100%;height:100%;object-fit:contain;object-position:50% 50%} .patro__pie{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;border-top:1px solid var(--line);padding:12px 18px} .patro__ctrl{display:flex;align-items:center;gap:12px} .patro__pausa{border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--muted);font-size:11px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;padding:7px 13px;cursor:pointer} .patro__pausa:hover{color:var(--rojo-texto);border-color:var(--badge-line)} .patro__puntos{display:flex;gap:7px} .patro__punto{width:9px;height:9px;padding:0;border:0;border-radius:999px;background:var(--line);cursor:pointer} .patro__punto[aria-current="true"]{background:var(--rojo);width:22px} @media (max-width:1080px){ .jornada-grid{grid-auto-flow:row;grid-template-rows:none;grid-template-columns:1fr;--bms-alto-jornada:auto} .jornada-grid>.result-list{height:auto} .jornada-grid>.pj-panel{height:auto} .pj-panel__cuerpo{max-height:480px} .patro{height:auto} .patro__pista{align-content:center} .patro__pieza:not([hidden]){display:block} .patro__creatividad{flex:none} .patro__creatividad img{height:auto;object-fit:fill} .jornada-scroll{min-height:0} .match-mini-grid{position:static;max-height:460px} .patro__pista{min-height:0} } @media (max-width:520px){ .match-mini-grid{grid-template-columns:1fr} } .result .fecha{color:var(--muted);font-size:11px;font-weight:800} .result .fecha b{display:block;color:var(--ink);font-size:12px} .result .eq.sanse{color:var(--rojo-osc)} .result .eq.visit{text-align:right} .score{color:var(--rojo-osc);font-size:24px;font-weight:900;text-align:center;letter-spacing:-.03em} /* Escudos de los equipos. Sin imagen, iniciales del nombre. */ .escudo-eq{display:grid;place-items:center;width:56px;height:56px;flex:0 0 auto;border-radius:999px;background:var(--soft);border:1px solid var(--line);overflow:hidden} .escudo-eq img{max-width:78%;max-height:78%;width:auto;height:auto;object-fit:contain} .escudo-eq__iniciales{font-size:15px;font-weight:900;letter-spacing:-.02em;color:var(--muted)} .escudo-eq--mini{width:34px;height:34px} .escudo-eq--mini .escudo-eq__iniciales{font-size:11px} .teams .eq{display:flex;flex-direction:column;align-items:center;gap:8px} .result .eq{display:flex;align-items:center;gap:11px;min-width:0} .result .eq.visit{flex-direction:row-reverse} /* Casa o fuera. */ .donde{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:999px;border:1px solid var(--line);font-size:10.5px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);white-space:nowrap} .donde--casa{border-color:var(--badge-line);background:var(--badge-bg);color:var(--badge-ink)} .match-top{align-items:flex-start} .match-top>span:first-child{flex:1 1 140px;min-width:0} .match-top__estado{display:flex;flex:0 0 auto;align-items:center;gap:8px;justify-content:flex-end} .resultado-meta .donde{margin-right:9px;vertical-align:middle} /* formularios y filtros */ .filtros{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:24px} .filtros label{color:var(--muted);font-size:11px;font-weight:900;letter-spacing:.1em;text-transform:uppercase} select,input[type="text"],input[type="email"],input[type="search"],textarea{ font-family:var(--sans);font-size:14px;font-weight:600;padding:12px 16px;border-radius:var(--radius-s); border:1px solid var(--line);background:var(--surface);color:var(--ink);width:100%; } .filtros select,.filtros input{width:auto;border-radius:999px;font-size:13px;padding:11px 15px} textarea{min-height:130px;resize:vertical} .form{display:grid;grid-template-columns:1fr 1fr;gap:16px} .campo{display:flex;flex-direction:column;gap:7px} .campo--ancho{grid-column:1/-1} .campo label{font-size:12px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)} .campo .ayuda{font-size:12px;color:var(--muted);font-weight:600} .check{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--muted);font-weight:600} .check input{width:18px;height:18px;margin-top:2px;accent-color:var(--rojo-texto)} /* bloques */ .dos{display:grid;grid-template-columns:1fr 1fr;gap:19px} /* Ficha de programa: un solo bloque de datos, sin la columna de texto libre. Se limita el ancho para que la lista de definiciones no se estire a 1240 px y las etiquetas queden lejos de su valor. */ .ficha-programa{max-width:760px} .bloque{padding:30px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow);display:flex;flex-direction:column;gap:14px;align-items:flex-start} .bloque h3{font-size:23px} .bloque p{color:var(--muted);font-size:14.5px;line-height:1.65} .bloque ul{margin:0;padding-left:20px;color:var(--muted);font-size:14px;line-height:1.6;display:flex;flex-direction:column;gap:7px} .pendiente{border:1px dashed var(--badge-line);background:var(--badge-bg);color:var(--badge-ink);border-radius:var(--radius-s);padding:11px 14px;font-size:12px;font-weight:800} .prosa{max-width:68ch;display:flex;flex-direction:column;gap:16px} .prosa p{color:var(--muted);font-size:16px;line-height:1.75} .prosa h2{font-size:28px;margin-top:14px} /* listas de documentos */ /* Transparencia en carpetas. Cada pestaña es un tipo de documento de los que se escriben en la hoja, y lleva su cuenta al lado: con veintidós documentos, saber cuántos hay en cada sitio ahorra abrirlas todas. */ .tr-panel__cabeza{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px} .tr-pestana{display:inline-flex;align-items:center;gap:9px; border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--muted); font-family:inherit;font-size:12.5px;font-weight:800;letter-spacing:.03em; padding:9px 16px;cursor:pointer;transition:background .15s ease,color .15s ease,border-color .15s ease} .tr-pestana:hover{color:var(--rojo-texto);border-color:var(--badge-line)} .tr-pestana.es-activa{background:var(--navy);border-color:var(--navy);color:#fff} .tr-pestana__cuenta{display:grid;place-items:center;min-width:20px;height:20px;padding:0 6px; border-radius:999px;background:var(--soft);color:var(--muted);font-size:11px;font-weight:800} .tr-pestana.es-activa .tr-pestana__cuenta{background:rgba(255,255,255,.18);color:#fff} .tr-carpeta__titulo{margin:0 0 14px;font-size:19px;font-weight:900;letter-spacing:-.02em} /* Los documentos van a dos columnas: son líneas cortas —nombre, fecha y un botón— y a todo lo ancho dejaban medio renglón vacío y obligaban a bajar mucho en la carpeta electoral, que tiene doce. Los filetes se dibujan en cada ficha, no en el contenedor, porque con dos columnas hacen falta también los verticales. Las dos reglas con :has() quitan el filete inferior de la última fila, tenga esa fila una ficha o dos: sin ellas se duplicaba con el borde del marco. */ .docs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); border:1px solid var(--line);border-radius:var(--radius);background:var(--surface); box-shadow:var(--shadow);overflow:hidden} .doc{display:flex;align-items:center;gap:14px;padding:16px 20px; border-bottom:1px solid var(--line);min-width:0} .doc:nth-child(odd){border-right:1px solid var(--line)} .docs:has(> :nth-child(even):last-child) .doc:nth-last-child(-n+2){border-bottom:0} .docs:has(> :nth-child(odd):last-child) .doc:last-child{border-bottom:0} .doc > div{min-width:0} @media (max-width:920px){ .docs{grid-template-columns:1fr} .doc:nth-child(odd){border-right:0} .docs:has(> :nth-child(even):last-child) .doc:nth-last-child(2){border-bottom:1px solid var(--line)} } .doc .tipo{width:46px;height:46px;flex:0 0 auto;display:grid;place-items:center;border-radius:12px;background:var(--badge-bg);color:var(--badge-ink);font-size:11px;font-weight:900} .doc h3{font-size:15.5px;line-height:1.25;text-wrap:balance} .doc .meta{color:var(--muted);font-size:12px;font-weight:700;margin-top:3px} .doc .accion{margin-left:auto} /* organigrama */ /* equipos */ .equipo{padding:24px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow);display:flex;flex-direction:column;gap:6px} .equipo h3{font-size:21px;margin:8px 0} .equipo dl{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin:6px 0 0;font-size:13px;font-weight:600} .equipo dt{color:var(--muted);font-size:11px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;padding-top:2px} .equipo dd{margin:0} /* patrocinio */ .logos{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:26px} /* Sin caja: los logotipos se apoyan directamente sobre el fondo de la franja. Se conserva el hueco —alto fijo y reparto flexible— porque es lo que alinea la fila; lo que desaparece es el filete, la sombra y el fondo blanco. */ .logos div{flex:1 1 180px;height:84px;display:grid;place-items:center;overflow:hidden;padding:14px;border:0;background:transparent;color:var(--muted);font-size:12px;font-weight:900;letter-spacing:.1em} /* El tope va en píxeles y no en porcentaje: la imagen cuelga de un enlace de alto automático, y contra un padre sin alto definido un max-height:100% no lo aplica el navegador. Con la altura de la caja menos su aire interior el cálculo es siempre el mismo. */ .logos div a{display:flex;align-items:center;justify-content:center;width:100%;min-width:0} /* Se topan las dos medidas, no solo el alto. Con el ancho libre, un logotipo apaisado ocupaba la caja entera y uno compacto se quedaba en nada: la caja era la misma, pero la marca no. Topando ambas, todas las marcas caben en un rectángulo equivalente y se ven de un tamaño parecido. */ .logos div img{max-width:74%;max-height:46px;width:auto;height:auto;object-fit:contain} .logos.principal div img{max-width:80%;max-height:72px} .logos.principal div{height:112px;font-size:20px;color:var(--rojo-osc);letter-spacing:-.02em} .niveles{display:grid;grid-template-columns:repeat(3,1fr);gap:19px} .nivel{padding:26px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow);display:flex;flex-direction:column;gap:10px} .nivel--destacado{border-color:var(--rojo-texto);box-shadow:var(--shadow-l)} .nivel h3{font-size:22px} .nivel .precio{font-size:15px;font-weight:900;color:var(--rojo-osc)} .nivel ul{margin:0;padding-left:18px;color:var(--muted);font-size:13.5px;line-height:1.6;display:flex;flex-direction:column;gap:6px} /* socio */ .ventajas{display:grid;grid-template-columns:repeat(4,1fr);gap:19px} .ventaja{padding:24px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow)} .ventaja .n{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:999px;background:var(--badge-bg);color:var(--badge-ink);font-size:13px;font-weight:900} .ventaja h3{font-size:18px;margin:14px 0 8px} .ventaja p{color:var(--muted);font-size:13px;line-height:1.55} .cta-panel{margin-top:22px;padding:44px;border-radius:var(--radius);color:#fff;background:linear-gradient(115deg,#141414,#B81224);display:flex;gap:28px;align-items:center;flex-wrap:wrap;box-shadow:var(--shadow-l)} .cta-panel h2{font-size:clamp(25px,3.4vw,34px)} .cta-panel p{max-width:48ch;color:#F0C6CB;margin-top:10px;font-size:15px;line-height:1.6} .cta-panel .button{margin-left:auto} /* valores */ .valores{display:grid;grid-template-columns:repeat(4,1fr);gap:19px} .valor{padding:24px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow)} .valor h3{font-size:19px;margin:10px 0 8px} .valor p{color:var(--muted);font-size:13px;line-height:1.55} /* pie */ .site-footer{padding:52px 0 22px;background:var(--footer);color:#fff} .footer-grid{display:grid;grid-template-columns:1.5fr repeat(4,1fr);gap:28px} .site-footer h3{margin:0 0 12px;font-size:15px} .site-footer p,.site-footer a{color:#AEB5C2;font-size:12px;line-height:1.7} .site-footer a:hover{color:#fff;text-decoration:underline} .site-footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px} .site-footer .brand strong, .site-footer .brand em{color:#FF8894} .copyright{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:30px;padding-top:20px;border-top:1px solid rgba(255,255,255,.12);color:#9A9A9E;font-size:11px} .vacia{text-align:center;padding:80px 0} .vacia .codigo{font-size:88px;font-weight:900;letter-spacing:-.06em;color:var(--rojo-texto)} @media (max-width:1080px){ .grid:not(.programas-grid),.org,.niveles{grid-template-columns:repeat(2,1fr)} .valores,.ventajas,.grid--4{grid-template-columns:repeat(2,1fr)} .footer-grid{grid-template-columns:1.4fr repeat(2,1fr)} } /* El menú en horizontal necesita 1.203 px de ancho útil: escudo y marca, los cinco apartados y las cuatro acciones, todo sin partir palabras. Por debajo de eso no cabe, y lo que hacía antes —el corte estaba en 900— era dejar que se solapara el rótulo con el primer apartado y que la página se desplazara en horizontal. Le pasaba a cualquier iPad apaisado, de 1.024 a 1.194 px. Así que el botón MENÚ aparece en cuanto la ventana baja de 1.280 px. El contenedor dejaría de dar esos 1.203 px a partir de 1.243, pero entre 1.243 y 1.279 los cuatro botones de la derecha ya se parten en dos filas y la cabecera crece de 82 a 88 px, así que el corte se pone donde la cabecera vuelve a quedar entera —medido, no estimado—. Un menú de dos niveles en un cajón se maneja mejor con el dedo que cinco apartados apretados. */ @media (max-width:1279px){ .nav{display:none;order:4;flex-basis:100%;margin-left:0;padding-bottom:12px} .nav.open{display:block} .nav>ul{flex-direction:column;align-items:stretch;gap:2px} .nav>ul>li{position:static} .sub{position:static;display:block;box-shadow:none;border:0;padding:0 0 6px 14px;min-width:0;background:none} .nav .top{width:100%;text-align:left} .nav ul.menu{flex-direction:column;align-items:stretch;gap:2px} .nav ul.menu>li{position:static} .nav .sub-menu{position:static;display:block;box-shadow:none;border:0;padding:0 0 6px 14px;min-width:0;background:none} .menu-btn{display:block} .header-inner{flex-wrap:wrap;padding:12px 0;gap:12px} .acciones-head{margin-left:auto} } @media (max-width:900px){ .grid:not(.programas-grid),.match-grid,.dos,.form{grid-template-columns:1fr} .section{padding:56px 0} .carrusel{--bms-alto-slide:min(420px,calc(100dvh - 283px))} .slide--foto .inner{grid-template-columns:1fr;gap:26px;padding:56px 0 110px} .slide--foto .retrato{order:-1} .slide--foto .retrato img{height:clamp(220px,44vw,320px)} } @media (max-width:620px){ .container{width:min(100% - 28px,1240px)} .topbar .links{display:none} .topbar .container{justify-content:center} .brand strong{font-size:19px} /* En un teléfono los cuatro botones de la derecha no caben al lado de la marca, y apilados contra el margen derecho quedaban en escalera. Pasan a una fila propia, alineados a la izquierda y repartiéndose el ancho, que además los hace más fáciles de acertar con el dedo. */ .header-inner{gap:10px} .brand{flex:1 1 auto} .menu-btn{order:2} .acciones-head{order:3;flex-basis:100%;margin-left:0;justify-content:flex-start;gap:6px;flex-wrap:nowrap} .acciones-head .button{flex:1 1 0;text-align:center;padding-left:10px;padding-right:10px} .acciones-head .icon-btn{flex:0 0 auto} .slide h1{font-size:42px} .slide .inner{align-items:flex-start;padding:56px 0 120px} .slide--foto .inner{align-items:stretch;padding:44px 0 120px} .slide--foto h1{font-size:34px} .valores,.ventajas,.org,.niveles,.grid--2,.grid--4,.footer-grid{grid-template-columns:1fr} .result{grid-template-columns:1fr auto 1fr;row-gap:8px} .result .fecha{grid-column:1/-1} .cta-panel .button{margin-left:0} .cta-panel,.bloque{padding:26px} .doc{flex-wrap:wrap} .doc .accion{margin-left:0;flex-basis:100%} } @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *{animation:none!important;transition:none!important} .punto[aria-current="true"]::after{width:100%!important} } /* --- componentes de contenido --- */ .marcador{font-size:15px;font-weight:900;letter-spacing:-.02em;color:var(--muted);font-variant-numeric:tabular-nums;padding:4px 9px;border:1px solid var(--line);border-radius:999px;white-space:nowrap} dl.ficha{display:grid;grid-template-columns:auto 1fr;gap:7px 16px;margin:16px 0 0;font-size:13.5px;font-weight:600;width:100%} dl.ficha dt{color:var(--muted);font-size:11px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;padding-top:3px} dl.ficha dd{margin:0;color:var(--ink)} dl.ficha--ancha{grid-template-columns:190px 1fr;font-size:14px} .match-card dl.ficha{border-top:1px solid var(--line);padding-top:12px;grid-template-columns:1fr; gap:1px 0;font-size:12.5px;margin-top:0} .match-card dl.ficha dt{font-size:10px;padding-top:7px} .match-card dl.ficha dt:first-of-type{padding-top:0} /* Enlace a la retransmisión: botón de icono anclado a la esquina inferior derecha de la ficha de partido. */ .match-card{position:relative} .match-card dl.ficha{padding-right:52px} .match-card__pie{position:absolute;right:14px;bottom:14px} .ver-directo{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border:1px solid var(--badge-line);border-radius:999px;background:var(--badge-bg);color:var(--badge-ink);transition:background .18s ease,border-color .18s ease,color .18s ease} .ver-directo svg{width:24px;height:24px;display:block} .ver-directo:hover{background:var(--rojo-texto);border-color:var(--rojo-texto);color:#fff} @media (prefers-reduced-motion:reduce){.ver-directo{transition:none}} .origen{color:var(--muted);font-size:12.5px;font-weight:700} .nota{font-size:13px;line-height:1.65} .acciones-bloque{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px} .resultado-meta{grid-column:1/-1;color:var(--muted);font-size:11.5px;font-weight:700;letter-spacing:.04em;padding-top:10px;border-top:1px dashed var(--line)} .result{row-gap:0} .text-link.ext::after{content:" ↗";font-size:11px} .equipo .text-link{margin-top:6px;padding-top:0} .ayuda{margin-top:8px} .chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:26px} .chips a{padding:9px 15px;border-radius:999px;border:1px solid var(--line);font-size:12.5px;font-weight:800;color:var(--muted)} .chips a:hover{border-color:var(--rojo-texto);color:var(--rojo-osc)} .chips a[aria-current="page"]{background:var(--rojo-texto);border-color:var(--rojo-texto);color:#fff} .paginacion{display:flex;gap:8px;align-items:center;margin-top:30px;flex-wrap:wrap} .paginacion a,.paginacion span{min-width:42px;height:42px;display:inline-grid;place-items:center;border-radius:999px;border:1px solid var(--line);font-size:13px;font-weight:900;color:var(--muted);padding:0 14px} .paginacion a:hover{border-color:var(--rojo-texto);color:var(--rojo-osc)} .paginacion [aria-current="page"]{background:var(--rojo-texto);border-color:var(--rojo-texto);color:#fff} .paginacion .puntos-susp{border:0} .paginacion .sig{margin-left:auto} .articulo{max-width:72ch;display:flex;flex-direction:column;gap:20px} .articulo figure{margin:0;display:flex;flex-direction:column;gap:10px} .articulo figure .card__image{height:340px;border-radius:var(--radius)} .articulo figcaption{color:var(--muted);font-size:12.5px;font-weight:600} .articulo .entradilla{font-size:19px;line-height:1.6;font-weight:600} .articulo p{color:var(--muted);font-size:16.5px;line-height:1.8} .articulo .entradilla{color:var(--ink)} .etiquetas{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px} /* Tablas dentro del contenido: horarios, convocatorias, cuadros de datos. */ .entry-content .tabla, .articulo .tabla{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius-s);background:var(--surface)} .entry-content table, .articulo table{width:100%;border-collapse:collapse;min-width:420px;font-size:14.5px} .entry-content th,.entry-content td, .articulo th,.articulo td{text-align:left;padding:12px 16px;border-bottom:1px solid var(--line);color:var(--ink)} .entry-content thead th, .articulo thead th{background:var(--soft);color:var(--muted);font-size:10.5px;font-weight:900;letter-spacing:.12em;text-transform:uppercase} .entry-content tbody tr:last-child td, .articulo tbody tr:last-child td{border-bottom:0} .entry-content caption, .articulo caption{caption-side:top;text-align:left;padding:14px 16px 0;font-size:11px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:var(--rojo-texto)} .entry-content .dia, .articulo .dia{font-weight:900} .entry-content .hora, .articulo .hora{font-variant-numeric:tabular-nums;white-space:nowrap} ol.pasos{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:12px;color:var(--muted);font-size:14.5px;line-height:1.65} ol.pasos b{color:var(--ink)} ol.pasos::marker{font-weight:900} @media (max-width:620px){ dl.ficha,dl.ficha--ancha{grid-template-columns:1fr;gap:2px 0} dl.ficha dd{margin-bottom:8px} .articulo figure .card__image{height:220px} .paginacion .sig{margin-left:0} } /* ============ WordPress ============ */ .screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap} .skip-link:focus{position:fixed;left:16px;top:16px;z-index:99;width:auto;height:auto;clip:auto;background:var(--rojo-texto);color:#fff;padding:12px 18px;border-radius:999px;font-weight:800;font-size:13px} .alignleft{float:left;margin:0 22px 18px 0} .alignright{float:right;margin:0 0 18px 22px} .aligncenter{display:block;margin:0 auto 18px} .alignwide{width:min(1240px,calc(100% - 40px));margin-inline:auto} .wp-caption{max-width:100%} .wp-caption-text,.wp-element-caption{color:var(--muted);font-size:12.5px;font-weight:600;margin-top:8px} .sticky .card{border-color:var(--rojo-texto)} .entry-content>*+*{margin-top:20px} .articulo img,.card__image img,.destacado .img img{width:100%;height:100%;object-fit:cover;display:block} .card a img{display:block} figure.wp-block-image{margin:0} figure.wp-block-image img{border-radius:var(--radius)} /* El escudo de la cabecera. Va con alto fijo, ancho automático y sin encoger: la marca es un elemento flexible dentro de una barra con menú largo, y sin flex:none el navegador lo estrujaba hasta dejarlo en una raya. */ .bms-logo-img{display:block;height:56px;width:auto;max-height:56px;flex:0 0 auto;object-fit:contain} .admin-bar .site-header{top:32px} @media (max-width:782px){.admin-bar .site-header{top:46px}} .comment-respond{display:none} /* --- menús de WordPress --- */ .nav ul.menu{display:flex;align-items:center;gap:2px;margin:0;padding:0;list-style:none} .nav ul.menu>li{position:relative} .nav .sub-menu{position:absolute;left:0;top:calc(100% + 8px);min-width:236px;margin:0;padding:8px;list-style:none;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-s);box-shadow:var(--shadow-l);display:none;z-index:5} .nav li:hover>.sub-menu,.nav li:focus-within>.sub-menu,.nav .sub-menu.abierta{display:block} .nav .sub-menu a{border-radius:9px;font-weight:700;font-size:13px;padding:9px 12px} .nav .current-menu-item>a,.nav .current-menu-ancestor>a,.nav .current-menu-parent>a,.nav .current-menu-ancestor>.top,.nav .current-menu-parent>.top{color:var(--rojo-osc);background:var(--nav-hover)} .nav ul.menu>li.menu-item-has-children::after{content:"";position:absolute;left:0;right:0;top:100%;height:12px} .nav .menu-item-has-children>a::after{content:"\25BE";margin-left:6px;font-size:10px;opacity:.55} .site-footer ul.menu{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px} /* Las reglas de «ul.menu» en vertical viven con las demás de la cabecera, en el bloque de 1.259 px. */ /* ---------------------------------------------- portada · bloque programas */ .section-intro { margin: -6px 0 26px; max-width: 78ch; color: var(--muted); font-size: 16px; line-height: 1.65; } /* ------------------------------------------- ficha de equipo · próximo partido */ .siguiente-partido { margin-bottom: 14px; } .siguiente-partido .kicker { display: block; margin-bottom: 8px; } .siguiente-partido .result-list { border-color: var(--rojo); box-shadow: 0 10px 30px rgba(200, 16, 46, .14); } .equipo-contacto { display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 14px 0 0; font-size: 14px; } .equipo-contacto span { color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: 11px; align-self: center; } .valores { margin: 32px 0; } /* -------------------------------- portada · misión, visión y valores */ .mvv { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 32px 0; } .mvv__col { padding: 6px 30px; border-left: 1px solid var(--line); } .mvv__col:first-child { padding-left: 0; border-left: 0; } .mvv__col h3 { margin: 0 0 14px; padding-top: 14px; border-top: 3px solid var(--rojo); font-size: 20px; letter-spacing: -.01em; } .mvv__col > p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.6; } /* La columna de valores puede traer varios párrafos cuando el texto viene corrido en vez de como lista de «Nombre: descripción». */ .mvv__col > p + p { margin-top: 10px; } .mvv__col > p + .mvv__valores { margin-top: 14px; } .mvv__valores { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; } .mvv__valores li { padding-left: 14px; border-left: 2px solid var(--badge-line); } .mvv__valores strong { display: block; font-size: 14px; line-height: 1.35; } .mvv__valores span { display: block; margin-top: 2px; color: var(--muted); font-size: 13px; line-height: 1.5; } @media (max-width: 900px) { .mvv { grid-template-columns: 1fr; gap: 26px; } .mvv__col { padding: 0; border-left: 0; } } .club-cierre { margin: 0; padding: 18px 22px; border-left: 3px solid var(--rojo); border-radius: 0 var(--radius-s) var(--radius-s) 0; background: var(--soft); color: var(--ink); font-size: 15px; font-weight: 700; line-height: 1.55; } @media (max-width: 900px) { .valores { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .valores { grid-template-columns: 1fr; } } /* Las tarjetas de programa se reparten en tantas columnas como tarjetas haya, hasta cuatro: con los cuatro programas marcados en la hoja salía una fila de tres y otra de una, que deja un hueco raro justo antes de la banda roja. La rejilla general del tema es de tres columnas, así que aquí se cuenta cuántas hijas tiene y se ajusta. Por debajo de 1.100 px se pasa a dos columnas —una tarjeta de programa necesita unos 260 px para que el texto no se rompa— y en móvil, a una. */ .programas-grid { margin: 32px 0; grid-template-columns: repeat(3, minmax(0, 1fr)); } .programas-grid:has(> :nth-child(4)) { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } .programas-grid:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); } .programas-grid:has(> :only-child) { grid-template-columns: minmax(0, 1fr); max-width: 520px; } @media (max-width: 1100px) { .programas-grid, .programas-grid:has(> :nth-child(4)) { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 620px) { .programas-grid, .programas-grid:has(> :nth-child(4)) { grid-template-columns: minmax(0, 1fr); } } /* Con cuatro columnas la foto de cabecera baja de alto: si no, la tarjeta se vuelve una columna estrecha y larguísima. */ .programas-grid:has(> :nth-child(4)) .card__image { height: 168px; } @media (max-width: 1100px) { .programas-grid:has(> :nth-child(4)) .card__image { height: 206px; } } .programas-apoyo { margin: 32px 0 0; color: var(--muted); font-size: 15px; } .programas-apoyo a { color: inherit; } /* Banda de patrocinio de la portada. El degradado va del casi negro al rojo del club, de izquierda a derecha: el titular se lee sobre la parte oscura y las cifras, que son lo que se mira, caen sobre la parte encendida. Arriba, dos columnas —titular a la izquierda, argumento y botón a la derecha—; abajo, las cifras en una rejilla de celdas separadas por una línea de un píxel, sin tarjetas ni sombras, para que se lean como una tabla y no como seis botones. */ .banda-patrocinio { margin-top: 34px; padding: clamp(28px, 4vw, 52px); border-radius: var(--radius); background-color: var(--rojo); color: #FFFFFF; box-shadow: var(--shadow-l); } .banda-patrocinio__alto { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 60px); align-items: start; margin-bottom: clamp(26px, 3vw, 40px); } .banda-patrocinio__kicker { margin: 0 0 14px; font-size: 12px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .7); } .banda-patrocinio h3 { margin: 0; font-size: clamp(30px, 3.2vw, 46px); font-weight: 900; line-height: 1.02; letter-spacing: -.03em; color: #FFFFFF; text-wrap: balance; } .banda-patrocinio__lado { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; } .banda-patrocinio p { margin: 0; max-width: 62ch; color: rgba(255, 255, 255, .85); font-size: 16px; line-height: 1.6; } /* Las cifras del club: mismas clases en la portada y en /patrocina/, porque son el mismo dato. Solo cambia el color según el fondo sobre el que caen. */ .cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 18px; margin: 26px 0 0; padding: 0; list-style: none; } .cifras li { padding: 16px 18px; border-radius: 16px; background: var(--soft); border-top: 3px solid var(--rojo); } .cifras__valor { display: block; font-size: 30px; font-weight: 900; line-height: 1; color: var(--ink); } .cifras__rotulo { display: block; margin-top: 6px; font-size: 14px; font-weight: 700; color: var(--ink); } .cifras__matiz { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); } /* Las cifras dentro de la banda: la línea que las separa es el hueco de la rejilla sobre un fondo claro, así que no hace falta ni un borde por celda. */ .banda-patrocinio__cifras { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1px; margin-top: 0; background: rgba(255, 255, 255, .18); border: 1px solid rgba(255, 255, 255, .18); border-radius: var(--radius-s); overflow: hidden; } .banda-patrocinio__cifras li { display: grid; grid-template-rows: auto auto 1fr; gap: 10px; min-height: 200px; padding: clamp(18px, 2vw, 26px) clamp(15px, 1.6vw, 21px); border: 0; border-radius: 0; background: rgba(0, 0, 0, .16); transition: background .18s ease; } .banda-patrocinio__cifras li:hover { background: rgba(0, 0, 0, .28); } .banda-patrocinio__cifras .cifras__valor { font-size: clamp(34px, 3.2vw, 48px); line-height: .9; letter-spacing: -.04em; color: #FFFFFF; } .banda-patrocinio__cifras .cifras__rotulo { margin-top: 0; font-size: 13.5px; font-weight: 900; line-height: 1.25; letter-spacing: .04em; text-transform: uppercase; color: #FFFFFF; } .banda-patrocinio__cifras .cifras__matiz { margin-top: 0; font-size: 13.5px; line-height: 1.45; color: #FFFFFF; } @media (max-width: 1100px) { .banda-patrocinio__cifras { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 900px) { .banda-patrocinio__alto { grid-template-columns: 1fr; } } @media (max-width: 700px) { .banda-patrocinio__cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); } .banda-patrocinio__cifras li { min-height: 0 } } @media (max-width: 520px) { .banda-patrocinio { padding: 24px 20px; } } /* ============================================ página de equipos · tarjetas */ .bloque-equipos + .bloque-equipos { margin-top: 44px; } .section-head--sub .cuenta-equipos { color: var(--muted); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; } /* Cinco o seis por fila en escritorio: con veintiún equipos, la rejilla ancha es lo que permite verlos todos sin recorrer la página a ciegas. */ .equipos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(186px, 1fr)); gap: 16px; margin-top: 18px; } /* Los dos bloques pequeños comparten banda. El ancho se reparte según cuántos equipos tiene cada uno —dos y tres— para que la tarjeta salga del mismo tamaño a izquierda y derecha; si el reparto fuera mitad y mitad, las dos de la izquierda se verían infladas al lado de las tres de la derecha. */ .bloques-duo { display: flex; flex-wrap: wrap; gap: 26px 34px; align-items: flex-start; } .bloques-duo .bloque-equipos { flex: var(--equipos, 1) 1 260px; min-width: 0; } .bloques-duo .equipos-grid { grid-template-columns: repeat(var(--equipos, 3), minmax(0, 1fr)); } .bloques-duo > .bloque-equipos + .bloque-equipos { padding-left: 34px; border-left: 1px solid var(--line); } .equipo-card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--surface); box-shadow: var(--shadow); color: inherit; text-decoration: none; } .equipo-card:hover { border-color: var(--rojo); box-shadow: var(--shadow-l); } .equipo-card:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; } .equipo-card__foto { position: relative; display: block; aspect-ratio: 4 / 3; background: linear-gradient(150deg, var(--rojo), var(--rojo-osc)); border-bottom: 3px solid var(--rojo); } .equipo-card__foto img { width: 100%; height: 100%; object-fit: cover; display: block; } .equipo-card__iniciales { position: absolute; inset: 0; display: grid; place-items: center; color: #FFFFFF; font-size: 30px; font-weight: 900; letter-spacing: -.04em; } .equipo-card__cuerpo { display: block; padding: 12px 14px 14px; } .equipo-card .kicker { display: block; margin-bottom: 4px; font-size: 10px; } .equipo-card__nombre { display: block; font-size: 15px; font-weight: 800; line-height: 1.25; letter-spacing: -.01em; color: var(--ink); } .equipo-card__competicion { display: block; margin-top: 4px; color: var(--muted); font-size: 12px; line-height: 1.4; } @media (max-width: 860px) { /* Apilados, el filete separador sobra y las rejillas vuelven a repartirse solas: en móvil no hay banda que compartir. */ .bloques-duo { display: block; } .bloques-duo .bloque-equipos + .bloque-equipos { margin-top: 34px; padding-left: 0; border-left: 0; } .bloques-duo .equipos-grid { grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); } } @media (max-width: 640px) { .equipos-grid { grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 12px; } .equipo-card__nombre { font-size: 14px; } } @media (prefers-reduced-motion: no-preference) { .equipo-card { transition: border-color .15s ease, box-shadow .15s ease; } } /* --------------------------------------- tarjetas de programa a igual altura */ .grid .card { display: flex; } .grid .card__body { display: flex; flex-direction: column; flex: 1; } /* El enlace de la tarjeta se pega abajo, así que aunque un programa tenga cuatro líneas y otro ocho, los botones quedan alineados en la fila. */ .grid .card__body > .text-link { margin-top: auto; padding-top: 12px; } /* ----------------------------------------------- /hazte-socio/ · cuotas */ .cuotas { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 19px; margin-top: 26px; } .cuota { padding: 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); } .cuota__importe { display: block; margin-top: 10px; font-size: 30px; font-weight: 900; line-height: 1.1; letter-spacing: -.02em; color: var(--ink); } .cuota__importe small { display: block; margin-top: 4px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); } .cuota p { margin: 12px 0 0; color: var(--muted); font-size: 14px; line-height: 1.55; } /* ============================================================ programas Ficha de programa. La página se construye por piezas que vienen de la hoja: cabecera con cifra grande, banda roja, secciones con puntos, datos sobre marino y cierre. Cada pieza se dibuja solo si hay contenido, así que el orden de arriba abajo se mantiene aunque falten trozos. La voz «deportiva» sale del eje de anchura: Archivo estrechada y en caja alta para los titulares, a anchura normal para el texto. El tema no hace ninguna petición a servidores de terceros. */ .pg-hero{position:relative;overflow:hidden;background:var(--navy); background-image:linear-gradient(135deg,rgba(43,43,43,.9),rgba(17,17,17,0))} .pg-hero__pista{position:absolute;inset:0;pointer-events:none} .pg-hero__pista svg{width:100%;height:100%;display:block} .pg-hero__inner{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto; gap:clamp(24px,4vw,56px);align-items:center;padding:clamp(46px,6vw,78px) 0} .pg-hero__texto{max-width:720px} .migas+.pg-kicker{margin-top:18px} .pg-hero .migas{color:rgba(255,255,255,.62);font-size:12px;font-weight:600;display:flex; flex-wrap:wrap;gap:8px;align-items:center} .pg-hero .migas a{color:rgba(255,255,255,.62)} .pg-hero .migas a:hover{color:#fff;text-decoration:underline} .pg-hero .migas [aria-current]{color:#fff} .pg-kicker{display:flex;align-items:center;gap:12px;margin:0 0 16px;color:#FF8894; font-size:12px;font-weight:900;letter-spacing:.18em;text-transform:uppercase} .pg-kicker__raya{width:28px;height:3px;background:var(--rojo);display:block;flex:none} .pg-kicker--rojo{color:var(--rojo-texto)} .pg-titulo{margin:0;color:#fff;font-size:clamp(44px,7vw,92px);line-height:.9;font-weight:900; letter-spacing:-.05em;text-transform:uppercase} .pg-chips{display:flex;flex-wrap:wrap;gap:9px;list-style:none;margin:22px 0 20px;padding:0} .pg-chips li{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.18);color:#fff; font-size:12px;font-weight:700;padding:8px 14px;border-radius:999px} .pg-entradilla{margin:0;color:#CFCFD2;font-size:clamp(16px,1.5vw,19px);line-height:1.55; max-width:620px;text-wrap:pretty} .pg-hero__acciones{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px} .pg-hero__cifra{margin:0;text-align:right;display:flex;flex-direction:column;align-items:flex-end} .pg-hero__valor{color:#fff;font-size:clamp(88px,13vw,190px);line-height:.78;font-weight:900; letter-spacing:-.06em} .pg-hero__rotulo{color:#FF8894;font-size:clamp(15px,1.7vw,22px);font-weight:900;letter-spacing:.12em; text-transform:uppercase;margin-top:8px;max-width:320px} .pg-hero__matiz{color:#A3A3A8;font-size:13px;font-weight:500;margin-top:8px;max-width:340px} .pg-banda{background:var(--rojo)} .pg-banda__inner{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr))} .pg-banda__item{padding:24px 26px;border-right:1px solid rgba(255,255,255,.18)} .pg-banda__item:first-child{padding-left:0} .pg-banda__item:last-child{border-right:0} .pg-banda__valor{display:block;color:#fff;font-size:38px;font-weight:900;line-height:1; letter-spacing:-.03em} .pg-banda__rotulo{display:block;color:#fff;font-size:13px;font-weight:600; margin-top:5px} .pg-bloque__grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); gap:clamp(28px,4vw,56px);align-items:start} .pg-bloque__grid--solo{grid-template-columns:minmax(0,1fr);max-width:820px} .pg-h2{margin:0;font-size:clamp(30px,4.2vw,50px);line-height:.98;font-weight:900; letter-spacing:-.04em;text-transform:uppercase} .pg-h2--menor{font-size:clamp(26px,3.2vw,38px)} .pg-bloque__texto{margin-top:16px;color:var(--muted);font-size:16px;line-height:1.62} .pg-bloque__texto p{margin:0 0 12px} .pg-bloque__texto p:last-child{margin-bottom:0} /* Formato en rejilla: el titular arriba con el texto de apoyo al lado, y los puntos abiertos en una fila de tarjetas. Para bloques que enumeran cosas comparables —los resultados de una temporada, los equipos de una categoría—, donde la columna las hacía parecer una lista de pasos. */ .pg-cabeza-fila{margin-bottom:32px;max-width:1000px} /* El texto cierra la sección, a todo el ancho y bajo un filete que lo separa de las tarjetas. Se reparte en dos columnas en pantallas anchas: a 1.240 px una sola línea de texto sería demasiado larga para leerse cómoda. */ .pg-apoyo{margin-top:34px;padding-top:26px;border-top:1px solid var(--line); color:var(--muted);font-size:15px;line-height:1.62;columns:2;column-gap:48px} .pg-apoyo p{margin:0 0 12px;break-inside:avoid} .pg-apoyo p:last-child{margin-bottom:0} .pg-rejilla{list-style:none;margin:0;padding:0;display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:20px;align-items:stretch} .pg-tarjeta{border:1px solid var(--line);border-top:4px solid var(--rojo); border-radius:18px;padding:24px;background:var(--surface);box-shadow:var(--shadow)} .pg-tarjeta__titulo{display:block;font-size:21px;font-weight:900;line-height:1.05; letter-spacing:-.025em;text-transform:uppercase} .pg-vinetas{list-style:none;margin:15px 0 0;padding:0;display:flex;flex-direction:column;gap:8px} .pg-vinetas li{position:relative;padding-left:18px;font-size:14.5px;font-weight:700;line-height:1.4} .pg-vinetas li::before{content:"";position:absolute;left:0;top:.45em;width:8px;height:8px; border-radius:999px;background:var(--rojo)} .pg-puntos{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:13px} .pg-punto{display:flex;gap:20px;align-items:flex-start;border:1px solid var(--line); border-radius:var(--radius);padding:22px 26px;background:var(--surface)} .pg-punto__num{font-size:34px;font-weight:900;color:var(--rojo-texto);line-height:.9;min-width:34px; letter-spacing:-.04em} .pg-punto__titulo{display:block;font-size:19px;font-weight:900;letter-spacing:-.02em} .pg-punto__texto{display:block;font-size:14.5px;color:var(--muted);line-height:1.55;margin-top:4px} /* Sobre fondo claro, como el resto del cuerpo de la página: la única zona oscura es la cabecera. */ .pg-datos{background:var(--surface);padding:clamp(48px,6vw,72px) 0} .pg-datos__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,360px); gap:clamp(28px,4vw,60px);align-items:start} .pg-datos__grid--solo{grid-template-columns:minmax(0,1fr);max-width:900px} .pg-datos .pg-h2{margin-bottom:26px} .pg-lista{display:grid;grid-template-columns:200px minmax(0,1fr);gap:0;margin:0} .pg-lista dt{padding:15px 0;border-top:1px solid var(--line);color:var(--muted);font-size:11px; font-weight:900;letter-spacing:.1em;text-transform:uppercase} .pg-lista dd{padding:15px 0;border-top:1px solid var(--line);margin:0;color:var(--ink); font-size:15px;font-weight:500} .pg-lista dt:last-of-type,.pg-lista dd:last-of-type{border-bottom:1px solid var(--line)} .pg-aside{background:var(--rojo);border-radius:var(--radius);padding:32px 30px; display:flex;flex-direction:column;align-items:stretch;gap:14px} .pg-aside__titulo{margin:0;color:#fff;font-size:27px;font-weight:900;line-height:1.04; letter-spacing:-.03em;text-transform:uppercase} .pg-aside__texto{margin:0;color:#fff;font-size:14.5px;line-height:1.6} .pg-aside .button{width:100%;margin-top:8px} .pg-aside__enlace{color:#fff;font-size:13px;font-weight:700;text-align:center} .pg-aside__enlace:hover{color:#fff;text-decoration:underline} .button--navy{background:var(--navy);color:#fff} .button--navy:hover{background:var(--navy-2)} .pg-cierre__grid{display:flex;flex-wrap:wrap;gap:32px;align-items:center; justify-content:space-between} .pg-cierre__grid>div:first-child{max-width:780px} .pg-cierre__texto{margin:12px 0 0;color:var(--muted);font-size:16px;line-height:1.6} .pg-cierre__acciones{display:flex;flex-direction:column;gap:10px;min-width:236px} @media (max-width:900px){ .pg-hero__inner{grid-template-columns:minmax(0,1fr)} .pg-hero__cifra{align-items:flex-start;text-align:left; flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:12px} .pg-hero__rotulo{margin-top:0} .pg-hero__matiz{width:100%;margin-top:4px} .pg-bloque__grid,.pg-datos__grid{grid-template-columns:minmax(0,1fr)} .pg-apoyo{columns:1} .pg-banda__item{border-right:0;border-bottom:1px solid rgba(255,255,255,.18);padding-left:0} .pg-banda__item:last-child{border-bottom:0} .pg-lista{grid-template-columns:minmax(0,1fr);gap:0} .pg-lista dt{padding-bottom:0;border-top:1px solid var(--line)} .pg-lista dd{padding-top:4px;border-top:0} .pg-lista dt:last-of-type{border-bottom:0} .pg-cierre__acciones{width:100%} } /* =========================================================== jornada /partidos/ como una sola tarjeta: cabecera oscura con las tres pestañas, franja de destacados, la jornada en dos columnas agrupada por día y un pie con la leyenda. El marcador está siempre —gris mientras no se juega, rojo cuando ha terminado—, que es lo que permite usar la misma línea para el calendario y para los resultados. */ .jornada{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden; background:var(--surface);box-shadow:var(--shadow-l)} /* La cabecera de la caja comparte fondo con las cabeceras de página: es el mismo papel, aunque aquí viva dentro de una tarjeta. */ .jr-cabecera{background-color:var(--rojo);background-image:var(--cabecera); background-size:cover;background-position:50% 42%;background-repeat:no-repeat; padding:18px 26px;display:flex;flex-direction:column;gap:14px} .jr-cabecera__fila{display:flex;flex-wrap:wrap;gap:16px;align-items:center; justify-content:space-between} .jr-cabecera__titulo{margin:0;color:#fff;font-size:clamp(22px,3vw,30px);line-height:1; letter-spacing:-.035em;text-transform:uppercase} /* Los filtros van en la propia barra del título, sobre el marino. Los controles nativos se repintan a mano: en oscuro, el fondo blanco que pone el navegador partiría la barra en dos. color-scheme:dark hace que el desplegable y el calendario que abre el sistema también salgan oscuros. */ /* Todo en una línea: los dos desplegables reparten el sitio sobrante y las fechas y el botón ocupan lo suyo. Solo se parte en móvil, donde una sola línea dejaría los controles en dos centímetros. */ .jr-filtros{display:flex;flex-wrap:nowrap;gap:8px;align-items:center;color-scheme:dark} .jr-filtros select,.jr-filtros input[type="date"]{ background:rgba(0,0,0,.30);border:1px solid rgba(255,255,255,.42);border-radius:999px; color:#fff;font-family:var(--sans);font-size:12.5px;font-weight:700;padding:9px 14px; max-width:100%} .jr-filtros select{flex:1 1 0;min-width:0;text-overflow:ellipsis} .jr-filtros input[type="date"]{flex:0 0 auto} .jr-filtros__boton{flex:0 0 auto} .jr-filtros select:hover,.jr-filtros input[type="date"]:hover{background:rgba(0,0,0,.42)} .jr-filtros select option{background:var(--navy);color:#fff} .jr-filtros__boton{border:0;border-radius:999px;background:#fff;color:var(--rojo-osc);cursor:pointer; font-family:var(--sans);font-size:12.5px;font-weight:900;letter-spacing:.04em;padding:9px 20px} .jr-filtros__boton:hover{background:#F1F1F2} .jr-filtros__limpiar{color:#fff;font-size:12px;font-weight:700;padding:9px 4px;text-decoration:underline;text-underline-offset:3px} .jr-filtros__limpiar:hover{color:#fff;text-decoration:underline} .jr-pestanas{display:flex;gap:2px;background:rgba(0,0,0,.30);border-radius:999px;padding:4px} .jr-pestana{padding:9px 20px;border-radius:999px;font-size:12.5px;font-weight:900; letter-spacing:.06em;text-transform:uppercase;color:#fff} .jr-pestana:hover{color:#fff} .jr-pestana.es-activa{background:#fff;color:var(--rojo-osc)} .jr-nacionales{background:var(--footer);padding:14px 26px 20px} .jr-nacionales__rotulo{margin:0 0 12px;color:#E8B84B;font-size:11px;font-weight:900; letter-spacing:.14em;text-transform:uppercase} .jr-nacionales__lista{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:16px} .jr-destacado{background:#161616;border:1px solid rgba(255,255,255,.08);border-radius:14px; padding:14px 18px 16px} .jr-destacado__top{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:baseline; justify-content:space-between;margin-bottom:10px} .jr-destacado__competicion{color:var(--rojo-texto);font-size:12px;font-weight:900;letter-spacing:.07em; text-transform:uppercase} .jr-destacado__cuando{color:rgba(255,255,255,.6);font-size:11.5px;font-weight:700} .jr-destacado__partido{display:grid;grid-template-columns:minmax(0,1fr) auto auto auto minmax(0,1fr); align-items:center;gap:12px} .jr-destacado__eq{color:#fff;font-size:17px;font-weight:900;letter-spacing:-.025em;line-height:1.15;text-wrap:balance} .jr-destacado__eq--local{text-align:right} /* Las dos columnas son de partidos, no de días. Antes la multicolumna repartía los bloques de día, así que un fin de semana con una sola jornada dejaba la mitad derecha en blanco. Ahora cada día ocupa el ancho entero y son sus partidos los que fluyen a dos columnas. */ .jr-dias{padding:6px 26px 8px} .jr-dia{padding:12px 0 6px} .jr-dia__cabecera{display:flex;align-items:baseline;justify-content:space-between;gap:14px; margin:0 0 2px;padding-bottom:6px;border-bottom:1px solid var(--line); font-size:13px;font-weight:900;letter-spacing:.06em;text-transform:uppercase} .jr-dia__cuenta{color:var(--muted);font-size:11px;font-weight:700;letter-spacing:.04em} .jr-lista{list-style:none;margin:0;padding:0;columns:2;column-gap:40px} .jr-linea{break-inside:avoid} .jr-linea{display:grid;grid-template-columns:52px minmax(0,1fr) 26px auto 26px minmax(0,1fr); align-items:center;gap:0 8px;padding:8px 0;border-bottom:1px solid var(--soft)} .jr-linea:last-child{border-bottom:0} .jr-linea__hora{font-size:13.5px;font-weight:900;letter-spacing:-.02em} .jr-linea__eq{font-size:13.5px;font-weight:800;letter-spacing:-.02em;line-height:1.2;text-wrap:balance} .jr-linea__eq--local{text-align:right} .jr-linea__eq.es-sanse{color:var(--ink)} .jr-linea__meta{grid-column:2 / -1;margin-top:2px;color:var(--muted);font-size:10.5px;font-weight:600} .jr-linea__meta b{color:var(--rojo-texto);font-weight:900;letter-spacing:.04em;text-transform:uppercase} .jr-aviso{margin-left:8px;color:var(--rojo-osc);font-weight:900;text-transform:uppercase; letter-spacing:.06em} .escudo-eq--linea{width:26px;height:26px;border-radius:999px} .escudo-eq--linea .escudo-eq__iniciales{font-size:9px} .escudo-eq--destacado{width:34px;height:34px} .escudo-eq--destacado .escudo-eq__iniciales{font-size:11px} .jr-marcador{display:inline-flex;align-items:center;justify-content:center;min-width:74px; padding:5px 8px;border-radius:999px;background:var(--soft);border:1px solid var(--line); color:var(--muted);font-size:13px;font-weight:900;letter-spacing:.02em;white-space:nowrap} .jr-marcador--final{background:var(--rojo-texto);border-color:var(--rojo-texto);color:#fff} .jr-marcador--grande{min-width:110px;padding:10px 14px;font-size:19px; background:rgba(255,255,255,.08);border-color:#fff;color:#fff} .jr-marcador--grande.jr-marcador--final{background:var(--rojo-texto);border-color:var(--rojo-texto);color:#fff} .jr-vacia{margin:0;padding:38px 26px;text-align:center;color:var(--muted);font-size:14.5px} .jr-pie{display:flex;flex-wrap:wrap;gap:10px 20px;align-items:center;justify-content:space-between; padding:14px 26px;border-top:1px solid var(--line);background:var(--soft)} .jr-leyenda,.jr-pie__cuenta{margin:0;color:var(--muted);font-size:11.5px;font-weight:700} .jr-leyenda__punto{display:inline-block;width:9px;height:9px;border-radius:999px; background:var(--line);border:1px solid var(--muted);margin:0 4px 0 14px;vertical-align:middle} .jr-leyenda__punto--final{background:var(--rojo);border-color:var(--rojo-texto);margin-left:0} .migas--claras{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:18px; color:var(--muted);font-size:12px;font-weight:600} .migas--claras a:hover{color:var(--rojo-texto);text-decoration:underline} @media (max-width:1000px){ .jr-lista{columns:1} .jr-filtros{flex-wrap:wrap} .jr-filtros select{flex:1 1 180px} } @media (max-width:620px){ .jr-cabecera,.jr-nacionales,.jr-dias,.jr-pie{padding-left:16px;padding-right:16px} .jr-pestanas{width:100%} .jr-pestana{flex:1;text-align:center;padding:9px 8px} .jr-filtros{flex-wrap:wrap} .jr-filtros select,.jr-filtros input[type="date"]{flex:1 1 140px;min-width:0} .jr-filtros__boton{flex:1 1 100%} .jr-linea{grid-template-columns:44px minmax(0,1fr) 22px auto 22px minmax(0,1fr);gap:0 6px} .jr-linea__eq{font-size:12px} .jr-destacado__partido{grid-template-columns:minmax(0,1fr) auto auto auto minmax(0,1fr);gap:8px} .jr-destacado__eq{font-size:14px} } /* ============================== programa · estilo escolar y formatos nuevos El mismo armazón de la página de programa con otra piel, para los programas dirigidos a familias de colegio: cabecera en rojo pleno y cifras en tarjetas de colores. Y cuatro formas más de presentar los puntos de un bloque, todas con la misma columna «Puntos» de la hoja. */ .pg-barra-aviso{background:#E8B84B;color:#2A1F02} .pg-barra-aviso .container{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center; justify-content:center;padding:11px 0;font-size:13px;font-weight:800} .pg-barra-aviso__punto{width:8px;height:8px;border-radius:999px;background:#2A1F02} .pg-barra-aviso a{color:#2A1F02;text-decoration:underline;text-underline-offset:3px;font-weight:900} .pg-barra-aviso a:hover{color:#000} .programa--escolar .pg-kicker{color:#fff} .programa--escolar .pg-kicker__raya{background:rgba(255,255,255,.5)} .programa--escolar .pg-entradilla{color:#fff} .programa--escolar .pg-hero__valor{color:#fff} .programa--escolar .pg-hero__rotulo{color:#fff} .programa--escolar .pg-hero__matiz{color:#fff} .programa--escolar .pg-hero .migas,.programa--escolar .pg-hero .migas a{color:#fff} .programa--escolar .button{background:#fff;color:var(--rojo-osc);border-color:#fff} .programa--escolar .button:hover{background:#F1F2F4} .programa--escolar .button--ghost{background:transparent;color:#fff;border-color:#fff} /* Las cifras, en tarjetas de colores en vez de en franja. */ .pg-banda--tarjetas{background:transparent;padding:34px 0 0} .pg-banda--tarjetas .pg-banda__inner{gap:16px} .pg-banda--tarjetas .pg-banda__item{border:0;border-radius:16px;padding:20px 22px;min-height:92px; display:flex;flex-direction:column;justify-content:center} .pg-banda--tarjetas .pg-banda__item:first-child{padding-left:22px} .pg-banda--tarjetas .pg-banda__valor{font-size:32px} .pg-banda--tarjetas .pg-banda__rotulo{font-size:10.5px;font-weight:900;letter-spacing:.1em; text-transform:uppercase;margin-top:6px} .pg-banda--tarjetas .pg-banda__item:nth-child(1){background:var(--rojo-texto);color:#fff} .pg-banda--tarjetas .pg-banda__item:nth-child(2){background:#1F1F1F;color:#fff} .pg-banda--tarjetas .pg-banda__item:nth-child(3){background:var(--navy);color:#fff} .pg-banda--tarjetas .pg-banda__item:nth-child(4){background:var(--surface);border:1px solid var(--line)} .pg-banda--tarjetas .pg-banda__item:nth-child(4) .pg-banda__valor{color:var(--rojo-texto)} .pg-banda--tarjetas .pg-banda__item:nth-child(4) .pg-banda__rotulo{color:var(--muted)} /* Entradilla de bloque: en estos formatos el texto va bajo el titular. */ .pg-entrada{margin-top:12px;max-width:70ch;color:var(--muted);font-size:15px;line-height:1.6} /* Bloque en pestanas: un solo marco con varias vistas y un boton por vista. Sustituye a cuatro secciones encadenadas en las paginas de programa donde los datos, los resultados y como apuntarse caben en una pantalla. */ .pg-panel{display:flex;flex-direction:column;overflow:hidden; border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow)} .pg-panel__cabeza{display:flex;flex-wrap:wrap;gap:8px;padding:16px 20px;border-bottom:1px solid var(--line);background:var(--soft)} .pg-pestana{border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--muted); font-family:inherit;font-size:12.5px;font-weight:900;letter-spacing:.03em;text-transform:uppercase; padding:10px 18px;cursor:pointer;transition:background .15s ease,color .15s ease,border-color .15s ease} .pg-pestana:hover{color:var(--rojo-texto);border-color:var(--badge-line)} .pg-pestana.es-activa{background:var(--rojo-texto);border-color:var(--rojo-texto);color:#fff} .pg-panel__cuerpo{padding:clamp(22px,3vw,34px)} .pg-panel__datos{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr)); gap:18px 26px;margin:0} .pg-panel__datos div{display:grid;gap:5px;padding-bottom:16px;border-bottom:1px dashed var(--line)} .pg-panel__datos dt{color:var(--muted);font-size:11px;font-weight:900;letter-spacing:.1em;text-transform:uppercase} .pg-panel__datos dd{margin:0;color:var(--ink);font-size:16px;font-weight:800;line-height:1.35;letter-spacing:-.01em} .pg-panel__texto{max-width:72ch;color:var(--muted);font-size:15.5px;line-height:1.65} .pg-panel__datos+.pg-panel__texto{margin-top:22px} .pg-panel__texto p+p{margin-top:12px} .pg-panel__pie{display:flex;flex-wrap:wrap;align-items:center;gap:12px; border-top:1px solid var(--line);padding:16px 20px;background:var(--soft)} @media (max-width:640px){ .pg-panel__cabeza{padding:12px 14px} .pg-pestana{padding:9px 14px;font-size:11.5px} .pg-panel__datos div{padding-bottom:12px} } .pg-entrada p{margin:0 0 10px} .pg-entrada p:last-child{margin-bottom:0} .pg-nota{margin:18px 0 0;color:var(--muted);font-size:12.5px;line-height:1.5} .pg-nota span{color:var(--rojo-texto);font-weight:900} /* unidades didácticas por grupo: una tarjeta por grupo, con su cabecera de color y la lista numerada del curso. La primera va en rojo y la segunda en marino, para distinguir los dos grupos de un vistazo. */ .pg-unidades{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr)); gap:22px;align-items:start} .pg-curso{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface); box-shadow:var(--shadow);overflow:hidden} .pg-curso__cabeza{display:flex;align-items:center;justify-content:space-between;gap:16px; padding:22px 24px;background:var(--rojo-texto);color:#fff} .pg-curso--navy .pg-curso__cabeza{background:var(--navy)} .pg-curso__rotulo{display:block;font-size:11px;font-weight:900;letter-spacing:.12em; text-transform:uppercase;color:#fff} .pg-curso__nombre{display:block;margin-top:2px;font-size:27px;font-weight:900;line-height:1.05; letter-spacing:-.03em;text-transform:uppercase} .pg-curso__cuenta{flex:none;border-radius:999px;background:rgba(0,0,0,.22);padding:7px 14px; font-size:11.5px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap} .pg-unidad-lista{list-style:none;margin:0;padding:8px 0 12px} .pg-unidad{display:grid;grid-template-columns:34px 1fr;gap:14px;align-items:start; padding:16px 24px;border-bottom:1px solid var(--line)} .pg-unidad:last-child{border-bottom:0} .pg-unidad__num{font-size:17px;font-weight:900;color:var(--rojo-texto);letter-spacing:-.02em;line-height:1.3} .pg-unidad__titulo{display:block;font-size:16px;font-weight:800;line-height:1.3} .pg-unidad__texto{display:block;margin-top:4px;color:var(--muted);font-size:14.5px;line-height:1.5} .pg-unidad__chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:9px} .pg-unidad__chips span{border:1px solid var(--line);border-radius:999px;background:var(--soft); padding:4px 10px;font-size:11px;font-weight:900;letter-spacing:.07em;text-transform:uppercase; color:var(--muted)} /* grupos y monitores */ .pg-equipos{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:20px} /* Con cuatro grupos, el reparto automático daba tres arriba y uno suelto debajo. Estas tarjetas llevan mucho dentro —centro, plazas, días, edades, horario y dos personas—, así que cuatro en fila las estrecharía de más: el reparto limpio es de dos por dos. Cinco o más vuelven al reparto automático, que es el que mejor aprovecha el ancho cuando no hay simetría posible. */ .pg-equipos:has(> :nth-child(4):last-child){grid-template-columns:repeat(2,minmax(0,1fr))} @media (max-width:760px){ .pg-equipos:has(> :nth-child(4):last-child){grid-template-columns:minmax(0,1fr)} } .pg-equipo{display:flex;flex-direction:column;gap:14px;border:1px solid var(--line); border-radius:var(--radius-s);background:var(--surface);box-shadow:var(--shadow);padding:24px} .pg-equipo__alto{display:flex;align-items:flex-start;justify-content:space-between;gap:12px} .pg-equipo__centro{margin:6px 0 0;font-size:19px;font-weight:900;letter-spacing:-.02em;line-height:1.2} .pg-equipo__detalle{margin:4px 0 0;color:var(--muted);font-size:14px} .pg-equipo__plazas{flex:none;margin:0;text-align:right} .pg-equipo__plazas span:first-child{display:block;font-size:31px;font-weight:900;color:var(--rojo-texto); line-height:.9;letter-spacing:-.04em} .pg-equipo__plazas span+span{display:block;margin-top:4px;font-size:10.5px;font-weight:900; letter-spacing:.09em;text-transform:uppercase;color:var(--muted)} .pg-equipo__chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px} .pg-equipo__chips li{border:1px solid var(--line);border-radius:999px;background:var(--soft); padding:5px 12px;font-size:11.5px;font-weight:900;letter-spacing:.06em;text-transform:uppercase} .pg-equipo__chips .pg-equipo__chip--fuerte{background:var(--navy);border-color:var(--navy);color:#fff} .pg-equipo__gente{margin:0;border-top:1px solid var(--line);padding-top:14px;display:grid;gap:10px} .pg-equipo__gente dt{font-size:10.5px;font-weight:900;letter-spacing:.09em;text-transform:uppercase; color:var(--muted)} .pg-equipo__gente dd{margin:2px 0 0;font-size:15px;line-height:1.4} /* banda dorada: el aviso práctico al pie de los grupos */ .pg-banda-oro{display:flex;flex-wrap:wrap;gap:10px 26px;align-items:baseline;margin-top:20px; border-radius:var(--radius-s);background:#E8B84B;padding:20px 24px} .pg-banda-oro__rotulo{font-size:11.5px;font-weight:900;letter-spacing:.09em;text-transform:uppercase} .pg-banda-oro__texto{flex:1;min-width:min(100%,260px);font-size:15px;line-height:1.5} /* tarjetas: etiqueta, dato grande y texto */ .pg-fichas{list-style:none;margin:0;padding:0;display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:18px} .pg-ficha{border:1px solid var(--line);border-radius:18px;padding:24px;background:var(--surface); box-shadow:var(--shadow);display:flex;flex-direction:column;gap:8px} .pg-ficha--suave{background:var(--soft);box-shadow:none} .pg-ficha__etiqueta{align-self:flex-start;background:transparent;border:1px solid var(--rojo); color:var(--rojo-texto);font-size:10.5px;font-weight:900;letter-spacing:.1em;text-transform:uppercase; padding:6px 12px;border-radius:999px} .pg-ficha__etiqueta--rojo{background:var(--rojo-texto);border-color:var(--rojo-texto);color:#fff} .pg-ficha__etiqueta--oscuro{background:var(--navy);border-color:var(--navy);color:#fff} .pg-ficha__dato{font-size:31px;font-weight:900;letter-spacing:-.03em;line-height:1} .pg-ficha__texto{color:var(--muted);font-size:14.5px;line-height:1.55} /* pares agrupados: cada grupo con su filete de color */ .pg-grupos{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:24px} .pg-grupo{border-top:4px solid var(--rojo);padding-top:16px} .pg-grupo--navy{border-top-color:var(--navy)} .pg-grupo__rotulo{margin:0 0 12px;font-size:12px;font-weight:900;letter-spacing:.1em; text-transform:uppercase} .pg-pares{margin:0} .pg-pares>div{display:flex;align-items:baseline;justify-content:space-between;gap:14px; padding-bottom:9px;margin-bottom:9px;border-bottom:1px solid var(--line)} .pg-pares>div:last-child{margin-bottom:0} .pg-pares dt{font-size:15px;font-weight:900;letter-spacing:-.02em} .pg-pares dd{margin:0;color:var(--muted);font-size:14.5px;font-variant-numeric:tabular-nums; text-align:right} /* listas de centros */ .pg-listas{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:26px} .pg-lista-centros__cabeza{display:flex;align-items:center;gap:10px;margin:0 0 12px} .pg-lista-centros__cuenta{font-size:12px;font-weight:900;color:var(--muted)} .pg-lista-centros ul{list-style:none;margin:0;padding:0;display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:6px 16px; color:var(--muted);font-size:14px} /* tarifas */ .pg-tarifas{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:16px; align-items:stretch} .pg-precio{border:1px solid var(--line);border-radius:18px;padding:24px;background:var(--surface); box-shadow:var(--shadow);display:flex;flex-direction:column;gap:4px} .pg-precio--destacado{background:var(--rojo-texto);border-color:var(--rojo-texto);box-shadow:none;color:#fff} .pg-precio__quien{font-size:11px;font-weight:900;letter-spacing:.08em;text-transform:uppercase; color:var(--muted)} .pg-precio--destacado .pg-precio__quien{color:#fff} .pg-precio__importe{font-size:41px;font-weight:900;letter-spacing:-.04em;line-height:1} .pg-precio__nota{color:var(--muted);font-size:13.5px;line-height:1.5} .pg-precio--destacado .pg-precio__nota{color:#fff} .pg-tarifas__acciones{display:flex;flex-direction:column;justify-content:center;gap:10px} .pg-tarifas__acciones .button{width:100%} /* accesos externos, en tarjeta */ .pg-accesos{list-style:none;margin:0;padding:0;display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:14px} .pg-accesos a{display:flex;flex-direction:column;gap:6px;border:1px solid var(--line); border-radius:18px;padding:18px;background:var(--surface);color:var(--ink)} .pg-accesos a:hover{border-color:var(--rojo-texto)} .pg-acceso__titulo{font-size:16px;font-weight:900;letter-spacing:-.02em} .pg-acceso__sub{color:var(--muted);font-size:13px;font-weight:700} .pg-accesos a:hover .pg-acceso__sub{color:var(--rojo-osc)} .pg-acceso--plano{display:flex;flex-direction:column;gap:6px;border:1px dashed var(--line); border-radius:18px;padding:18px;background:var(--soft);color:var(--ink)} /* documento destacado */ .pg-documento{display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between; border:1px solid var(--line);border-left:4px solid var(--rojo);border-radius:var(--radius-s); padding:20px 24px} .pg-documento__titulo{margin:0;font-size:17px;font-weight:900;letter-spacing:-.02em} .pg-documento__texto{margin:4px 0 0;color:var(--muted);font-size:14px} /* La sección de tarifas se apoya en un fondo suave, como en el diseño. */ .pg-bloque.section--soft .pg-tarifas{margin-top:4px} @media (max-width:900px){ .pg-banda--tarjetas .pg-banda__item{min-height:0} } /* ===================================================== patrocinadores Dos tratamientos por nivel, como en el diseño: los principales en tarjeta grande con filete rojo y su enlace a la web; el resto —instituciones, federaciones y colaboradores— en tarjeta pequeña. El nivel se escribe en la hoja, así que uno nuevo sale con el tratamiento neutro. */ .pt-cabecera{display:flex;flex-wrap:wrap;gap:18px 24px;align-items:flex-end; justify-content:space-between;border-bottom:3px solid var(--ink);padding-bottom:18px; margin-bottom:36px} .pt-cabecera h2{margin:6px 0 0;font-size:clamp(27px,4vw,45px);line-height:1; letter-spacing:-.035em;text-transform:uppercase} .pt-cabecera__enlace{color:var(--rojo-texto);font-size:12px;font-weight:900;letter-spacing:.08em; text-transform:uppercase;white-space:nowrap;padding-bottom:4px} .pt-cabecera__enlace:hover{color:var(--rojo-osc);text-decoration:underline} .pt-grupo{margin-bottom:38px} .pt-grupo:last-child{margin-bottom:0} .pt-grupo__rotulo{display:flex;align-items:center;gap:14px;margin:0 0 18px; font-size:12px;font-weight:900;letter-spacing:.14em;text-transform:uppercase} .pt-grupo__linea{height:1px;flex:1;background:var(--line)} .pt-lista{display:grid;gap:14px} .pt-item{display:flex;flex-direction:column;gap:12px;color:inherit} .pt-item__logo{display:flex;align-items:center;justify-content:center} .pt-item__logo img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain} .pt-item__sinlogo{font-size:13px;font-weight:900;color:var(--muted);text-align:center} .pt-item__pie{display:flex;align-items:flex-end;justify-content:space-between;gap:12px} .pt-item__datos{display:flex;flex-direction:column;min-width:0} .pt-item__nombre{font-size:16px;font-weight:900;line-height:1.2;letter-spacing:-.01em} .pt-item__desc{margin-top:2px;color:var(--muted);font-size:13px} .pt-item__web{color:var(--rojo-texto);font-size:11px;font-weight:900;letter-spacing:.06em; text-transform:uppercase;white-space:nowrap} /* principales */ .pt-grupo--principal .pt-lista{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:20px} .pt-grupo--principal .pt-item{border:1px solid var(--line);border-top:5px solid var(--rojo); border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow); padding:30px 28px 22px} .pt-grupo--principal .pt-item:hover{border-color:var(--rojo-texto);box-shadow:var(--shadow-l)} .pt-grupo--principal .pt-item__logo{height:132px;margin-bottom:8px} .pt-grupo--principal .pt-item__pie{border-top:1px solid var(--line);padding-top:14px} /* colaboradores */ .pt-grupo--colaborador .pt-lista{grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr))} .pt-grupo--colaborador .pt-item{align-items:center;background:var(--soft); border-radius:var(--radius-s);padding:18px} .pt-grupo--colaborador .pt-item:hover{background:var(--surface);box-shadow:var(--shadow-l)} .pt-grupo--colaborador .pt-item__logo{height:72px;width:100%} .pt-grupo--colaborador .pt-item__pie{justify-content:center} .pt-grupo--colaborador .pt-item__datos{align-items:center;text-align:center} .pt-grupo--colaborador .pt-item__nombre{font-size:13.5px} /* barra de llamada */ .pt-cta{display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between; border:1px solid var(--line);border-left:5px solid var(--rojo);border-radius:var(--radius-s); padding:22px 26px;margin-top:34px;background:var(--surface)} .pt-cta__titulo{margin:0;font-size:18px;font-weight:900;letter-spacing:-.01em} .pt-cta__texto{margin:4px 0 0;color:var(--muted);font-size:14.5px} /* ==================================================== página de patrocinio Plantilla propia de /patrocina/: cabecera oscura con foto, barra roja del dossier, cifras, argumentos numerados, formas de colaborar sobre marino, logotipos y cierre. Cada bloque sale de una sección de la hoja y desaparece si esa fila no existe, así que el orden no depende de que estén todos. */ .pn-hero{position:relative;background:var(--navy);color:#fff;overflow:hidden} .pn-hero__foto{position:absolute;inset:0} .pn-hero__foto img{width:100%;height:100%;object-fit:cover;display:block} .pn-hero--foto::after{content:"";position:absolute;inset:0; background:linear-gradient(100deg,rgba(10,10,10,.95) 0%,rgba(10,10,10,.82) 46%,rgba(184,18,36,.62) 100%)} /* El ancho de la cabecera lo limitan los textos, no el contenedor: «.container» se centra solo, así que ponerle un máximo aquí encogía y centraba toda la caja, y la cabecera empezaba más a la derecha que el resto de la página. */ .pn-hero__inner{position:relative;z-index:1;padding:clamp(46px,6vw,84px) 0 clamp(52px,6vw,86px)} .pn-hero__inner>*{max-width:820px} .pn-hero .migas,.pn-hero .migas a{color:rgba(255,255,255,.7)} .pn-kicker{margin:18px 0 0;font-size:12px;font-weight:900;letter-spacing:.14em; text-transform:uppercase;color:#FF9FB0} .pn-titulo{margin:14px 0 0;font-size:clamp(36px,5.4vw,64px);font-weight:900;line-height:.98; letter-spacing:-.045em;text-transform:uppercase;color:#fff;text-wrap:balance} .pn-entradilla{margin:18px 0 0;max-width:62ch;color:rgba(255,255,255,.86);font-size:18px;line-height:1.55} .pn-barra{background:var(--navy);color:#fff; background-image:linear-gradient(105deg,#141414 0%,#1F1F1F 58%,#2A1116 100%)} .pn-barra__inner{display:flex;flex-wrap:wrap;gap:18px 28px;align-items:center; justify-content:space-between;padding:22px 0} .pn-barra__texto{margin:0;max-width:52ch;font-size:17px;font-weight:800;letter-spacing:-.01em;line-height:1.35} .pn-barra__acciones{display:flex;flex-wrap:wrap;gap:12px} .pn-barra .button--ghost{background:transparent;color:#fff;border-color:#fff} .pn-barra .button--ghost:hover{background:rgba(255,255,255,.12);border-color:#fff} .pn-cabeza{display:flex;flex-wrap:wrap;align-items:baseline;gap:14px;margin-bottom:26px} .pn-cabeza h2,.pn-h2{margin:0;font-size:clamp(28px,3.6vw,44px);font-weight:900;line-height:1; letter-spacing:-.035em;text-transform:uppercase} .pn-h2--blanco{color:#fff} .pn-badge{display:inline-block;border-radius:999px;background:var(--rojo-texto);color:#fff; padding:6px 14px;font-size:11px;font-weight:900;letter-spacing:.1em;text-transform:uppercase} .pn-badge--linea{background:transparent;color:var(--rojo-texto);border:1px solid currentColor} .pn-badge--claro{background:var(--rojo-texto);color:#fff} .pn-texto{margin:16px 0 0;max-width:54ch;color:var(--muted);font-size:16.5px;line-height:1.65} .pn-cifras__lista{grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:14px;margin-top:0} .pn-cifras__lista li{min-height:136px;display:flex;flex-direction:column;justify-content:center; border-top:0;border-radius:var(--radius-s);padding:22px 24px} .pn-cifras__lista li:nth-child(1){background:var(--rojo-texto)} .pn-cifras__lista li:nth-child(2){background:var(--navy)} .pn-cifras__lista li:nth-child(3){background:#1F1F1F} .pn-cifras__lista li:nth-child(-n+3) .cifras__valor, .pn-cifras__lista li:nth-child(-n+3) .cifras__rotulo{color:#fff} .pn-cifras__lista li:nth-child(-n+3) .cifras__matiz{color:#fff} .pn-cifras__lista li:nth-child(n+4){background:var(--surface);border:1px solid var(--line)} .pn-cifras__lista .cifras__valor{font-size:40px;letter-spacing:-.04em} .pn-cifras__lista .cifras__rotulo{font-size:13.5px;font-weight:900;line-height:1.3} .pn-porque__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr)); gap:clamp(28px,4vw,48px);align-items:start} .pn-razones{list-style:none;margin:0;padding:0;display:grid;gap:12px} .pn-razones li{border:1px solid var(--line);border-radius:var(--radius-s);background:var(--soft); padding:20px 22px} .pn-razon__rotulo{display:flex;gap:8px;margin:0;color:var(--rojo-texto);font-size:11.5px;font-weight:900; letter-spacing:.1em;text-transform:uppercase} .pn-razon__texto{margin:8px 0 0;color:var(--muted);font-size:15px;line-height:1.55} .pn-formas{background:var(--footer);color:#fff} .pn-formas .pn-h2{margin:14px 0 30px;max-width:20ch} .pn-opciones{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:16px} .pn-opcion{display:flex;flex-direction:column;gap:14px;border:1px solid rgba(255,255,255,.16); border-radius:var(--radius);background:rgba(255,255,255,.07);padding:28px} /* La opción de patrocinio principal pesa más que las otras dos: es la que sostiene la temporada y la que el club quiere que se lea primero. Lo dice el rojo sobre el negro de la sección, el filete de arriba y un titular un punto mayor; no hace falta inventarle una etiqueta de «recomendado». */ .pn-opcion--roja{background:var(--rojo-texto);border-color:var(--rojo-texto); border-top:4px solid #fff;box-shadow:var(--shadow-l);padding:32px 30px} .pn-opcion--roja h3{font-size:26px} .pn-opcion--roja ul{font-size:15px} .pn-opcion h3{margin:0;font-size:22px;font-weight:900;letter-spacing:-.02em;text-transform:uppercase;color:#fff} .pn-opcion p{margin:0;color:#fff;font-size:15px;line-height:1.55} .pn-opcion ul{margin:0;padding-left:18px;color:#fff;font-size:14.5px;line-height:1.85} .pn-opcion--roja p,.pn-opcion--roja ul{color:#fff} .pn-formas__nota{margin:22px 0 0;color:rgba(255,255,255,.6);font-size:14px} .pn-nivel{margin:30px 0 12px;font-size:11.5px;font-weight:900;letter-spacing:.1em; text-transform:uppercase;color:var(--muted)} .pn-fichas{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:14px} .pn-fichas--grandes{grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))} .pn-ficha{display:flex;align-items:center;justify-content:center;min-height:104px;padding:24px; border:1px solid var(--line);border-radius:var(--radius-s);background:var(--surface);color:inherit} .pn-fichas--grandes .pn-ficha{min-height:118px;padding:30px 24px;box-shadow:var(--shadow)} .pn-ficha:hover{border-color:var(--rojo-texto)} .pn-ficha img{max-height:48px;max-width:100%;width:auto;height:auto;object-fit:contain} .pn-fichas--grandes .pn-ficha img{max-height:56px} .pn-ficha__nombre{font-size:14px;font-weight:900;color:var(--muted);text-align:center} .pn-cierre{background:var(--soft)} .pn-cierre__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr)); align-items:center;gap:clamp(28px,4vw,56px);padding:clamp(44px,6vw,76px) 0} .pn-cierre__acciones{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px} .pn-cierre__datos{margin:22px 0 0;color:var(--muted);font-size:14.5px;line-height:1.7} .pn-cierre__marca{min-height:300px;border-radius:var(--radius); background:linear-gradient(135deg,var(--navy) 0%,var(--navy-2) 52%,var(--rojo-osc) 100%)} @media (max-width:760px){ .pn-barra__inner{align-items:flex-start} .pn-cierre__marca{display:none} } /* ======================================================= página de equipos Tres zonas con peso distinto: los nacionales sobre fondo claro, con los primeros equipos en tarjeta grande y oscura; la cantera sobre marino, que es lo que la separa de un vistazo; y el sénior territorial al final, en tono menor. La barra de filtros se queda pegada arriba y enseña una zona o todas. */ .eq-hero{position:relative;background:linear-gradient(105deg,#0F0F0F 0%,var(--navy) 48%,var(--rojo-osc) 100%); color:#fff;overflow:hidden} /* La cabecera va a dos columnas: los textos a la izquierda y los tres indicadores apilados a la derecha, dentro del mismo fondo oscuro. Por debajo de 900px se apilan, con las cifras debajo del texto. */ .eq-hero__inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,300px); gap:clamp(24px,4vw,56px);align-items:center; padding:clamp(40px,5vw,72px) 0 clamp(44px,5vw,72px)} .eq-hero__texto>*{max-width:60ch} .eq-hero .migas,.eq-hero .migas a{color:#fff} .eq-kicker{margin:18px 0 0;font-size:12px;font-weight:900;letter-spacing:.14em; text-transform:uppercase;color:#FF9FB0} .eq-titulo{margin:12px 0 0;font-size:clamp(40px,6vw,72px);font-weight:900;line-height:.95; letter-spacing:-.05em;text-transform:uppercase} .eq-entradilla{margin:16px 0 0;color:#fff;font-size:17.5px;line-height:1.55} .eq-cifras{display:grid;gap:12px} /* Las tres cifras van sobre fondo oscuro, no sobre el rojo de la cabecera: una caja roja sobre una pared roja no es una caja, es una mancha, y la cifra se queda sin el contraste que necesita. El negro las recorta contra el fondo y de paso sube el blanco a 8:1. */ .eq-cifra{display:flex;align-items:baseline;gap:14px;border-radius:var(--radius-s); border:1px solid rgba(255,255,255,.22);background:rgba(0,0,0,.40);color:#fff; padding:16px 20px} .eq-cifra span:first-child{font-size:34px;font-weight:900;line-height:1;letter-spacing:-.04em} .eq-cifra span+span{font-size:11.5px;font-weight:900;letter-spacing:.08em;text-transform:uppercase; color:#fff} /* Las dos primeras se distinguen por el filete, no por el color de fondo: la de los primeros equipos lleva borde rojo y la de cantera, borde blanco. */ .eq-cifra--roja{border-color:var(--rojo);border-left:3px solid var(--rojo)} .eq-cifra--navy{background:rgba(0,0,0,.52);border-color:rgba(255,255,255,.55)} @media (max-width:900px){ .eq-hero__inner{grid-template-columns:1fr} } .eq-filtros{position:sticky;top:0;z-index:20; background:color-mix(in srgb,var(--soft) 94%,transparent);backdrop-filter:blur(8px); border-bottom:1px solid var(--line)} .eq-filtros__inner{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:14px 0} .eq-filtros__rotulo{margin-right:6px;font-size:11.5px;font-weight:900;letter-spacing:.1em; text-transform:uppercase;color:var(--muted)} .eq-chip{border:1.5px solid var(--line);border-radius:999px;background:var(--surface); color:var(--muted);padding:9px 18px;font-size:12px;font-weight:900;letter-spacing:.06em; text-transform:uppercase;cursor:pointer;font-family:inherit} .eq-chip:hover{border-color:var(--rojo-texto);color:var(--ink)} .eq-chip.is-activo{background:var(--rojo-texto);border-color:var(--rojo-texto);color:#fff} .eq-cabeza{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between; gap:24px;margin-bottom:28px} .eq-rotulo{display:flex;align-items:center;gap:12px;margin:0 0 10px;font-size:12px;font-weight:900; letter-spacing:.12em;text-transform:uppercase;color:var(--rojo-texto)} .eq-rotulo span{width:34px;height:4px;background:currentColor;display:block} .eq-rotulo--oro{color:#E8B84B} .eq-h2{margin:0;font-size:clamp(30px,4.2vw,50px);font-weight:900;line-height:.95; letter-spacing:-.035em;text-transform:uppercase} .eq-h2--blanco{color:#fff} .eq-cabeza__texto{margin:0;max-width:44ch;color:var(--muted);font-size:16px;line-height:1.6} .eq-cabeza__texto--claro{color:rgba(255,255,255,.72)} .eq-primeros{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr)); gap:20px;margin-bottom:20px} /* Tarjeta clara y lisa: el logotipo del patrocinador manda en esta caja, así que el fondo es gris suave, sin marca de agua ni degradados detrás. El color del club se queda en el filete superior y en la etiqueta. */ .eq-primero{position:relative;display:flex;flex-direction:column;justify-content:space-between; gap:24px;min-height:320px;padding:30px;border-radius:var(--radius);color:var(--ink);overflow:hidden; background:var(--soft);border:1px solid var(--line);border-top:6px solid var(--rojo); box-shadow:var(--shadow)} .eq-primero:hover{transform:translateY(-6px);box-shadow:var(--shadow-l);border-color:var(--rojo-texto)} .eq-primero__marca{display:none} .eq-primero__etiquetas{position:relative;display:flex;flex-wrap:wrap;gap:10px} .eq-tag{border:1.5px solid var(--line);border-radius:999px;padding:4px 12px;color:var(--muted); font-size:11px;font-weight:900;letter-spacing:.1em;text-transform:uppercase} .eq-tag--roja{background:var(--rojo-texto);border-color:var(--rojo-texto);color:#fff} .eq-primero__pie{position:relative;display:flex;flex-direction:column} .eq-primero__patro{display:flex;align-items:flex-end;gap:14px;margin-bottom:16px} .eq-primero__patro img{max-width:150px;max-height:56px;width:auto;height:auto;object-fit:contain} .eq-primero__patro span{font-size:11.5px;line-height:1.3;max-width:14ch;color:var(--muted)} .eq-primero__nombre{font-size:clamp(27px,2.6vw,38px);font-weight:900;line-height:.98; letter-spacing:-.035em;text-transform:uppercase;margin-bottom:12px} .eq-primero__comp{font-size:16px;font-weight:700} .eq-primero__grupo{margin-top:2px;font-size:14px;color:var(--muted)} .eq-primero__mas{align-self:flex-start;margin-top:22px;border-bottom:2px solid var(--rojo); padding-bottom:4px;font-size:12px;font-weight:900;letter-spacing:.08em;text-transform:uppercase; color:var(--rojo-texto)} .eq-filas{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:20px} .eq-fila{display:flex;align-items:center;gap:20px;padding:24px;background:var(--surface); border:1px solid var(--line);border-left:6px solid var(--rojo);border-radius:18px; box-shadow:var(--shadow);color:inherit} .eq-fila:hover{transform:translateY(-4px);box-shadow:var(--shadow-l)} .eq-fila--suave{border-left-color:var(--line)} .eq-fila__codigo{flex:none;display:grid;place-items:center;width:64px;height:64px;border-radius:16px; background:var(--navy);color:#fff;font-size:16px;font-weight:900;letter-spacing:-.02em} .eq-fila--suave .eq-fila__codigo{background:var(--soft);color:var(--ink)} .eq-fila__datos{display:block;min-width:0} .eq-fila__ambito{display:block;margin-bottom:6px;font-size:11px;font-weight:900;letter-spacing:.1em; text-transform:uppercase;color:var(--rojo-texto)} .eq-fila__nombre{display:block;margin-bottom:6px;font-size:20px;font-weight:800;line-height:1.05; letter-spacing:-.02em;text-transform:uppercase} .eq-fila__comp{display:block;color:var(--muted);font-size:14.5px} .eq-cantera{background:#1A1A1A;color:#fff;padding:clamp(52px,6vw,76px) 0} .eq-categoria{margin-bottom:40px} .eq-categoria:last-of-type{margin-bottom:28px} .eq-categoria__cabeza{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-bottom:18px} .eq-categoria__nombre{font-size:22px;font-weight:900;letter-spacing:-.02em;text-transform:uppercase} .eq-categoria__edades{font-size:13.5px;color:rgba(255,255,255,.55)} .eq-categoria__linea{flex:1;min-width:40px;height:1px;background:rgba(255,255,255,.16)} .eq-categoria__cuenta{font-size:11.5px;font-weight:900;letter-spacing:.08em;text-transform:uppercase; color:#E8B84B} .eq-categoria__cabeza--claro .eq-categoria__linea{background:var(--line)} .eq-categoria__cabeza--claro .eq-categoria__cuenta{color:var(--muted)} .eq-cantera__lista{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr));gap:14px} .eq-mini{display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:16px;color:#fff; background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12)} .eq-mini:hover{background:rgba(255,255,255,.12);border-color:#E8B84B;transform:translateY(-3px)} .eq-mini__codigo{flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:12px; background:#E8B84B;color:#161616;font-size:13px;font-weight:900} .eq-mini__datos{display:block;min-width:0} .eq-mini__nombre{display:block;margin-bottom:4px;font-size:15.5px;font-weight:800;line-height:1.15; letter-spacing:-.01em} .eq-mini__comp{display:block;font-size:13px;color:rgba(255,255,255,.6)} .eq-llamada{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px; padding:28px 32px;border-radius:var(--radius);background:rgba(200,16,46,.16); border:1px solid rgba(200,16,46,.45)} .eq-llamada__titulo{margin:0 0 6px;font-size:22px;font-weight:900;letter-spacing:-.02em; text-transform:uppercase} .eq-llamada__texto{margin:0;color:rgba(255,255,255,.72);font-size:15px} .eq-llamada__acciones{display:flex;flex-wrap:wrap;gap:12px} .eq-llamada .button--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.85)} .eq-llamada .button--ghost:hover{background:rgba(255,255,255,.12)} @media (max-width:640px){ .eq-primero{min-height:0} .eq-primero__marca{font-size:110px} } /* ==================================================== ficha de equipo Cabecera roja con el nombre del equipo y, al lado, las dos cosas que se consultan: el último resultado y el próximo partido. Debajo, la barra oscura con los enlaces federativos y el cuerpo de la ficha. */ .ep-hero{background:var(--rojo);color:#fff} .ep-hero__inner{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,380px); gap:clamp(24px,4vw,48px);align-items:center;padding:clamp(32px,4vw,56px) 0} .ep-hero .migas,.ep-hero .migas a{color:#fff} .ep-kicker{margin:16px 0 0;font-size:12px;font-weight:900;letter-spacing:.12em; text-transform:uppercase;color:#fff} .ep-titulo{margin:10px 0 0;font-size:clamp(34px,5vw,58px);font-weight:900;line-height:.98; letter-spacing:-.045em;text-transform:uppercase} .ep-entradilla{margin:14px 0 0;max-width:54ch;color:#fff;font-size:17px;line-height:1.55} .ep-patro{display:flex;align-items:center;gap:14px;margin:20px 0 0} .ep-patro img{max-height:44px;max-width:160px;width:auto;height:auto;object-fit:contain; background:#fff;border-radius:10px;padding:6px} .ep-patro span{font-size:11px;font-weight:900;letter-spacing:.1em;text-transform:uppercase; color:#fff} .ep-aside{display:grid;gap:12px} .ep-ficha{background:var(--surface);color:var(--ink);border-radius:var(--radius-s); box-shadow:var(--shadow-l);padding:18px 20px;display:grid;gap:12px} .ep-ficha--navy{background:var(--navy);color:#fff;box-shadow:none} .ep-ficha__cabeza{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0; font-size:11px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)} .ep-ficha--navy .ep-ficha__cabeza{color:rgba(255,255,255,.75)} .ep-ficha__pie{margin:0;padding-top:10px;border-top:1px solid var(--line);font-size:12.5px; color:var(--muted);line-height:1.5} .ep-ficha__vacio{margin:0;color:var(--muted);font-size:14px;line-height:1.5} .ep-proximo__rival{margin:0;font-size:16px;font-weight:800;line-height:1.3} .ep-proximo__datos{margin:0;font-size:13px;line-height:1.5;color:rgba(255,255,255,.8)} .ep-proximo__donde{display:flex;align-items:center;gap:8px;margin:10px 0 0;padding-top:10px; border-top:1px solid rgba(255,255,255,.14);font-size:13.5px;font-weight:800;line-height:1.3;color:#fff} .ep-proximo__donde svg{width:16px;height:16px;flex:0 0 auto;color:rgba(255,255,255,.7)} .ep-duelo{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:12px; align-items:center} .ep-equipo{display:flex;align-items:center;gap:10px;min-width:0} .ep-equipo span{font-size:13.5px;font-weight:800;line-height:1.2} .ep-equipo--visita{justify-content:flex-end;text-align:right} /* El código corto del equipo de la ficha: se lee como una matrícula, no como un nombre, así que va en la voz de marcador —estrecha, espaciada— y en el rojo de texto para que se distinga del nombre del rival de un vistazo. */ .ep-equipo__codigo{font-family:var(--datos);font-stretch:var(--ancho-dato);letter-spacing:.08em; color:var(--rojo-texto);white-space:nowrap;cursor:help} .ep-marcador{display:flex;align-items:center;gap:8px;font-size:24px;font-weight:900; letter-spacing:-.03em;color:var(--muted)} .ep-marcador .es-gana{color:#1B7F4B} .ep-marcador__guion{color:var(--line);font-size:16px} .ep-marcador__hora{font-size:15px;font-weight:900;color:var(--muted)} .ep-estado{border-radius:999px;background:var(--ink);color:#fff;padding:4px 10px; font-size:10.5px;font-weight:900;letter-spacing:.08em;text-transform:uppercase} .ep-estado--oscuro{background:var(--ink)} .ep-barra{background:var(--rojo-osc);color:#fff} .ep-barra__inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between; gap:16px 28px;padding:16px 0;font-size:12.5px;font-weight:900;letter-spacing:.06em; text-transform:uppercase} .ep-barra__acciones{display:flex;flex-wrap:wrap;gap:10px} .ep-barra .button--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.85); padding:8px 16px;font-size:11.5px} .ep-barra .button--ghost:hover{background:rgba(255,255,255,.14)} .ep-cuerpo{display:grid;gap:clamp(40px,5vw,56px);padding:clamp(40px,5vw,56px) 0 clamp(48px,6vw,72px)} .ep-seccion{display:grid;gap:22px} .ep-cabeza{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:18px} .ep-badge{display:inline-block;border-radius:999px;background:var(--rojo-texto);color:#fff;padding:6px 14px; font-size:11px;font-weight:900;letter-spacing:.1em;text-transform:uppercase} .ep-badge--linea{background:transparent;color:var(--rojo-texto);border:1px solid currentColor} .ep-badge--claro{background:rgba(255,255,255,.16)} .ep-h2{margin:10px 0 0;font-size:clamp(26px,3.4vw,38px);font-weight:900;line-height:1; letter-spacing:-.03em;text-transform:uppercase} .ep-h3{margin:10px 0 0;font-size:24px;font-weight:900;line-height:1.05;letter-spacing:-.02em; text-transform:uppercase} .ep-mas{color:var(--rojo-texto);font-size:12px;font-weight:900;letter-spacing:.06em;text-transform:uppercase} .ep-lista{display:grid;gap:14px} .ep-partido{background:var(--surface);border:1px solid var(--line);border-left:5px solid var(--rojo); border-radius:var(--radius-s);box-shadow:var(--shadow);padding:20px 22px;display:grid;gap:14px} .ep-partido--proximo{border-left-color:var(--line)} .ep-partido__alto{display:grid;grid-template-columns:minmax(96px,auto) minmax(0,1fr) auto;gap:20px; align-items:center} .ep-partido__cuando{display:grid;gap:2px;text-transform:uppercase} .ep-partido__cuando span:first-child{font-size:15px;font-weight:900;letter-spacing:-.01em} .ep-partido__cuando span+span{font-size:12.5px;font-weight:800;letter-spacing:.06em;color:var(--muted)} .ep-partido__duelo{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:16px; align-items:center} .ep-partido .ep-equipo span{font-size:15px} .ep-partido .ep-marcador{font-size:27px} .ep-partido__etiquetas{display:flex;flex-direction:column;align-items:flex-end;gap:8px} .ep-partido__pie{margin:0;padding-top:12px;border-top:1px solid var(--line);font-size:13.5px; color:var(--muted);line-height:1.5} .ep-vacio{display:grid;gap:16px;justify-items:start;border:1px dashed var(--line); border-radius:var(--radius-s);background:var(--surface);padding:34px 26px} .ep-vacio p{margin:0;max-width:60ch;color:var(--muted);font-size:15.5px;line-height:1.6} .ep-datos{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:16px} .ep-dato{display:flex;flex-direction:column;justify-content:center;gap:8px;min-height:118px; border:1px solid var(--line);border-radius:var(--radius-s);background:var(--surface);padding:22px 24px} .ep-dato__valor{font-size:27px;font-weight:900;line-height:1;letter-spacing:-.03em} .ep-dato__rotulo{font-size:11.5px;font-weight:900;letter-spacing:.08em;text-transform:uppercase; color:var(--muted)} .ep-dato--roja{background:var(--rojo-texto);border-color:var(--rojo-texto);color:#fff} .ep-dato--oscura{background:var(--ink);border-color:var(--ink);color:#fff} .ep-dato--roja .ep-dato__rotulo,.ep-dato--oscura .ep-dato__rotulo{color:#fff} .ep-fichas{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:20px; align-items:start} /* Con una sola tarjeta —la del cuerpo técnico— no tiene sentido que ocupe todo el ancho de la página: se queda en media columna y respira igual. */ .ep-fichas--sola{grid-template-columns:minmax(0,min(560px,100%))} .ep-tarjeta{border:1px solid var(--line);border-radius:var(--radius-s);background:var(--surface); box-shadow:var(--shadow);padding:28px;display:grid;gap:18px;justify-items:start} .ep-tarjeta--navy{background:var(--navy);border-color:var(--navy);color:#fff;box-shadow:none} .ep-tarjeta__texto{margin:0;color:rgba(255,255,255,.85);font-size:15px;line-height:1.6} .ep-tarjeta__acciones{display:flex;flex-wrap:wrap;gap:10px} .ep-tarjeta--navy .button--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.85)} .ep-pares{margin:0;width:100%;display:grid} .ep-pares>div{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:16px; padding:14px 0;border-top:1px solid var(--line)} .ep-pares dt{font-size:11.5px;font-weight:900;letter-spacing:.06em;text-transform:uppercase; color:var(--muted)} .ep-pares dd{margin:0;font-size:16px;font-weight:800} .ep-nota{margin:0;color:var(--muted);font-size:13px;line-height:1.55} @media (max-width:900px){ .ep-hero__inner{grid-template-columns:1fr} } @media (max-width:700px){ .ep-partido__alto{grid-template-columns:1fr;gap:14px} .ep-partido__etiquetas{flex-direction:row;align-items:center} } /* El mapa de la liga en la ficha de equipo. La lámina ya viene diseñada —rojo sobre negro, con su cabecera y sus fichas—, así que el marco no compite: fondo negro del club, filete rojo arriba y la imagen a sangre dentro. Las esquinas recortadas son las de la pista, el mismo corte del escudo. */ .ep-mapa{background:var(--footer);border-radius:var(--radius);overflow:hidden; border-top:5px solid var(--rojo);color:#fff} .ep-mapa__cabeza{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between; gap:18px;padding:clamp(22px,3vw,30px) clamp(22px,3vw,32px) clamp(18px,2vw,22px)} .ep-mapa__meta{margin:0;font-size:11.5px;font-weight:900;letter-spacing:.1em;text-transform:uppercase; color:rgba(255,255,255,.6)} .ep-mapa__lamina{margin:0} .ep-mapa__lamina img{display:block;width:100%;height:auto} .ep-mapa__lamina a{display:block} .ep-mapa__lamina a:focus-visible{outline:3px solid var(--rojo);outline-offset:-3px} .ep-mapa__lamina figcaption{padding:14px clamp(22px,3vw,32px) clamp(20px,2.5vw,26px); font-size:12.5px;color:rgba(255,255,255,.55)} /* Panel de partidos y mapa, uno al lado del otro: a la izquierda lo que se consulta —cómo va el equipo, en dos pestañas— y a la derecha lo que se mira. Las dos cajas miden lo mismo: la altura la fija el mapa y la lista del panel se desplaza por dentro si hace falta. */ .ep-columnas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(24px,3vw,36px);align-items:stretch} .ep-columnas--sola{grid-template-columns:minmax(0,1fr)} .ep-panel{display:flex;flex-direction:column;min-height:0;overflow:hidden; border:1px solid var(--line);border-radius:var(--radius);background:var(--surface); box-shadow:var(--shadow)} .ep-panel__cabeza{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between; gap:12px 18px;border-bottom:1px solid var(--line);padding:16px 20px} .ep-panel__pestanas{display:flex;flex-wrap:wrap;gap:8px} .ep-pestana{border:0;border-radius:999px;background:var(--soft);color:var(--muted); padding:10px 20px;font-family:inherit;font-size:12.5px;font-weight:900;letter-spacing:.06em; text-transform:uppercase;cursor:pointer} .ep-pestana:hover{color:var(--ink)} .ep-pestana.is-activa{background:var(--rojo-texto);color:#fff} .ep-panel__cuerpo{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain} .ep-panel__vacio{margin:0;padding:24px 20px;color:var(--muted);font-size:14.5px;line-height:1.6} /* Dentro del panel, cada partido es una fila, no una tarjeta: van uno debajo de otro separados por una línea, sin bordes ni sombras que compitan. En media pantalla no caben dos equipos y un marcador en la misma línea —los nombres federativos son largos—, así que los equipos se apilan y el marcador se pone en columna a su derecha. Nada se solapa aunque el nombre ocupe tres líneas. */ .ep-panel .ep-partido{border:0;border-radius:0;box-shadow:none;background:transparent; border-bottom:1px solid var(--line);padding:16px 20px;gap:10px} .ep-panel .ep-partido:last-child{border-bottom:0} .ep-panel .ep-partido__pie{border-top:0;padding-top:0;font-size:12.5px} /* Donde se juega, con chincheta y rotulo propio. Es el dato que se busca en el calendario del equipo, asi que no comparte linea con la competicion. */ .ep-partido__donde{display:flex;align-items:center;gap:8px;margin:0;flex-wrap:wrap; font-size:13px;line-height:1.35} .ep-partido__donde svg{width:16px;height:16px;flex:0 0 auto;color:var(--rojo-texto)} .ep-partido__donde-rotulo{color:var(--muted);font-size:10.5px;font-weight:900; letter-spacing:.1em;text-transform:uppercase} .ep-partido__donde-sitio{color:var(--ink);font-weight:800;letter-spacing:-.005em} .ep-panel .ep-partido__donde{font-size:12.5px} .ep-panel .ep-partido__donde svg{width:15px;height:15px} .ep-panel .ep-partido__alto{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px} .ep-panel .ep-partido__cuando{flex:0 0 auto;min-width:72px} .ep-panel .ep-partido__cuando span:first-child{font-size:13.5px} .ep-panel .ep-partido__cuando span+span{font-size:12px} .ep-panel .ep-partido__duelo{flex:1 1 220px;display:grid; grid-template-columns:minmax(0,1fr) auto;gap:8px 14px;align-items:center} .ep-panel .ep-partido__duelo .ep-equipo{grid-column:1;justify-content:flex-start;text-align:left} .ep-panel .ep-partido__duelo .ep-equipo--visita{flex-direction:row-reverse;justify-content:flex-end} .ep-panel .ep-equipo span{font-size:13.5px;line-height:1.25} .ep-panel .ep-marcador{grid-column:2;grid-row:1 / span 2;flex-direction:column;gap:2px; font-size:21px;line-height:1.05;text-align:right} .ep-panel .ep-marcador__guion{display:none} .ep-panel .ep-marcador__hora{font-size:14px} .ep-panel .ep-partido__etiquetas{flex:0 0 auto;flex-direction:row;align-items:center;gap:8px} .ep-panel .ep-estado{font-size:10px;padding:4px 9px} .ep-columnas .ep-mapa{align-self:stretch;display:flex;flex-direction:column} .ep-columnas .ep-mapa__lamina{flex:1;display:flex;flex-direction:column;justify-content:center} @media (max-width:980px){ .ep-columnas{grid-template-columns:minmax(0,1fr)} .ep-panel{min-height:0} .ep-panel__cuerpo{max-height:520px} } /* Suscripción al calendario del equipo. Va dentro del bloque de calendario, entre el titular y la lista: es una acción sobre lo que se está mirando, no una llamada suelta al final de la página. */ .ep-suscribir{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 20px; border-top:1px solid var(--line);background:var(--soft);padding:18px 20px} .ep-suscribir__texto{margin:0;display:grid;gap:4px;max-width:52ch;color:var(--muted);font-size:14.5px; line-height:1.5} .ep-suscribir__titulo{font-size:16px;font-weight:900;letter-spacing:-.01em;color:var(--ink); text-transform:uppercase} .ep-suscribir__acciones{display:flex;flex-wrap:wrap;gap:10px} /* Franja de atención al público, pegada al carrusel de la portada. Va en el rojo del club: el carrusel termina en oscuro y esta banda lo corta, que es justo lo que tiene que hacer un dato de servicio —teléfono, horario y dónde— para que no se lea como parte del carrusel. El teléfono es un enlace: desde el móvil se llama sin salir de la portada. */ /* La franja de atención va en oscuro a propósito: viene justo debajo del carrusel de destacados, y dos rojos seguidos se funden en uno solo. El negro la separa y hace de suelo de la portada. */ .at-franja{background:var(--navy);color:#fff; background-image:linear-gradient(105deg,#141414 0%,#1F1F1F 58%,#2A1116 100%)} /* Dos columnas de verdad: el rotulo y el texto a la izquierda, los tres datos a su derecha y en la misma fila. En flex, el bloque de texto crecia hasta ocupar la linea entera y empujaba los datos abajo; con rejilla, la columna de datos toma el ancho que necesita y la de texto se queda con el resto. */ .at-franja__inner{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center; gap:20px clamp(24px,4vw,48px);padding:clamp(20px,2.4vw,28px) 0} .at-franja__texto{min-width:0} .at-franja__kicker{margin:0;font-size:11px;font-weight:900;letter-spacing:.12em;color:#FF8894; text-transform:uppercase;color:#fff} .at-franja__titulo{margin:6px 0 0;font-size:clamp(20px,2.2vw,26px);font-weight:900;line-height:1.1; letter-spacing:-.02em;text-transform:uppercase} .at-franja__entrada{margin:6px 0 0;max-width:52ch;color:#fff;font-size:14.5px; line-height:1.5} .at-franja__datos{margin:0;display:flex;flex-wrap:wrap;gap:12px clamp(20px,3vw,36px)} .at-franja__datos>div{padding-left:clamp(20px,3vw,36px);border-left:1px solid rgba(255,255,255,.22)} .at-franja__datos>div:first-child{padding-left:0;border-left:0} .at-franja__datos dt{font-size:10.5px;font-weight:900;letter-spacing:.1em;text-transform:uppercase; color:#fff} .at-franja__datos dd{margin:4px 0 0;font-size:18px;font-weight:800;letter-spacing:-.01em} .at-franja__datos a{color:#fff;text-decoration:underline;text-underline-offset:3px} .at-franja__datos a:hover{color:#fff} @media (max-width:1080px){ .at-franja__inner{grid-template-columns:1fr} .at-franja__datos>div{padding-left:0;border-left:0} .at-franja__datos{gap:14px clamp(20px,5vw,36px)} } /* ========================================================================== Pagina del club, version compacta. Cabecera roja, cifras montadas sobre su borde, ideario en tres tarjetas, primeros equipos sobre fondo gris y caja roja de atencion al publico. ========================================================================== */ .cl-hero{background:var(--rojo);color:#fff;padding:clamp(44px,7vw,88px) 0 clamp(72px,9vw,112px)} .cl-hero__kicker{margin:0 0 14px;font-size:12px;font-weight:900;letter-spacing:.12em; text-transform:uppercase;color:#fff} .cl-hero__titulo{margin:0 0 20px;max-width:18ch;font-size:clamp(40px,6.5vw,80px);font-weight:900; line-height:.92;letter-spacing:-.04em;text-transform:uppercase} .cl-hero__texto{margin:0;max-width:56ch;font-size:clamp(16px,1.7vw,19.5px);line-height:1.55; color:#fff;text-wrap:pretty} .cl-cifras{position:relative;z-index:2;margin-top:clamp(-48px,-6vw,-36px)} .cl-cifras__rejilla{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));gap:14px} .cl-cifra{display:flex;flex-direction:column;gap:6px;padding:clamp(18px,2.4vw,26px); border:1px solid var(--line);border-radius:var(--radius-s);background:var(--surface);box-shadow:var(--shadow)} .cl-cifra--oscura{background:var(--navy);border-color:var(--navy);color:#fff} .cl-cifra__valor{font-size:clamp(28px,3.4vw,42px);font-weight:900;line-height:1;letter-spacing:-.03em;color:var(--rojo-texto)} .cl-cifra--oscura .cl-cifra__valor{color:#fff} .cl-cifra__rotulo{font-size:11.5px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)} .cl-cifra--oscura .cl-cifra__rotulo{color:rgba(255,255,255,.72)} .cl-badge{display:inline-block;font-size:11px;font-weight:900;letter-spacing:.1em;text-transform:uppercase; padding:7px 14px;border-radius:999px} .cl-badge--linea{border:1px solid var(--line);color:var(--muted)} .cl-badge--relleno{background:var(--rojo-texto);color:#fff} .cl-h2{margin:14px 0 0;font-size:clamp(27px,3.2vw,40px);font-weight:900;line-height:1.02; letter-spacing:-.03em;text-transform:uppercase} .cl-entrada{margin:12px 0 26px;max-width:60ch;font-size:16.5px;line-height:1.6;color:var(--muted)} .cl-prosa{color:var(--muted);font-size:16.5px;line-height:1.65} .cl-prosa p{margin:0} .cl-prosa p+p{margin-top:14px} .cl-prosa--ancha{margin-top:18px;max-width:78ch} .cl-acciones{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px} .cl-dos__rejilla{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr); gap:clamp(24px,5vw,64px);align-items:start} .cl-dos__cuerpo{display:grid;gap:16px} .cl-ideario__rejilla{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:14px} .cl-tarjeta{display:flex;flex-direction:column;gap:10px;padding:clamp(22px,3vw,30px); border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)} .cl-tarjeta--oscura{background:var(--navy);border-color:var(--navy);color:#fff;gap:14px} .cl-tarjeta__rotulo{margin:0;font-size:11px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:var(--rojo-texto)} .cl-tarjeta--oscura .cl-tarjeta__rotulo{color:#E8B84B} .cl-tarjeta__texto{margin:0;font-size:15.5px;line-height:1.6;color:var(--muted);text-wrap:pretty} .cl-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px} .cl-chips li{font-size:11.5px;font-weight:900;letter-spacing:.06em;text-transform:uppercase; padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.12)} .cl-equipos{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:14px} .cl-equipo{padding:clamp(22px,3vw,30px);border:1px solid var(--line);border-radius:var(--radius); background:var(--surface);box-shadow:var(--shadow)} .cl-equipo__quien{margin:0 0 8px;font-size:11.5px;font-weight:900;letter-spacing:.1em; text-transform:uppercase;color:var(--muted)} .cl-equipo__donde{margin:0 0 12px;font-size:clamp(20px,2.2vw,25px);font-weight:900; line-height:1.1;letter-spacing:-.02em;color:var(--rojo-texto)} .cl-equipo__nota{margin:0;font-size:15px;line-height:1.55;color:var(--muted)} .cl-filas{list-style:none;margin:0;padding:0;display:grid;gap:1px;background:var(--line); border-radius:var(--radius);overflow:hidden} .cl-filas li{display:grid;gap:4px;background:var(--surface);padding:20px clamp(18px,3vw,28px)} .cl-filas__titulo{font-size:16.5px;font-weight:900;letter-spacing:-.01em} .cl-filas__texto{font-size:15px;line-height:1.55;color:var(--muted)} .cl-atencion{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); gap:clamp(20px,3vw,40px);align-items:center;padding:clamp(26px,4vw,44px); border-radius:var(--radius);background:var(--rojo);color:#fff} .cl-atencion__kicker{margin:0 0 10px;font-size:11px;font-weight:900;letter-spacing:.1em; text-transform:uppercase;color:#fff} .cl-atencion__titulo{margin:0 0 10px;font-size:clamp(24px,2.8vw,34px);font-weight:900; line-height:1.05;letter-spacing:-.03em;text-transform:uppercase} .cl-atencion__texto{margin:0;max-width:46ch;font-size:16px;line-height:1.55;color:#fff} .cl-atencion__datos{margin:0;display:grid;gap:14px} .cl-atencion__datos dt{font-size:10.5px;font-weight:900;letter-spacing:.1em;text-transform:uppercase; color:#fff} .cl-atencion__datos dd{margin:4px 0 0;font-size:18px;font-weight:800;letter-spacing:-.01em} .cl-atencion__datos a{color:#fff;text-decoration:underline;text-underline-offset:3px} .cl-atencion__datos a:hover{color:#fff} @media (max-width:900px){ .cl-dos__rejilla{grid-template-columns:1fr} } /* ========================================================================== Hazte socio. Las cuotas no son una tabla de precios: son carnes de abonado, con su banda de temporada arriba y el troquel abajo. Van montadas sobre el borde de la cabecera roja, que es lo primero que se ve al entrar. ========================================================================== */ .sc-hero{background:var(--rojo);color:#fff;padding:clamp(44px,7vw,84px) 0 clamp(84px,10vw,124px)} .sc-hero__kicker{margin:0 0 14px;font-size:12px;font-weight:900;letter-spacing:.14em; text-transform:uppercase;color:#fff} .sc-hero__titulo{margin:0 0 20px;max-width:16ch;font-size:clamp(40px,6.5vw,76px);font-weight:900; line-height:.92;letter-spacing:-.04em;text-transform:uppercase} .sc-hero__texto{margin:0;max-width:52ch;font-size:clamp(16px,1.7vw,19.5px);line-height:1.55; color:#fff;text-wrap:pretty} .sc-carnes{position:relative;z-index:2;margin-top:clamp(-72px,-8vw,-56px)} .sc-carnes__rejilla{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:16px} .sc-carne{position:relative;display:flex;flex-direction:column;overflow:hidden; border:1px solid var(--line);border-radius:var(--radius-s);background:var(--surface); box-shadow:var(--shadow-l)} .sc-carne__banda{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0; padding:11px 18px;background:var(--navy);color:#fff; font-size:10.5px;font-weight:900;letter-spacing:.14em;text-transform:uppercase} .sc-carne--destacado .sc-carne__banda{background:var(--rojo-osc)} .sc-carne__cuerpo{display:flex;flex-direction:column;gap:10px;padding:clamp(20px,2.6vw,28px) clamp(18px,2.4vw,26px) 30px} .sc-carne__quien{margin:0;font-size:11.5px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)} .sc-carne__importe{margin:0;display:flex;align-items:baseline;gap:9px;flex-wrap:wrap; font-size:clamp(28px,3.4vw,40px);font-weight:900;line-height:1;letter-spacing:-.03em;color:var(--rojo-texto)} .sc-carne__importe span{font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)} .sc-carne__texto{margin:0;font-size:15px;line-height:1.55;color:var(--muted);text-wrap:pretty} .sc-carne__ventajas{list-style:none;margin:4px 0 0;padding:0;display:grid;gap:8px} .sc-carne__ventajas li{position:relative;padding-left:18px;font-size:14.5px;line-height:1.45;color:var(--ink)} .sc-carne__ventajas li::before{content:"";position:absolute;left:0;top:7px;width:8px;height:8px; border-radius:999px;background:var(--rojo)} .sc-carne__nota{margin:0;font-size:13px;line-height:1.5;color:var(--muted)} /* El troquel: la muesca de un carne de verdad, dibujada con el propio fondo. */ .sc-carne__troquel{position:absolute;left:0;right:0;bottom:-7px;height:14px; background:radial-gradient(circle at 7px 7px,var(--ground) 6.5px,transparent 7px); background-size:18px 14px;background-repeat:repeat-x} .sc-ventajas__rejilla{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr); gap:clamp(24px,5vw,64px);align-items:start} .sc-lista{list-style:none;margin:0;padding:0;display:grid;gap:1px;background:var(--line); border-radius:var(--radius);overflow:hidden} .sc-lista li{display:flex;gap:16px;align-items:baseline;background:var(--surface);padding:20px clamp(18px,3vw,28px)} .sc-lista__num{flex:0 0 auto;font-size:13px;font-weight:900;letter-spacing:.04em;color:var(--rojo-texto)} .sc-lista__cuerpo{display:grid;gap:4px;min-width:0} .sc-lista__titulo{font-size:16.5px;font-weight:900;letter-spacing:-.01em} .sc-lista__texto{font-size:15px;line-height:1.55;color:var(--muted);text-wrap:pretty} .sc-pasos{list-style:none;margin:26px 0 0;padding:0; display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:14px;counter-reset:none} .sc-paso{display:grid;gap:8px;align-content:start;padding:clamp(22px,3vw,28px); border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)} .sc-paso__num{display:grid;place-items:center;width:34px;height:34px;border-radius:999px; background:var(--rojo);color:#fff;font-size:14px;font-weight:900} .sc-paso__titulo{font-size:17px;font-weight:900;letter-spacing:-.015em} .sc-paso__texto{font-size:15px;line-height:1.55;color:var(--muted);text-wrap:pretty} .sc-asamblea{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr); gap:clamp(20px,4vw,48px);align-items:center;padding:clamp(24px,3.4vw,38px); border:1px solid var(--line);border-left:4px solid var(--rojo);border-radius:var(--radius);background:var(--soft)} .sc-asamblea__kicker{margin:0 0 8px;font-size:11px;font-weight:900;letter-spacing:.1em; text-transform:uppercase;color:var(--rojo-texto)} .sc-asamblea__titulo{margin:0;font-size:clamp(21px,2.4vw,29px);font-weight:900;line-height:1.08;letter-spacing:-.025em} .sc-asamblea__texto{margin:0;font-size:16px;line-height:1.6;color:var(--muted);text-wrap:pretty} .sc-cierre{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); gap:clamp(20px,3vw,40px);align-items:center;padding:clamp(26px,4vw,44px); border-radius:var(--radius);background:var(--rojo);color:#fff} .sc-cierre__kicker{margin:0 0 10px;font-size:11px;font-weight:900;letter-spacing:.1em; text-transform:uppercase;color:#fff} .sc-cierre__titulo{margin:0 0 10px;font-size:clamp(24px,2.8vw,34px);font-weight:900; line-height:1.05;letter-spacing:-.03em;text-transform:uppercase} .sc-cierre__texto{margin:0;max-width:48ch;font-size:16px;line-height:1.55;color:#fff} .sc-cierre__acciones{display:flex;flex-wrap:wrap;gap:12px} @media (max-width:900px){ .sc-ventajas__rejilla,.sc-asamblea{grid-template-columns:1fr} } /* ========================================================================== Salud y rendimiento. Lo primero es la franja de la sala: dice si hay fisioterapeuta ahora mismo. Debajo, las dos vias —jugadores y socios— una al lado de la otra con su precio, el protocolo numerado, las tecnicas y las fichas del equipo, que se leen como credenciales: el numero de colegiado es lo que las verifica. ========================================================================== */ .sl-hero{background:var(--navy);color:#fff;padding:clamp(44px,7vw,80px) 0 clamp(72px,9vw,104px)} .sl-hero__kicker{margin:0 0 14px;font-size:12px;font-weight:900;letter-spacing:.14em; text-transform:uppercase;color:rgba(255,255,255,.62)} .sl-hero__titulo{margin:0 0 20px;max-width:17ch;font-size:clamp(40px,6.5vw,76px);font-weight:900; line-height:.92;letter-spacing:-.04em;text-transform:uppercase} .sl-hero__texto{margin:0;max-width:56ch;font-size:clamp(16px,1.7vw,19.5px);line-height:1.55; color:rgba(255,255,255,.82);text-wrap:pretty} .sl-sala-zona{position:relative;z-index:2;margin-top:clamp(-56px,-6.5vw,-44px)} /* Cuatro columnas de verdad: el estado y los tres datos. Antes la columna del estado se quedaba con el ancho que le pidiera su frase y los datos se apañaban con lo que sobrara, así que «Temporada» caía a una segunda línea y dejaba medio panel vacío a la derecha. Ahora el estado tiene un ancho acotado y los tres datos se reparten el resto a partes iguales. */ .sl-sala{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.15fr); gap:18px clamp(24px,3.5vw,40px);align-items:center; padding:clamp(20px,2.6vw,26px) clamp(20px,3vw,30px); border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow-l)} .sl-sala__estado{display:flex;align-items:center;gap:11px;margin:0; font-size:15.5px;font-weight:900;letter-spacing:-.015em;line-height:1.3} .sl-sala__punto{width:11px;height:11px;flex:0 0 auto;border-radius:999px;background:var(--muted)} .sl-sala.es-abierta .sl-sala__punto{background:#1B7F4B;box-shadow:0 0 0 4px rgba(27,127,75,.16)} .sl-sala.es-cerrada .sl-sala__punto{background:var(--muted)} .sl-sala__datos{margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px clamp(18px,2.2vw,28px);align-items:start} .sl-sala__datos>div{padding-left:clamp(18px,2.2vw,28px);border-left:1px solid var(--line);min-width:0} .sl-sala__datos>div:first-child{padding-left:0;border-left:0} .sl-sala__datos dd{text-wrap:pretty} .sl-sala__datos dt{font-size:10.5px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)} .sl-sala__datos dd{margin:4px 0 0;font-size:15px;font-weight:800;letter-spacing:-.005em} .sl-puertas{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:16px} .sl-puerta{display:flex;flex-direction:column;gap:12px;padding:clamp(24px,3.4vw,36px); border:1px solid var(--line);border-top:4px solid var(--rojo);border-radius:var(--radius); background:var(--surface);box-shadow:var(--shadow)} .sl-puerta--socios{border-top-color:var(--navy)} .sl-puerta__kicker{margin:0;font-size:11px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:var(--rojo-texto)} .sl-puerta--socios .sl-puerta__kicker{color:var(--muted)} .sl-puerta__titulo{margin:0;font-size:clamp(22px,2.4vw,29px);font-weight:900;line-height:1.05;letter-spacing:-.03em} .sl-puerta__texto{margin:0;font-size:15.5px;line-height:1.6;color:var(--muted);text-wrap:pretty} .sl-tarifas{margin:6px 0 0;display:grid;gap:0} .sl-tarifas>div{display:flex;align-items:baseline;justify-content:space-between;gap:16px; padding:12px 0;border-top:1px dashed var(--line)} .sl-tarifas dt{font-size:14.5px;font-weight:700;color:var(--muted)} .sl-tarifas dd{margin:0;font-size:18px;font-weight:900;letter-spacing:-.02em;text-align:right} /* El protocolo se lee como un recorrido: los pasos en fila, unidos por una flecha, y al final la bifurcación con el protocolo de cada programa. La flecha es un pseudoelemento, así que no la lee el lector de pantalla: lo que se anuncia es una lista ordenada, que ya dice el orden. El hueco entre tarjetas deja sitio a la flecha; por eso la separación es mayor que en otras rejillas de la página. */ .sl-pasos{list-style:none;margin:26px 0 0;padding:0; display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:34px} .sl-paso{position:relative;display:grid;gap:8px;align-content:start;padding:clamp(22px,3vw,28px); border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)} .sl-paso:not(:last-child)::after{content:"";position:absolute;right:-24px;top:50%; width:11px;height:11px;border-top:2px solid var(--rojo);border-right:2px solid var(--rojo); transform:translateY(-50%) rotate(45deg)} .sl-paso__num{font-size:13px;font-weight:900;letter-spacing:.06em;color:var(--rojo-texto)} .sl-paso__titulo{font-size:17px;font-weight:900;letter-spacing:-.015em} .sl-paso__texto{font-size:15px;line-height:1.55;color:var(--muted);text-wrap:pretty} .sl-ramas{position:relative;margin-top:34px;display:grid;gap:14px; grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))} .sl-ramas::before{content:"";position:absolute;left:50%;top:-26px;width:1px;height:18px;background:var(--line)} .sl-rama{display:grid;gap:10px;align-content:start;padding:clamp(20px,2.6vw,26px); border:1px solid var(--line);border-top:4px solid var(--rojo);border-radius:var(--radius);background:var(--surface)} .sl-rama--b{border-top-color:var(--navy)} .sl-rama__etiqueta{font-size:11px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:var(--rojo-texto)} .sl-rama--b .sl-rama__etiqueta{color:var(--muted)} .sl-rama__enlace{display:inline-flex;align-items:center;gap:10px;font-size:16.5px;font-weight:800; letter-spacing:-.01em;color:var(--ink);text-decoration:underline;text-underline-offset:3px} .sl-rama__tipo{font-size:10.5px;font-weight:900;letter-spacing:.08em;padding:3px 8px;border-radius:999px; background:var(--rojo);color:#fff;text-decoration:none} .sl-rama__pendiente{font-size:14.5px;font-weight:800;color:var(--rojo-texto)} @media (max-width:760px){ .sl-paso:not(:last-child)::after{right:auto;left:50%;top:auto;bottom:-24px; transform:translateX(-50%) rotate(135deg)} } .sl-tecnicas{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr); gap:clamp(24px,5vw,56px);align-items:start} .sl-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:9px} .sl-chips li{font-size:12.5px;font-weight:800;letter-spacing:.01em;padding:9px 15px; border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink)} .sl-fichas{margin-top:26px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:14px} .sl-ficha{display:flex;flex-direction:column;gap:8px;padding:clamp(22px,3vw,28px); border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)} .sl-ficha__nombre{margin:0;font-size:19px;font-weight:900;line-height:1.15;letter-spacing:-.025em} .sl-ficha__puesto{margin:0;font-size:11px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:var(--rojo-texto)} .sl-ficha__formacion{list-style:none;margin:2px 0 0;padding:0;display:grid;gap:6px} .sl-ficha__formacion li{position:relative;padding-left:15px;font-size:14.5px;line-height:1.5;color:var(--muted)} .sl-ficha__formacion li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:1px;background:var(--line)} .sl-ficha__colegiado{margin:auto 0 0;padding-top:12px;border-top:1px solid var(--line); font-size:12px;font-weight:800;letter-spacing:.04em;color:var(--muted)} .sl-cierre{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); gap:clamp(20px,3vw,40px);align-items:center;padding:clamp(26px,4vw,44px); border-radius:var(--radius);background:var(--rojo);color:#fff} .sl-cierre__kicker{margin:0 0 10px;font-size:11px;font-weight:900;letter-spacing:.1em; text-transform:uppercase;color:#fff} .sl-cierre__titulo{margin:0 0 10px;font-size:clamp(24px,2.8vw,34px);font-weight:900; line-height:1.05;letter-spacing:-.03em;text-transform:uppercase} .sl-cierre__texto{margin:0;max-width:48ch;font-size:16px;line-height:1.55;color:#fff} .sl-cierre__acciones{display:flex;flex-wrap:wrap;gap:12px} @media (max-width:1040px){ .sl-sala{grid-template-columns:1fr} .sl-sala__estado{padding-bottom:16px;border-bottom:1px solid var(--line)} } @media (max-width:900px){ .sl-tecnicas{grid-template-columns:1fr} } @media (max-width:620px){ .sl-sala__datos{grid-template-columns:1fr;gap:12px} .sl-sala__datos>div{padding-left:0;border-left:0} } /* ========================================================================== Voz de marcador. Una familia, tres anchuras. Los titulares van estrechados al 72 % y en negra, como el rótulo de un marcador; las cifras y los rótulos técnicos, al 82 %, que es donde un resultado se lee de un golpe sin parecer comprimido; y el texto corrido, a anchura normal, porque un párrafo estrecho se lee mal. Este bloque va al final a propósito: es el único sitio donde se decide qué se estrecha, así que cambiar de opinión es editar una lista, no repasar ochenta reglas. ========================================================================== */ h1,h2,h3,h4, .cl-hero__titulo,.sc-hero__titulo,.sl-hero__titulo, .at-franja__titulo,.cl-atencion__titulo,.sc-cierre__titulo,.sl-cierre__titulo, .sl-puerta__titulo,.cl-equipo__donde, .pg-h2,.cl-h2,.pg-tarjeta__titulo,.sl-paso__titulo,.sc-paso__titulo, .sl-ficha__nombre,.cl-filas__titulo,.sc-lista__titulo, .eq-primero__nombre,.slide h2,.slide h1{ font-family:var(--display); font-stretch:var(--ancho-display); font-weight:800; letter-spacing:-.01em; } /* Las mayúsculas de una condensada ya vienen apretadas de fábrica: cerrarlas más las pega unas a otras. */ .cl-hero__titulo,.sc-hero__titulo,.sl-hero__titulo, .at-franja__titulo,.cl-atencion__titulo,.sc-cierre__titulo,.sl-cierre__titulo, .pg-h2,.cl-h2{letter-spacing:.005em} /* El dato: marcadores, horas, dorsales, importes y números de colegiado. Algo más anchos que un titular y en cifras tabulares, que es lo que los alinea en columna cuando hay uno debajo de otro. */ .tabnum,.marcador,.resultado__goles, .sc-carne__importe,.sl-tarifas dd,.cl-cifra__valor,.pg-banda__valor, .ep-marcador,.match-mini__cuando b,.sl-ficha__colegiado,.sc-carne__banda{ font-family:var(--datos); font-stretch:var(--ancho-dato); font-variant-numeric:tabular-nums lining-nums; letter-spacing:0; } /* Rótulos técnicos: los antetítulos, las etiquetas de caja y los códigos de equipo son señalética, no titulares. Estrechados y con el interletrado abierto, que es como se leen en un panel. */ .kicker,.cl-badge,.jr-dia__cabecera,.section-head--sub h3,.ep-ficha__cabeza, .eq-mini__codigo,.cl-tarjeta__rotulo,.pg-curso__rotulo,.sl-ficha__puesto, .sl-sala__datos dt,.at-franja__datos dt,.cl-atencion__datos dt{ font-family:var(--datos); font-stretch:var(--ancho-dato); letter-spacing:.1em; font-weight:800; } /* El texto corrido se queda a anchura normal: un párrafo estrecho se lee peor, y aquí lo que manda es leerlo. */ body,p,li,dd,input,select,textarea,button{font-stretch:100%} body{font-size:16px} /* ========================================================================== Fondos rojos con la textura del cartel. Un solo sitio para todas las superficies que van en rojo: si mañana cambia la mezcla, se cambia el token «--textura-roja» y se mueve todo a la vez. Se declara el color aparte del degradado porque los degradados llevan transparencias: el color es lo que hay debajo. ========================================================================== */ .sl-cierre,.cl-atencion,.sc-cierre, .pg-banda,.pg-aside, .banda-patrocinio{ background-color:var(--rojo); background-image:var(--textura-roja); } /* La banda de patrocinio lleva el fondo del carrusel de destacados: es la otra pieza grande de la portada y el degradado en diagonal que traía la hacía parecer de otra web. */ .banda-patrocinio{ background-image:var(--cabecera); background-size:cover; background-position:50% 42%; background-repeat:no-repeat; } /* ========================================================================== Cabeceras de página. Todas las cabeceras del tema comparten fondo: el del cartel del club. Antes cada sección traía el suyo —unas en rojo plano, otras en negro, la de equipos con un degradado propio— y la web parecía cinco webs. Aquí se igualan; si mañana cambia el fondo, se cambia el token «--cabecera». Los textos van en blanco sólido porque sobre este rojo cualquier transparencia baja del 4,5:1 que pide la norma. ========================================================================== */ .page-intro,.pg-hero,.cl-hero,.sc-hero,.ep-hero,.eq-hero,.pn-hero,.sl-hero, .pg-hero--rojo{ background-color:var(--rojo); background-image:var(--cabecera); background-size:cover; background-position:50% 42%; background-repeat:no-repeat; color:#fff; } /* El dibujo de pista que llevaba encima el hero de programas sobraba sobre la textura: dos tramas superpuestas ensucian el titular. */ .pg-hero__pista{display:none} /* Antetítulos, migas, entradillas y matices: blanco sólido en todas. Los rosas de acento que llevaban algunas cabeceras se quedaban en 2,1:1 sobre este fondo, muy por debajo del mínimo. */ .page-intro .migas,.page-intro .migas a, .pg-hero .migas,.pg-hero .migas a, .cl-hero .migas,.cl-hero .migas a, .sc-hero .migas,.sc-hero .migas a, .ep-hero .migas,.ep-hero .migas a, .eq-hero .migas,.eq-hero .migas a, .pn-hero .migas,.pn-hero .migas a, .sl-hero .migas,.sl-hero .migas a, .pg-kicker,.pg-kicker__raya,.pn-kicker,.sl-hero__kicker,.cl-hero__kicker, .sc-hero__kicker,.ep-kicker,.eq-rotulo, .pg-entradilla,.pn-entradilla,.sl-hero__texto,.cl-hero__texto, .sc-hero__texto,.ep-entradilla,.eq-entradilla, .pg-hero__valor,.pg-hero__rotulo,.pg-hero__matiz{ color:#fff; } .pg-kicker__raya{background:rgba(255,255,255,.55)} /* ========================================================================== El signo del resultado. Un balón con cara junto al marcador, para saber cómo le fue al Sanse sin leer las dos cifras y compararlas. Verde la victoria, rojo la derrota, gris el empate. El verde y el rojo son justo el par que no distingue la forma más común de daltonismo, así que el significado sigue estando en la curva de la boca —arriba, recta, abajo—: quien no vea el color lo lee en la forma, y el rótulo oculto lo dice con todas las letras. Sin animación: es un dato, no un aplauso. ========================================================================== */ .signo{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto; width:20px;height:20px;vertical-align:middle} .signo svg{display:block;width:20px;height:20px} .signo--victoria{color:var(--verde)} .signo--empate{color:var(--gris-signo)} .signo--derrota{color:var(--rojo-texto)} /* En cada sitio el signo se alinea con su marcador: en la fila de portada va pegado a las cifras, en la jornada a su lado y en la ficha de equipo debajo, que es donde hay hueco sin romper la rejilla de tres columnas. */ .result .score{display:flex;align-items:center;justify-content:center;gap:9px;white-space:nowrap} .result .score>span{white-space:nowrap} /* El marcador y su signo van juntos en una sola celda. Puestos como hermanos sueltos, el signo ocupaba una columna de la rejilla, empujaba el escudo del visitante al hueco siguiente y dejaba su nombre partido en la línea de abajo. */ .jr-centro{display:flex;align-items:center;justify-content:center;gap:7px;min-width:0} .marcador .signo{margin-left:8px} .ep-marcador{flex-wrap:wrap;justify-content:center} .ep-marcador .signo{flex:0 0 100%;margin-top:2px} @media (max-width:640px){ .result .score{gap:7px} .signo,.signo svg{width:18px;height:18px} } /* ========================================================================== Organigrama. La estructura se lee en la planta, no en los tamaños: arriba la presidencia con la junta a su derecha, y colgando de ella las áreas. Todas las fichas son la misma pieza —retrato 4:5, cargo y nombre— porque en un club de voluntarios hacer la presidencia el doble de grande que la tesorería dice algo que no es cierto. Quien encabeza un área se distingue por un filete rojo y un rótulo, no por medir más. ========================================================================== */ .og__inner{display:flex;flex-direction:column;align-items:center} .og__intro{max-width:64ch;margin-bottom:26px;text-align:center} /* Presidencia a la izquierda, junta a la derecha. La primera columna mide lo que una ficha, así que las dos filas de tarjetas arrancan a la misma altura y con el mismo ancho de tarjeta. */ .og-tronco{width:100%;display:grid;grid-template-columns:minmax(0,200px) minmax(0,1fr); gap:clamp(20px,3vw,34px);align-items:start} .og-bloque{display:flex;flex-direction:column;gap:14px;min-width:0} .og-bloque__titulo{margin:0;font-family:var(--display);font-stretch:var(--ancho-display); font-weight:900;font-size:clamp(17px,2vw,21px);line-height:1.1;letter-spacing:.01em; text-transform:uppercase;padding-bottom:9px;border-bottom:3px solid var(--rojo)} .og-bloque__nota{margin:0;color:var(--muted);font-size:13.5px;line-height:1.55;text-wrap:pretty} /* Una sola rejilla para todo. Las columnas se calculan solas y las filas miden lo mismo, así que ninguna ficha se estira por llevar un cargo más largo. */ .og-rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr)); grid-auto-rows:1fr;gap:16px} .og-bloque--presidencia .og-rejilla{grid-template-columns:minmax(0,1fr)} .og-tallo{display:block;width:3px;height:clamp(28px,4vw,44px);background:var(--rojo); margin:clamp(24px,4vw,38px) 0;flex:none} .og-areas{width:100%;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr)); gap:clamp(24px,4vw,40px);align-items:start} /* La ficha: retrato arriba, cargo y nombre debajo. Siempre igual. */ .og-ficha{display:flex;flex-direction:column;height:100%;overflow:hidden; border:1px solid var(--line);border-radius:var(--radius-s);background:var(--surface); box-shadow:var(--shadow)} .og-ficha--responsable{border-top:3px solid var(--rojo)} .og-foto{display:block;width:100%;aspect-ratio:4/5;overflow:hidden;background:var(--soft); position:relative;flex:none} .og-foto img{width:100%;height:100%;object-fit:cover;display:block} .og-foto__iniciales{position:absolute;inset:0;display:flex;align-items:center;justify-content:center; background:var(--rojo-texto);color:#fff;font-family:var(--display);font-stretch:var(--ancho-display); font-weight:900;font-size:26px;letter-spacing:.02em} .og-ficha__texto{display:flex;flex-direction:column;gap:3px;padding:11px 13px 14px;flex:1} .og-ficha__marca{font-family:var(--datos);font-stretch:var(--ancho-dato);font-size:10.5px;font-weight:800; letter-spacing:.1em;text-transform:uppercase;color:var(--rojo-texto)} .og-ficha__cargo{font-family:var(--datos);font-stretch:var(--ancho-dato);font-size:11.5px;font-weight:800; letter-spacing:.06em;text-transform:uppercase;color:var(--muted)} .og-ficha__nombre{font-size:15px;font-weight:800;line-height:1.25;text-wrap:pretty} .og-vacio{margin:0;color:var(--muted);font-size:15px;line-height:1.6;max-width:56ch;text-align:center} .og-cierre{margin-top:clamp(44px,6vw,64px);display:flex;flex-direction:column;align-items:center;gap:14px; text-align:center} .og-cierre__escudo{width:64px;height:64px;object-fit:contain} .og-cierre__texto{margin:0;max-width:46ch;color:var(--muted);font-size:15px;line-height:1.6;text-wrap:pretty} @media (max-width:760px){ .og-tronco{grid-template-columns:minmax(0,1fr);gap:26px} .og-bloque--presidencia .og-rejilla{grid-template-columns:repeat(auto-fill,minmax(168px,1fr))} .og-tallo{margin:22px 0} } /* ========================================================================== Cuerpo de noticia con formato. Lo que la hoja publica desde la columna «Cuerpo»: subtítulos, listas, citas, fotos con pie y tablas. Son pocas piezas a propósito —una noticia de club no es una revista— y todas heredan los tokens del tema, así que una noticia se lee como parte del sitio y no como un documento pegado. ========================================================================== */ .entry-content h2{margin:34px 0 0;font-size:clamp(22px,2.6vw,28px);line-height:1.15; letter-spacing:-.02em} .entry-content h3{margin:28px 0 0;font-size:clamp(18px,2.1vw,21px);line-height:1.2; letter-spacing:-.015em} .entry-content p{line-height:1.7;text-wrap:pretty} .entry-content ul,.entry-content ol{margin:0;padding-left:22px;line-height:1.7} .entry-content li+li{margin-top:8px} .entry-content li::marker{color:var(--rojo-texto);font-weight:900} /* La cita: un filete rojo y nada más. Ni comillas dibujadas ni cursiva, que a tamaño de lectura estorban. */ .entry-content blockquote{margin:0;padding:4px 0 4px 20px;border-left:3px solid var(--rojo); font-size:clamp(17px,2vw,20px);font-weight:700;line-height:1.5;letter-spacing:-.01em} .entry-content blockquote p{margin:0} .entry-content hr{margin:8px 0;border:0;border-top:1px solid var(--line)} /* Fotos dentro del texto: a su proporción, no recortadas, con el pie debajo. El ancho lo trae cada figura en su atributo «style», calculado sobre lo que la foto ocupaba en el documento; aquí solo se le pone techo. */ .entry-content figure{margin:0;max-width:100%} .entry-content figure.wp-block-image img{width:100%;height:auto;object-fit:contain; border-radius:var(--radius)} /* Colocación heredada del documento. Las que llevan texto al lado flotan; la centrada se queda sola en su línea. El margen deja aire entre la foto y el texto que la rodea, que sin él se pega y no se lee ni una cosa ni otra. */ .entry-content figure.alignleft{float:left;margin:6px 26px 18px 0} .entry-content figure.alignright{float:right;margin:6px 0 18px 26px} .entry-content figure.aligncenter{margin-inline:auto} /* El texto que sigue a la última foto flotante no debe subirse al hueco que queda: se cierra la columna al final del cuerpo. */ .entry-content::after{content:"";display:block;clear:both} /* En pantalla estrecha no hay sitio para que el texto rodee una foto: una columna de veinte caracteres no es lectura. Las flotantes pasan a ocupar el ancho entero y se ordenan con el texto. */ @media (max-width:700px){ .entry-content figure.alignleft, .entry-content figure.alignright{float:none;width:100% !important;margin:0} } .entry-content figcaption{margin-top:9px;color:var(--muted);font-size:13px;line-height:1.5; text-wrap:pretty} /* La tabla va envuelta en su figura para poder desplazarla en horizontal sin romper la columna de texto: una clasificación de ocho columnas no cabe en un móvil y lo correcto es dejar que se arrastre, no encogerla hasta lo ilegible. */ .entry-content figure.wp-block-table{overflow-x:auto;border:1px solid var(--line); border-radius:var(--radius-s);background:var(--surface)} .entry-content figure.wp-block-table table{min-width:min(100%,420px)} @media (max-width:620px){ .entry-content figure.wp-block-table table{min-width:420px} } /* ------------------------------------------- convivencia y bienestar */ /* Las cinco piezas del proyecto, numeradas. La numeración es del diseño del club, así que va en una lista ordenada de verdad: el orden es información, no adorno, y así lo lee también quien usa un lector de pantalla. */ .cv-hero__texto{max-width:62ch;margin:14px 0 0;font-size:17px;line-height:1.6;color:rgba(255,255,255,.92);text-wrap:pretty} /* Cinco piezas no caben en una rejilla de cuatro sin dejar una huérfana al final, que es como quedó la primera versión. Se reparten 3 + 2: la rejilla tiene seis carriles, cada tarjeta ocupa dos, y las dos últimas arrancan desplazadas un carril, así que la segunda fila queda centrada bajo la primera. En pantallas medianas son 2 + 2 + 1, con la quinta centrada, y en móvil una debajo de otra. */ .cv-piezas{list-style:none;margin:26px 0 0;padding:0; display:grid;grid-template-columns:repeat(6,1fr);gap:16px} .cv-pieza{grid-column:span 2} .cv-pieza:nth-child(4){grid-column:2 / span 2} .cv-pieza:nth-child(5){grid-column:4 / span 2} @media (max-width:1040px){ .cv-piezas{grid-template-columns:repeat(4,1fr)} .cv-pieza:nth-child(4){grid-column:span 2} .cv-pieza:nth-child(5){grid-column:2 / span 2} } @media (max-width:680px){ .cv-piezas{grid-template-columns:1fr} .cv-pieza, .cv-pieza:nth-child(4), .cv-pieza:nth-child(5){grid-column:auto} } .cv-pieza{display:grid;gap:10px;align-content:start;padding:clamp(22px,3vw,28px); border:1px solid var(--line);border-top:4px solid var(--rojo);border-radius:var(--radius);background:var(--surface)} .cv-pieza__marca{display:flex;align-items:center;gap:13px} .cv-pieza__icono{flex:0 0 auto;display:grid;place-items:center;width:50px;height:50px;border-radius:50%; background:var(--rojo);color:#fff} .cv-pieza__icono svg{display:block;width:28px;height:28px} .cv-pieza__num{font-size:13px;font-weight:900;letter-spacing:.06em;color:var(--rojo-texto)} .cv-pieza__titulo{margin:0;font-size:18px;font-weight:900;line-height:1.2;letter-spacing:-.02em} .cv-pieza__texto{margin:0;font-size:15px;line-height:1.55;color:var(--muted);text-wrap:pretty} .cv-grupos{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px} .cv-grupos li{font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase; padding:6px 12px;border:1px solid var(--line);border-radius:999px;color:var(--ink);background:var(--bg-suave)} /* Una pieza con un documento por destinatario: cada fila lleva su propio «Ver el documento», igual que la pieza que solo tiene uno. */ .cv-docs{list-style:none;margin:auto 0 0;padding:18px 0 0;display:grid;gap:2px} .cv-doc{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px; padding:11px 0;border-top:1px solid var(--line)} .cv-doc:first-child{border-top:0;padding-top:0} .cv-doc:last-child{padding-bottom:0} .cv-doc__grupo{font-size:12px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:var(--ink)} .cv-doc__enlace{margin-top:0;font-size:14px} .cv-doc__pendiente{margin-top:0;font-size:12px;letter-spacing:.06em;text-transform:uppercase} .cv-pieza__enlace{display:inline-flex;align-items:center;gap:9px;margin-top:auto;font-size:15px;font-weight:800; color:var(--ink);text-decoration:underline;text-underline-offset:3px} .cv-pieza__tipo{font-size:10.5px;font-weight:900;letter-spacing:.08em;padding:3px 8px;border-radius:999px; background:var(--rojo);color:#fff;text-decoration:none} .cv-pieza__pendiente{margin-top:auto;font-size:14px;font-weight:800;color:var(--rojo-texto)} .cv-cierre{display:grid;gap:18px;justify-items:center;text-align:center; padding:clamp(28px,4vw,48px);border-radius:var(--radius);background:var(--rojo);color:#fff} .cv-cierre__titulo{margin:0;font-size:clamp(24px,3.4vw,38px);font-weight:900;line-height:1.05; letter-spacing:-.03em;text-transform:uppercase} .cv-valores{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 26px} .cv-valores li{display:grid;gap:2px} .cv-valores__nombre{font-size:13px;font-weight:900;letter-spacing:.1em;text-transform:uppercase} .cv-valores__texto{font-size:13.5px;line-height:1.45;color:rgba(255,255,255,.88)}