/* ===================== SISTEMA ===================== */ :root{ --g:#070A0E; /* fondo */ --s:#0E141B; /* superficie */ --s2:#0B1016; /* superficie alterna */ --line:#1B2430; /* filete */ --tx:#EAF0F7; /* texto */ --mu:#94A6BB; /* texto secundario. Subido de #7A8A9E el 19-ago-2026: a los tamaños pequeños del nav y el pie se percibía flojo (Salva lo notó). ~7,5:1 sobre el fondo, sigue siendo azul-gris y no blanco: la jerarquía se conserva. */ --tally:#FF2D2D; /* al aire */ --amb:#FFB020; /* datos */ --ok:#25D07A; /* señal correcta */ --c:#0090D0; /* acento del canal activo */ /* Onda de señal del hueco de miniatura. Va como máscara, no como imagen: así el trazo toma el color de cada cadena en vez de uno fijo. */ /* Lo que hacía falta sacar a variable para que exista un modo claro (13-sep-2026). Eran los tres sitios donde el color del tema estaba escrito a mano: la cabecera translúcida, el velo de los modales y el grano de señal que cubre la página. Todo lo demás ya pasaba por tokens, y los oscuros que quedan sueltos son texto SOBRE color de marca —#04210f sobre el verde de señal, #04070A sobre el azul— que funciona igual con cualquier fondo. */ --cab:rgba(7,10,14,.94); --velo:var(--velo); --grano:#fff; --sombra:rgba(0,0,0,.5); /* El degradado de las miniaturas de canal va del color de la cadena a este final. En claro no puede acabar en negro casi puro o la pared de canales queda de luto en mitad de una pagina blanca. Los logos no sufren: cada uno lleva su propia cajita con fondo (sobre-claro / sobre-oscuro), asi que aclarar el degradado no los borra. */ --mini:#070B10; --mezcla:#000; /* Las veladuras que se echan sobre las tarjetas de canal para que el rótulo se lea encima del degradado. Van como componentes RGB sueltos porque se usan con seis opacidades distintas, y así basta una variable para las seis en vez de seis tokens de color. */ --vela:8,11,16; --onda:url('data:image/svg+xml;utf8,'); } /* ===================== MODO CLARO ===================== Pedido por Salva el 13-sep-2026. Se activa con data-tema="claro" en el , y el arranque lo decide en este orden: lo que el usuario eligió alguna vez, y si nunca eligió, lo que su sistema pida. No es el oscuro con los colores invertidos: los acentos son otros. El ámbar #FFB020 sobre blanco da 1,8:1 —ilegible— y el verde y el rojo de señal, parecido. Aquí bajan a versiones oscuras del mismo tono, que conservan el significado (ámbar=dato, verde=señal, rojo=al aire) y se leen. El fondo es blanco roto y no blanco puro, que cansa menos en una página que es una tabla enorme. */ :root[data-tema="claro"]{ --g:#F4F6FA; /* fondo */ --s:#FFFFFF; /* superficie */ --s2:#E9EEF5; /* superficie alterna */ --line:#D3DDE8; /* filete */ --tx:#0F1720; /* texto */ --mu:#54657A; /* texto secundario, 5,5:1 sobre el fondo */ --tally:#C81E1E; /* al aire */ --amb:#8A5A00; /* datos */ --ok:#0B7A43; /* señal correcta */ --c:#0A6FA8; /* acento del canal activo */ --cab:rgba(255,255,255,.92); --velo:rgba(15,23,32,.42); --grano:#000; --sombra:rgba(15,23,32,.18); --mini:#C3D1E0; --mezcla:#fff; --vela:236,241,247; color-scheme:light; } :root{color-scheme:dark} *{box-sizing:border-box} /* El atributo hidden lo pisa cualquier regla que declare display —le pasaba a .hd-right, que es flex y seguía enseñando un reloj parado en las páginas sin estado—. Con esto vuelve a significar lo que significa. */ [hidden]{display:none !important} html{scroll-behavior:smooth} body{ margin:0;background:var(--g);color:var(--tx); font-family:"Avenir Next Condensed","Avenir Next",Futura,"Helvetica Neue",sans-serif; -webkit-font-smoothing:antialiased;overflow-x:hidden; } body::after{ /* grano de señal sobre todo */ content:"";position:fixed;inset:0;pointer-events:none;z-index:80;opacity:.03; background-image:repeating-linear-gradient(0deg,var(--grano) 0 1px,transparent 1px 3px); } .mono{font-family:"SF Mono",ui-monospace,"Roboto Mono","Courier New",monospace} .wrap{max-width:1240px;margin:0 auto;padding:0 28px} /* ===================== CABECERA ===================== */ header{ position:sticky;top:0;z-index:60;background:var(--cab); backdrop-filter:saturate(150%) blur(12px);border-bottom:1px solid var(--line); } /* Solo el padding vertical, en longhand a propósito: el lateral lo pone .wrap, y el shorthand `padding:14px 0` lo machacaba —misma especificidad, regla posterior—. Con pantalla ancha no se veía porque el max-width centra de sobra; en cuanto el viewport bajaba, el logo y el reloj tocaban el borde mientras el resto de la página guardaba sus 28px. */ .hd{display:flex;align-items:center;gap:26px;padding-top:14px;padding-bottom:14px; flex-wrap:wrap} .logo{display:flex;align-items:center;gap:10px;font-size:1.1rem;letter-spacing:.16em; text-transform:uppercase;font-weight:600;text-decoration:none;color:var(--tx)} /* El logo es el punto rojo de siempre, con su brillo: Salva lo eligió el 3-sep-2026 (el "Tally con halo" de design/logo.html) frente al de ondas. El favicon es este mismo punto con el halo pintado como degradado. */ .rec{width:8px;height:8px;border-radius:50%;background:var(--tally); box-shadow:0 0 12px var(--tally);animation:pulse 1.8s infinite} @keyframes pulse{0%,45%{opacity:1;transform:scale(1)}55%,100%{opacity:.25;transform:scale(.8)}} nav{display:flex;gap:24px} nav a{color:var(--mu);text-decoration:none;font-size:0.88rem;letter-spacing:.15em; text-transform:uppercase;padding-bottom:3px;border-bottom:1.5px solid transparent;transition:.2s} nav a[aria-current="page"]{color:var(--tx);border-bottom-color:var(--amb)} nav a:hover{color:var(--tx)} nav a:focus-visible{outline:2px solid var(--amb);outline-offset:4px} /* Los dos rótulos de la derecha los rellena el JavaScript, y al pasar de vacío a "18 EN DIRECTO" empujaban la fila entera —con flex-wrap, a veces a otra línea—. Medido: 0,297 de CLS, el segundo peor de la web. Se reserva el hueco antes de tener el dato; sobra un par de píxeles y no salta nada. */ .hd-right{margin-left:auto;display:flex;align-items:center;gap:18px;min-height:22px} .live-count{display:flex;align-items:center;gap:7px;font-size:0.82rem;letter-spacing:.12em; text-transform:uppercase;color:var(--mu);min-width:11ch} .live-count b{color:var(--ok);font-weight:600; font-variant-numeric:tabular-nums;min-width:2ch;display:inline-block;text-align:right} .tc{font-size:0.93rem;letter-spacing:.13em;color:var(--amb);font-variant-numeric:tabular-nums; min-width:5.4ch;display:inline-block;text-align:right} /* ===================== SEÑAL ===================== Casi ninguna cadena publica imagen de lo que emite, así que este hueco está vacío la mayor parte del tiempo. Antes lo rellenaba un por canal —39 en la portada, a doble resolución y repintados al redimensionar— para acabar en un rectángulo casi negro. Ahora: color de la cadena, el título de lo que emiten y una onda de señal que avanza. Todo CSS, sin trabajo para el procesador. */ .sig{position:relative;overflow:hidden; background:linear-gradient(158deg,color-mix(in srgb,var(--c) 66%,var(--mezcla)) 0%,var(--mini) 76%)} /* Reserva para navegadores sin color-mix (Safari < 16.2): color plano oscuro. */ @supports not (background:color-mix(in srgb,red 50%,#000)){ .sig{background:linear-gradient(158deg,var(--c) -40%,var(--mini) 76%)} } .sig .onda{position:absolute;left:0;top:34%;width:200%;height:38px;z-index:1; opacity:.5;background:var(--c); -webkit-mask:var(--onda) repeat-x center/120px 40px; mask:var(--onda) repeat-x center/120px 40px; animation:onda-corre 7s linear infinite;will-change:transform} @keyframes onda-corre{to{transform:translateX(-120px)}} /* Miniatura real encima; si no carga, se retira y queda la señal debajo. */ .sig .thumb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2; animation:fadein .45s ease both} @keyframes fadein{from{opacity:0}to{opacity:1}} /* El título de lo que se emite, como imagen. Debajo de la tarjeta ya no se repite: allí va el horario, que es el dato que faltaba. */ .sig .prg{position:absolute;left:13px;right:13px;top:32px;z-index:4;margin:0; font-size:clamp(.95rem,1.35vw,1.12rem);font-weight:800;line-height:1.12; letter-spacing:-.022em;text-transform:uppercase;color:#fff; text-shadow:0 2px 16px rgba(0,0,0,.65); display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} .sig .vig{position:absolute;inset:0;pointer-events:none;z-index:3; background:radial-gradient(130% 90% at 50% 0%,transparent 35%,rgba(var(--vela),.7) 100%)} /* Quien pide menos movimiento en su sistema no ve la onda moverse. */ @media (prefers-reduced-motion:reduce){ .sig .onda{animation:none} } .onair{position:absolute;top:10px;left:10px;z-index:4;display:flex;align-items:center;gap:6px; font-size:0.78rem;letter-spacing:.17em;text-transform:uppercase;color:#fff; background:rgba(255,45,45,.92);padding:3px 8px;font-weight:600} .onair i{width:4px;height:4px;background:#fff;border-radius:50%;animation:pulse 1.8s infinite} .mark{display:inline-flex;align-items:center;justify-content:center;font-weight:700; color:#fff;line-height:1;flex:0 0 auto;box-shadow:0 3px 12px rgba(0,0,0,.55);border-radius:3px} .mark{aspect-ratio:1;border-radius:9px} .mark.sm{width:30px;height:30px;font-size:0.82rem} .mark.md{width:54px;height:54px;font-size:1.25rem} .mark.lg{width:70px;height:70px;font-size:1.8rem} /* Distintivo del canal: cápsula cuadrada con el logotipo dentro. El fondo no es decorativo. Los logos vienen sin fondo propio y hay que darles uno que contraste, pero cuál toca no se puede decidir por fuente ni a ojo: Neox es amarillo y Nova rosa —tienen color y aun así desaparecen sobre blanco—, mientras que Mega y Antena 3 son oscuros y piden lo contrario. Lo decide el brillo medido de cada fichero, en scripts/logos.py. */ .logo-wrap{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto; aspect-ratio:1;border-radius:9px;overflow:hidden} /* Lo primero que se intenta es el color de la propia cadena: da identidad y hace la parrilla legible de un vistazo. Solo se usa cuando el logotipo contrasta con él, cosa que decide el generador midiéndolo. */ .logo-wrap.sobre-canal{background:var(--c); box-shadow:0 3px 14px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.20)} .logo-wrap.sobre-oscuro{background:#0B1016; box-shadow:0 3px 14px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.13)} .logo-wrap.sobre-claro{background:#fff; box-shadow:0 3px 14px rgba(0,0,0,.5), inset 0 0 0 1px rgba(0,0,0,.14)} .logo-wrap.sm{width:30px;height:30px;padding:4px} .logo-wrap.md{width:54px;height:54px;padding:8px} .logo-wrap.lg{width:70px;height:70px;padding:11px} /* Dimensiones explícitas: muchos SVG no declaran tamaño intrínseco y con 'auto' el navegador les da 300x150 por defecto, desbordando la cápsula. Con 100% + contain siempre encajan enteros, sean SVG o PNG. */ .logo-img{display:block;width:100%;height:100%;object-fit:contain} /* Botón de acceso directo a la emisión, en la esquina de cada monitor. */ .go-live{position:absolute;bottom:9px;right:9px;z-index:5;width:32px;height:32px; display:flex;align-items:center;justify-content:center;font-size:0.82rem; background:var(--velo);color:#fff;border:1px solid rgba(255,255,255,.28); border-radius:50%;opacity:0;transform:scale(.85);transition:.22s;backdrop-filter:blur(4px)} .cell:hover .go-live,.cell:focus-within .go-live{opacity:1;transform:scale(1)} .go-live:hover{background:var(--c);border-color:var(--c)} /* ===================== PORTADA ===================== */ /* El "monitor de programa": comparte columna con la pared de preview. */ .hero{position:relative;display:grid;grid-template-columns:1fr 264px;gap:1px; background:var(--line);border:1px solid var(--line);min-height:414px; margin:26px 0 0;overflow:hidden} /* En móvil el monitor pasa debajo y antes se soltaba el min-height. Pero #heroMain nace vacío y lo llena el JavaScript, así que sin altura reservada todo lo de abajo daba un salto: 0,755 de CLS en
, el peor de la web. Se reserva aquí lo que va a ocupar. */ @media(max-width:900px){ .hero{grid-template-columns:1fr;min-height:0} .hero-main{min-height:400px} } .hero-main{position:relative;display:flex;align-items:stretch;overflow:hidden;background:var(--s2)} .hero-main .sig{position:absolute;inset:0} /* Oscurecido global suave: la imagen sigue viéndose, solo baja un punto. */ .veil{position:absolute;inset:0;background: linear-gradient(100deg, rgba(var(--vela),.95) 0%, rgba(var(--vela),.80) 42%, rgba(var(--vela),.55) 70%, rgba(var(--vela),.48) 100%), radial-gradient(120% 115% at 12% 50%, rgba(var(--vela),.55), transparent 72%)} /* Panel de lectura: territorio sólido para el texto, con corte en diagonal hacia la imagen. Así el título nunca cae encima de los rótulos del canal. */ .hero-txt{ position:relative;z-index:5;padding:38px 40px 32px;width:min(60%,600px); align-self:stretch;display:flex;flex-direction:column;justify-content:flex-end; background:linear-gradient(100deg, rgba(var(--vela),.72) 0%, rgba(var(--vela),.55) 55%, rgba(var(--vela),.22) 82%, rgba(var(--vela),0) 100%); } @media(max-width:900px){ .hero-txt{width:100%;align-self:auto;padding-top:120px; background:linear-gradient(0deg, rgba(9,13,18,.985) 0%,rgba(9,13,18,.95) 62%,rgba(9,13,18,.55) 100%)} } .hero-txt>*{animation:rise .6s cubic-bezier(.2,.75,.3,1) backwards} @keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}} .eyebrow{display:flex;align-items:center;gap:13px;margin-bottom:16px;animation-delay:.05s} .eyebrow .lbl{font-size:0.8rem;letter-spacing:.22em;text-transform:uppercase;color:var(--amb)} .eyebrow .lbl b{color:var(--tx);font-weight:600} /* La miniatura del héroe se ve, pero cede el protagonismo al panel de lectura. */ .hero-main .sig img{filter:blur(20px) saturate(1.5) brightness(.66); transform:scale(1.14);transform-origin:center} h1.now{font-size:clamp(2rem,4.4vw,3.35rem);font-weight:700;line-height:.98; letter-spacing:-.028em;margin:0 0 14px;text-wrap:balance;animation-delay:.12s} .tags{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px;animation-delay:.18s} .tag{font-size:0.8rem;letter-spacing:.13em;text-transform:uppercase;color:#A8B6C6; border:1px solid #2A3543;padding:5px 11px;background:rgba(14,20,27,.92)} .tag.hot{color:var(--amb);border-color:rgba(255,176,32,.55);background:rgba(255,176,32,.09)} .prog{max-width:400px;margin-bottom:24px;animation-delay:.24s} .track{height:3px;background:rgba(255,255,255,.1);position:relative;overflow:hidden} .fill{position:absolute;inset:0 auto 0 0;background:var(--c);transition:width 1s linear} .fill::after{content:"";position:absolute;right:-1px;top:-4px;bottom:-4px;width:2px; background:#fff;box-shadow:0 0 9px #fff} .times{display:flex;justify-content:space-between;margin-top:9px;font-size:0.82rem; letter-spacing:.08em;color:#9FADBE;font-variant-numeric:tabular-nums} .times .pc{color:var(--tx);font-weight:600} .acts{display:flex;gap:11px;flex-wrap:wrap;animation-delay:.3s} .btn{display:inline-flex;align-items:center;gap:9px;text-decoration:none;padding:13px 24px; font-size:0.85rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600; transition:transform .2s,box-shadow .2s,border-color .2s} .btn-p{background:var(--c);color:#04070A} .btn-p:hover{transform:translateY(-2px);box-shadow:0 10px 28px -10px var(--c)} .btn-s{border:1px solid var(--line);color:var(--tx)} .btn-s:hover{border-color:var(--tx)} .btn:focus-visible{outline:2px solid var(--amb);outline-offset:3px} /* --- monitor de señal: nuestro verificador, hecho visible --- */ .monitor{background:var(--s2);padding:22px 20px;display:flex;flex-direction:column;gap:20px} .mon-h{font-size:0.8rem;letter-spacing:.22em;text-transform:uppercase;color:var(--mu); display:flex;align-items:center;justify-content:space-between} .mon-h .dot{width:6px;height:6px;border-radius:50%;background:var(--ok); box-shadow:0 0 9px var(--ok);animation:pulse 2.4s infinite} .vu{display:flex;gap:2px;align-items:flex-end;height:52px} .vu i{flex:1;background:var(--ok);opacity:.3;border-radius:1px; animation:vu 1.3s ease-in-out infinite} @keyframes vu{0%,100%{height:18%;opacity:.3}50%{height:100%;opacity:.9}} .mon-row{display:flex;justify-content:space-between;align-items:baseline; padding:9px 0;border-bottom:1px solid var(--line);font-size:0.85rem} .mon-row:last-of-type{border-bottom:0} .mon-row span{color:var(--mu);letter-spacing:.05em} /* Mismo caso que la cabecera: nacen con un guion y acaban en un número. Diez caracteres, no seis: el peor caso no es "67/67" sino el "hace 1 min" de la última comprobación, que además se repinta cada segundo. Con seis se quedaba corto, el texto envolvía, la fila crecía de alto y empujaba el panel entero — 0,229 de CLS medido sobre visitas reales el 14-ago-2026, el único que quedaba en rojo. `nowrap` cierra la puerta a que vuelva. */ .mon-row b{font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:.03em; min-width:10ch;display:inline-block;text-align:right;white-space:nowrap} .mon-foot{font-size:0.8rem;color:var(--mu);line-height:1.5;letter-spacing:.02em; border-top:1px solid var(--line);padding-top:14px} /* ===================== SECCIONES ===================== */ section{padding:46px 0 8px} .sh{display:flex;align-items:baseline;gap:14px;margin-bottom:22px;flex-wrap:wrap} .sh h2{font-size:1.15rem;letter-spacing:.14em;text-transform:uppercase;margin:0;font-weight:600} .sh .cnt{font-size:0.82rem;color:var(--mu);letter-spacing:.1em} .sh .more{margin-left:auto;font-size:0.82rem;letter-spacing:.14em;text-transform:uppercase; color:var(--mu);text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:2px} .sh .more:hover{color:var(--tx);border-color:var(--amb)} /* Rótulo de la pared de canales solo por internet, que va bajo la principal. */ .sh-net{margin-top:34px} /* pared de monitores */ .wall{display:grid;grid-template-columns:repeat(auto-fill,minmax(228px,1fr));gap:14px} .cell{background:var(--s2);border:1px solid var(--line);cursor:pointer;text-align:left; padding:0;color:inherit;font:inherit;display:block;width:100%; transition:border-color .25s,transform .25s;animation:rise .5s cubic-bezier(.2,.75,.3,1) backwards} .cell:hover{border-color:var(--c);transform:translateY(-3px)} .cell[aria-pressed="true"]{border-color:var(--c);box-shadow:0 0 0 1px var(--c) inset} .cell:focus-visible{outline:2px solid var(--amb);outline-offset:2px} .cell .sig{aspect-ratio:16/9} .cell:hover .sig .thumb{transform:scale(1.04)} .cell .sig .thumb{transition:transform .6s cubic-bezier(.2,.75,.3,1)} /* Composición espejada el 19-ago-2026 a petición de Salva: el logotipo, grande y abajo a la IZQUIERDA; el chip de directo y el título, arriba a la DERECHA. Los elementos que ocupaban esas esquinas se intercambian: el ▶ de ir al directo baja al hueco del logo y el corazón de favorita sube a la izquierda. Solo en tarjetas (.cell): los heros no cambian. */ .cell .lgm{position:absolute;bottom:10px;left:10px;z-index:5; display:flex;align-items:center;gap:10px;right:52px} /* El nombre del canal o emisora, de rótulo junto al logo (pedido por Salva el 19-ago): la imagen sola no dice quién emite. En radio es un h3 con el enlace a la ficha — el mismo enlace indexable que antes iba de título arriba, mudado, no perdido. */ .lgm-n{margin:0;color:#fff;font-weight:700;font-size:1rem;line-height:1.1; letter-spacing:-.01em;text-shadow:0 2px 12px rgba(0,0,0,.75)} .lgm-n a{color:inherit;text-decoration:none} .lgm-n a:hover{text-decoration:underline} .cell .onair{left:auto;right:10px} .cell .sig .prg{text-align:right} .cell-b{padding:13px 14px 15px} .cell-ch{font-size:0.8rem;letter-spacing:.13em;text-transform:uppercase;color:var(--mu); margin-bottom:5px;display:flex;justify-content:space-between} /* .radio-meta es el mismo chip en la tarjeta de radio (_tarjeta_emisora): comparten clase de estado, no contenedor, así que hace falta listar los dos. Sin el segundo selector, el chip de radio queda sin colorear — hereda el gris de texto por defecto y parece un fallo mudo. */ .cell-ch .ok,.radio-meta .ok{color:var(--ok)} /* "Hay que salir a verlo/oírlo": ni bien ni mal, solo distinto — el mismo ámbar que ya usa la web para lo destacado, no un color de alarma nuevo. */ .cell-ch .fuera,.radio-meta .fuera{color:var(--amb)} /* El botón de estado de la pared de TV (variante D, elegida por Salva 20-ago-2026): ya no es un puntito junto al nombre, es un botón de verdad que ocupa el ancho de la tarjeta. La forma dice el tipo de acción antes de leer la palabra — relleno sólido como el propio play para lo reproducible, contorno para lo que es una puerta de salida, no un error. Reutiliza los mismos .ok/.fuera/.mal que el chip de radio, solo que aquí con más peso. */ .btn-estado{display:block;text-align:center;font-size:0.8rem;font-weight:700; letter-spacing:.02em;padding:7px 0;border-radius:5px;margin:9px 0 0} .btn-estado.ok{background:var(--ok);color:#04210f} .btn-estado.fuera{background:transparent;border:1.5px solid var(--amb);color:var(--amb)} .btn-estado.mal{background:transparent;border:1.5px solid #3A414B;color:#7C8898} /* Respiro de verdad entre el botón y la barra de progreso: antes se tocaban y Salva lo vio "horrible" (20-ago). Solo en la tarjeta: el .track del hero vive en su propio .prog, con su propio margen. */ .cell-b .track{margin-top:10px} /* Canales de emisión continua (DW, France 24...): sin parrilla que mostrar, ni guiones ni porcentajes huérfanos — una frase muda, en el mismo sitio que ocuparía la barra, para que el pie nunca quede vacío. */ .cell-continua{margin-top:10px;font-size:0.78rem;color:#5F6E80;letter-spacing:.04em; text-align:center} .cell-t{font-size:.98rem;font-weight:600;line-height:1.22;margin:0 0 11px; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.4em} .cell-r{display:flex;justify-content:space-between;font-size:0.8rem;color:var(--mu); margin-top:8px;font-variant-numeric:tabular-nums;letter-spacing:.05em} /* guía: a continuación */ .strip{display:flex;gap:12px;overflow-x:auto;padding-bottom:14px;scrollbar-width:thin} .slot{flex:0 0 214px;background:var(--s2);border:1px solid var(--line);padding:15px 16px; transition:border-color .25s,background .25s;cursor:pointer} .slot:hover{border-color:var(--amb);background:var(--s)} .slot .h{font-size:1.5rem;font-weight:700;color:var(--amb);font-variant-numeric:tabular-nums; letter-spacing:-.01em;margin-bottom:8px} .slot .p{font-size:0.97rem;line-height:1.3;margin-bottom:10px;min-height:2.5em} .slot .c{display:flex;align-items:center;gap:8px;font-size:0.8rem;letter-spacing:.11em; text-transform:uppercase;color:var(--mu)} /* dónde ver */ .ev{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px} .evc{background:var(--s2);border:1px solid var(--line);padding:18px 18px 16px; display:flex;flex-direction:column;gap:12px;transition:border-color .25s} .evc:hover{border-color:var(--c)} .evc .top{display:flex;align-items:center;justify-content:space-between;gap:10px} .evc .comp{font-size:0.8rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mu)} .evc .when{font-size:0.82rem;color:var(--amb);font-variant-numeric:tabular-nums;letter-spacing:.06em} .evc h3{font-size:1.06rem;font-weight:600;margin:0;line-height:1.25} /* ===================== MARCADOR DEL PARTIDO ===================== Los dos equipos, con su escudo, arriba de la página de "dónde ver". El hueco del escudo tiene tamaño fijo y se reserva aunque el escudo no haya cargado —o no lo tengamos—, para que el bloque no dé un salto. */ .marcador{margin:22px 0 26px;padding:22px 18px 26px;background:var(--s2); border:1px solid var(--line)} .marcador .enfrentamiento{display:flex;align-items:center;justify-content:center; gap:clamp(16px,5vw,54px)} /* El logotipo de la competición va sobre pastilla clara. LaLiga lo publica en tinta azul casi negra y no edita versión negativa, así que sobre nuestro fondo oscuro se perdería; recolorear una marca ajena es otra cosa distinta de reproducirla, así que se le da el fondo con el que su titular la usa. */ .marcador .competicion{display:flex;justify-content:center;margin-bottom:20px} .marcador .competicion img{height:34px;width:auto;max-width:min(200px,60%); object-fit:contain;background:#fff;border-radius:6px;padding:7px 14px} .marcador .equipo{display:flex;flex-direction:column;align-items:center;gap:12px; flex:1 1 0;min-width:0;max-width:230px} .marcador .escudo-hueco{width:64px;height:64px;display:flex; align-items:center;justify-content:center} /* Halo tenue en lugar de fondo claro. Medido contra los 42 escudos: sobre nuestro fondo oscuro solo cuatro bajan de 3:1 —el Dépor se queda en 1,44 con su azul marino—, pero sobre blanco fallarían catorce, porque la mayoría son de colores vivos con filete dorado. Cambiar el fondo empeora el conjunto para arreglar cuatro. El halo sigue el contorno del escudo (drop-shadow respeta la transparencia), se aplica igual a todos, y despega del fondo al que lo necesita sin tocar al que ya se veía bien. */ .marcador .escudo{width:64px;height:64px;object-fit:contain; filter:drop-shadow(0 0 1px rgba(233,240,247,.55)) drop-shadow(0 0 4px rgba(233,240,247,.22))} .marcador .equipo span{font-size:0.97rem;letter-spacing:.04em;text-align:center; text-wrap:balance;line-height:1.15} .marcador .vs{font-size:1.5rem;color:var(--mu);flex:0 0 auto} @media(max-width:520px){ .marcador{padding:20px 10px} .marcador .escudo-hueco,.marcador .escudo{width:52px;height:52px} .marcador .equipo span{font-size:0.88rem} } .evc .where{display:flex;align-items:center;gap:9px;padding-top:12px;border-top:1px solid var(--line)} .evc .where small{font-size:0.8rem;letter-spacing:.13em;text-transform:uppercase;color:var(--mu)} .evc .where b{font-size:0.93rem;font-weight:600} /* Reproductor propio, cuando el emisor publica la emisión en abierto */ .player{margin:26px 0 0;border:1px solid var(--line);background:#04070A; box-shadow:0 0 0 1px var(--c) inset} .player video{display:block;width:100%;aspect-ratio:16/9;background:#04070A} /* Mando de calidad. El consumo por hora va al lado de cada opción porque es el dato que decide de verdad cuando se ve la tele con datos móviles. */ .calidad{margin:10px 0 0;display:flex;align-items:center;gap:10px;flex-wrap:wrap} .calidad label{font-size:0.8rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mu)} .calidad select{background:var(--s2);color:var(--tx);border:1px solid var(--line); padding:5px 9px;font:inherit;font-size:0.88rem;border-radius:4px;cursor:pointer} .calidad select:hover{border-color:var(--c)} .calidad select:focus-visible{outline:2px solid var(--amb);outline-offset:2px} .cal-nota{font-size:0.82rem;color:#5F6E80} /* Ámbito de la señal: lo declara el emisor, se avisa antes de que falle */ .geo-nota{margin:10px 0 0;font-size:0.85rem;color:#5F6E80;display:flex;gap:7px;align-items:center} .geo-nota::before{content:"";width:5px;height:5px;border-radius:50%; background:var(--c);flex:none} /* Reproducción externa: el emisor no publica la señal o la protege */ .externa{margin:26px 0 0;border:1px solid var(--line);background:var(--s2); padding:28px 30px 26px;position:relative;overflow:hidden} .externa::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--c)} .externa-lbl{font-size:0.8rem;letter-spacing:.22em;text-transform:uppercase; color:var(--c);margin-bottom:12px;font-weight:600} .externa h2{font-size:clamp(1.2rem,2.6vw,1.75rem);font-weight:700;margin:0 0 12px; letter-spacing:-.018em;text-wrap:balance} .externa p{color:var(--mu);line-height:1.62;margin:0 0 20px;max-width:62ch;font-size:0.97rem} .externa-nota{font-size:0.85rem;margin:16px 0 0 !important;color:#5F6E80} /* Cabeceras de las páginas de sección */ .page-head{padding:38px 0 26px;border-bottom:1px solid var(--line);margin-bottom:30px} .page-head h1{font-size:clamp(1.8rem,4vw,2.7rem);font-weight:700;letter-spacing:-.025em; margin:0 0 10px;text-wrap:balance} .page-head p{color:var(--mu);margin:0;max-width:60ch;line-height:1.6;font-size:.98rem} .vacio{color:var(--mu);padding:40px 0;font-size:0.97rem} .btn-sm{padding:9px 16px;font-size:0.8rem;align-self:flex-start;margin-top:2px} /* Parrilla completa: una fila por canal, franjas en horizontal. La escribe el servidor en HTML —es contenido, no adorno—, y el cliente solo marca con data-live cuál está en antena. */ /* padding:0 explícito: cada carril es un
y heredaría los 46px que separan las secciones de una página, dejando un hueco por canal. */ .g-lane{display:grid;grid-template-columns:180px 1fr;border-bottom:1px solid var(--line); min-width:min-content;padding:0} .g-lane:first-child{border-top:1px solid var(--line)} .g-name{margin:0;padding:15px 14px;border-right:2px solid var(--line);display:flex; align-items:center;gap:10px;font-size:0.97rem;font-weight:600;position:sticky;left:0; background:var(--g);z-index:2} .g-name a{color:var(--tx);text-decoration:none} .g-name a:hover{color:var(--amb)} .g-slots{display:flex;overflow-x:auto;scrollbar-width:thin;list-style:none;margin:0;padding:0} .g-slot{flex:0 0 205px;border-left:1px solid var(--line);padding:14px 15px; transition:background .18s} .g-slot:hover{background:var(--s2)} .g-slot[data-live="1"]{background:var(--s);box-shadow:inset 3px 0 0 var(--c)} .g-h{display:block;font-size:0.85rem;color:var(--amb);font-variant-numeric:tabular-nums; letter-spacing:.06em;margin-bottom:5px} .g-t{display:block;font-size:0.93rem;line-height:1.3} /* El título de la parrilla, en tres piezas (13-sep-2026). Arriba el rótulo de continuidad —"Me caso en la 1", "Home cinema"—, que es del canal y no de lo que echan; en el medio la película o el programa; debajo el capítulo. La jerarquía se marca con tamaño y color, no con filetes ni barras laterales. */ .g-ses{display:block;font-size:0.8rem;letter-spacing:.07em;text-transform:uppercase; color:var(--mu);margin-bottom:2px;line-height:1.25} .g-sub{display:block;font-size:0.85rem;color:var(--mu);line-height:1.35;margin-top:2px} /* La carátula y el texto van uno al lado del otro; sin carátula, el texto ocupa la línea entera sin dejar hueco. */ /* La carátula ocupa la celda de arriba abajo y el texto va al lado, con la hora ya en su columna (Salva, 13-sep-2026). Antes la hora cruzaba la celda entera por encima y empujaba la carátula hacia abajo, que quedaba flotando en medio. Los márgenes negativos se comen el padding del
  • para que la carátula llegue de verdad al borde: sin ellos hay catorce píxeles de fondo arriba y abajo y ya no parece una carátula, parece una pegatina. `object-fit:cover` sobre un ancho fijo y un alto elástico: a la altura habitual de una celda el recorte es de unos pocos píxeles, porque 46 de ancho contra ~70 de alto anda muy cerca del 2:3 de un póster. */ /* Posicionada, no en rejilla. Se probó primero con grid-row:1/-1 y align-self:stretch, que es lo que uno escribiría, y la carátula salía de 18px en una celda de 74: una tiene proporción propia y el estirado de rejilla no la vence. Anclada arriba y abajo sí llega de un borde al otro, y el texto le deja sitio con el padding izquierdo. */ /* Los tres contextos nombrados y no solo `.g-slot`: en la rejilla manda `.g-tabla .g-slot`, que va más abajo en este fichero y con la misma especificidad se llevaba el padding —la hora acababa impresa encima de la carátula—. Y `height:100%` explícito, porque una colocada con top y bottom pero height:auto se queda en su proporción natural: salía de 69px en una celda de 74 y no llegaba al borde. */ .g-slot:has(.g-cart), .g-tabla .g-slot:has(.g-cart), .canal-parrilla .g-slot:has(.g-cart){position:relative;padding-left:60px} .g-slot:has(.g-cart) .g-cart, .g-tabla .g-slot:has(.g-cart) .g-cart, .canal-parrilla .g-slot:has(.g-cart) .g-cart{position:absolute;left:0;top:0; bottom:0;width:46px;height:100%;border-radius:0} .g-cart{border-radius:3px;display:block;background:var(--s2);object-fit:cover} .g-cuerpo{min-width:0} /* El desplegable de la emisión. Sustituye al globo flotante del 3-sep: se abre una celda DEBAJO del carril del canal y se queda abierta hasta que se pulsa otra, que es como lo pidió Salva el 13-sep-2026. Se anima con grid-template-rows de 0fr a 1fr, que es la única forma de transicionar hasta "lo que mida el contenido" sin fijar una altura a mano ni medirla con JavaScript. */ .g-det{grid-column:1/-1;display:grid;grid-template-rows:0fr; position:sticky;left:0;width:100%;max-width:100vw; transition:grid-template-rows .26s cubic-bezier(.4,0,.2,1); background:var(--s);border-top:1px solid var(--line)} .g-det.abierta{grid-template-rows:1fr} .g-det>div{overflow:hidden} .gd-in{display:flex;gap:16px;padding:16px 18px;align-items:flex-start} .g-det:not(.abierta) .gd-in{padding-top:0;padding-bottom:0} /* 104px era el tamaño de una miniatura, no de una carátula: en un desplegable que ocupa el ancho de la pantalla se quedaba en nada al lado de la sinopsis (Salva, 13-sep-2026). 168 es lo que cabe sin empujar el texto por debajo de las 60 columnas de lectura. */ .gd-cart{flex:0 0 168px;border-radius:4px;display:block;background:var(--s2); /* `height:auto` obligatorio: el lleva width y height en el HTML —que están ahí para reservar el hueco y no mover la página al cargar—, y al ensancharlo por CSS sin soltar el alto la carátula salía de 168x156 en vez de 168x252, o sea aplastada. Se vio midiéndola, no mirándola: a ojo pasaba por buena. */ height:auto;aspect-ratio:2/3;object-fit:cover} .gd-txt{min-width:0;flex:1} .gd-ses{font-size:0.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--mu); margin:0 0 3px} .gd-t{font-size:1.12rem;margin:0 0 4px;line-height:1.25} .gd-h{font-size:0.88rem;color:var(--amb);font-variant-numeric:tabular-nums;margin:0 0 2px} .gd-meta{font-size:0.85rem;color:var(--mu);margin:0 0 8px} /* La sinopsis es lo único que se lee de corrido aquí dentro: se le da tamaño de lectura y aire entre líneas, no de anotación al margen. */ .gd-si{font-size:1rem;line-height:1.65;margin:0 0 10px;max-width:64ch;color:var(--tx)} .gd-rep{font-size:.88rem;color:var(--mu);margin:0 0 10px;max-width:64ch} .gd-fuente{font-size:.8rem;color:var(--mu);margin:0 0 10px;opacity:.85} .gd-fuente a{color:var(--mu)} .gd-acts{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:0} .gd-lnk{font-size:0.85rem;color:var(--mu)} /* La campanita. Va de secundaria, con filete y sin relleno: la acción que manda sigue siendo ver la tele, no apuntarlo para luego. */ .gd-avisar{font:inherit;font-size:0.85rem;letter-spacing:.04em;cursor:pointer; background:none;color:var(--tx);border:1px solid var(--line); padding:9px 14px;display:inline-flex;align-items:center;gap:7px; transition:border-color .18s,color .18s} .gd-avisar:hover{border-color:var(--amb);color:var(--amb)} .gd-avisar.hecho{border-color:var(--ok);color:var(--ok);cursor:default} .gd-x{margin-left:auto;background:none;border:0;color:var(--mu);cursor:pointer; font-size:1rem;line-height:1;padding:4px 6px} .gd-x:hover{color:var(--tx)} .gd-vivo{display:inline-block;font-size:0.8rem;letter-spacing:.06em;text-transform:uppercase; color:var(--c,var(--amb));font-weight:600} .g-slot.abierta{background:var(--s2);box-shadow:inset 0 -2px 0 var(--c,var(--amb))} @media (max-width:560px){ .gd-in{gap:12px;padding:13px 14px} /* En el móvil la carátula no compite con la sinopsis, se pone encima: a 78px de ancho no se distinguía la película y robaba media línea de texto a un ancho donde cada línea cuenta. */ .gd-in{flex-direction:column} .gd-cart{flex-basis:auto;width:132px;align-self:flex-start} } .g-wrap{overflow-x:auto} .vacio{color:var(--mu);padding:18px 0} /* En la ficha de un canal la parrilla es la de ese canal y hay sitio de sobra: se muestra en rejilla, que se lee mejor que una tira horizontal. */ .canal-parrilla{display:block;border:0;min-width:0} .canal-parrilla .g-slots{display:grid;overflow:visible; grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:1px;background:var(--line); border:1px solid var(--line)} .canal-parrilla .g-slot{flex:none;border-left:0;background:var(--g);padding:14px 15px} .canal-parrilla .g-slot[data-live="1"]{background:var(--s)} footer{margin-top:60px;border-top:1px solid var(--line);padding:26px 0 46px} .ft{display:flex;gap:20px;justify-content:space-between;flex-wrap:wrap; font-size:0.85rem;color:var(--mu);line-height:1.65;letter-spacing:.03em} .ft p{margin:0;max-width:56ch} .ft a{color:var(--mu)} @media (prefers-reduced-motion: reduce){ *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important; transition-duration:.001ms !important} html{scroll-behavior:auto} } /* Radio: la tarjeta lleva su propio reproductor, no lleva a ningún sitio. */ .cell.radio{cursor:default} .cell.radio:hover{transform:none} .cell.radio .radio-mando{margin-top:2px} .radio-meta{display:flex;align-items:center;gap:10px;margin-top:11px; font-size:0.8rem;letter-spacing:.12em;text-transform:uppercase; color:var(--mu);white-space:nowrap;overflow:hidden} .radio-meta .geo{color:#5F6E80} .cell.radio .sig{aspect-ratio:16/7} .cell.radio audio{width:100%;margin-top:11px;height:34px} .cell.radio .cell-t{min-height:0;margin-bottom:0;font-size:1.02rem} /* Aviso de cookies: una franja discreta abajo, sin tapar el contenido. Nada de muros: la primera visita tiene que ser limpia. */ .ck{position:fixed;left:0;right:0;bottom:0;z-index:90;display:none; align-items:center;gap:18px;padding:14px 26px;background:var(--velo); border-top:1px solid var(--line);backdrop-filter:blur(10px); font-size:0.88rem;color:var(--mu);flex-wrap:wrap} .ck.on{display:flex;animation:ckUp .35s cubic-bezier(.2,.75,.3,1) both} @keyframes ckUp{from{transform:translateY(100%)}to{transform:none}} .ck p{margin:0;flex:1;min-width:240px;line-height:1.5} .ck a,.ck button.lnk{color:var(--mu);text-decoration:underline;background:none; border:0;font:inherit;cursor:pointer;padding:0} .ck a:hover,.ck button.lnk:hover{color:var(--tx)} .ck .ok{background:#22C55E;color:#062012;border:0;font:inherit;font-weight:700; padding:11px 30px;border-radius:6px;cursor:pointer;letter-spacing:.02em; transition:background .18s,transform .18s} .ck .ok:hover{background:#16A34A;transform:translateY(-1px)} .ck .ok:focus-visible,.ck button.lnk:focus-visible{outline:2px solid var(--amb);outline-offset:3px} /* Documentos legales y de servicio: pensados para leerse, no para escanearse. */ .doc{max-width:68ch;padding:44px 0 20px} .doc h1{font-size:clamp(1.9rem,4vw,2.7rem);font-weight:700;letter-spacing:-.025em; margin:0 0 22px;text-wrap:balance} .doc h2{font-size:1.02rem;letter-spacing:.11em;text-transform:uppercase;font-weight:600; margin:36px 0 12px;color:var(--amb)} .doc p{line-height:1.72;margin:0 0 16px;color:#B9C5D4;font-size:.97rem} /* La entradilla se distingue por tamaño y color, no por una barra de color a la izquierda. Sin adornos: el filete lateral en un párrafo es un recurso de plantilla, y aquí la jerarquía la marca la tipografía. */ .doc-lead{color:var(--tx) !important;font-size:1.06rem !important; line-height:1.66 !important} /* El :not(.btn) otra vez, y por lo mismo que en las filas del horario: un botón dentro del documento también es un dentro de .doc, y esta regla —más específica que .btn-ver— le pintaba el texto del color del cuerpo. El resultado era texto casi blanco sobre el verde del botón, con un contraste de 1,76 cuando el mínimo legible es 4,5: por eso el "¡Verlo ahora!" no se leía bien por mucho que se agrandara la letra. */ .doc a:not(.btn){color:var(--tx);text-decoration:underline;text-underline-offset:3px} .doc a:not(.btn):hover{color:var(--amb)} /* Los hubs de deporte pintan su texto en .doc-lead fuera de .doc, y los nombres de plataforma enlazados salían en azul de navegador (6-sep-2026). */ .doc-lead a:not(.btn){color:inherit;text-decoration:underline;text-underline-offset:3px} .doc-lead a:not(.btn):hover{color:var(--amb)} /* Mismo caso que el enlace: el titular del botón es un , y esta regla le ponía el color del cuerpo del documento sobre el fondo verde. */ .doc b:not(.bv-t){color:var(--tx);font-weight:600} /* Y el texto del botón, blanco y explícito, para que ninguna regla de contenedor vuelva a decidir por él. */ .btn-ver .bv-t,.btn-ver .bv-s{color:#fff} /* Barra de días de la guía. Es lo que enlaza entre sí las páginas de programación: sin ella existirían solo en el sitemap, que para un rastreador es una pista mucho más débil que un enlace. */ .dias{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 22px} .dia{padding:7px 14px;border:1px solid var(--line);background:var(--s2); color:var(--mu);text-decoration:none;font-size:0.85rem;letter-spacing:.08em; text-transform:uppercase;transition:.18s} a.dia:hover{border-color:var(--amb);color:var(--tx)} .dia.actual{background:var(--tx);color:var(--g);border-color:var(--tx);font-weight:600} /* Los días ya emitidos, al pie y separados de la barra de arriba: se publicaban sin que nadie los enlazara y vivían solo del sitemap, aunque alguno llegó a 35 clics en posición 7,3. Van abajo porque no compiten con "hoy" ni con "mañana", que es a lo que viene el visitante. */ .dias-antes{margin-top:40px;padding-top:26px;border-top:1px solid var(--line)} .dias-antes .dias{margin-bottom:0} /* Ficha técnica del canal: quién lo emite, hasta dónde llega y en qué dial. Información estable que no publica nadie en el sector, más dos datos que son nuestros: la calidad medida y el estado real de la señal. */ .ficha dl{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:1px;background:var(--line);border:1px solid var(--line);margin:0} .ficha dl>div{background:var(--g);padding:14px 16px} .ficha dt{font-size:0.8rem;letter-spacing:.16em;text-transform:uppercase; color:var(--mu);margin-bottom:6px} .ficha dd{margin:0;font-size:0.97rem;line-height:1.42} .ficha dd a{color:var(--amb)} .ft-ayuda{margin-top:8px} .doc-lista{margin:0 0 20px;padding-left:22px;color:var(--mu);line-height:1.7} .doc-lista li{margin-bottom:6px} .doc-lista a{color:var(--amb)} /* Tabla dentro de un documento (la de "dónde ver cada canal" de la ayuda). El div desplaza en horizontal en móvil: la página no se mueve de lado. */ .doc-tabla{overflow-x:auto;margin:0 0 22px} .doc-tabla table{border-collapse:collapse;width:100%;font-size:0.97rem; line-height:1.4} .doc-tabla th,.doc-tabla td{padding:7px 10px;border-bottom:1px solid var(--line); text-align:left;vertical-align:top;color:#B9C5D4} .doc-tabla th{font-size:0.8rem;letter-spacing:.08em;text-transform:uppercase; color:var(--mu);font-weight:600} /* Partidos: la lista de "dónde ver" y la ficha de cada uno. */ .partidos{list-style:none;margin:0;padding:0;border:1px solid var(--line)} .partido+.partido{border-top:1px solid var(--line)} /* La fila se reparte igual lleve enlace o no: un torneo del calendario aún no tiene página propia a la que llevar, y sin esta segunda regla sus tres datos salían pegados unos a otros. */ /* El :not(.btn) no es adorno. Un botón dentro de una fila TAMBIÉN es un dentro de .partido, así que esta regla —más específica que .btn-ses— le imponía su rejilla y su relleno, y el botón se quedaba en 43 px de alto por mucho que se le subiera el padding. */ .partido a:not(.btn),.partido .p-fila{display:grid; grid-template-columns:130px 1fr auto;gap:16px;align-items:center; padding:14px 16px;text-decoration:none;color:var(--tx);transition:background .18s} .partido a:not(.btn):hover{background:var(--s2)} .p-fecha{color:var(--amb);font-size:0.88rem} .p-equipos{font-weight:600;font-size:.98rem} .p-canal{color:var(--mu);font-size:0.85rem;text-align:right} @media (max-width:640px){ .partido a:not(.btn),.partido .p-fila{grid-template-columns:1fr;gap:5px} .p-canal{text-align:left} } /* Cada dato con su propio filete. La técnica anterior —fondo del contenedor como rejilla— pintaba un parche claro donde la última fila no se llenaba. */ .datos-partido{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:10px;margin:0 0 22px} .datos-partido>div{background:var(--s2);border:1px solid var(--line);padding:14px 16px} .datos-partido dt{font-size:0.8rem;letter-spacing:.16em;text-transform:uppercase; color:var(--mu);margin-bottom:6px} .datos-partido dd{margin:0;font-size:0.97rem} /* Cuando un partido de pago se da además en abierto. Es el dato que nadie más puede dar: hace falta tener la parrilla y los partidos a la vez. */ /* El aviso de abierto destaca por lo que dice y por el color de su texto, sin barra lateral ni caja: es una frase, no un cartel. */ .doc-lead.destacado{color:var(--ok) !important;font-weight:600} .doc-lead.destacado b{color:var(--ok)} /* ============ DÓNDE VER: cartel, tarjetas, cine y buscador ============ El lenguaje es el del resto del sitio —sala de control: filetes, ámbar para el dato, rojo tally para lo vivo, monoespaciada para la hora— pero aquí la hora se trata como en la pizarra de un estadio: es EL dato. */ /* Un partido en juego no tiene hora que anunciar: tiene estado. */ .p-fecha.en-juego{color:var(--tally);font-weight:600;letter-spacing:.06em; text-transform:uppercase;font-size:0.82rem} /* El marcador grande de la ficha y del cartel del índice. */ .marcador.xl{padding:30px 22px 24px;margin:26px 0 30px; background:linear-gradient(180deg,var(--s2) 0%,var(--g) 100%)} .marcador.xl .enfrentamiento{gap:min(4vw,42px)} .marcador.xl .equipo{flex:1 1 0;max-width:240px} .marcador.xl .escudo-hueco,.marcador.xl .escudo{width:104px;height:104px} .marcador.xl .escudo{filter:drop-shadow(0 0 16px rgba(255,255,255,.16))} .marcador.xl .equipo span{font-size:1rem;font-weight:600} /* Dentro de .doc los enlaces van subrayados (texto corrido); las tarjetas y el marcador no son texto corrido y el subrayado los ensuciaba. */ .doc a.pcard,.doc .marcador a,.doc a.btn{text-decoration:none} .marcador .equipo a{color:var(--tx);text-decoration:none; border-bottom:1px solid transparent;transition:border-color .18s} .marcador .equipo a:hover{border-bottom-color:var(--amb)} .marcador .centro{display:flex;flex-direction:column;align-items:center; gap:7px;flex:0 1 auto;min-width:130px} .marcador .hora{font-size:clamp(2rem,5vw,3.2rem);line-height:1;color:var(--amb); letter-spacing:.03em;font-variant-numeric:tabular-nums; text-shadow:0 0 26px rgba(255,176,32,.28)} .marcador .fecha{font-size:0.8rem;letter-spacing:.16em;text-transform:uppercase; color:var(--mu);white-space:nowrap} /* La cuenta en días bajo la fecha: lo que se siente, no solo el dato. */ .marcador .cuenta{font-size:0.8rem;letter-spacing:.14em;text-transform:uppercase; color:var(--amb);opacity:.85} .pc-cuando{display:flex;flex-direction:column;align-items:flex-end;gap:2px; flex:0 0 auto} .pc-resta{font-style:normal;font-size:0.78rem;letter-spacing:.1em; text-transform:uppercase;color:var(--mu)} .marcador .competicion{display:flex;justify-content:center;align-items:center; gap:14px;margin-bottom:22px;font-size:0.82rem;letter-spacing:.18em; text-transform:uppercase;color:var(--mu)} .marcador .competicion img{height:30px;width:auto;display:block} .marcador .jornada{border-left:1px solid var(--line);padding-left:14px} .marcador .emision{display:flex;justify-content:center;align-items:center; gap:10px;flex-wrap:wrap;margin-top:22px;padding-top:18px; border-top:1px solid var(--line)} .marcador .emision small{font-size:0.8rem;letter-spacing:.18em; text-transform:uppercase;color:var(--mu)} .badge-canal{border:1px solid var(--line);background:var(--s);color:var(--tx); padding:6px 14px;font-size:0.88rem;letter-spacing:.03em;font-weight:600} /* Los distintivos que saben adónde ir son enlaces: al canal de casa o a la web oficial de la plataforma. La flecha marca que se sale de aquí. */ a.badge-canal{text-decoration:none;transition:border-color .18s,background .18s} a.badge-canal:hover{border-color:var(--amb);background:var(--s2)} .badge-canal .fl,.btn .fl{font-style:normal;font-size:.72em;margin-left:7px; color:var(--mu)} a.badge-canal:hover .fl{color:var(--amb)} /* La emisora que nos deja comisión (tiene enlace de afiliado) se resalta en VERDE e invita a ir, con su precio a la vista para que se sepa lo que cuesta. La que no monetiza se queda como .badge-canal normal: secundaria y neutra. El interruptor es `monetiza` del config; hoy, sin enlaces, nada se resalta. */ .badge-canal.gana{background:var(--ok);border-color:var(--ok);color:#04210f; font-weight:700} .badge-canal.gana .bc-precio{margin-left:7px;font-weight:800; font-variant-numeric:tabular-nums} .badge-canal.gana .fl{color:#04210f} a.badge-canal.gana:hover{background:#3BE08C;border-color:#3BE08C} a.badge-canal.gana:hover .fl{color:#04210f} .nota-plataformas{font-size:0.85rem;color:#5F6E80;margin:10px 0 0} /* Las competiciones con página propia, en el hub de su deporte. */ .comp-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:12px} .comp-card{display:flex;flex-direction:column;gap:5px;padding:18px 20px; border:1px solid var(--line);background:var(--s);text-decoration:none; transition:border-color .18s,background .18s,transform .18s} .comp-card:hover{border-color:var(--amb);background:var(--s2); transform:translateY(-2px)} .comp-card b{color:var(--tx);font-size:1rem;letter-spacing:-.01em} .comp-card span{color:var(--mu);font-size:0.85rem;line-height:1.4} .comp-card:focus-visible{outline:2px solid var(--amb);outline-offset:3px} /* "Añadir a mi calendario": la promesa de la sección llevada al final —no perderse el partido— sin pedir cuenta ni correo. */ .al-calendario{margin:18px 0 0;display:flex;align-items:center;gap:14px; flex-wrap:wrap} .al-calendario small{color:#5F6E80;font-size:0.85rem;max-width:38ch; line-height:1.45} .al-calendario i{font-style:normal;margin-right:8px} .marcador.vivo{border-color:rgba(255,45,45,.45)} /* Tarjeta de suscripción: la plataforma con oferta verificada ocupa la fila entera de la botonera, con el precio en el color de los datos. Toda la tarjeta es un solo enlace: el "botón" interior es dibujo, no destino. */ /* El botón de suscribirse va en VERDE —el color del "adelante, es fácil"—, no en ámbar: ámbar es el color de los datos (la hora, el marcador), y el acceso a la plataforma es una acción, no un dato. El precio, en cambio, se queda en blanco fuerte: verlo cuesta y eso tiene que leerse claro, no disfrazado del verde de "gratis". */ .cta-plat{flex:1 1 100%;display:flex;align-items:center;gap:18px; justify-content:space-between;text-decoration:none;padding:18px 20px; background:linear-gradient(120deg,var(--s) 0%,var(--s2) 60%), radial-gradient(circle at 100% 0%,rgba(37,208,122,.14),transparent 55%); background-blend-mode:normal;border:1px solid rgba(37,208,122,.45); transition:border-color .18s,box-shadow .18s,transform .18s} .cta-plat:hover{border-color:var(--ok); box-shadow:0 6px 24px rgba(37,208,122,.16);transform:translateY(-2px)} .cta-info{display:flex;flex-direction:column;gap:3px;min-width:0} .cta-nombre{color:var(--tx);font-size:0.82rem;letter-spacing:.22em; text-transform:uppercase;font-weight:700} .cta-gancho{color:var(--mu);font-size:0.97rem;line-height:1.35} .cta-precio{color:var(--tx);font-weight:700;font-size:1.02rem; font-variant-numeric:tabular-nums;letter-spacing:.02em} .cta-btn{flex:none;display:inline-flex;align-items:center;background:var(--ok); color:#04210f;font-weight:700;font-size:0.85rem;letter-spacing:.14em; text-transform:uppercase;padding:12px 22px;transition:background .18s} .cta-btn .fl{font-style:normal;font-size:.8em;margin-left:8px;color:#04210f} .cta-plat:hover .cta-btn{background:#3BE08C} .cta-plat:focus-visible{outline:2px solid var(--ok);outline-offset:3px} @media (max-width:560px){ .cta-plat{flex-direction:column;align-items:flex-start;gap:12px} .cta-btn{align-self:stretch;justify-content:center} } /* Estado del encuentro, en el centro del marcador. */ .chip-vivo{display:inline-flex;align-items:center;gap:7px; background:rgba(255,45,45,.12);border:1px solid rgba(255,45,45,.45); color:#FF7B7B;padding:3px 11px;font-size:0.78rem;letter-spacing:.2em; text-transform:uppercase;font-weight:600} .chip-vivo i{width:5px;height:5px;border-radius:50%;background:var(--tally); box-shadow:0 0 8px var(--tally);animation:pulse 1.8s infinite} .chip-final{display:inline-block;border:1px solid var(--line);color:var(--mu); padding:3px 11px;font-size:0.78rem;letter-spacing:.2em;text-transform:uppercase} /* El cartel del índice: el próximo partido en grande, con su rótulo. */ .cartel{position:relative;border:1px solid var(--line);margin-bottom:38px; padding:20px 22px 24px;overflow:hidden;background:var(--s2)} .cartel::before{content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(70% 100% at 50% -20%,rgba(255,176,32,.08),transparent 60%)} .cartel .marcador{border:0;background:none;margin:0;padding-bottom:0} .cartel-rotulo{font-size:0.8rem;letter-spacing:.22em;text-transform:uppercase; color:var(--amb);margin-bottom:4px} .cartel-cta{display:flex;justify-content:center;margin-top:20px; position:relative;z-index:1} /* La próxima cita de motor: manda el NOMBRE del gran premio, con su día y su hora en grande —todo el dato, no solo la hora—, y debajo la cuenta atrás que hace que cueste irse. Es un .cartel con más aire y centrado. */ .cartel.cita{text-align:center;padding:26px 22px 28px} .cita-comp{font-size:0.82rem;letter-spacing:.22em;text-transform:uppercase; color:var(--mu);margin:0 0 10px} .cita-nombre{font-size:clamp(1.5rem,3.6vw,2.3rem);font-weight:700; letter-spacing:-.02em;line-height:1.12;color:var(--tx);margin:0 0 8px; text-wrap:balance} .cita-cuando{font-size:clamp(1rem,2vw,1.18rem);color:var(--amb);margin:0; font-variant-numeric:tabular-nums;letter-spacing:.01em} /* Cuenta atrás en días/horas/min/seg. Los números arrancan en "--" para que el hueco no salte al rellenarlos el JS; sin JS quedan la fecha y la hora de texto de arriba, que son las que de verdad importan y las que lee un buscador. */ .cuenta-atras{display:flex;justify-content:center;gap:10px;margin:20px 0 4px; flex-wrap:wrap} .cuenta-atras .ca-u{display:flex;flex-direction:column;align-items:center; gap:4px;min-width:66px;padding:12px 8px;border:1px solid var(--line); background:var(--s)} .cuenta-atras .ca-u b{font-size:1.7rem;font-weight:700;line-height:1; color:var(--tx);font-variant-numeric:tabular-nums} .cuenta-atras .ca-u span{font-size:0.78rem;letter-spacing:.16em; text-transform:uppercase;color:var(--mu)} .cuenta-atras.fin .ca-u b{color:var(--amb)} /* Los dos accesos de la cita: el horario del finde (sobrio) y el "verlo" verde con su precio. En fila; en móvil, apilados y a lo ancho. */ .cita-botones{display:flex;justify-content:center;flex-wrap:wrap;gap:12px; margin-top:22px} .btn-ver{background:var(--ok);color:#fff;font-weight:700; flex-direction:column;align-items:center;gap:2px;line-height:1.2; padding-top:10px;padding-bottom:10px} .btn-ver:hover{background:#3BE08C;transform:translateY(-2px)} .btn-ver .fl{color:#fff;margin-left:2px} /* La acción manda en tamaño; el precio va debajo, legible pero sin competir con ella. El .82 de opacidad basta para separarlos sin ensuciar el verde con un segundo color. El subtítulo abandona la versalita del .btn: "POR SOLO 9,99 € EN DAZN" con el rastreo de los botones se va de ancho y se lee peor que una frase normal. */ .btn-ver .bv-t{font-size:0.93rem;font-weight:700;letter-spacing:.14em; display:inline-flex;align-items:center} .btn-ver .bv-s{font-size:0.8rem;font-weight:500;opacity:.82; text-transform:none;letter-spacing:.01em} /* El mismo botón, dentro de una fila del horario. Ocupa la tercera columna de la rejilla —la que antes repetía el nombre de los canales— y se ciñe a su ancho para no empujar la hora ni el nombre de la sesión. */ /* 10px arriba y abajo dejan el botón en unos 48 de alto: por debajo de 44 el dedo falla, y este se pulsa sobre todo desde el móvil. */ .btn-ses{padding:10px 16px;justify-self:end;white-space:nowrap} /* Y el del cartel, bajo la hora de la carrera. Más grande que el de la fila porque ahí no compite con nada: es el remate del bloque que el visitante mira primero. */ .btn-cartel{margin-top:20px;padding:15px 34px;gap:4px} .btn-cartel .bv-t{font-size:1.12rem;font-weight:800;letter-spacing:.12em} /* El precio, sin el velo de opacidad que llevan los subtítulos del resto de botones: sobre el verde claro rebajaba el contraste justo donde hay que leer una cifra, y una cifra a medio leer no invita a nada. Se separa del titular por tamaño y peso, que basta. */ .btn-cartel .bv-s{font-size:0.97rem;font-weight:700;opacity:1} .btn-ses .bv-t{font-size:0.85rem;letter-spacing:.1em} .btn-ses .bv-s{font-size:0.8rem} @media (max-width:640px){ /* Apilada, la fila ya no tiene tercera columna: el botón pasa a lo ancho, que en el móvil es donde más se pulsa. */ .btn-ses{justify-self:stretch;justify-content:center;margin-top:6px} } @media (max-width:560px){ .cuenta-atras .ca-u{min-width:0;flex:1 1 0;padding:10px 4px} .cuenta-atras .ca-u b{font-size:1.4rem} .cita-botones{flex-direction:column} .cita-botones .btn{justify-content:center} } /* Cabecera de día en la agenda: HOY · domingo 16 de agosto ————— */ .dia-sep{display:flex;align-items:baseline;gap:12px;margin:26px 0 14px;font-weight:600} .dia-sep b{color:var(--amb);font-size:0.88rem;letter-spacing:.22em;text-transform:uppercase} .dia-sep span{color:var(--mu);font-size:0.8rem;letter-spacing:.15em;text-transform:uppercase} .dia-sep::after{content:"";flex:1;border-top:1px solid var(--line);transform:translateY(-4px)} /* Tarjeta de partido. */ .pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(255px,1fr)); gap:14px;margin-bottom:10px} .pcard{display:block;border:1px solid var(--line);background:var(--s2); padding:14px 16px 12px;text-decoration:none;color:var(--tx); transition:transform .18s,border-color .18s,box-shadow .18s} .pcard:hover{border-color:var(--amb);transform:translateY(-2px); box-shadow:0 10px 26px rgba(0,0,0,.4)} .pc-top{display:flex;align-items:baseline;justify-content:space-between; gap:10px;margin-bottom:10px} .pc-comp{font-size:0.78rem;letter-spacing:.16em;text-transform:uppercase; color:var(--mu);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .pc-hora{font-size:1.18rem;color:var(--amb);font-variant-numeric:tabular-nums; letter-spacing:.04em;flex:0 0 auto} .pc-hora.en-juego{display:inline-flex;align-items:center;gap:7px;color:#FF7B7B; font-size:0.8rem;letter-spacing:.18em;text-transform:uppercase;font-weight:600} .pc-hora.en-juego i{width:5px;height:5px;border-radius:50%;background:var(--tally); box-shadow:0 0 8px var(--tally);animation:pulse 1.8s infinite} .pc-eq{display:flex;align-items:center;gap:10px;padding:4px 0} .pc-eq img{width:26px;height:26px;object-fit:contain;flex:0 0 auto; filter:drop-shadow(0 0 6px rgba(255,255,255,.12))} .esc-vacio{width:26px;height:26px;flex:0 0 auto;border:1px dashed var(--line)} .pc-eq span{font-weight:600;font-size:0.97rem;line-height:1.2} .pc-canal{margin-top:10px;padding-top:10px;border-top:1px solid var(--line); color:var(--mu);font-size:0.8rem;letter-spacing:.1em;text-transform:uppercase; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .pcard.vivo{border-color:rgba(255,45,45,.5)} .pcard.vivo .pc-canal{color:#FF7B7B} /* Un gran premio ya corrido se queda en el calendario, atenuado. */ .pcard.pasado{opacity:.55} .pcard.pasado:hover{opacity:.9} /* Cine de hoy: sin carteles que no son nuestros, el cartel es tipográfico y el color de la banda es el del canal, como en toda la web. */ .cine{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px} .cinec{display:flex;align-items:center;gap:16px;border:1px solid var(--line); border-left:3px solid var(--c);background: linear-gradient(100deg,color-mix(in srgb,var(--c) 12%,var(--s2)) 0%,var(--s2) 55%); padding:16px;text-decoration:none;color:var(--tx); transition:transform .18s,border-color .18s,box-shadow .18s} @supports not (background:color-mix(in srgb,red 50%,#000)){ .cinec{background:var(--s2)} } .cinec:hover{transform:translateY(-2px);border-color:var(--c); box-shadow:0 10px 26px rgba(0,0,0,.4)} .cinec .ch{font-size:1.35rem;color:var(--amb);font-variant-numeric:tabular-nums; letter-spacing:.03em;flex:0 0 auto;min-width:3.4ch} .cc-cuerpo{min-width:0} .cc-cuerpo small{display:block;font-size:0.78rem;letter-spacing:.16em; text-transform:uppercase;color:var(--mu);margin-bottom:4px;white-space:nowrap; overflow:hidden;text-overflow:ellipsis} .cc-cuerpo b{display:block;font-size:1.04rem;font-weight:700;line-height:1.25; letter-spacing:-.01em} /* Cabecera con foto ambiental, tratamiento "al lado" (elegido por Salva sobre maqueta, 20-ago-2026): texto en su columna y foto en la suya. Nació con la foto a ratio natural; el 20-ago Salva pidió que TODOS los banners midieran lo mismo, y el 21 que fueran más bajos y rectangulares, "del alto del texto". La altura la marca AHORA la columna de texto —que es idéntica en todos los hubs: título, entradilla y pestañas—, y la foto va envuelta y en absoluto para rellenarla con `cover` sin estirar la fila con su alto intrínseco: ese era el motivo de que el hero saliera tan alto. Uniforme y bajo. En móvil, foto arriba y texto debajo. */ .page-head.con-tema{display:grid;grid-template-columns:44% 56%;padding:0; margin-bottom:30px;border:1px solid var(--line);overflow:hidden; background:none;min-height:250px} .page-head.con-tema .ct-txt{background:var(--s);padding:34px 34px; display:flex;flex-direction:column;justify-content:center; border-right:1px solid var(--line)} /* La foto del hub va envuelta y en absoluto: no estira la fila con su alto intrínseco, sino que rellena y recorta la banda que marca el texto. */ .page-head.con-tema:not(.ficha) .ct-foto{position:relative;overflow:hidden; align-self:stretch} .page-head.con-tema:not(.ficha) .ct-foto img{position:absolute;inset:0; display:block;width:100%;height:100%;object-fit:cover} .page-head.con-tema.ficha .ct-foto{display:block;width:100%;height:100%; object-fit:cover} .page-head.con-tema h1{text-shadow:none} .page-head.con-tema p{color:var(--mu);text-shadow:none} .page-head.con-tema .dv-temas a{background:transparent} .page-head.con-tema .dv-temas a[aria-current="page"]{background:var(--amb)} @media (max-width:720px){ .page-head.con-tema{grid-template-columns:1fr;min-height:0} .page-head.con-tema .ct-txt{border-right:none;order:2;padding:30px 20px} .page-head.con-tema .ct-foto{order:1;height:200px} } /* En una ficha (partido, gran premio) la foto es ambiente, no la noticia: el protagonista sigue siendo el marcador con la hora. Por eso ocupa menos que en un hub y se recorta en una banda —aquí sí, porque son fotos elegidas para eso y ninguna cuenta nada en los bordes—, lo que además baja lo que el navegador tiene que pintar antes de la hora. */ .page-head.con-tema.ficha{grid-template-columns:58% 42%;margin-bottom:22px} /* El título de ficha se alinea a la izquierda como su antetítulo: centrado dentro de media rejilla quedaba flotando y descuadrado respecto a la línea de competición. */ .page-head.con-tema.ficha .ct-txt{padding:28px 26px;text-align:left} .page-head.con-tema.ficha h1, .page-head.con-tema.ficha p{text-align:left} /* La foto llena la altura del bloque. El tope de 200px que tenía aquí venía de cuando cada cabecera medía lo que su foto; con la altura fija dejaba 159 px de hueco negro bajo la imagen en todas las fichas. */ .page-head.con-tema.ficha .ct-foto{height:100%;object-fit:cover; align-self:stretch} .page-head.con-tema.ficha h1{margin:0 0 6px} .page-head.con-tema.ficha p{margin:0;font-size:0.93rem;letter-spacing:.02em} @media (max-width:720px){ .page-head.con-tema.ficha{grid-template-columns:1fr} /* Misma banda que en los hubs: si todos los banners miden igual, en el teléfono también. */ .page-head.con-tema.ficha .ct-foto{height:200px} } /* Temas de la sección: Todo · Fútbol · Cine. Mismo lenguaje que la nav de cabecera, en tamaño de página. */ .dv-temas{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap} .dv-temas a{border:1px solid var(--line);color:var(--mu);text-decoration:none; padding:7px 16px;font-size:0.82rem;letter-spacing:.16em;text-transform:uppercase; font-weight:600;transition:color .18s,border-color .18s,background .18s} .dv-temas a:hover{color:var(--tx);border-color:var(--amb)} .dv-temas a[aria-current="page"]{color:var(--g);background:var(--amb); border-color:var(--amb)} /* La carátula de TMDB, cuando la hay. Medidas fijas: no empuja al cargar. */ .cc-poster{width:56px;height:84px;object-fit:cover;flex:0 0 auto; box-shadow:0 4px 14px rgba(0,0,0,.5)} .tmdb-nota{font-size:0.8rem;color:#5F6E80;margin:14px 0 0} /* Estados del cine en el día completo. */ .cinec.pasada{opacity:.5} .cinec.pasada:hover{opacity:.85} .cinec.ahora{border-color:rgba(255,45,45,.5)} .cc-vivo{color:#FF7B7B;font-weight:600} /* El buscador. Un sintonizador: campo grande, resultados como diales. */ .buscador{position:relative;margin-top:22px;max-width:640px} .buscador input{width:100%;background:var(--s2);border:1px solid var(--line); color:var(--tx);font:inherit;font-size:1rem;padding:14px 18px; caret-color:var(--amb);transition:border-color .18s} .buscador input::placeholder{color:#5F6E80} .buscador input:focus{outline:none;border-color:var(--amb)} .buscador input::-webkit-search-cancel-button{-webkit-appearance:none} .qres{position:absolute;top:calc(100% - 1px);left:0;right:0;z-index:40; background:var(--s);border:1px solid var(--amb);max-height:min(420px,60vh); overflow:auto;box-shadow:0 18px 44px rgba(0,0,0,.55)} .q-fila{display:flex;align-items:baseline;gap:12px;padding:11px 16px; text-decoration:none;color:var(--tx);border-top:1px solid var(--line)} .q-fila:first-child{border-top:0} .q-fila:hover{background:var(--s2)} .q-tipo{flex:0 0 auto;min-width:9ch;font-size:0.78rem;letter-spacing:.16em; text-transform:uppercase;color:var(--amb)} .q-cuerpo{min-width:0} .q-cuerpo b{display:block;font-size:0.97rem;font-weight:600;line-height:1.3} .q-cuerpo small{display:block;color:var(--mu);font-size:0.85rem;margin-top:1px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .q-nada{padding:16px;color:var(--mu);font-size:0.93rem} .q-nada p{margin:0 0 8px} .q-nada a{color:var(--tx)} /* Rejilla de equipos del índice. */ .equipos{list-style:none;margin:0;padding:0;display:grid;gap:1px; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); background:var(--line);border:1px solid var(--line)} .equipos a{display:flex;align-items:center;gap:12px;padding:12px 14px; background:var(--g);color:var(--tx);text-decoration:none;font-size:0.97rem; font-weight:600;transition:background .18s} .equipos a:hover{background:var(--s2)} .equipos img{width:34px;height:34px;object-fit:contain;flex:0 0 auto; filter:drop-shadow(0 0 6px rgba(255,255,255,.12))} /* Ficha de partido y de equipo: contenido centrado y más ancho. El resto de .doc (ayuda, programas) sigue a 68ch y a la izquierda: son texto corrido. */ .doc-evento{max-width:940px;margin:0 auto} .doc-evento h1{text-align:center} .doc-evento .doc-lead{max-width:62ch;margin-left:auto;margin-right:auto} .doc-evento .externa-nota{text-align:center} .btns{display:flex;gap:12px;flex-wrap:wrap} /* Cabecera de la página de equipo: el escudo preside, centrado. */ .equipo-cab{display:flex;flex-direction:column;align-items:center;gap:14px; margin:0 0 18px} .equipo-cab .escudo-hueco{width:88px;height:88px;display:flex; align-items:center;justify-content:center} .equipo-cab .escudo{width:88px;height:88px;object-fit:contain; filter:drop-shadow(0 0 18px rgba(255,255,255,.18))} .equipo-cab h1{margin:0} /* El plan de la VPN en la página del extranjero: la solución en tres pasos, con el mismo lenguaje del cartel de partidos. */ .vpn-plan{position:relative;border:1px solid var(--line);background:var(--s2); padding:26px 26px 22px;margin:30px 0;overflow:hidden} .vpn-plan::before{content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(70% 100% at 50% -20%,rgba(37,208,122,.09),transparent 60%)} .vpn-rotulo{font-size:0.8rem;letter-spacing:.22em;text-transform:uppercase; color:var(--ok);margin-bottom:6px} .vpn-plan h2{margin-top:0 !important;border:0 !important;padding-top:0 !important} .vpn-pasos{list-style:none;margin:22px 0;padding:0;display:grid;gap:14px; grid-template-columns:repeat(auto-fit,minmax(200px,1fr));counter-reset:paso} .vpn-pasos li{counter-increment:paso;background:var(--g);border:1px solid var(--line); padding:16px 16px 14px;position:relative} .vpn-pasos li::before{content:counter(paso);display:block;font-family:"SF Mono", ui-monospace,"Roboto Mono",monospace;font-size:1.6rem;color:var(--amb); margin-bottom:8px;text-shadow:0 0 18px rgba(255,176,32,.35)} .vpn-pasos b{display:block;font-size:0.97rem;margin-bottom:5px} .vpn-pasos span{display:block;color:var(--mu);font-size:0.88rem;line-height:1.5} .vpn-cta{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:6px 0 10px; position:relative;z-index:1} .btn-vpn{border-color:var(--ok) !important;color:var(--ok) !important; font-size:0.97rem !important;padding:12px 22px !important} .btn-vpn:hover{background:var(--ok) !important;color:var(--g) !important} .vpn-garantia{color:var(--mu);font-size:0.85rem} @media (prefers-reduced-motion:no-preference){ .vpn-pasos li{animation:sube .45s ease backwards} .vpn-pasos li:nth-child(2){animation-delay:.08s} .vpn-pasos li:nth-child(3){animation-delay:.16s} } /* Entrada suave de las tarjetas. Solo transform y opacity: no mueve el layout (CLS 0) y quien pide menos movimiento no la ve. */ @media (prefers-reduced-motion:no-preference){ .pcard,.cinec{animation:sube .4s ease backwards} .pcard:nth-child(2),.cinec:nth-child(2){animation-delay:.04s} .pcard:nth-child(3),.cinec:nth-child(3){animation-delay:.08s} .pcard:nth-child(4),.cinec:nth-child(4){animation-delay:.12s} .pcard:nth-child(5),.cinec:nth-child(5){animation-delay:.16s} .pcard:nth-child(n+6),.cinec:nth-child(n+6){animation-delay:.2s} } @keyframes sube{from{opacity:0;transform:translateY(8px)}} @media (max-width:640px){ .marcador.xl{padding:22px 12px 18px} .marcador.xl .escudo-hueco,.marcador.xl .escudo{width:60px;height:60px} .marcador.xl .equipo span{font-size:0.88rem} .marcador .hora{font-size:1.9rem} .marcador .fecha{white-space:normal;text-align:center} .marcador .centro{min-width:0} .cartel{padding:16px 12px 18px} } /* Índice de canales en texto. La rejilla la monta el navegador, pero un rastreador no ejecuta JavaScript: sin esta lista la portada no enlazaba a ninguna página de canal. Discreta a la vista, decisiva para el rastreo. */ /* En bloque a propósito: es un