/* ========================================================================== KickPools - sistema de diseño web Hoja única para todas las competiciones. Sin frameworks y sin build: es CSS plano, porque así se sirve en producción. Cambiar de competición = cambiar data-comp en . ========================================================================== */ /* Fuentes de marca (brand/fonts). `swap` para que el texto se lea desde el primer pintado aunque la fuente aún no haya llegado. */ @font-face{ font-family:"KP Display"; src:url("fonts/Anton-Regular.ttf") format("truetype"); font-weight:400;font-style:normal;font-display:swap; } @font-face{ font-family:"KP Poster"; src:url("fonts/ArchivoBlack-Regular.ttf") format("truetype"); font-weight:400;font-style:normal;font-display:swap; } :root{ /* Paleta de marca. Fuente de verdad: brand/colors/PALETTE.md. Antes la web usaba una copia desviada (#081f5c / #0e4fc3 / #f5bd19 / #00a859 / #e1252f) que apagaba el azul y el rojo; estos son los valores reales. */ --kp-navy:#071F3F; --kp-blue:#0E63E6; --kp-gold:#FFB51B; --kp-green:#19A53A; --kp-red:#EF1E24; --kp-ink:#071126; --kp-surface:#ffffff; --kp-surface-soft:#f4f7fb; --kp-surface-blue:#eef5ff; --kp-muted:#52617a; --kp-line:rgba(8,31,92,.14); --kp-line-soft:rgba(8,31,92,.10); /* --- Sistema oscuro (app privada) ------------------------------------- Tres niveles y se acabó: lienzo, panel y hero. La separación la hacen filetes de 1px, no sombras — sobre negro una sombra no se ve, solo ensucia el borde. Solo los consume kickpools-app.css. */ --kp-void:#050505; /* nivel 0: lienzo */ --kp-panel:#0B1017; /* nivel 1: panel */ --kp-panel-2:#111823; /* nivel 1 elevado: filas dentro de panel */ --kp-t-1:#ffffff; /* texto principal */ --kp-t-2:rgba(255,255,255,.66); /* cuerpo */ --kp-t-3:rgba(255,255,255,.40); /* etiquetas */ --kp-hair:rgba(255,255,255,.09); --kp-hair-2:rgba(255,255,255,.16); --kp-shadow:0 14px 34px rgba(7,17,38,.14); --kp-shadow-sm:0 8px 18px rgba(8,31,92,.10); --kp-shadow-lg:0 24px 70px rgba(7,17,38,.22); /* Radios: 4 chips, 8 controles, 12 paneles. El 22px anterior redondeaba tanto que quitaba nervio; nada por encima de 12. */ --kp-r:8px; --kp-r-lg:12px; --kp-r-chip:4px; --kp-pill:999px; /* Espaciado en escala de 4 */ --kp-1:4px; --kp-2:8px; --kp-3:12px; --kp-4:16px; --kp-5:20px; --kp-6:24px; --kp-8:32px; --kp-10:40px; --kp-12:48px; --kp-tap:48px; /* objetivo táctil mínimo */ --kp-page:min(1120px,calc(100% - 28px)); --kp-font:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif; /* Tipografía de marca. Anton para titulares y cifras de impacto, Archivo Black para subtítulos. Inter se queda para cuerpo, UI y TODO dato tabular: Anton no tiene cifras de ancho fijo y descuadra rankings y marcadores. */ --kp-display:"KP Display",Impact,Haettenschweiler,"Arial Narrow Bold",sans-serif; --kp-poster:"KP Poster","Arial Black","Segoe UI",sans-serif; /* --- Motion ----------------------------------------------------------- Tres duraciones y dos curvas. La primera curva hace el 80% del trabajo. */ --kp-t-tap:120ms; /* feedback inmediato: tap, hover, toggle */ --kp-t-ui:260ms; /* entradas de elemento, paneles, avisos */ --kp-t-big:480ms; /* momentos: revelado, celebración */ --kp-e-out:cubic-bezier(.16,1,.3,1); /* firma: sale rápido, frena tarde */ --kp-e-back:cubic-bezier(.34,1.56,.64,1); /* overshoot ~15%, solo acierto y celebración */ --kp-stagger:60ms; /* Acento por competición */ --kp-accent:var(--kp-navy); --kp-accent-2:var(--kp-blue); /* CTA en rojo sólido. El degradado anterior (rojo → #061c5d) pasaba por un morado sucio en el centro, y es el elemento más repetido de la web. */ --kp-cta:var(--kp-red); /* Fuente de verdad de las acciones primarias. Las pantallas PHP heredadas tambien consumen estas variables: ningun boton debe volver al degradado rojo-azul del antiguo estilo Mundial. */ --kp-action-primary:var(--kp-red); --kp-action-primary-hover:#c81720; } /* Acento por competición. `--kp-edge` es la franja de luz de 3px del hero: sustituye a los dos radial-gradient de glow que emborronaban el borde. */ [data-comp="champions"]{ --kp-accent:#071F3F; --kp-accent-2:#0E63E6; --kp-edge:#0E63E6; --kp-action-primary:#0E63E6; --kp-action-primary-hover:#0a4fb9; } [data-comp="laliga"]{ --kp-accent:#0E63E6; --kp-accent-2:#071F3F; --kp-edge:#FFB51B; --kp-action-primary:#EF1E24; --kp-action-primary-hover:#c81720; } [data-comp="mundial"]{ --kp-accent:#071F3F; --kp-accent-2:#0E63E6; --kp-edge:#FFB51B; } /* --- Base --------------------------------------------------------------- */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0;min-height:100vh; color:var(--kp-ink); font:400 16px/1.5 var(--kp-font); /* Superficie limpia. El degradado anterior mezclaba cuatro tintes al 6-10% y el resultado era un tono barro que ensuciaba todo lo que iba encima. El color de marca lo ponen la franja y las islas oscuras, no el fondo. */ background:#f4f7fb; padding-bottom:calc(var(--kp-12) + env(safe-area-inset-bottom)); } /* Franja de marca: la firma visual de KickPools, presente en toda la app */ body::before{ content:"";position:fixed;inset:0 0 auto 0;height:7px;z-index:10000;pointer-events:none; background:linear-gradient(90deg,var(--kp-navy),var(--kp-red),var(--kp-gold),var(--kp-green),var(--kp-blue)); } img{max-width:100%;display:block} a{color:var(--kp-blue);text-decoration:none} a:hover{text-decoration:underline} h1,h2,h3{margin:0;font-weight:900;line-height:1.08;letter-spacing:0} h1{ font-family:var(--kp-display);font-weight:400; font-size:clamp(30px,4.8vw,48px);line-height:1.02;letter-spacing:-.005em; text-transform:uppercase; } h2{font-family:var(--kp-poster);font-weight:400;font-size:clamp(20px,3vw,28px);letter-spacing:-.01em} h3{font-family:var(--kp-poster);font-weight:400;font-size:18px;letter-spacing:-.005em} /* Cifras de impacto en Anton. Nunca sobre datos tabulares: los rankings, marcadores y contadores se quedan en Inter con tabular-nums. */ .kp-matchday__count, .kp-invite__code, .kp-group__code{font-family:var(--kp-display);font-weight:400;letter-spacing:0} p{margin:0 0 var(--kp-4)} :focus-visible{outline:3px solid var(--kp-blue);outline-offset:2px;border-radius:var(--kp-r)} .kp-page{width:var(--kp-page);margin:0 auto;padding:var(--kp-6) 0 var(--kp-10)} .kp-muted{color:var(--kp-muted)} .kp-eyebrow{ margin:0 0 var(--kp-2);font-size:12px;font-weight:900; letter-spacing:.12em;text-transform:uppercase;color:var(--kp-accent-2); } .kp-stack>*+*{margin-top:var(--kp-4)} .kp-vs{ display:inline-grid;place-items:center;min-width:40px;min-height:34px;padding:2px 6px; color:var(--kp-blue);font-family:var(--kp-display);font-size:25px;font-style:normal;font-weight:400;line-height:1; letter-spacing:-.06em;text-transform:uppercase; text-shadow:1px 1px 0 rgba(255,255,255,.75),2px 2px 0 rgba(14,79,195,.18); } /* Tarjeta principal: cada pantalla abre con una lectura clara de "dónde estoy" y del dato que importa. El patrón se dibuja con SVG propio, sin fotografías ni marcas de terceros, para que no compita con escudos y resultados. */ .kp-page-hero{ position:relative;isolation:isolate;display:flex;align-items:flex-end;justify-content:space-between;gap:var(--kp-6); min-height:172px;margin:0 0 var(--kp-5);padding:clamp(22px,3vw,34px); overflow:hidden;border:1px solid rgba(255,255,255,.18);border-radius:var(--kp-r-lg); background: radial-gradient(circle at 8% 12%,var(--kp-comp-glow-1,rgba(14,79,195,.62)),transparent 31%), radial-gradient(circle at 89% 10%,var(--kp-comp-glow-2,rgba(245,189,25,.4)),transparent 25%), linear-gradient(125deg,#071f3f,#081f5c 54%,#06132e); box-shadow:var(--kp-shadow-lg);color:#fff; } .kp-page-hero::after{ content:"";position:absolute;inset:0;z-index:-1;pointer-events:none; background-image:url("img/football-hero-pattern.svg");background-repeat:no-repeat;background-position:right center;background-size:min(76%,720px) auto; opacity:.68; } .kp-page-hero__copy{max-width:700px}.kp-page-hero .kp-eyebrow{color:#dbe8ff}.kp-page-hero h1{color:#fff} .kp-page-hero__text{max-width:640px;margin:8px 0 0;color:rgba(255,255,255,.86);font-size:15px;font-weight:650} .kp-page-hero__stat{ display:grid;align-content:center;gap:2px;min-width:152px;min-height:88px;padding:14px 16px; border:1px solid rgba(255,255,255,.28);border-radius:var(--kp-r);background:rgba(4,16,48,.48);backdrop-filter:blur(7px); } .kp-page-hero__stat span{color:rgba(255,255,255,.78);font-size:11px;font-weight:900;letter-spacing:.08em;text-transform:uppercase} .kp-page-hero__stat strong{color:#fff;font-size:25px;font-weight:900;line-height:1.1;font-variant-numeric:tabular-nums}.kp-page-hero__stat small{color:#f8d76a;font-size:12px;font-weight:800} .kp-page-hero--results{background:linear-gradient(125deg,#071f3f,#0e4fc3 56%,#081f5c)} .kp-page-hero--ranking{background:linear-gradient(125deg,#061840,#081f5c 50%,#1a3585)} .kp-page-hero--history{background:linear-gradient(125deg,#071f3f,#172e6b 50%,#081f5c)} /* Administracion: el arbitro senalando. Sujeto a la derecha y la izquierda despejada, asi que el degradado solo tapa la zona del texto. Antes era un degradado azul liso, sin nada que mirar. */ .kp-page-hero--admin.kp-page-hero--admin{ --kp-page-hero-deep:#071f3f; --kp-page-hero-accent:var(--kp-blue); background: linear-gradient(90deg,rgba(4,14,38,.96) 0%,rgba(7,31,63,.9) 42%,rgba(9,42,104,.45) 70%,rgba(11,58,137,.1) 100%), url("img/kp-rules-referee-hero-v1.png") 68% center / cover no-repeat, linear-gradient(125deg,#081f5c,#0e4fc3 54%,#071f3f); } .kp-page-hero--admin::before, .kp-page-hero--admin::after{display:none} /* Antes era un degradado azul liso, sin nada que mirar. Ahora lleva foto, con el degradado solo por la izquierda para que el texto se lea sobre plano. */ /* Clase doblada a proposito: esta regla vive antes que la base .kp-page-hero, asi que con un solo punto perderia por orden y volveria el hero rojo. */ .kp-page-hero--groups.kp-page-hero--groups{ --kp-page-hero-deep:#071f3f; --kp-page-hero-accent:var(--kp-blue); background: linear-gradient(90deg,rgba(4,14,38,.97) 0%,rgba(7,31,63,.92) 40%,rgba(9,42,104,.5) 68%,rgba(11,58,137,.12) 100%), url("img/kp-cover-football-2026-v2.png") 72% 32% / cover no-repeat, linear-gradient(125deg,#071f3f,#0d3a89 55%,#081f5c); } .kp-page-hero--groups::before, .kp-page-hero--groups::after{display:none} @media(max-width:680px){ .kp-page-hero{align-items:stretch;flex-direction:column;min-height:0;padding:22px;gap:var(--kp-4)} .kp-page-hero::after{background-position:120px 32px;background-size:620px auto;opacity:.44} .kp-page-hero__stat{min-width:0;min-height:70px;grid-template-columns:1fr auto;align-items:center}.kp-page-hero__stat span{grid-column:1/-1}.kp-page-hero__stat small{grid-column:2;grid-row:2} } /* Hero de juego compartido: el mismo pulso visual de Inicio en cada pantalla. */ .kp-page-hero{ --kp-page-hero-deep:#750914; --kp-page-hero-accent:#ef1e24; min-height:236px; padding:clamp(26px,3.2vw,40px); border:1px solid rgba(255,255,255,.34); border-left:6px solid var(--kp-page-hero-accent); border-radius:var(--kp-r-lg); background: linear-gradient(90deg,rgba(72,5,13,.99) 0%,rgba(112,8,20,.96) 39%,rgba(139,13,27,.72) 64%,rgba(139,13,27,.17) 100%), url("img/inicio-hero-football-v1.png") right center / auto 136% no-repeat, linear-gradient(135deg,#4e0710,var(--kp-page-hero-accent)); box-shadow:0 24px 48px rgba(93,6,18,.2); } html[data-comp="champions"] .kp-page-hero{ --kp-page-hero-deep:#061b59; --kp-page-hero-accent:#0e63e6; background: linear-gradient(90deg,rgba(3,20,70,.99) 0%,rgba(6,32,97,.96) 39%,rgba(10,53,139,.72) 64%,rgba(10,53,139,.17) 100%), url("img/inicio-hero-football-v1.png") right center / auto 136% no-repeat, linear-gradient(135deg,#061b59,#0e63e6); box-shadow:0 24px 48px rgba(3,29,98,.22); } .kp-page-hero--history{ background: linear-gradient(90deg,rgba(72,5,13,.99) 0%,rgba(112,8,20,.96) 41%,rgba(139,13,27,.62) 66%,rgba(139,13,27,.10) 100%), url("img/kp-hero-history-v2.png") 72% center / cover no-repeat, linear-gradient(135deg,#4e0710,#ef1e24); } html[data-comp="champions"] .kp-page-hero--history{ background: linear-gradient(90deg,rgba(3,20,70,.99) 0%,rgba(6,32,97,.96) 41%,rgba(10,53,139,.62) 66%,rgba(10,53,139,.10) 100%), url("img/kp-hero-history-v2.png") 72% center / cover no-repeat, linear-gradient(135deg,#061b59,#0e63e6); } .kp-page-hero--history::before,.kp-page-hero--history::after{display:none} .kp-page-hero::before{ content:"";position:absolute;z-index:-1;right:27%;bottom:24px;width:190px;height:54px; border-bottom:5px solid color-mix(in srgb,var(--kp-page-hero-accent) 78%,#fff); border-radius:50%;opacity:.78;transform:rotate(-12deg);pointer-events:none; } .kp-page-hero::after{ z-index:-1;background: linear-gradient(163deg,transparent 0 38%,rgba(255,255,255,.24) 39% 43%,transparent 44% 57%,rgba(255,255,255,.18) 58% 62%,transparent 63%) 55% 20% / 160px 74px no-repeat, url("img/football-hero-pattern.svg") right bottom / min(48%,480px) auto no-repeat; opacity:.31; } .kp-page-hero__copy{position:relative;z-index:1;max-width:min(670px,64%)} .kp-page-hero .kp-eyebrow{color:#ffd0d3} html[data-comp="champions"] .kp-page-hero .kp-eyebrow{color:#cfddff} .kp-page-hero h1{font-size:clamp(38px,5vw,64px);line-height:.9;text-shadow:1px 2px 0 rgba(0,0,0,.18)} .kp-page-hero__text{max-width:500px;margin-top:12px;color:rgba(255,255,255,.9);font-size:15px;line-height:1.45} .kp-page-hero__stat{ position:relative;z-index:1;min-width:170px;min-height:108px;padding:18px; border:1px solid rgba(255,255,255,.78);border-radius:var(--kp-r); background:linear-gradient(145deg,#fff,#fff6f6);box-shadow:0 12px 24px rgba(0,0,0,.18);color:var(--kp-page-hero-deep); } .kp-page-hero__stat span{color:var(--kp-page-hero-accent)} .kp-page-hero__stat strong{color:var(--kp-page-hero-deep);font-family:var(--kp-display);font-size:clamp(30px,3.3vw,48px);font-weight:400;line-height:.82} .kp-page-hero__stat small{color:var(--kp-page-hero-accent);font-weight:900} html[data-comp="champions"] .kp-page-hero__stat{background:linear-gradient(145deg,#fff,#f0f5ff)} @media(max-width:680px){ .kp-page-hero{min-height:310px;padding:24px 20px;background-position:72% center;background-size:auto 122%} .kp-page-hero::before{right:12%;bottom:105px;width:142px;height:42px} .kp-page-hero::after{background-position:90% 9%,right bottom;background-size:128px 60px,290px auto;opacity:.24} .kp-page-hero__copy{max-width:72%} .kp-page-hero h1{font-size:clamp(39px,12vw,58px)} .kp-page-hero__text{font-size:13px} .kp-page-hero__stat{min-height:78px;padding:13px 15px;background:rgba(255,255,255,.96)} .kp-page-hero--history,html[data-comp="champions"] .kp-page-hero--history{background-position:center,69% center,center;background-size:auto,cover,auto} } /* --- Cabecera ----------------------------------------------------------- */ .kp-header{ position:sticky;top:7px;z-index:20; display:flex;align-items:center;justify-content:space-between;gap:var(--kp-4); height:64px;padding:0 var(--kp-4);margin-bottom:var(--kp-5); background:rgba(255,255,255,.92);backdrop-filter:blur(14px); border-bottom:1px solid var(--kp-line-soft); } .kp-brand{display:flex;align-items:center;gap:var(--kp-3);min-width:0} .kp-brand img{height:38px;width:auto} .kp-brand .kp-comp{ padding:5px 12px;border-radius:var(--kp-pill); background:var(--kp-accent);color:#fff; font-size:11px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap; } .kp-header nav{display:flex;align-items:center;gap:var(--kp-1)} .kp-header nav a{ padding:var(--kp-2) var(--kp-3);border-radius:var(--kp-r); color:var(--kp-muted);font-size:14px;font-weight:800;text-decoration:none; } .kp-header nav a:hover{background:var(--kp-surface-blue);color:var(--kp-navy)} .kp-header nav a[aria-current]{background:var(--kp-accent);color:#fff} /* Heroes de producto: la fotografía define la situación; los datos siguen siendo HTML vivo. */ .kp-page-hero--predictions{--kp-page-hero-image:url("img/kp-hero-predictions-v1.png")} .kp-page-hero--results{--kp-page-hero-image:url("img/kp-hero-results-v1.png")} .kp-page-hero--ranking{--kp-page-hero-image:url("img/kp-hero-ranking-v1.png")} .kp-page-hero--predictions,.kp-page-hero--results,.kp-page-hero--ranking{ min-height:285px; background: linear-gradient(90deg,rgba(76,6,16,.98) 0%,rgba(109,9,24,.93) 42%,rgba(138,15,32,.57) 63%,rgba(138,15,32,.08) 100%), var(--kp-page-hero-image) center / cover no-repeat; } html[data-comp="champions"] .kp-page-hero--predictions, html[data-comp="champions"] .kp-page-hero--results, html[data-comp="champions"] .kp-page-hero--ranking{ background: linear-gradient(90deg,rgba(3,20,70,.98) 0%,rgba(6,34,102,.93) 42%,rgba(12,67,164,.57) 63%,rgba(12,67,164,.08) 100%), var(--kp-page-hero-image) center / cover no-repeat; } .kp-page-hero--ranking{ /* La foto ocupa todo el ancho: al dibujarla solo a la derecha quedaba una costura vertical visible entre el degradado y el comienzo de la imagen. */ background: linear-gradient(90deg,rgba(83,5,16,.97) 0%,rgba(110,8,23,.91) 38%,rgba(133,13,29,.67) 60%,rgba(118,10,25,.31) 78%,rgba(91,6,18,.12) 100%), var(--kp-page-hero-image) center / cover no-repeat; } .kp-page-hero--predictions::before,.kp-page-hero--results::before,.kp-page-hero--ranking::before, .kp-page-hero--predictions::after,.kp-page-hero--results::after,.kp-page-hero--ranking::after{display:none} .kp-page-hero--predictions .kp-page-hero__copy,.kp-page-hero--results .kp-page-hero__copy,.kp-page-hero--ranking .kp-page-hero__copy{max-width:min(740px,66%)} .kp-hero-metrics{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}.kp-hero-metrics span{display:inline-flex;align-items:baseline;gap:5px;padding:7px 10px;border:1px solid rgba(255,255,255,.22);border-radius:999px;background:rgba(3,12,36,.34);color:rgba(255,255,255,.86);font-size:12px;font-weight:800;backdrop-filter:blur(8px)}.kp-hero-metrics b{color:#fff;font-family:var(--kp-display);font-size:20px;font-weight:400;line-height:1}.kp-hero-metrics .is-live b{color:#ffd24d}.kp-hero-awards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;max-width:520px;margin-top:12px}.kp-hero-awards>span{display:grid;grid-template-rows:56px 20px auto auto auto;justify-items:center;align-items:center;min-width:0;min-height:124px;padding:8px 7px 7px;overflow:hidden;border:1px solid color-mix(in srgb,var(--kp-page-hero-accent) 35%,#fff);border-radius:10px;background:linear-gradient(155deg,rgba(255,255,255,.98),rgba(255,244,245,.94));box-shadow:0 8px 18px rgba(31,2,8,.18);backdrop-filter:blur(8px)}.kp-hero-awards img{display:block;width:64px;height:54px;object-fit:contain;filter:drop-shadow(0 5px 6px rgba(104,5,19,.15))}.kp-hero-awards em{display:grid;place-items:center;width:calc(100% + 14px);height:20px;margin-inline:-7px;background:var(--kp-page-hero-accent);color:#fff;font-style:normal;font-size:9px;font-weight:950;letter-spacing:.04em;text-transform:uppercase}.kp-hero-awards b{max-width:100%;margin-top:5px;overflow:hidden;color:var(--kp-page-hero-deep);font-size:11px;text-overflow:ellipsis;white-space:nowrap}.kp-hero-awards small{max-width:100%;overflow:hidden;color:#65718a;font-size:9px;font-weight:800;text-overflow:ellipsis;white-space:nowrap}/* Segunda linea: el acumulado de toda la temporada, que es el que decide el premio de temporada. */.kp-hero-awards__temporada{max-width:100%;margin-top:2px;padding:1px 6px;overflow:hidden;border-radius:999px;background:color-mix(in srgb,var(--kp-page-hero-accent) 12%,#fff);color:var(--kp-page-hero-deep);font-style:normal;font-size:8px;font-weight:900;text-overflow:ellipsis;white-space:nowrap}html[data-comp="champions"] .kp-hero-awards>span{background:linear-gradient(155deg,rgba(255,255,255,.98),rgba(240,245,255,.95))}html[data-comp="champions"] .kp-hero-awards img{filter:hue-rotate(210deg) saturate(.95) drop-shadow(0 5px 6px rgba(4,36,113,.18))} .kp-hero-group-share{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:13px}.kp-hero-group-share>span{padding-right:4px;color:rgba(255,255,255,.92);font-size:12px;font-weight:800}.kp-hero-group-share>span b{margin-left:4px;letter-spacing:.08em}.kp-hero-group-share button,.kp-hero-group-share a{display:inline-flex;align-items:center;justify-content:center;min-height:34px;padding:0 11px;border:1px solid rgba(255,255,255,.52);border-radius:8px;background:#fff;color:var(--kp-page-hero-deep);font:inherit;font-size:12px;font-weight:900;text-decoration:none;cursor:pointer}.kp-hero-group-share a{background:transparent;color:#fff}.kp-hero-group-share a:hover{background:rgba(255,255,255,.16);text-decoration:none} .kp-hero-awards--dual{max-width:560px;grid-template-columns:repeat(3,minmax(0,1fr));row-gap:7px}.kp-hero-awards--dual>span{grid-template-rows:36px 18px auto auto;min-height:96px;padding:5px 6px}.kp-hero-awards--dual img{width:42px;height:34px}.kp-hero-awards--dual em{width:calc(100% + 12px);height:18px;margin-inline:-6px;font-size:8px}.kp-hero-awards--dual b{margin-top:4px;font-size:10px}.kp-hero-awards--dual small{font-size:8px} @media(max-width:760px){.kp-page-hero--predictions,.kp-page-hero--results,.kp-page-hero--ranking{min-height:340px;background-position:62% center}.kp-page-hero--predictions .kp-page-hero__copy,.kp-page-hero--results .kp-page-hero__copy,.kp-page-hero--ranking .kp-page-hero__copy{max-width:82%}.kp-hero-metrics{gap:6px;margin-top:13px}.kp-hero-metrics span{padding:6px 8px;font-size:11px}.kp-hero-metrics b{font-size:17px}.kp-hero-awards{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;max-width:320px}.kp-hero-awards>span{grid-template-rows:46px 18px auto auto auto;min-height:108px;padding:6px 4px 5px}.kp-hero-awards img{width:50px;height:44px}.kp-hero-awards em{width:calc(100% + 8px);height:18px;margin-inline:-4px;font-size:8px}.kp-hero-awards b{font-size:9px}.kp-hero-awards small{font-size:8px}.kp-hero-group-share{max-width:260px}.kp-hero-group-share>span{width:100%}} @media(max-width:760px){.private-section-page .kp-page{display:flex;flex-direction:column}.private-section-page .kp-page>.kp-page-hero--predictions,.private-section-page .kp-page>.kp-page-hero--results,.private-section-page .kp-page>.kp-page-hero--ranking{order:100;margin-top:var(--kp-6);margin-bottom:0}} @media(max-width:760px){.kp-hero-awards--dual>span{grid-template-rows:36px 28px auto auto;min-height:106px}.kp-hero-awards--dual em{height:28px;padding:2px 3px;font-size:7px;line-height:1.08;text-align:center;white-space:normal;box-sizing:border-box}} @media(max-width:760px){.kp-page-hero--ranking{background-position:center,right center}} /* Ranking: la foto y el color se dibujan en capas separadas. La máscara hace que la imagen se funda con el fondo, en vez de empezar bruscamente en una coordenada concreta (la línea vertical que se veía en el banner). */ .kp-page-hero--ranking{background:#65030f} .kp-page-hero--ranking::before{ display:block;content:"";position:absolute;inset:0;z-index:0; background:var(--kp-page-hero-image) right center / auto 122% no-repeat; -webkit-mask-image:linear-gradient(90deg,transparent 0%,transparent 28%,#000 55%,#000 100%); mask-image:linear-gradient(90deg,transparent 0%,transparent 28%,#000 55%,#000 100%); pointer-events:none; } .kp-page-hero--ranking::after{ display:block;content:"";position:absolute;inset:0;z-index:0; background:linear-gradient(90deg,rgba(100,3,15,.98) 0%,rgba(113,7,21,.94) 35%,rgba(130,13,29,.64) 60%,rgba(100,7,21,.08) 100%); pointer-events:none; } .kp-page-hero--ranking .kp-page-hero__copy,.kp-page-hero--ranking .kp-page-hero__stat{z-index:1} html[data-comp="champions"] .kp-page-hero--ranking{background:#061b59} html[data-comp="champions"] .kp-page-hero--ranking::after{background:linear-gradient(90deg,rgba(3,20,70,.98) 0%,rgba(6,34,102,.94) 35%,rgba(12,67,164,.64) 60%,rgba(6,27,89,.08) 100%)} @media(max-width:760px){ .kp-page-hero--ranking::before{background-position:63% center;background-size:auto 118%;-webkit-mask-image:linear-gradient(90deg,transparent 0%,transparent 14%,#000 62%,#000 100%);mask-image:linear-gradient(90deg,transparent 0%,transparent 14%,#000 62%,#000 100%)} } /* Cabecera de las pantallas privadas: comparte menu entre pronosticos y ranking. Sticky en todos los anchos: en escritorio/tablet lleva marca+competición+ páginas juntas; en móvil el menú de páginas sale de aquí (ver .private-nav más abajo) y esta barra se queda solo con marca+competición. */ .private-topbar{ position:sticky;top:7px;z-index:40; display:flex;align-items:center;justify-content:space-between;gap:var(--kp-4); width:min(1120px,calc(100% - 32px));min-height:64px;margin:18px auto 0;padding:12px 14px; border:1px solid rgba(255,255,255,.68);border-radius:18px;box-shadow:0 14px 34px rgba(7,17,38,.12); /* En explícito, aunque parezca redundante: inicio.php y perfil.php cargan antes css/mundial.css, que trae SU PROPIA copia de .private-topbar con `backdrop-filter` puesto directamente. Como aquí ya no se declara esa propiedad (ver el porqué debajo), la cascada no la "borra" sola — una declaración de una hoja anterior que nadie contradice explícitamente sigue ganando. Fijarla a `none` aquí la neutraliza siempre, cargue o no mundial.css antes. */ background:none;backdrop-filter:none; } /* El fondo y el desenfoque van en un pseudo-elemento, NO en .private-topbar directamente: un elemento con `backdrop-filter` (igual que `transform` o `filter`) se convierte en el "contenedor de referencia" de cualquier descendiente `position:fixed` — y .private-nav usa position:fixed en móvil para acoplarse al borde inferior de la PANTALLA, no de esta cabecera. Con el desenfoque aquí, .private-topbar queda "limpio" y .private-nav se ancla al viewport de verdad. */ .private-topbar::before{ content:"";position:absolute;inset:0;z-index:-1;pointer-events:none; background:rgba(255,255,255,.88);backdrop-filter:blur(18px);border-radius:inherit; } .private-brand{display:inline-flex;align-items:center;gap:10px;color:var(--kp-navy);font-weight:900;text-decoration:none} .private-brand:hover{text-decoration:none} .private-brand img{width:42px;height:42px;object-fit:contain;flex:0 0 42px} .private-plan-badge{display:inline-flex;align-items:center;justify-content:center;color:#d49a00;font-size:20px;line-height:1;white-space:nowrap} .private-plan-badge--premium{ min-height:22px; gap:4px; padding:0 8px; border:1px solid #c58d13; border-radius:999px; background:linear-gradient(135deg,#fff6c7,#e6b632); color:#5f4200; font-size:10px; font-weight:950; letter-spacing:.04em; text-transform:uppercase; } .private-plan-badge--basic{ min-height:22px; padding:0 7px; border:1px solid #aeb6c2; border-radius:999px; background:linear-gradient(135deg,#fff,#dce1e8); color:#3d4654; font-size:9px; font-weight:950; letter-spacing:.07em; text-transform:uppercase; } .private-group-link{display:inline-flex;align-items:center;gap:6px;margin-left:auto;padding:7px 10px;border:1px solid var(--kp-line);border-radius:var(--kp-pill);color:var(--kp-navy);font-size:12px;font-weight:900;text-decoration:none;white-space:nowrap}.private-group-link:hover,.private-group-link.is-active{border-color:var(--kp-accent);background:var(--kp-surface-blue);color:var(--kp-accent-2);text-decoration:none} .private-nav{order:2;display:flex;align-items:center;gap:4px;margin-left:var(--kp-3)} .private-nav a{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:38px;padding:7px 10px;border-radius:var(--kp-r);color:var(--kp-muted);font-size:12px;font-weight:900;line-height:1;text-align:center;text-decoration:none;white-space:nowrap} .private-nav a:hover{background:var(--kp-surface-blue);color:var(--kp-navy);text-decoration:none} .private-nav a.is-active{background:var(--kp-accent);color:#fff;box-shadow:var(--kp-shadow-sm)} .private-nav__icon{display:inline-flex;font-size:11px;font-weight:900;letter-spacing:.02em} .private-nav__icon svg{width:15px;height:15px;display:block} .private-nav__label{overflow:hidden;text-overflow:ellipsis;max-width:100%} .private-notifications{order:3;display:flex;align-items:center;margin-left:auto}.private-notifications .anuncios-alerta{position:relative;display:grid;width:40px;height:40px;place-items:center;border:1px solid var(--kp-line);border-radius:50%;background:var(--kp-surface);color:var(--kp-navy);box-shadow:var(--kp-shadow-sm);text-decoration:none;transition:transform .18s ease,border-color .18s ease,background .18s ease}.private-notifications .anuncios-alerta:hover{transform:translateY(-1px);border-color:var(--kp-accent);background:var(--kp-surface-blue);text-decoration:none}.private-notifications .anuncios-alerta-icon,.private-notifications .anuncios-alerta-icon svg{display:block;width:20px;height:20px}.private-notifications .anuncios-alerta-badge{position:absolute;top:-5px;right:-5px;display:grid;min-width:19px;height:19px;padding:0 5px;place-items:center;border:2px solid #fff;border-radius:999px;background:var(--kp-accent);color:#fff;font-size:10px;font-weight:900;line-height:1} .private-comp-switch{order:1;margin-left:var(--kp-3);margin-right:0} .private-comp-switch{display:inline-flex;align-items:center;gap:3px;padding:4px;border:1px solid var(--kp-line);border-radius:var(--kp-pill);background:var(--kp-surface-blue)} .private-comp-switch a{padding:7px 11px;border-radius:var(--kp-pill);color:var(--kp-muted);font-size:12px;font-weight:900;text-decoration:none;white-space:nowrap} .private-comp-switch a[aria-current]{background:var(--kp-navy);color:#fff;box-shadow:var(--kp-shadow-sm)} .private-comp-switch__soon{display:inline-flex;align-items:center;gap:5px;min-height:30px;padding:0 9px;border-radius:var(--kp-pill);background:#eef1f5;color:#697488;font-size:11px;font-weight:900;cursor:not-allowed;white-space:nowrap}.private-comp-switch__soon small{padding:2px 5px;border-radius:999px;background:#e7f0ff;color:#0e4fc3;font-size:8px;font-weight:950;letter-spacing:.04em;text-transform:uppercase} /* En web el menú se integra en la cabecera; los iconos se reservan para móvil, donde ayudan a reconocer cada destino. */ @media (min-width:761px){.private-nav__icon{display:none}} /* En escritorio la campana forma parte del bloque de navegacion: queda inmediatamente antes de Inicio. Tableta y movil mantienen su composicion y la barra inferior sin cambios. */ @media (min-width:1021px){ .private-topbar{justify-content:flex-start;gap:8px} .private-comp-switch{margin-left:0} .private-notifications{order:2;margin-left:auto} .private-nav{order:3;margin-left:0} } /* --- Botones ------------------------------------------------------------ */ .kp-btn{ display:inline-flex;align-items:center;justify-content:center;gap:var(--kp-2); min-height:var(--kp-tap);padding:0 var(--kp-5); border:0;border-radius:var(--kp-r); background:var(--kp-cta);color:#fff; font:900 15px var(--kp-font);text-decoration:none;cursor:pointer; box-shadow:var(--kp-shadow-sm); transition:filter .15s ease,transform .15s ease; } .kp-btn:hover{filter:brightness(1.06);transform:translateY(-1px);text-decoration:none} /* Corte diagonal de camiseta en los botones llenos. Los `--ghost` quedan fuera: su borde es un box-shadow interior y el clip-path se lo comería. */ .kp-btn:not(.kp-btn--ghost){ clip-path:polygon(0 0,calc(100% - 11px) 0,100% 11px,100% 100%,11px 100%,0 calc(100% - 11px)); box-shadow:none; } .kp-btn--solid{background:var(--kp-accent)} /* Dentro de las islas oscuras el acento es azul marino y sobre negro se pierde (1,33:1). Se sube al azul de marca y se añade un aro para que el borde del botón se distinga del fondo. */ .kp-hero .kp-btn--solid, .kp-final .kp-btn--solid, .kp-share .kp-btn--solid, .kp-live .kp-btn--solid{ background:var(--kp-blue); box-shadow:inset 0 0 0 1px rgba(255,255,255,.28); } .kp-btn--ghost{ background:var(--kp-surface);color:var(--kp-navy); box-shadow:inset 0 0 0 1px var(--kp-line),var(--kp-shadow-sm); } .kp-btn--ghost:hover{background:var(--kp-surface-blue)} .kp-btn--block{width:100%} .kp-btn[disabled],.kp-btn[aria-disabled="true"]{opacity:.5;pointer-events:none;box-shadow:none} /* --- Tarjetas, avisos y píldoras ---------------------------------------- */ .kp-card{ background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(239,246,255,.94)); border:1px solid var(--kp-line-soft);border-radius:var(--kp-r); padding:var(--kp-5);box-shadow:var(--kp-shadow-sm); } .kp-grid{display:grid;gap:var(--kp-4)} .kp-grid--2{grid-template-columns:repeat(2,1fr)} .kp-grid--3{grid-template-columns:repeat(3,1fr)} .kp-grid--auto{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))} .kp-pill{ display:inline-flex;align-items:center;gap:6px; padding:7px 14px;border-radius:var(--kp-pill); background:rgba(255,255,255,.18);box-shadow:inset 0 0 0 1px rgba(255,255,255,.45); color:#fff;font-size:13px;font-weight:900; } .kp-tag{ display:inline-flex;align-items:center;gap:6px; padding:4px 10px;border-radius:var(--kp-r); background:var(--kp-surface-blue);color:var(--kp-navy); font-size:11px;font-weight:900;letter-spacing:.06em;text-transform:uppercase; } .kp-tag--live{background:#ffe9ea;color:#b5121b} .kp-tag--live::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--kp-red);animation:kp-pulse 1.4s infinite} .kp-tag--ok{background:#e0f6ec;color:#04713e} .kp-tag--warn{background:#fff5db;color:#8a6300} .kp-tag--secret{background:#ece9ff;color:#3a2ea8} @keyframes kp-pulse{50%{opacity:.25}} .kp-flash{ padding:var(--kp-3) var(--kp-4);border-radius:var(--kp-r); border:1px solid var(--kp-line-soft);border-left:4px solid var(--kp-accent-2); background:var(--kp-surface);font-weight:700;box-shadow:var(--kp-shadow-sm); } .kp-flash--ok{border-left-color:var(--kp-green)} .kp-flash--error{border-left-color:var(--kp-red)} .kp-flash--warn{border-left-color:var(--kp-gold)} .kp-empty{ padding:var(--kp-10) var(--kp-5);text-align:center; border:1px dashed var(--kp-line);border-radius:var(--kp-r); background:rgba(255,255,255,.7);color:var(--kp-muted); } /* --- Héroe -------------------------------------------------------------- */ .kp-hero{ position:relative;overflow:hidden; display:flex;flex-direction:column;justify-content:flex-end; min-height:420px;padding:var(--kp-12) var(--kp-8) var(--kp-8); border-radius:var(--kp-r-lg);color:#fff; border:1px solid rgba(255,255,255,.14);box-shadow:var(--kp-shadow-lg); /* Isla oscura: negro de marca (#071F3F → #050505). Los resplandores siguen saliendo de --kp-comp-glow-*, así que LaLiga y Champions se distinguen. */ background: radial-gradient(circle at 16% 10%,var(--kp-comp-glow-1,rgba(245,189,25,.55)),transparent 34%), radial-gradient(circle at 86% 16%,var(--kp-comp-glow-2,rgba(0,168,89,.42)),transparent 30%), linear-gradient(180deg,#071F3F,#050505); } .kp-hero__mark{ position:absolute;inset:auto -22px 6px auto;z-index:0; font:400 210px/.8 var(--kp-display); letter-spacing:-.04em;color:rgba(255,255,255,.07);pointer-events:none; } .kp-hero>*{position:relative;z-index:1} .kp-hero h1{max-width:16ch;margin:var(--kp-3) 0} .kp-hero p{max-width:56ch;color:rgba(255,255,255,.88);font-size:18px} .kp-hero__pills{display:flex;flex-wrap:wrap;gap:var(--kp-2);margin-top:var(--kp-4)} .kp-hero__actions{display:flex;flex-wrap:wrap;gap:var(--kp-3);margin-top:var(--kp-5)} /* Portada 26/27. La foto conserva un área oscura a la izquierda y abajo para que el contenido siga siendo legible sin ocultar la celebración. */ .kp-hero--cover{ background: linear-gradient(180deg,rgba(2,10,25,.04) 28%,rgba(2,8,20,.38) 65%,rgba(2,7,17,.90) 100%), linear-gradient(90deg,rgba(2,8,20,.78) 0%,rgba(2,8,20,.64) 52%,rgba(2,8,20,.14) 76%,transparent 100%), url("img/kp-cover-football-2026-v2.png") center / cover no-repeat, #020814; } .kp-hero--cover .kp-hero__mark{display:none} /* --- Portada: acceso, pasos, cajones de competición y cierre ------------ */ /* El acceso es lo primero que se ve, en cualquier dispositivo */ .kp-header__auth{display:flex;align-items:center;gap:var(--kp-2)} /* El color se repite porque `.kp-header nav a` tiene más especificidad que `.kp-btn` */ .kp-header__auth .kp-btn{min-height:40px;padding:0 var(--kp-4);font-size:14px;color:#fff} .kp-header__auth .kp-btn:hover{background:var(--kp-cta);color:#fff} .kp-header__auth .kp-btn--ghost, .kp-header__auth .kp-btn--ghost:hover{background:var(--kp-surface);color:var(--kp-navy)} .kp-cover{ display:grid;grid-template-columns:minmax(0,1.08fr) minmax(330px,.92fr); gap:var(--kp-6);align-items:stretch; } .kp-access{ align-self:start; padding:var(--kp-6);border-radius:var(--kp-r-lg); background:rgba(255,255,255,.96);border:1px solid rgba(255,255,255,.68); box-shadow:var(--kp-shadow-lg); } .kp-steps{counter-reset:kp-step;display:grid;gap:var(--kp-4)} .kp-step{ position:relative;padding:var(--kp-5) var(--kp-5) var(--kp-5) 76px; background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(239,246,255,.94)); border:1px solid var(--kp-line-soft);border-radius:var(--kp-r); box-shadow:var(--kp-shadow-sm); } .kp-step::before{ counter-increment:kp-step;content:counter(kp-step); position:absolute;top:var(--kp-5);left:var(--kp-5); display:grid;place-items:center;width:40px;height:40px;border-radius:var(--kp-r); background:var(--kp-accent);color:#fff;font-size:19px;font-weight:900; } .kp-step h3{margin-bottom:6px} .kp-step p{margin:0;color:var(--kp-muted)} .kp-aside{ margin-top:var(--kp-4);padding:var(--kp-4) var(--kp-5); border-left:4px solid var(--kp-gold);border-radius:var(--kp-r); background:#fffaf0;font-weight:700; } .kp-compbox{ overflow:hidden;border-radius:var(--kp-r);border:1px solid var(--kp-line-soft); background:var(--kp-surface);box-shadow:var(--kp-shadow-sm); } .kp-compbox__head{ padding:var(--kp-5);color:#fff; background: radial-gradient(circle at 12% 10%,var(--kp-glow,rgba(245,189,25,.75)),transparent 30%), linear-gradient(135deg,var(--kp-navy),var(--kp-blue)); } .kp-compbox__head h3{font-size:24px;margin-bottom:4px} .kp-compbox__head p{margin:0;color:rgba(255,255,255,.85);font-size:15px} .kp-compbox__body{padding:var(--kp-5)} .kp-facts{display:grid;gap:0;margin:0 0 var(--kp-4)} .kp-facts div{ display:flex;align-items:baseline;justify-content:space-between;gap:var(--kp-3); padding:var(--kp-2) 0;border-bottom:1px solid var(--kp-line-soft); } .kp-facts div:last-child{border-bottom:0} .kp-facts dt{color:var(--kp-muted);font-size:14px} .kp-facts dd{margin:0;font-weight:900;color:var(--kp-navy);text-align:right} /* Prueba social: números reales, sin adornos */ .kp-stats{ display:grid;grid-template-columns:repeat(3,1fr);gap:var(--kp-4); margin-top:var(--kp-6);padding:var(--kp-5); background:var(--kp-surface);border:1px solid var(--kp-line-soft); border-radius:var(--kp-r);box-shadow:var(--kp-shadow-sm);text-align:center; } /* La prueba social es el mejor argumento de la portada: va a escala de marca */ .kp-stats strong{ display:block;font-family:var(--kp-display);font-weight:400; font-size:clamp(34px,5.4vw,52px);line-height:.96;color:var(--kp-navy); } .kp-stats span{ display:block;margin-top:4px;font-size:12px;font-weight:900; letter-spacing:.08em;text-transform:uppercase;color:var(--kp-muted); } /* Planes: el gratuito es el camino por defecto, premium es mejora del grupo */ .kp-plan{ position:relative;display:flex;flex-direction:column; padding:var(--kp-5);border-radius:var(--kp-r); background:var(--kp-surface);border:1px solid var(--kp-line-soft); box-shadow:var(--kp-shadow-sm); } .kp-plan--pro{border:2px solid var(--kp-accent);box-shadow:var(--kp-shadow)} .kp-plan h3{font-size:22px} .kp-plan__price{margin:var(--kp-2) 0 var(--kp-4);font-size:15px;font-weight:800;color:var(--kp-muted)} .kp-plan ul{margin:0 0 var(--kp-4);padding:0;list-style:none;display:grid;gap:var(--kp-2)} .kp-plan li{position:relative;padding-left:26px;font-size:15px} .kp-plan li::before{ content:"";position:absolute;left:2px;top:5px;width:13px;height:7px; border-left:3px solid var(--kp-green);border-bottom:3px solid var(--kp-green); transform:rotate(-45deg); } .kp-plan .kp-btn{margin-top:auto} .kp-fairplay{ margin-top:var(--kp-4);padding:var(--kp-4) var(--kp-5); border-left:4px solid var(--kp-green);border-radius:var(--kp-r); background:#f0faf4;font-weight:700; } .kp-final{ position:relative;overflow:hidden;text-align:center; margin-top:var(--kp-10);padding:var(--kp-10) var(--kp-6); border-radius:var(--kp-r-lg);color:#fff;box-shadow:var(--kp-shadow-lg); background: radial-gradient(circle at 20% 15%,rgba(245,189,25,.42),transparent 28%), radial-gradient(circle at 82% 20%,rgba(225,37,47,.38),transparent 30%), linear-gradient(180deg,#071F3F,#050505); } .kp-final h2{max-width:20ch;margin:0 auto var(--kp-3);font-size:clamp(24px,3.6vw,38px)} .kp-final p{max-width:52ch;margin:0 auto;color:rgba(255,255,255,.88)} .kp-final__actions{display:flex;flex-wrap:wrap;gap:var(--kp-3);justify-content:center;margin-top:var(--kp-6)} .kp-final small{display:block;margin-top:var(--kp-5);color:rgba(255,255,255,.72);font-size:13px} .kp-legal{ display:flex;flex-wrap:wrap;gap:var(--kp-2) var(--kp-4);justify-content:center; margin-top:var(--kp-8);padding:var(--kp-5) var(--kp-4); border-top:1px solid var(--kp-line-soft); font-size:13px;color:var(--kp-muted); } .kp-legal a{color:var(--kp-muted)} /* --- Cabecera de jornada: progreso y cuenta atrás ----------------------- */ .kp-matchday{ display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--kp-4); padding:var(--kp-5);margin-bottom:var(--kp-5); border:1px solid var(--kp-line-soft);border-radius:var(--kp-r); background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(239,246,255,.94)); box-shadow:var(--kp-shadow-sm); } .kp-matchday__count{margin:0;font-size:32px;font-weight:900;line-height:1;color:var(--kp-navy)} .kp-matchday__count small{font-size:15px;font-weight:800;color:var(--kp-muted)} .kp-progress{height:8px;border-radius:var(--kp-pill);background:rgba(8,31,92,.10);overflow:hidden;margin-top:var(--kp-3)} .kp-progress>span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--kp-accent),var(--kp-accent-2))} .kp-countdown{display:grid;grid-template-columns:repeat(4,64px);gap:var(--kp-2)} .kp-countdown div{ padding:9px 8px;border-radius:13px;text-align:center; background:var(--kp-surface);color:var(--kp-navy);box-shadow:var(--kp-shadow-sm); } .kp-countdown strong{display:block;font-size:22px;line-height:1;font-variant-numeric:tabular-nums} .kp-countdown span{display:block;margin-top:4px;font-size:11px;font-weight:900;text-transform:uppercase;color:var(--kp-muted)} /* --- Selector de competición (arriba a la izquierda) -------------------- */ .kp-compswitch{ display:inline-flex;padding:3px;border-radius:var(--kp-pill); background:var(--kp-surface-blue);box-shadow:inset 0 0 0 1px var(--kp-line-soft); } .kp-compswitch a{ display:inline-flex;align-items:center;min-height:40px; padding:0 16px;border-radius:var(--kp-pill); font-size:13px;font-weight:900;color:var(--kp-muted);text-decoration:none; transition:background .15s ease,color .15s ease; } .kp-compswitch a:hover{color:var(--kp-navy);text-decoration:none} .kp-compswitch a[aria-pressed="true"]{background:var(--kp-accent);color:#fff} /* --- Partido en directo -------------------------------------------------- */ .kp-live{ position:relative;overflow:hidden;margin-bottom:var(--kp-4); padding:var(--kp-5);border-radius:var(--kp-r);color:#fff; box-shadow:var(--kp-shadow); background:radial-gradient(circle at 12% 10%,rgba(225,37,47,.5),transparent 32%), linear-gradient(180deg,#071F3F,#050505); } .kp-live__head{ display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--kp-3); margin-bottom:var(--kp-4);font-size:12px;font-weight:900; letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.8); } .kp-live__score{ display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:var(--kp-4); font-size:clamp(18px,3vw,24px);font-weight:900;text-align:center; } .kp-live__score b{ padding:var(--kp-2) var(--kp-4);border-radius:var(--kp-r); background:rgba(255,255,255,.16);font-size:clamp(24px,4vw,34px);font-variant-numeric:tabular-nums; } .kp-live__stats{ display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:var(--kp-2); margin-top:var(--kp-5); } .kp-live__stats div{ padding:var(--kp-2);border-radius:var(--kp-r);text-align:center; background:rgba(255,255,255,.12); } .kp-live__stats strong{display:block;font-size:19px;font-weight:900;font-variant-numeric:tabular-nums} .kp-live__stats span{display:block;font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.75)} .kp-live__foot{ display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--kp-3); margin-top:var(--kp-4);padding-top:var(--kp-3); border-top:1px solid rgba(255,255,255,.2);font-weight:800;font-size:14px; } /* --- Apuestas de jornada y de temporada --------------------------------- */ .kp-bet{ display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--kp-3); padding:var(--kp-3) var(--kp-4);margin-bottom:6px; border-radius:var(--kp-r);background:var(--kp-surface); box-shadow:inset 0 0 0 1px var(--kp-line-soft); } .kp-bet__title{font-weight:900} .kp-bet__title small{ display:block;font-size:12px;font-weight:700;color:var(--kp-muted);text-transform:none;letter-spacing:0; } .kp-bet__value{ display:flex;align-items:center;gap:var(--kp-2); font-weight:900;color:var(--kp-navy);white-space:nowrap; } .kp-bet--done{box-shadow:inset 0 0 0 1px rgba(0,168,89,.4);background:#f4fbf7} .kp-bet--locked{background:var(--kp-surface-soft);color:var(--kp-muted)} .kp-points{ flex:none;padding:3px 9px;border-radius:var(--kp-pill); background:var(--kp-navy);color:#fff;font-size:12px;font-weight:900;white-space:nowrap; } .kp-points--win{background:var(--kp-green)} /* --- Clasificación de la competición ------------------------------------ */ .kp-standings{width:100%;border-collapse:collapse;font-size:14px} .kp-standings th,.kp-standings td{padding:8px 6px;border-bottom:1px solid var(--kp-line-soft)} .kp-standings th{ font-size:11px;font-weight:900;letter-spacing:.06em;text-transform:uppercase; color:var(--kp-muted);text-align:right;white-space:nowrap; } .kp-standings th:nth-child(1),.kp-standings th:nth-child(2){text-align:left} .kp-standings td{text-align:right;font-variant-numeric:tabular-nums;font-weight:700} .kp-standings td:nth-child(1){text-align:center;width:36px;font-weight:900;color:var(--kp-muted)} .kp-standings td:nth-child(2){text-align:left;font-weight:800} .kp-standings td:last-child{font-weight:900;color:var(--kp-navy)} .kp-standings tbody tr:last-child td{border-bottom:0} .kp-standings tr.is-hot td:nth-child(1){color:var(--kp-green)} .kp-standings tr.is-warm td:nth-child(1){color:var(--kp-gold)} .kp-standings tr.is-out td:nth-child(1){color:var(--kp-red)} .kp-standings-legend{ display:flex;flex-wrap:wrap;gap:var(--kp-2) var(--kp-4); margin-top:var(--kp-3);font-size:12px;font-weight:700;color:var(--kp-muted); } .kp-standings-legend i{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:5px} .kp-scroll{overflow-x:auto} /* --- Navegador de jornadas ---------------------------------------------- */ .kp-jornadas{ display:flex;align-items:stretch;gap:var(--kp-1); padding:var(--kp-2);margin-bottom:var(--kp-4); background:var(--kp-surface);border:1px solid var(--kp-line-soft); border-radius:var(--kp-r);box-shadow:var(--kp-shadow-sm); } .kp-jornadas>a,.kp-jornadas>span{ display:grid;place-items:center;flex:none;min-width:42px;min-height:38px;padding:0 8px; border-radius:10px;font-size:12px;font-weight:900;text-decoration:none; } .kp-jornadas>a.is-open{background:#dff7e9;color:#087443;box-shadow:inset 0 0 0 1px #a7e7c1} .kp-jornadas>a.is-open[aria-current="page"]{background:var(--kp-green);color:#fff;box-shadow:none} .kp-jornadas>a.is-locked{background:var(--kp-surface-soft);color:var(--kp-muted)} .kp-jornadas>span.is-unavailable{background:#f0f2f5;color:#9aa3af;cursor:not-allowed} .kp-jornadas__arrow{ flex:none;display:grid;place-items:center;width:36px;border-radius:var(--kp-r); background:var(--kp-surface-blue);color:var(--kp-navy);font-weight:900;text-decoration:none; } .kp-jornadas__arrow:hover{background:#e2edff;text-decoration:none} .kp-jornadas__track{ /* min-width:0 es imprescindible: sin él, un flex item no se deja recortar y el track empuja la página entera hacia la derecha */ flex:1 1 auto;min-width:0; display:flex;gap:var(--kp-1);overflow-x:auto;scroll-snap-type:x mandatory; scrollbar-width:thin;padding-bottom:2px; } .kp-jornadas__track a{ flex:none;scroll-snap-align:start; display:grid;gap:2px;place-items:center;min-width:88px;padding:var(--kp-2) var(--kp-3); border-radius:var(--kp-r);text-decoration:none;color:var(--kp-muted); box-shadow:inset 0 0 0 1px var(--kp-line-soft); } .kp-jornadas__track a:hover{background:var(--kp-surface-blue);text-decoration:none} .kp-jornadas__track b{font-size:15px;font-weight:900;color:var(--kp-navy)} .kp-jornadas__track span{font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase} .kp-jornadas__track a.is-current{background:var(--kp-accent);box-shadow:none} .kp-jornadas__track a.is-current b,.kp-jornadas__track a.is-current span{color:#fff} .kp-jornadas__track a.is-played b{color:var(--kp-muted)} .kp-jornadas__track a.is-played{background:var(--kp-surface-soft)} .kp-jornadas__track a.is-locked{opacity:.55} /* --- Fila de pronóstico compacta ---------------------------------------- */ .kp-row{ display:grid;grid-template-columns:136px minmax(0,1fr) 186px 44px; align-items:center;gap:var(--kp-3); padding:var(--kp-2) var(--kp-3);margin-bottom:6px; background:var(--kp-surface);border:1px solid var(--kp-line-soft); border-radius:var(--kp-r); } .kp-row__when{display:grid;gap:1px;min-width:0} .kp-row__when b{font-size:15px;font-weight:900;color:var(--kp-navy);white-space:nowrap} .kp-row__when span{ font-size:10px;font-weight:800;letter-spacing:.04em;text-transform:uppercase; color:var(--kp-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } .kp-row__teams{ display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:var(--kp-2); font-size:15px;font-weight:800;min-width:0; } .kp-row__teams>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .kp-row__teams>span:first-child{text-align:right} .kp-row__teams em{ font-style:normal;padding:2px 7px;border-radius:5px;background:var(--kp-surface-blue); font-size:10px;font-weight:900;color:var(--kp-muted); } .kp-row__score{ padding:2px 9px;border-radius:5px;background:var(--kp-navy);color:#fff; font-size:15px;font-weight:900;font-variant-numeric:tabular-nums; } .kp-row .kp-1x2{margin:0;gap:6px} .kp-row .kp-1x2 span{min-height:44px;font-size:16px} .kp-row__note{ grid-column:1/-1;padding:0 0 var(--kp-1); font-size:13px;font-weight:700;color:var(--kp-muted); } .kp-row--locked{background:rgba(236,246,255,.85)} .kp-row--hit{box-shadow:inset 3px 0 0 var(--kp-green)} .kp-row--miss{box-shadow:inset 3px 0 0 var(--kp-red)} .kp-row--hit .kp-1x2 input:checked+span{background:var(--kp-green);color:#fff;box-shadow:none} .kp-row--miss .kp-1x2 input:checked+span{background:#ffe9ea;color:#b5121b;box-shadow:inset 0 0 0 1px rgba(225,37,47,.4)} /* Lo que ha puesto el resto del grupo, alineado bajo el 1X2 */ /* minmax(0,1fr) y flex-wrap: con seis o siete miembros, los círculos formaban un ancho mínimo mayor que la columna y empujaban la página entera */ .kp-row__group{grid-column:3;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px} .kp-row__group>span{ display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:3px; min-width:0;min-height:26px;padding:3px 4px;border-radius:5px; background:var(--kp-surface-soft);box-shadow:inset 0 0 0 1px var(--kp-line-soft); } .kp-row__group b{ display:grid;place-items:center;width:20px;height:20px;border-radius:50%; background:var(--kp-navy);color:#fff;font-size:10px;font-weight:900; } .kp-row__group b.is-me{background:var(--kp-gold);color:#4a3500} .kp-row__group>span.is-empty{color:var(--kp-muted);font-size:11px;font-weight:800} .kp-row__secret{ grid-column:3;display:flex;align-items:center;justify-content:center;gap:6px; min-height:26px;border-radius:5px;background:#ece9ff; font-size:11px;font-weight:800;color:#3a2ea8; } .kp-row__label{ grid-column:2;align-self:center;text-align:right; font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--kp-muted); } /* Botón de Pick: marca el partido donde juegas la carta de la jornada */ .kp-pickbtn{ display:grid;place-items:center;width:44px;height:44px;padding:0; border:0;border-radius:var(--kp-r);cursor:pointer; background:var(--kp-surface-blue);color:var(--kp-muted); box-shadow:inset 0 0 0 1px var(--kp-line-soft); font-size:18px;line-height:1; } .kp-pickbtn:hover{background:#e2edff;color:var(--kp-navy)} .kp-pickbtn.is-on{background:var(--kp-gold);color:#4a3500;box-shadow:none} .kp-row--pick{box-shadow:inset 0 0 0 2px var(--kp-gold)} /* Panel de elección de carta */ .kp-pickpanel{ grid-column:1/-1;margin-top:var(--kp-2);padding:var(--kp-4); border-radius:var(--kp-r);background:var(--kp-surface-soft); box-shadow:inset 0 0 0 1px var(--kp-line-soft); } .kp-pickpanel[hidden]{display:none} .kp-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:var(--kp-2);margin:var(--kp-3) 0} .kp-cardopt input{position:absolute;opacity:0;pointer-events:none} .kp-cardopt{display:block;cursor:pointer} .kp-cardopt>span{ display:flex;align-items:center;justify-content:space-between;gap:var(--kp-2); min-height:52px;padding:var(--kp-2) var(--kp-3);border-radius:var(--kp-r); background:var(--kp-surface);box-shadow:inset 0 0 0 1px var(--kp-line-soft); font-size:14px;font-weight:700; } .kp-cardopt:hover>span{background:var(--kp-surface-blue)} .kp-cardopt input:checked+span{box-shadow:inset 0 0 0 2px var(--kp-accent);background:var(--kp-surface-blue)} .kp-cardopt b{ flex:none;padding:3px 8px;border-radius:var(--kp-pill); background:var(--kp-navy);color:#fff;font-size:12px;font-weight:900;white-space:nowrap; } .kp-stake{ display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--kp-3); padding:var(--kp-3) var(--kp-4);border-radius:var(--kp-r); background:var(--kp-navy);color:#fff;font-weight:800; } .kp-stake b{font-size:18px;font-weight:900} .kp-stake .win{color:#7ef0a8} .kp-stake .lose{color:#ff9da0} /* Separador de día dentro de una jornada (18 partidos en dos noches) */ .kp-dayline{ display:flex;align-items:center;justify-content:center; height:56px;margin:var(--kp-5) 0 var(--kp-3); border:1px solid rgba(255,255,255,.42);border-radius:var(--kp-r); background:linear-gradient(90deg,#f7faff,#fff 18%,#fff 82%,#f7faff); box-shadow:var(--kp-shadow-sm); } .kp-dayline strong{ display:flex;align-items:center;height:40px;padding:0 var(--kp-4); border-radius:var(--kp-r);background:var(--kp-accent);color:#fff; font-size:14px;letter-spacing:.04em;text-transform:uppercase; } /* --- MatchCard: la unidad atómica del producto -------------------------- */ .kp-match{ padding:var(--kp-4);margin-bottom:var(--kp-3); border:1px solid var(--kp-line-soft);border-radius:var(--kp-r); background:var(--kp-surface);box-shadow:var(--kp-shadow-sm); } .kp-match__meta{ display:flex;align-items:center;justify-content:space-between;gap:var(--kp-3); margin-bottom:var(--kp-3); font-size:11px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:var(--kp-muted); } .kp-fixture{ display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:var(--kp-3); font-size:17px;font-weight:800; } .kp-fixture__home{text-align:right} .kp-fixture__away{text-align:left} .kp-fixture__vs{padding:3px 9px;border-radius:var(--kp-r);background:var(--kp-surface-blue);font-size:11px;font-weight:900;color:var(--kp-muted)} .kp-fixture__score{ padding:3px 11px;border-radius:var(--kp-r);background:var(--kp-navy);color:#fff; font-size:18px;font-weight:900;font-variant-numeric:tabular-nums; } .kp-1x2{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--kp-2);margin-top:var(--kp-4)} .kp-1x2 input{position:absolute;opacity:0;pointer-events:none} .kp-1x2 label{display:block;cursor:pointer} .kp-1x2 span{ display:flex;align-items:center;justify-content:center; min-height:var(--kp-tap);border-radius:var(--kp-r); background:var(--kp-surface-blue);box-shadow:inset 0 0 0 1px var(--kp-line-soft); font-size:17px;font-weight:900;color:var(--kp-navy); transition:background .12s ease,box-shadow .12s ease,color .12s ease; } .kp-1x2 label:hover span{background:#e2edff} .kp-1x2 input:checked+span{background:var(--kp-accent);color:#fff;box-shadow:inset 0 0 0 1px var(--kp-accent)} .kp-match--locked{background:rgba(236,246,255,.9)} .kp-match--locked .kp-1x2 label{cursor:not-allowed} .kp-match--hit{border-color:rgba(0,168,89,.5)} .kp-match--hit .kp-1x2 input:checked+span{background:var(--kp-green);color:#fff;box-shadow:none} .kp-match--miss{border-color:rgba(225,37,47,.4)} .kp-match--miss .kp-1x2 input:checked+span{background:#ffe9ea;color:#b5121b;box-shadow:inset 0 0 0 1px rgba(225,37,47,.4)} /* Reparto del grupo bajo cada partido: el motor del pique */ .kp-split{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--kp-2);margin-top:var(--kp-2)} .kp-split span{ padding:5px 0;border-radius:var(--kp-r);text-align:center; background:var(--kp-surface-soft);color:var(--kp-muted); font-size:12px;font-weight:900; } .kp-split--hidden{grid-template-columns:1fr} .kp-split--hidden span{background:#ece9ff;color:#3a2ea8} /* --- Ranking ------------------------------------------------------------ */ .kp-tabs{ display:flex;gap:var(--kp-1);padding:6px;margin-bottom:var(--kp-5); background:var(--kp-surface);border:1px solid var(--kp-line-soft); border-radius:var(--kp-r);box-shadow:var(--kp-shadow-sm); } .kp-tabs a{ flex:1;display:flex;align-items:center;justify-content:center;min-height:44px; border-radius:var(--kp-r);color:var(--kp-muted);font-size:14px;font-weight:900;text-decoration:none; } .kp-tabs a:hover{background:var(--kp-surface-blue);text-decoration:none} .kp-tabs a[aria-current]{background:var(--kp-accent);color:#fff} .kp-rank{list-style:none;margin:0;padding:0} .kp-rank li{ display:grid;grid-template-columns:42px 1fr auto auto;align-items:center;gap:var(--kp-3); min-height:62px;padding:var(--kp-3) var(--kp-4);border-bottom:1px solid var(--kp-line-soft); } .kp-rank li:last-child{border-bottom:0} .kp-rank li.is-me{background:var(--kp-surface-blue);border-radius:var(--kp-r)} .kp-rank__pos{font-size:21px;font-weight:900;text-align:center;color:var(--kp-muted)} .kp-rank li:nth-child(1) .kp-rank__pos{color:var(--kp-gold)} .kp-rank__name{font-size:17px;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .kp-rank__move{min-width:38px;text-align:right;font-size:13px;font-weight:900} .kp-rank__move--up{color:#04713e} .kp-rank__move--down{color:#b5121b} .kp-rank__move--flat{color:var(--kp-muted)} /* El numero de puntos toma el color de la competicion: rojo en LaLiga, azul en Champions. Antes era azul marino fijo en las dos y no distinguia nada. */ .kp-rank__pts{ min-width:46px;padding:6px 10px;border-radius:var(--kp-r);text-align:center; background:var(--kp-red);color:#fff;font-size:16px;font-weight:900; } html[data-comp="champions"] .kp-rank__pts{background:var(--kp-blue)} .kp-rank__pts--provisional{background:var(--kp-surface-blue);color:var(--kp-navy);box-shadow:inset 0 0 0 1px var(--kp-line)} /* --- Grupos ------------------------------------------------------------- */ .kp-group__code{ display:inline-flex;align-items:center; padding:var(--kp-2) var(--kp-4);border-radius:var(--kp-r); background:var(--kp-navy);color:#fff;font-size:18px;font-weight:900;letter-spacing:.2em; } .kp-avatars{display:flex} .kp-avatars span{ width:30px;height:30px;margin-left:-8px;border-radius:50%; display:grid;place-items:center; background:var(--kp-surface-blue);border:2px solid #fff; font-size:11px;font-weight:900;color:var(--kp-navy); } .kp-avatars span:first-child{margin-left:0} /* --- Grupo recién creado: invitar es lo único que importa --------------- */ .kp-invite{ text-align:center;padding:var(--kp-8) var(--kp-6); border:1px solid var(--kp-line-soft);border-radius:var(--kp-r-lg); background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(239,246,255,.94)); box-shadow:var(--kp-shadow); } .kp-invite__code{ display:inline-flex;align-items:center;justify-content:center; margin:var(--kp-4) 0;padding:var(--kp-4) var(--kp-8); border-radius:var(--kp-r);background:var(--kp-navy);color:#fff; font-size:clamp(28px,6vw,44px);font-weight:900;letter-spacing:.22em; } .kp-invite__actions{display:flex;flex-wrap:wrap;gap:var(--kp-3);justify-content:center;margin-top:var(--kp-2)} .kp-slots{display:flex;flex-wrap:wrap;gap:var(--kp-2);justify-content:center;margin-top:var(--kp-6)} .kp-slots span{ display:grid;place-items:center;width:40px;height:40px;border-radius:50%; border:2px dashed var(--kp-line);color:var(--kp-muted);font-size:13px;font-weight:900; } .kp-slots span.is-taken{border:2px solid var(--kp-accent);background:var(--kp-accent);color:#fff} /* Enlace de invitación: es la acción que decide si el grupo vive o muere */ .kp-linkbox{ display:flex;flex-wrap:wrap;align-items:center;gap:var(--kp-2); margin:var(--kp-4) auto 0;padding:var(--kp-2) var(--kp-2) var(--kp-2) var(--kp-4); border-radius:var(--kp-r);background:var(--kp-surface); box-shadow:inset 0 0 0 2px var(--kp-line); } .kp-linkbox code{ flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; padding:var(--kp-2) 0; font:800 clamp(15px,2vw,18px)/1.2 var(--kp-font);color:var(--kp-navy);text-align:left; } .kp-linkbox .kp-btn{min-height:44px;flex:none} @media (max-width:620px){ .kp-linkbox{flex-direction:column;align-items:stretch;padding:var(--kp-3)} .kp-linkbox code{text-align:center} .kp-linkbox .kp-btn{width:100%} } /* Qué falta para que el grupo arranque */ .kp-checklist{list-style:none;margin:0;padding:0;display:grid;gap:var(--kp-2)} .kp-checklist li{ display:flex;align-items:center;gap:var(--kp-3); padding:var(--kp-3) var(--kp-4);border-radius:var(--kp-r); background:var(--kp-surface);box-shadow:inset 0 0 0 1px var(--kp-line-soft); font-weight:700; } .kp-checklist li::before{ content:"";flex:none;width:22px;height:22px;border-radius:50%; border:2px solid var(--kp-line); } .kp-checklist li.is-done{color:var(--kp-muted)} .kp-checklist li.is-done::before{ border-color:var(--kp-green);background:var(--kp-green); background-image:linear-gradient(45deg,transparent 40%,#fff 40%,#fff 46%,transparent 46%), linear-gradient(-45deg,transparent 52%,#fff 52%,#fff 58%,transparent 58%); } .kp-checklist li.is-done span{text-decoration:line-through} /* Elegir competición dentro del grupo */ .kp-choice{ display:flex;flex-direction:column;overflow:hidden; border:1px solid var(--kp-line-soft);border-radius:var(--kp-r); background:var(--kp-surface);box-shadow:var(--kp-shadow-sm); } .kp-choice__head{ padding:var(--kp-4) var(--kp-5);color:#fff; display:flex;align-items:center;justify-content:space-between;gap:var(--kp-3); background: radial-gradient(circle at 12% 10%,var(--kp-glow,rgba(245,189,25,.7)),transparent 32%), linear-gradient(135deg,var(--kp-navy),var(--kp-blue)); } .kp-choice__head h3{font-size:21px} .kp-choice__body{display:flex;flex-direction:column;flex:1;padding:var(--kp-5)} .kp-choice__body .kp-btn{margin-top:auto} .kp-choice--on{border:2px solid var(--kp-green)} /* Fila de función premium bloqueada */ .kp-locked{ display:flex;align-items:center;justify-content:space-between;gap:var(--kp-3); padding:var(--kp-3) var(--kp-4);border-radius:var(--kp-r); background:var(--kp-surface-soft);box-shadow:inset 0 0 0 1px var(--kp-line-soft); } .kp-locked b{font-weight:900} .kp-locked span{color:var(--kp-muted);font-size:14px} /* --- Tarjeta compartible (cierre de jornada) ---------------------------- */ .kp-share{ position:relative;overflow:hidden;padding:var(--kp-6); border-radius:var(--kp-r-lg);color:#fff;box-shadow:var(--kp-shadow-lg); background: radial-gradient(circle at 15% 10%,var(--kp-comp-glow-1,rgba(245,189,25,.6)),transparent 26%), linear-gradient(160deg,#071F3F,#050505); } .kp-share>*{position:relative;z-index:1} .kp-share .kp-eyebrow{color:rgba(255,255,255,.8)} .kp-share__line{ display:flex;align-items:baseline;justify-content:space-between;gap:var(--kp-3); padding:var(--kp-2) 0;border-bottom:1px solid rgba(255,255,255,.22); } .kp-share__line:last-of-type{border-bottom:0} .kp-share__line span{color:rgba(255,255,255,.8)} .kp-share__line b{font-size:17px;font-weight:900} /* --- Formularios -------------------------------------------------------- */ .kp-field{display:block;margin-bottom:var(--kp-4)} .kp-field>span{display:block;margin-bottom:var(--kp-2);font-size:13px;font-weight:900;color:var(--kp-navy)} .kp-field input,.kp-field select{ width:100%;min-height:var(--kp-tap);padding:0 var(--kp-4); border:1px solid var(--kp-line);border-radius:var(--kp-r); background:#fff;color:var(--kp-ink);font:600 16px var(--kp-font); } .kp-field input:focus{outline:none;border-color:var(--kp-blue);box-shadow:0 0 0 3px rgba(14,79,195,.16)} /* --- Barra inferior (móvil) --------------------------------------------- */ .kp-tabbar{ position:fixed;left:0;right:0;bottom:0;z-index:30;display:none; grid-template-columns:repeat(4,1fr); background:rgba(255,255,255,.96);backdrop-filter:blur(12px); border-top:1px solid var(--kp-line-soft);padding-bottom:env(safe-area-inset-bottom); } .kp-tabbar a{ display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px; min-height:56px;color:var(--kp-muted); font-size:10px;font-weight:900;letter-spacing:.04em;text-transform:uppercase;text-decoration:none; } .kp-tabbar a[aria-current]{color:var(--kp-accent)} .kp-tabbar svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2} .kp-savebar{margin-top:var(--kp-6)} /* Guardado automático: en Champions no hay botón de guardar (18 partidos) */ .kp-autosave{ position:sticky;bottom:var(--kp-4);z-index:25; display:flex;align-items:center;justify-content:center;gap:var(--kp-2); width:fit-content;margin:var(--kp-5) auto 0;padding:var(--kp-2) var(--kp-4); border-radius:var(--kp-pill);background:var(--kp-navy);color:#fff; font-size:13px;font-weight:900;box-shadow:var(--kp-shadow); } .kp-autosave::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--kp-green)} footer.kp-footer{ margin-top:var(--kp-10);padding:var(--kp-6) var(--kp-4); border-top:1px solid var(--kp-line-soft);text-align:center; color:var(--kp-muted);font-size:13px; } /* --- Móvil -------------------------------------------------------------- */ /* En tabletas la navegación continúa dentro de la cabecera, en una segunda línea; la barra fija queda reservada exclusivamente para móvil. */ @media (min-width:761px) and (max-width:1020px){ .private-topbar{flex-wrap:wrap;gap:8px 10px} .private-comp-switch{order:0;margin:0 auto} .private-nav{order:1;width:100%;margin-left:0} } /* El menú de páginas se saca del flujo del header y flota como una isla sobre el borde inferior — el mismo patrón que Instagram o TikTok, con icono Y nombre de página (Instagram no lleva texto porque sus 5 destinos son universales; los de KickPools no lo son tanto, así que el nombre se queda). La cabecera de arriba (.private-topbar) se queda solo con marca y selector de competición. */ @media (max-width:760px){ /* Alto de la isla + aire hasta el borde. Una sola variable para que el hueco del body y el savebar no se desincronicen entre ellos. */ :root{--kp-navh:82px} body{padding-bottom:calc(var(--kp-navh) + env(safe-area-inset-bottom))} .private-nav{ position:fixed;left:50%;bottom:max(14px,env(safe-area-inset-bottom));z-index:30; transform:translateX(-50%); display:grid;grid-template-columns:repeat(5,minmax(0,1fr)); width:min(400px,calc(100% - 24px));margin:0;padding:8px 4px; border:0;border-radius:24px; background:rgba(8,31,92,.94); box-shadow:0 14px 34px rgba(7,17,38,.35),inset 0 0 0 1px rgba(255,255,255,.10); backdrop-filter:blur(20px); } .private-nav a{display:grid;place-items:center;gap:3px;min-height:52px;padding:6px 2px;border-radius:16px;color:rgba(255,255,255,.6);text-decoration:none} .private-nav a:active{background:rgba(255,255,255,.08)} .private-nav__icon{ display:grid;place-items:center; transition:color var(--kp-t-tap) var(--kp-e-out); } .private-nav__icon svg{width:20px;height:20px} .private-nav__label{ position:static;width:auto;height:auto;padding:0;margin:0;overflow:hidden;clip:auto; max-width:100%;white-space:nowrap;text-overflow:ellipsis;border:0; font-size:9.5px;font-weight:900;letter-spacing:.01em;line-height:1; } .private-nav a.is-active{color:#fff} .private-nav a.is-active .private-nav__icon{color:var(--kp-gold)} .private-topbar + .kp-page{padding-bottom:24px} } @media (max-width:760px){ .kp-page{width:calc(100% - 24px);padding-top:var(--kp-4)} .private-topbar{align-items:flex-start;flex-direction:column;width:calc(100% - 24px);padding:var(--kp-3)} .private-notifications{position:absolute;top:var(--kp-3);right:var(--kp-3);z-index:2;margin:0}.private-notifications .anuncios-alerta{width:36px;height:36px} .private-group-link{position:absolute;top:var(--kp-3);right:var(--kp-3);margin-left:0} .private-comp-switch{order:3;width:100%;margin:0;justify-content:center} .private-comp-switch a{flex:1;text-align:center} .private-brand img{width:28px;height:28px;flex-basis:28px} .kp-grid--2,.kp-grid--3{grid-template-columns:1fr} .kp-header nav{display:none} .kp-tabbar{display:grid} .kp-hero{min-height:340px;padding:var(--kp-8) var(--kp-5) var(--kp-6)} /* En móvil el acceso va primero: quien vuelve solo quiere entrar */ .kp-cover{grid-template-columns:1fr} .kp-access{order:-1;padding:var(--kp-5)} .kp-header nav.kp-header__auth{display:flex} .kp-header__auth .kp-btn{padding:0 var(--kp-3);font-size:13px} .kp-stats{grid-template-columns:1fr;gap:var(--kp-3);text-align:left} .kp-stats strong{display:inline;margin-right:var(--kp-2)} .kp-stats span{display:inline} .kp-step{padding:var(--kp-4) var(--kp-4) var(--kp-4) 64px} .kp-step::before{top:var(--kp-4);left:var(--kp-4);width:34px;height:34px;font-size:16px} .kp-final{padding:var(--kp-8) var(--kp-5)} .kp-hero__mark{font-size:130px} .kp-countdown{grid-template-columns:repeat(4,minmax(0,1fr));width:100%} .kp-fixture{font-size:15px;gap:var(--kp-2)} /* El nombre de los equipos manda: ocupa línea propia y no se recorta */ .kp-row{ grid-template-columns:minmax(0,1fr) 44px; grid-template-areas:"when pick" "teams pick" "picks picks" "note note"; gap:var(--kp-2) var(--kp-3);padding:var(--kp-3); } .kp-row__when{grid-area:when;grid-auto-flow:column;justify-content:start;gap:var(--kp-2);align-items:baseline} .kp-row__when span{max-width:none} .kp-row__teams{grid-area:teams;font-size:15px;align-self:center} .kp-row__teams>span{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.15} .kp-row__group,.kp-row__secret{grid-column:1/-1} .kp-row__label{display:none} .kp-compswitch a{padding:6px 11px;font-size:12px} .kp-brand img{height:30px} .kp-pickbtn{align-self:center} .kp-row .kp-1x2{grid-area:picks} .kp-pickbtn{grid-area:pick} .kp-row__note{grid-area:note} .kp-pickpanel{grid-area:auto;grid-column:1/-1} .kp-jornadas__track a{min-width:78px} .kp-rank li{grid-template-columns:34px 1fr auto auto;gap:var(--kp-2);padding:var(--kp-3) var(--kp-2)} .kp-savebar{ position:sticky;bottom:calc(var(--kp-navh) + env(safe-area-inset-bottom));z-index:25; margin:var(--kp-4) calc(var(--kp-3) * -1) 0;padding:var(--kp-3); background:linear-gradient(to top,var(--kp-surface-soft) 65%,transparent); } } /* ========================================================================== MOTION Reglas: solo `transform` y `opacity` (nunca box-shadow, background ni height sobre listas largas); nada por encima de 500ms; ninguna animación infinita salvo el indicador de "en directo". Las entradas se activan cuando kp-motion.js pone `.is-in` en el bloque — sin JS el contenido se ve igual, sin animar. ========================================================================== */ @keyframes kp-rise{from{opacity:0;transform:translate3d(0,14px,0)}to{opacity:1;transform:none}} @keyframes kp-pop{from{opacity:0;transform:scale(.88)}to{opacity:1;transform:scale(1)}} @keyframes kp-slide-left{from{opacity:0;transform:translate3d(-22px,0,0)}to{opacity:1;transform:none}} @keyframes kp-tap{40%{transform:scale(.94)}70%{transform:scale(1.05)}100%{transform:scale(1)}} @keyframes kp-bar-y{from{transform:scaleY(0)}to{transform:scaleY(1)}} @keyframes kp-bar-x{from{transform:scaleX(0)}to{transform:scaleX(1)}} @keyframes kp-drift{from{transform:translate3d(0,8px,0)}to{transform:translate3d(0,-8px,0)}} @keyframes kp-toast-in{from{opacity:0;transform:translate3d(0,16px,0) scale(.96)}to{opacity:1;transform:none}} /* --- Convención ---------------------------------------------------------- kp-motion.js pone `.is-in` en el CONTENEDOR cuando entra en pantalla, y aquí se anima siempre con hijo directo (`>`). Así no hay ambigüedad sobre quién lleva la clase y ninguna regla se filtra a listas anidadas. Todo cuelga de `.kp-js`: sin JS nada se esconde y la página se ve entera. */ .kp-js [data-kp-anim]{opacity:0} .kp-js .is-in>[data-kp-anim]{opacity:1;animation:kp-rise var(--kp-t-ui) var(--kp-e-out) both} .kp-js .is-in>[data-kp-anim="pop"]{animation:kp-pop var(--kp-t-ui) var(--kp-e-back) both} /* --- Primitivas compartidas (tocan las 9 pantallas a la vez) ------------ */ .kp-btn{transition:transform var(--kp-t-tap) var(--kp-e-out),filter var(--kp-t-tap) var(--kp-e-out)} .kp-btn:hover{transform:translateY(-1px)} .kp-btn:active{transform:translateY(1px) scale(.985)} .kp-card,.kp-compbox,.kp-plan,.kp-choice,.kp-group-card,.kp-history-card,.kp-result-card,.kp-admin-card{ transition:transform var(--kp-t-ui) var(--kp-e-out); } .kp-compbox:hover,.kp-group-card:hover{transform:translateY(-5px)} .kp-compbox__head{position:relative;overflow:hidden} .kp-compbox__head::after{ content:"";position:absolute;inset:0;opacity:0;pointer-events:none; background:radial-gradient(circle at 12% 10%,var(--kp-glow,rgba(245,189,25,.9)),transparent 42%); transition:opacity var(--kp-t-ui) var(--kp-e-out); } .kp-compbox:hover .kp-compbox__head::after{opacity:1} /* Navegación: pestañas, jornadas y menú privado */ .kp-tabs a,.kp-jornadas__track a,.kp-jornadas__arrow, .private-nav a,.private-comp-switch a,.kp-compswitch a{ transition:background var(--kp-t-tap) var(--kp-e-out),color var(--kp-t-tap) var(--kp-e-out); } .kp-jornadas__track a:active{transform:scale(.97)} /* Formularios */ .kp-field input,.kp-field select{ transition:border-color var(--kp-t-tap) var(--kp-e-out),box-shadow var(--kp-t-tap) var(--kp-e-out); } /* --- El gesto central: marcar un 1X2 ------------------------------------ */ /* Se cubren las dos familias: la del sistema (.kp-1x2) y la propia de la pantalla de jornada (.kp-pick), que no comparte clases con el sistema. */ .kp-1x2 span,.kp-pick span{ transition:background var(--kp-t-tap) var(--kp-e-out),color var(--kp-t-tap) var(--kp-e-out), box-shadow var(--kp-t-tap) var(--kp-e-out),transform var(--kp-t-tap) var(--kp-e-out); } .kp-1x2 label:active span,.kp-pick label:active span{transform:scale(.95)} .kp-1x2 input:checked+span,.kp-pick input:checked+span{animation:kp-tap 320ms var(--kp-e-back)} /* --- Aviso de guardado --------------------------------------------------- */ .kp-toast{transition:opacity var(--kp-t-ui) var(--kp-e-out),transform var(--kp-t-ui) var(--kp-e-out)} .kp-toast.is-visible{animation:kp-toast-in var(--kp-t-ui) var(--kp-e-back) both} .kp-autosave::before{animation:kp-pulse 1.6s ease-in-out infinite} /* --- Revelado de resultados --------------------------------------------- */ /* Cascada corta: por encima de ~1s deja de ser tensión y pasa a ser espera, así que solo entran escalonadas las 8 primeras (Champions son 18 partidos). */ .kp-js .is-in>.kp-row, .kp-js .is-in>.kp-result-card, .kp-js .is-in>.kp-match{animation:kp-slide-left var(--kp-t-big) var(--kp-e-out) both} /* El escalonado se acota a las familias que animan: si se deja en `.is-in>:nth-child(n)` se reparten retardos a cualquier hijo de cualquier contenedor marcado, y tarde o temprano eso pilla a un elemento que no toca. */ .kp-js .is-in>:is(.kp-row,.kp-result-card,.kp-match,.kp-group-card,.kp-history-list-card,.kp-history-trophy,.kp-plan,.kp-compbox):nth-child(2){animation-delay:50ms} .kp-js .is-in>:is(.kp-row,.kp-result-card,.kp-match,.kp-group-card,.kp-history-list-card,.kp-history-trophy,.kp-plan,.kp-compbox):nth-child(3){animation-delay:100ms} .kp-js .is-in>:is(.kp-row,.kp-result-card,.kp-match,.kp-group-card,.kp-history-list-card,.kp-history-trophy,.kp-plan,.kp-compbox):nth-child(4){animation-delay:150ms} .kp-js .is-in>:is(.kp-row,.kp-result-card,.kp-match,.kp-group-card,.kp-history-list-card,.kp-history-trophy,.kp-plan,.kp-compbox):nth-child(5){animation-delay:200ms} .kp-js .is-in>:is(.kp-row,.kp-result-card,.kp-match,.kp-group-card,.kp-history-list-card,.kp-history-trophy,.kp-plan,.kp-compbox):nth-child(6){animation-delay:250ms} .kp-js .is-in>:is(.kp-row,.kp-result-card,.kp-match,.kp-group-card,.kp-history-list-card,.kp-history-trophy,.kp-plan,.kp-compbox):nth-child(7){animation-delay:300ms} .kp-js .is-in>:is(.kp-row,.kp-result-card,.kp-match,.kp-group-card,.kp-history-list-card,.kp-history-trophy,.kp-plan,.kp-compbox):nth-child(n+8){animation-delay:350ms} /* Acierto y fallo: la marca lateral crece en vez de aparecer pintada */ .kp-row--hit,.kp-row--miss,.kp-match--hit,.kp-match--miss{position:relative} .kp-js .is-in>.kp-row--hit::after,.kp-js .is-in>.kp-row--miss::after{ content:"";position:absolute;left:0;top:0;bottom:0;width:3px;border-radius:3px 0 0 3px; transform-origin:top center;animation:kp-bar-y 300ms var(--kp-e-out) 260ms both; } .kp-js .is-in>.kp-row--hit::after{background:var(--kp-green)} .kp-js .is-in>.kp-row--miss::after{background:var(--kp-red)} /* --- Ranking ------------------------------------------------------------- */ .kp-js .kp-rank.is-in>li{animation:kp-rise var(--kp-t-ui) var(--kp-e-out) both} .kp-js .kp-rank.is-in>li:nth-child(2){animation-delay:60ms} .kp-js .kp-rank.is-in>li:nth-child(3){animation-delay:120ms} .kp-js .kp-rank.is-in>li:nth-child(4){animation-delay:180ms} .kp-js .kp-rank.is-in>li:nth-child(5){animation-delay:240ms} .kp-js .kp-rank.is-in>li:nth-child(n+6){animation-delay:300ms} .kp-js .kp-rank.is-in .kp-rank__move{animation:kp-pop var(--kp-t-ui) var(--kp-e-back) both;animation-delay:400ms} /* --- Barras de progreso -------------------------------------------------- */ .kp-progress>span{transform-origin:left center} .kp-js .kp-progress.is-in>span{animation:kp-bar-x var(--kp-t-big) var(--kp-e-out) both} /* --- Héroe --------------------------------------------------------------- */ .kp-js .kp-hero.is-in .kp-hero__mark{animation:kp-drift 6s var(--kp-e-out) infinite alternate} /* En propiedades sueltas, no en shorthand: `animation:` resetea animation-delay a 0 y, al tener más especificidad que los selectores de etiqueta (h1, p), se cargaba el escalonado de abajo. */ .kp-js .kp-hero.is-in>*:not(.kp-hero__mark){ animation-name:kp-rise;animation-duration:var(--kp-t-big); animation-timing-function:var(--kp-e-out);animation-fill-mode:both; } .kp-js .kp-hero.is-in>.kp-eyebrow{animation-delay:0ms} .kp-js .kp-hero.is-in>h1{animation-delay:80ms} .kp-js .kp-hero.is-in>p{animation-delay:160ms} .kp-js .kp-hero.is-in>.kp-hero__actions{animation-delay:240ms} /* --- Pasos de la portada ------------------------------------------------- */ .kp-js .kp-steps.is-in>.kp-step{animation:kp-rise var(--kp-t-ui) var(--kp-e-out) both} .kp-js .kp-steps.is-in>.kp-step:nth-child(2){animation-delay:90ms} .kp-js .kp-steps.is-in>.kp-step:nth-child(3){animation-delay:180ms} /* --- Tarjetas de grupo, historial y palmarés ----------------------------- */ .kp-js .is-in>.kp-group-card, .kp-js .is-in>.kp-history-list-card, .kp-js .is-in>.kp-history-trophy, .kp-js .is-in>.kp-plan, .kp-js .is-in>.kp-compbox{animation:kp-rise var(--kp-t-ui) var(--kp-e-out) both} /* ========================================================================== LA MONEDA Cilindro real en CSS 3D: dos caras + un canto metálico de 44 segmentos estriados, construido por js/kp-coin.js (no hay JS aquí, solo el componente visual). Gira sobre su eje vertical en bucle. El logo blanco de marca lleva fondo negro opaco en el PNG de origen: el script le fabrica el canal alfa a partir de la luminancia, así que aquí no hace falta recortar el asset. ========================================================================== */ .kp-coin{ --size:220px; --thick:16px; /* el grosor es lo que la separa de una ficha plana */ --vel:5s; /* una vuelta completa · giro lento */ width:var(--size);height:var(--size);flex:none; perspective:1000px; } .kp-coin__body{ position:relative;width:100%;height:100%; transform-style:preserve-3d; transform:rotateX(10deg); animation:kp-coin-gira var(--vel) linear infinite; } @keyframes kp-coin-gira{ from{transform:rotateX(10deg) rotateY(0deg)} to {transform:rotateX(10deg) rotateY(360deg)} } .kp-coin.is-parada .kp-coin__body{animation-play-state:paused} .kp-coin__face{ position:absolute;inset:0;border-radius:50%;overflow:hidden; display:grid;place-items:center; backface-visibility:hidden; background: radial-gradient(circle at 30% 22%,rgba(255,255,255,.26),transparent 26%), linear-gradient(148deg,#1a54ad 0%,#0e4fc3 34%,#0b3c93 62%,#081f5c 100%); box-shadow:inset 0 0 0 3px rgba(255,255,255,.16),inset 0 -8px 20px rgba(0,0,0,.45); } .kp-coin__face--a{transform:translateZ(calc(var(--thick) / 2))} .kp-coin__face--b{transform:rotateY(180deg) translateZ(calc(var(--thick) / 2))} .kp-coin__face::before{ content:"";position:absolute;inset:7%;border-radius:50%; box-shadow:inset 0 0 0 2px rgba(255,255,255,.20); } .kp-coin__face::after{ content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(122deg,transparent 36%,rgba(255,255,255,.30) 48%,transparent 60%); } .kp-coin__logo{ position:relative;z-index:1;width:74%;height:74%;object-fit:contain; filter:drop-shadow(0 2px 3px rgba(0,0,0,.45)); } .kp-coin__edge{position:absolute;inset:0;transform-style:preserve-3d} .kp-coin__edge i{position:absolute;left:50%;top:0;display:block} .kp-coin--xs{--size:26px;--thick:4px;--vel:3.2s} .kp-coin--sm{--size:56px;--thick:7px;--vel:4s} .kp-coin--lg{--size:220px;--thick:18px} /* La moneda de portada es un detalle interactivo: descansa de frente y gira sin interrupción mientras tiene hover, foco o pulsación. */ .kp-hero>.kp-coin--cover{ --size:74px; --thick:8px; --vel:1.25s; position:absolute; top:24px; right:12px; z-index:3; cursor:pointer; filter:drop-shadow(0 14px 18px rgba(0,0,0,.40)); } .kp-coin--cover .kp-coin__body{animation-play-state:paused} .kp-coin--cover:hover .kp-coin__body, .kp-coin--cover:focus .kp-coin__body, .kp-coin--cover:active .kp-coin__body{animation-play-state:running} .kp-coin--cover:focus-visible{ outline:3px solid #fff; outline-offset:5px; border-radius:50%; } @media (max-width:620px){ .kp-coin--lg{--size:170px} .kp-hero>.kp-coin--cover{ --size:58px; --thick:6px; top:16px; right:10px; } } /* VS de pincel compartido por Inicio, Pronósticos y Resultados. */ .kp-vs--brush{ display:grid!important; place-items:center; width:58px; min-width:58px; height:46px; min-height:46px; padding:0!important; overflow:visible; border:0!important; border-radius:0!important; background:transparent!important; box-shadow:none!important; color:transparent; font-size:0; line-height:0; text-shadow:none!important; } .kp-vs--brush img{ display:block; width:58px; height:46px; max-width:none; object-fit:contain; background:transparent!important; box-shadow:none!important; } .kp-row__teams>.kp-vs--brush{justify-self:center} .kp-result-score.kp-vs--brush{width:62px;min-width:62px;height:48px;min-height:48px} .kp-result-score.kp-vs--brush img{width:62px;height:48px} .kp-world-score strong.kp-vs--brush{ width:76px; min-width:76px; height:58px; min-height:58px; padding:0; background:transparent; } .kp-world-score strong.kp-vs--brush img{width:76px;height:58px} html[data-comp="laliga"] .kp-vs--brush img{filter:hue-rotate(118deg) saturate(1.5)} html[data-comp="champions"] .kp-vs--brush img{filter:none} @media(max-width:620px){ .kp-vs--brush{width:46px;min-width:46px;height:36px;min-height:36px} .kp-vs--brush img{width:46px;height:36px} .kp-result-score.kp-vs--brush{width:50px;min-width:50px;height:38px;min-height:38px} .kp-result-score.kp-vs--brush img{width:50px;height:38px} .kp-world-score strong.kp-vs--brush{width:58px;min-width:58px;height:44px;min-height:44px} .kp-world-score strong.kp-vs--brush img{width:58px;height:44px} } /* --- Accesibilidad ------------------------------------------------------- Sustituye al antiguo `*{animation:none}`, que era demasiado bruto: apagaba también el indicador de "en directo", que es información y no decoración. Con duraciones de 0.01ms se respeta la preferencia y se conserva el estado final de cada animación. */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; scroll-behavior:auto!important; } .kp-js [data-kp-anim]{opacity:1!important;transform:none!important} } /* =========================================================================== Fila de partido y tirador de jornadas -- COMPARTIDO Vive aqui, y no en un