/* ============================================================================= FC SEMINARIO — style.css Hoja principal. Organizada por bloques: 1 Tokens · 2 Base · 3 Utilidades · 4 Navbar · 5 Hero · 6 Marcador 7 Secciones · 8 Tablas · 9 Jugadores · 10 Noticias · 11 Patrocinadores 12 Newsletter · 13 Pie · 14 Interiores · 15 Animaciones · 16 Responsive Los colores base se inyectan desde config.php (variables --club-*). ========================================================================== */ /* ---------------------------------------------------------------- 1. TOKENS */ :root{ /* Los siguientes valores se sobrescriben desde config.php */ --club-rojo:#D6202B; --club-azul:#2F3FA8; --club-oro:#F2B705; --club-tinta:#0B1020; --club-fondo:#F4F5F8; --fuente-titulo:'Barlow Condensed', sans-serif; --fuente-texto:'Inter', system-ui, sans-serif; /* Superficies */ --superficie:#FFFFFF; --superficie-2:#F8F9FB; --borde:#E3E6EE; --texto:#131722; --texto-suave:#5A6172; /* Sombras y radios */ --sombra-xs:0 1px 2px rgba(11,16,32,.06); --sombra-sm:0 4px 14px rgba(11,16,32,.07); --sombra-md:0 12px 34px rgba(11,16,32,.10); --sombra-lg:0 26px 60px rgba(11,16,32,.16); --radio:16px; --radio-sm:10px; --radio-lg:24px; /* Motivo diagonal del escudo: rojo → azul */ --franja:linear-gradient(100deg, var(--club-rojo) 0 48%, var(--club-azul) 52% 100%); --transicion:.28s cubic-bezier(.22,.61,.36,1); } /* ------------------------------------------------------------------ 2. BASE */ *{box-sizing:border-box;} /* El color base va en y el queda transparente. Así el lienzo decorativo del fondo (position:fixed; z-index:-1) queda por detrás del contenido pero por delante del color base, y se percibe en los huecos. */ html{scroll-behavior:smooth;scroll-padding-top:110px;background:var(--club-fondo);} body{ font-family:var(--fuente-texto); color:var(--texto); background:transparent; -webkit-font-smoothing:antialiased; overflow-x:hidden; } h1,h2,h3,h4,h5,.titular{ font-family:var(--fuente-titulo); font-weight:700; letter-spacing:.2px; line-height:1.05; text-transform:uppercase; } h1{font-size:clamp(2.4rem,5.4vw,4.6rem);} h2{font-size:clamp(1.9rem,3.4vw,2.9rem);} h3{font-size:clamp(1.3rem,2.2vw,1.7rem);} p{line-height:1.7;color:var(--texto-suave);} a{color:var(--club-azul);text-decoration:none;transition:color var(--transicion);} a:hover{color:var(--club-rojo);} img{max-width:100%;height:auto;} main{min-height:50vh;} /* Accesibilidad */ :focus-visible{outline:3px solid var(--club-oro);outline-offset:2px;border-radius:4px;} .salto-contenido{ position:absolute;left:-999px;top:0;z-index:2000;background:var(--club-rojo); color:#fff;padding:.75rem 1.25rem;border-radius:0 0 var(--radio-sm) 0;font-weight:600; } .salto-contenido:focus{left:0;color:#fff;} /* ------------------------------------------------------------ 3. UTILIDADES */ .seccion{padding:clamp(3rem,6vw,5.5rem) 0;} .seccion-alterna{background:var(--superficie-2);} .encabezado-seccion{margin-bottom:2.5rem;} .encabezado-seccion .cintillo{ display:inline-flex;align-items:center;gap:.6rem; font-family:var(--fuente-titulo);font-size:.95rem;font-weight:700; letter-spacing:.22em;text-transform:uppercase;color:var(--club-rojo); } .encabezado-seccion .cintillo::before{ content:"";width:34px;height:8px;background:var(--franja); transform:skewX(-22deg);border-radius:2px; } .encabezado-seccion h2{margin:.45rem 0 0;} .encabezado-seccion .subtitulo{max-width:56ch;margin-top:.6rem;} .enlace-mas{ font-family:var(--fuente-titulo);font-size:1.05rem;font-weight:700;letter-spacing:.06em; text-transform:uppercase;color:var(--club-tinta);display:inline-flex;align-items:center;gap:.5rem; } .enlace-mas i{transition:transform var(--transicion);} .enlace-mas:hover{color:var(--club-rojo);} .enlace-mas:hover i{transform:translateX(5px);} .tarjeta{ background:var(--superficie);border:1px solid var(--borde);border-radius:var(--radio); box-shadow:var(--sombra-sm);overflow:hidden;transition:transform var(--transicion),box-shadow var(--transicion); } .tarjeta:hover{transform:translateY(-6px);box-shadow:var(--sombra-md);} .btn-club{ --bs-btn-color:#fff; background:var(--club-rojo);color:#fff;border:none;border-radius:999px; font-family:var(--fuente-titulo);font-size:1.05rem;font-weight:700;letter-spacing:.08em; text-transform:uppercase;padding:.75rem 1.9rem;transition:all var(--transicion); } .btn-club:hover{background:#b3161f;color:#fff;transform:translateY(-2px);box-shadow:0 12px 26px rgba(214,32,43,.32);} .btn-club-azul{background:var(--club-azul);} .btn-club-azul:hover{background:#25328a;box-shadow:0 12px 26px rgba(47,63,168,.32);} .btn-fantasma{ background:transparent;border:2px solid rgba(255,255,255,.55);color:#fff;border-radius:999px; font-family:var(--fuente-titulo);font-size:1.05rem;font-weight:700;letter-spacing:.08em; text-transform:uppercase;padding:.7rem 1.8rem;transition:all var(--transicion); } .btn-fantasma:hover{background:#fff;color:var(--club-tinta);border-color:#fff;} .btn-outline-claro{border:1.5px solid rgba(255,255,255,.35);color:#fff;border-radius:999px;padding:.5rem 1.3rem;} .btn-outline-claro:hover{background:#fff;color:var(--club-tinta);} /* ---------------------------------------------------------------- 4. NAVBAR */ .barra-superior{ background:var(--club-tinta);color:#fff;font-size:.85rem;padding:.5rem 0; } .barra-partido{ color:#fff;display:inline-flex;align-items:center;gap:.7rem;font-weight:500; } .barra-partido .etiqueta-competicion{ background:var(--franja);padding:.15rem .6rem;border-radius:4px; font-family:var(--fuente-titulo);letter-spacing:.1em;text-transform:uppercase;font-size:.78rem; } .barra-partido .vs{color:rgba(255,255,255,.5);font-size:.78rem;text-transform:uppercase;} .barra-partido .fecha{color:rgba(255,255,255,.65);} .barra-partido:hover{color:var(--club-oro);} .barra-redes a{color:rgba(255,255,255,.7);margin-left:1rem;} .barra-redes a:hover{color:#fff;} .navbar-club{ background:rgba(255,255,255,.86); backdrop-filter:saturate(180%) blur(16px); -webkit-backdrop-filter:saturate(180%) blur(16px); border-bottom:1px solid var(--borde); padding:.6rem 0;transition:all var(--transicion);z-index:1030; } .navbar-club.encogido{padding:.25rem 0;box-shadow:var(--sombra-sm);} .navbar-brand{display:flex;align-items:center;gap:.75rem;} .navbar-brand img{transition:transform var(--transicion);} .navbar-brand:hover img{transform:rotate(-8deg) scale(1.06);} .marca-texto strong{ display:block;font-family:var(--fuente-titulo);font-size:1.35rem;line-height:1; text-transform:uppercase;color:var(--club-tinta);letter-spacing:.02em; } .marca-texto small{font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;color:var(--club-rojo);font-weight:600;} .navbar-club .nav-link{ font-family:var(--fuente-titulo);font-size:1.1rem;font-weight:600;letter-spacing:.05em; text-transform:uppercase;color:var(--club-tinta);padding:.5rem 1rem;position:relative; } .navbar-club .nav-link::after{ content:"";position:absolute;left:1rem;right:1rem;bottom:.2rem;height:3px; background:var(--franja);transform:scaleX(0);transform-origin:left;transition:transform var(--transicion); } .navbar-club .nav-link:hover::after,.navbar-club .nav-link.active::after{transform:scaleX(1);} .navbar-club .nav-link.active{color:var(--club-rojo);} .navbar-toggler{border:none;font-size:1.4rem;color:var(--club-tinta);} .navbar-toggler:focus{box-shadow:none;} .buscador-nav{position:relative;display:none;} .buscador-nav i{position:absolute;left:.85rem;top:50%;transform:translateY(-50%);color:var(--texto-suave);font-size:.85rem;} .buscador-nav input{ border:1px solid var(--borde);background:var(--superficie-2);border-radius:999px; padding:.45rem .9rem .45rem 2.2rem;width:150px;font-size:.9rem;transition:width var(--transicion); } .buscador-nav input:focus{width:220px;outline:none;border-color:var(--club-azul);background:var(--superficie);} .btn-tema{ width:40px;height:40px;border-radius:50%;border:1px solid var(--borde); background:var(--superficie-2);color:var(--club-tinta);display:grid;place-items:center;transition:all var(--transicion); } .btn-tema:hover{background:var(--club-tinta);color:#fff;} .btn-tema .icono-sol{display:none;} .btn-entradas{ background:var(--club-tinta);color:#fff;border-radius:999px;padding:.55rem 1.4rem; font-family:var(--fuente-titulo);font-weight:700;letter-spacing:.08em;text-transform:uppercase; } .btn-entradas:hover{background:var(--club-rojo);color:#fff;} /* ------------------------------------------------------------------ 5. HERO */ .hero{position:relative;height:clamp(560px,86vh,860px);overflow:hidden;background:var(--club-tinta);} .hero-diapositiva{ position:absolute;inset:0;opacity:0;transition:opacity 1.1s ease; background-size:cover;background-position:center; } .hero-diapositiva.activa{opacity:1;} .hero-diapositiva.activa .hero-imagen{animation:acercar 9s ease-out forwards;} .hero-imagen{position:absolute;inset:0;background-size:cover;background-position:center;} .hero-velo{ position:absolute;inset:0; background:linear-gradient(105deg,rgba(11,16,32,.94) 0%,rgba(11,16,32,.72) 42%,rgba(11,16,32,.2) 100%); } .hero-contenido{position:relative;z-index:3;height:100%;display:flex;align-items:center;padding-bottom:90px;} .hero-texto{max-width:720px;color:#fff;} .hero-cintillo{ display:inline-flex;align-items:center;gap:.6rem;background:var(--franja);color:#fff; font-family:var(--fuente-titulo);font-size:.9rem;font-weight:700;letter-spacing:.24em; text-transform:uppercase;padding:.35rem 1rem;border-radius:4px;transform:skewX(-10deg); } .hero-cintillo span{transform:skewX(10deg);} .hero h1{color:#fff;margin:1.1rem 0;text-shadow:0 4px 30px rgba(0,0,0,.35);} .hero h1 em{font-style:normal;color:var(--club-oro);} .hero-subtitulo{color:rgba(255,255,255,.82);font-size:1.12rem;max-width:52ch;} .hero-botones{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2rem;} .hero-controles{position:absolute;right:6%;bottom:150px;z-index:4;display:flex;gap:.6rem;} .hero-controles button{ width:46px;height:46px;border-radius:50%;border:1.5px solid rgba(255,255,255,.4); background:rgba(255,255,255,.08);color:#fff;backdrop-filter:blur(6px);transition:all var(--transicion); } .hero-controles button:hover{background:#fff;color:var(--club-tinta);} .hero-puntos{position:absolute;left:0;right:0;bottom:118px;z-index:4;display:flex;justify-content:center;gap:.5rem;} .hero-puntos button{ width:34px;height:4px;border:none;border-radius:2px;background:rgba(255,255,255,.35);transition:all var(--transicion); } .hero-puntos button.activo{background:var(--club-oro);width:52px;} /* --------------------------------------------------------------- 6. MARCADOR Elemento firma: la franja del próximo partido monta sobre el hero. */ .marcador{ position:relative;z-index:5;margin-top:-96px;margin-bottom:2rem; background:var(--club-tinta);border-radius:var(--radio-lg);color:#fff; box-shadow:var(--sombra-lg);overflow:hidden; } .marcador::before{ content:"";position:absolute;left:0;top:0;bottom:0;width:12px;background:var(--franja); } .marcador::after{ content:"";position:absolute;right:-60px;top:-60px;width:240px;height:240px;border-radius:50%; border:26px solid rgba(255,255,255,.04); } .marcador-cabecera{ display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap; padding:1rem 1.6rem;border-bottom:1px solid rgba(255,255,255,.08); } .marcador-etiqueta{ font-family:var(--fuente-titulo);letter-spacing:.24em;text-transform:uppercase; font-size:.85rem;color:var(--club-oro); } .marcador-datos{color:rgba(255,255,255,.66);font-size:.9rem;display:flex;gap:1.2rem;flex-wrap:wrap;} .marcador-cuerpo{ display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem;padding:2rem 1.6rem; } .marcador-equipo{display:flex;flex-direction:column;align-items:center;gap:.8rem;text-align:center;} .marcador-equipo img{width:84px;height:84px;object-fit:contain;filter:drop-shadow(0 8px 18px rgba(0,0,0,.4));} .marcador-equipo span{ font-family:var(--fuente-titulo);font-size:1.35rem;text-transform:uppercase;letter-spacing:.04em; } .marcador-equipo small{color:rgba(255,255,255,.5);font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;} .marcador-centro{text-align:center;min-width:230px;} .marcador-vs{ font-family:var(--fuente-titulo);font-size:2.4rem;color:rgba(255,255,255,.28);letter-spacing:.1em; } .cuenta-atras{display:flex;justify-content:center;gap:.5rem;margin-top:.4rem;} .cuenta-caja{ background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);border-radius:12px; padding:.5rem .7rem;min-width:62px; } .cuenta-caja b{ display:block;font-family:var(--fuente-titulo);font-size:1.9rem;line-height:1; font-variant-numeric:tabular-nums; } .cuenta-caja small{font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.5);} .marcador-pie{ display:flex;justify-content:center;gap:.8rem;flex-wrap:wrap; padding:0 1.6rem 1.6rem; } .marcador-resultado{ font-family:var(--fuente-titulo);font-size:3.4rem;line-height:1;font-variant-numeric:tabular-nums; } /* -------------------------------------------------------------- 7. SECCIONES */ .franja-datos{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--borde);border-radius:var(--radio);overflow:hidden;} .franja-datos div{background:var(--superficie);padding:1.4rem 1rem;text-align:center;} .franja-datos b{display:block;font-family:var(--fuente-titulo);font-size:2.3rem;color:var(--club-rojo);line-height:1;} .franja-datos span{font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--texto-suave);} /* --------------------------------------------------------------- 8. TABLAS */ .tabla-club{width:100%;border-collapse:separate;border-spacing:0;background:var(--superficie);} .tabla-club thead th{ background:var(--club-tinta);color:rgba(255,255,255,.8);font-family:var(--fuente-titulo); font-size:.85rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600; padding:.85rem .7rem;white-space:nowrap;border:0; } .tabla-club tbody td{ padding:.85rem .7rem;border-bottom:1px solid var(--borde);vertical-align:middle;font-size:.95rem; } .tabla-club tbody tr:last-child td{border-bottom:0;} .tabla-club tbody tr:hover{background:var(--superficie-2);} .tabla-club .col-equipo{display:flex;align-items:center;gap:.7rem;font-weight:600;color:var(--texto);} .tabla-club .col-equipo img{width:28px;height:28px;object-fit:contain;} .tabla-club .puntos{font-family:var(--fuente-titulo);font-size:1.25rem;color:var(--club-tinta);} .tabla-club tr.fila-club{background:rgba(214,32,43,.07);} .tabla-club tr.fila-club td:first-child{box-shadow:inset 4px 0 0 var(--club-rojo);} .tabla-club tr.fila-club:hover{background:rgba(214,32,43,.1);} .posicion{ display:inline-grid;place-items:center;width:26px;height:26px;border-radius:7px; background:var(--superficie-2);font-family:var(--fuente-titulo);font-size:1rem;color:var(--texto-suave); } .posicion.ascenso{background:rgba(47,63,168,.14);color:var(--club-azul);} .posicion.descenso{background:rgba(214,32,43,.14);color:var(--club-rojo);} .res-victoria{background:#128a4a;} .res-empate{background:#8a8f9c;} .res-derrota{background:var(--club-rojo);} .res-neutro{background:var(--borde);} .marca-forma{ display:inline-grid;place-items:center;width:24px;height:24px;border-radius:6px; color:#fff;font-family:var(--fuente-titulo);font-size:.85rem;margin-right:.2rem; } .badge-directo{animation:latido 1.6s infinite;} /* Fila de resultado compacta */ .fila-resultado{ display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem; padding:1rem 1.2rem;border-bottom:1px solid var(--borde); } .fila-resultado:last-child{border-bottom:0;} .fila-resultado .equipo{display:flex;align-items:center;gap:.7rem;font-weight:600;} .fila-resultado .equipo.visita{justify-content:flex-end;} .fila-resultado .equipo img{width:34px;height:34px;object-fit:contain;} .fila-resultado .tanteo{ font-family:var(--fuente-titulo);font-size:1.6rem;background:var(--club-tinta);color:#fff; border-radius:10px;padding:.15rem .8rem;font-variant-numeric:tabular-nums;white-space:nowrap; } /* ----------------------------------------------------------- 9. JUGADORES */ .tarjeta-jugador{ position:relative;border-radius:var(--radio);overflow:hidden;background:var(--club-tinta); aspect-ratio:3/4;display:block;box-shadow:var(--sombra-sm); } .tarjeta-jugador img{ width:100%;height:100%;object-fit:cover;object-position:top center; transition:transform .5s cubic-bezier(.22,.61,.36,1);filter:grayscale(.15); } .tarjeta-jugador:hover img{transform:scale(1.06);filter:grayscale(0);} .tarjeta-jugador .dorsal{ position:absolute;top:.6rem;right:1rem;font-family:var(--fuente-titulo);font-size:3.4rem; color:rgba(255,255,255,.9);line-height:1;text-shadow:0 4px 18px rgba(0,0,0,.5); } .tarjeta-jugador .capitan{ position:absolute;top:1rem;left:1rem;background:var(--club-oro);color:var(--club-tinta); font-family:var(--fuente-titulo);font-size:.75rem;letter-spacing:.12em;padding:.15rem .5rem;border-radius:4px; } .tarjeta-jugador .datos{ position:absolute;left:0;right:0;bottom:0;padding:1.6rem 1rem .9rem;color:#fff; background:linear-gradient(to top,rgba(11,16,32,.96),rgba(11,16,32,0)); } .tarjeta-jugador .datos strong{ display:block;font-family:var(--fuente-titulo);font-size:1.25rem;text-transform:uppercase;letter-spacing:.02em; } .tarjeta-jugador .datos span{font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:var(--club-oro);} .tarjeta-jugador::after{ content:"";position:absolute;left:0;bottom:0;height:5px;width:100%;background:var(--franja); transform:scaleX(0);transform-origin:left;transition:transform var(--transicion); } .tarjeta-jugador:hover::after{transform:scaleX(1);} /* ------------------------------------------------------------ 10. NOTICIAS */ .tarjeta-noticia .imagen{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--superficie-2);} .tarjeta-noticia .imagen img{width:100%;height:100%;object-fit:cover;transition:transform .55s cubic-bezier(.22,.61,.36,1);} .tarjeta-noticia:hover .imagen img{transform:scale(1.07);} .etiqueta-categoria{ position:absolute;top:.9rem;left:.9rem;background:var(--club-rojo);color:#fff; font-family:var(--fuente-titulo);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase; padding:.25rem .7rem;border-radius:4px; } .tarjeta-noticia .cuerpo{padding:1.25rem;} .tarjeta-noticia h3{font-size:1.25rem;margin-bottom:.5rem;} .tarjeta-noticia h3 a{color:var(--club-tinta);} .tarjeta-noticia h3 a:hover{color:var(--club-rojo);} .meta-noticia{ display:flex;gap:1rem;flex-wrap:wrap;font-size:.8rem;color:var(--texto-suave); letter-spacing:.04em;margin-bottom:.6rem; } .noticia-destacada{position:relative;border-radius:var(--radio);overflow:hidden;min-height:420px;display:flex;align-items:flex-end;} .noticia-destacada img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;} .noticia-destacada .capa{ position:relative;z-index:2;padding:2rem;width:100%;color:#fff; background:linear-gradient(to top,rgba(11,16,32,.95),rgba(11,16,32,.15)); } .noticia-destacada h3{font-size:clamp(1.6rem,2.6vw,2.2rem);color:#fff;} /* ------------------------------------------------------ 11. PATROCINADORES */ .cinta-patrocinadores{overflow:hidden;position:relative;padding:1.5rem 0; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);} .cinta-pista{display:flex;gap:3.5rem;width:max-content;animation:desplazar 34s linear infinite;} .cinta-patrocinadores:hover .cinta-pista{animation-play-state:paused;} .cinta-pista img{ height:56px;width:auto;object-fit:contain;filter:grayscale(1);opacity:.62;transition:all var(--transicion); } .cinta-pista a:hover img{filter:grayscale(0);opacity:1;transform:scale(1.06);} /* --------------------------------------------------------- 12. NEWSLETTER */ .bloque-newsletter{ position:relative;background:var(--club-tinta);border-radius:var(--radio-lg); padding:clamp(2rem,4vw,3.4rem);color:#fff;overflow:hidden; } .bloque-newsletter::before{ content:"";position:absolute;right:-80px;bottom:-90px;width:280px;height:280px; border-radius:50%;border:34px solid rgba(255,255,255,.05); } .bloque-newsletter::after{ content:"";position:absolute;left:0;top:0;bottom:0;width:10px;background:var(--franja); } .bloque-newsletter h2{color:#fff;} .bloque-newsletter p{color:rgba(255,255,255,.7);} .form-newsletter{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1.2rem;} .form-newsletter input{ flex:1 1 240px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06); color:#fff;border-radius:999px;padding:.8rem 1.3rem; } .form-newsletter input::placeholder{color:rgba(255,255,255,.45);} .form-newsletter input:focus{outline:none;border-color:var(--club-oro);background:rgba(255,255,255,.1);} /* -------------------------------------------------------------- 13. PIE */ .pie-club{background:var(--club-tinta);color:rgba(255,255,255,.72);position:relative;margin-top:4rem;} .pie-franja{height:6px;background:var(--franja);} .pie-club h3,.pie-club .titulo-pie{color:#fff;} .titulo-pie{ font-family:var(--fuente-titulo);font-size:1.05rem;letter-spacing:.16em;text-transform:uppercase; margin-bottom:1rem; } .text-secundario-pie{color:rgba(255,255,255,.55);font-size:.92rem;} .lista-pie{list-style:none;padding:0;margin:0;display:grid;gap:.55rem;} .lista-pie a{color:rgba(255,255,255,.72);font-size:.94rem;} .lista-pie a:hover{color:var(--club-oro);} .lista-contacto li{display:flex;gap:.7rem;align-items:flex-start;font-size:.94rem;margin-bottom:.55rem;} .lista-contacto i{color:var(--club-rojo);width:18px;margin-top:.2rem;} .redes-pie a{ display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%; background:rgba(255,255,255,.07);color:#fff;margin-right:.5rem;transition:all var(--transicion); } .redes-pie a:hover{background:var(--club-rojo);transform:translateY(-3px);} .pie-legal{ border-top:1px solid rgba(255,255,255,.09);padding:1.2rem 0;display:flex; justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;font-size:.85rem; } .lista-legal{list-style:none;display:flex;gap:1.2rem;padding:0;margin:0;flex-wrap:wrap;} .lista-legal a{color:rgba(255,255,255,.6);} .lista-legal a:hover{color:#fff;} .btn-arriba{ position:fixed;right:1.2rem;bottom:1.2rem;width:46px;height:46px;border-radius:50%;border:none; background:var(--club-rojo);color:#fff;box-shadow:var(--sombra-md);opacity:0;pointer-events:none; transition:all var(--transicion);z-index:900; } .btn-arriba.visible{opacity:1;pointer-events:auto;} .btn-arriba:hover{background:var(--club-tinta);transform:translateY(-3px);} /* ------------------------------------------------------- 14. INTERIORES */ .cabecera-interior{ position:relative;background:var(--club-tinta);color:#fff;padding:clamp(4.5rem,9vw,7rem) 0 clamp(2.5rem,5vw,4rem); overflow:hidden; } .cabecera-interior::before{ content:"";position:absolute;inset:0;background:var(--franja);opacity:.16; clip-path:polygon(60% 0,100% 0,100% 100%,42% 100%); } .cabecera-interior h1{color:#fff;position:relative;} .cabecera-interior .ruta{position:relative;font-size:.85rem;color:rgba(255,255,255,.55);letter-spacing:.1em;text-transform:uppercase;} .cabecera-interior .ruta a{color:rgba(255,255,255,.75);} .cabecera-interior .ruta a:hover{color:var(--club-oro);} .panel-filtros{ background:var(--superficie);border:1px solid var(--borde);border-radius:var(--radio); padding:1rem 1.2rem;box-shadow:var(--sombra-xs);margin-bottom:2rem; } .chip-filtro{ border:1px solid var(--borde);background:var(--superficie);border-radius:999px;padding:.4rem 1.1rem; font-family:var(--fuente-titulo);letter-spacing:.08em;text-transform:uppercase;font-size:.95rem; color:var(--texto-suave);transition:all var(--transicion); } .chip-filtro:hover{border-color:var(--club-azul);color:var(--club-azul);} .chip-filtro.activo{background:var(--club-tinta);border-color:var(--club-tinta);color:#fff;} .ficha-jugador-cabecera{ background:var(--club-tinta);color:#fff;border-radius:var(--radio-lg);overflow:hidden;position:relative; } .ficha-jugador-cabecera .dorsal-grande{ position:absolute;right:2%;top:-2rem;font-family:var(--fuente-titulo);font-size:clamp(9rem,22vw,18rem); color:rgba(255,255,255,.06);line-height:1;pointer-events:none; } .dato-jugador{background:var(--superficie);border:1px solid var(--borde);border-radius:var(--radio-sm);padding:1rem;text-align:center;} .dato-jugador b{display:block;font-family:var(--fuente-titulo);font-size:1.9rem;color:var(--club-rojo);line-height:1;} .dato-jugador span{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--texto-suave);} .contenido-noticia{font-size:1.06rem;line-height:1.85;color:var(--texto);} .contenido-noticia h2,.contenido-noticia h3{margin:2rem 0 .8rem;} .contenido-noticia p{color:var(--texto);margin-bottom:1.1rem;} .contenido-noticia img{border-radius:var(--radio);margin:1.5rem 0;} .contenido-noticia blockquote{ border-left:5px solid var(--club-rojo);padding:.4rem 0 .4rem 1.4rem;margin:1.8rem 0; font-size:1.2rem;font-style:italic;color:var(--club-tinta); } .galeria-rejilla{columns:3;column-gap:1rem;} .galeria-rejilla a{display:block;margin-bottom:1rem;border-radius:var(--radio-sm);overflow:hidden;position:relative;} .galeria-rejilla img{width:100%;display:block;transition:transform .5s ease;} .galeria-rejilla a:hover img{transform:scale(1.05);} .lightbox{ position:fixed;inset:0;background:rgba(5,8,17,.94);display:none;place-items:center;z-index:2000;padding:2rem; } .lightbox.abierto{display:grid;} .lightbox img,.lightbox iframe{max-width:min(1100px,92vw);max-height:82vh;border-radius:var(--radio);} .lightbox .cerrar{position:absolute;top:1.5rem;right:1.8rem;font-size:2rem;color:#fff;background:none;border:none;} /* ------------------------------------------------------- 15. ANIMACIONES */ @keyframes acercar{from{transform:scale(1);}to{transform:scale(1.09);}} @keyframes desplazar{from{transform:translateX(0);}to{transform:translateX(-50%);}} @keyframes latido{0%,100%{opacity:1;}50%{opacity:.45;}} @keyframes aparecer{from{opacity:0;transform:translateY(26px);}to{opacity:1;transform:none;}} /* El contenido se muestra por defecto. Solo lo ocultamos para animar su entrada cuando el navegador tiene JavaScript activo (html.js). De este modo, si el JS fallara o no llegara a cargarse, TODO el contenido se ve igual. */ .revelar{opacity:1;} html.js .revelar{opacity:0;} html.js .revelar.visible{animation:aparecer .7s cubic-bezier(.22,.61,.36,1) forwards;opacity:1;} @media (prefers-reduced-motion: reduce){ *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;} html{scroll-behavior:auto;} .revelar,html.js .revelar{opacity:1;} } /* --------------------------------------------- 15·b FONDO MODO FÚTBOL Lienzo decorativo a pantalla completa por detrás de todo el contenido. Dibuja balones flotantes, destellos con la franja del club y focos de estadio (el movimiento lo genera iniciarFondoFutbol en js/app.js). z-index:-1 para no tapar jamás el contenido ni interferir con los clics; las secciones con fondo propio lo cubren y dejan ver el movimiento solo en los huecos, así se percibe vivo sin restar legibilidad. */ .fondo-futbol{ position:fixed; inset:0; width:100%; height:100%; z-index:-1; pointer-events:none; display:block; /* Base sutil de "campo": un leve tinte que acompaña al lienzo */ background: radial-gradient(120% 90% at 50% -20%, rgba(47,63,168,.06), transparent 60%), radial-gradient(90% 70% at 100% 120%, rgba(214,32,43,.05), transparent 60%); } html[data-tema="oscuro"] .fondo-futbol{ background: radial-gradient(120% 90% at 50% -20%, rgba(47,63,168,.16), transparent 60%), radial-gradient(90% 70% at 100% 120%, rgba(214,32,43,.14), transparent 62%); } /* Barrido de luz que cruza el hero: aporta vida a la cabecera sin competir con la imagen. Se sitúa sobre el velo pero debajo del texto (z-index:3). */ .hero::after{ content:""; position:absolute; inset:-20% -10%; z-index:2; pointer-events:none; background: radial-gradient(60% 45% at 12% 0%, rgba(255,255,255,.16), transparent 60%), radial-gradient(40% 30% at 88% 100%, rgba(242,183,5,.12), transparent 60%); mix-blend-mode:screen; animation:barrido-hero 11s ease-in-out infinite alternate; } @keyframes barrido-hero{ from{transform:translate3d(-4%,-2%,0) scale(1); opacity:.55;} to {transform:translate3d(8%, 3%, 0) scale(1.06); opacity:1;} } /* Respeta la preferencia de movimiento reducido: sin barrido y el lienzo queda como textura estática (el JS tampoco lo anima en ese caso). */ @media (prefers-reduced-motion: reduce){ .hero::after{animation:none;} } /* --------------------------------------------------------- 16. RESPONSIVE */ @media (min-width:992px){ .buscador-nav{display:block;} } @media (max-width:991.98px){ .navbar-collapse{ background:var(--superficie);border-radius:var(--radio);padding:1rem;margin-top:.7rem; box-shadow:var(--sombra-md); } .acciones-nav{justify-content:space-between;margin-top:.8rem;} .marcador{margin-top:-60px;} .marcador-cuerpo{grid-template-columns:1fr;gap:1.6rem;} .marcador-vs{font-size:1.6rem;} .galeria-rejilla{columns:2;} .hero-controles{display:none;} } @media (max-width:767.98px){ .hero{height:78vh;min-height:520px;} .hero-contenido{padding-bottom:60px;} .franja-datos{grid-template-columns:repeat(2,1fr);} .fila-resultado{grid-template-columns:1fr;text-align:center;gap:.5rem;} .fila-resultado .equipo,.fila-resultado .equipo.visita{justify-content:center;} .galeria-rejilla{columns:1;} .tarjeta-jugador .dorsal{font-size:2.4rem;} } /* ============================================================================= 17 · AVISO DE COOKIES ============================================================================= */ .aviso-cookies{ position:fixed; left:1rem; right:1rem; bottom:1rem; z-index:1080; max-width:920px; margin:0 auto; display:flex; align-items:center; gap:1rem; background:var(--superficie); color:var(--texto); border:1px solid var(--borde); border-radius:var(--radio); box-shadow:var(--sombra-lg); padding:1rem 1.25rem; transform:translateY(140%); opacity:0; transition:transform .45s cubic-bezier(.22,.61,.36,1), opacity .45s ease; } .aviso-cookies.visible{ transform:translateY(0); opacity:1; } .aviso-cookies-icono{ flex:0 0 auto; width:48px; height:48px; border-radius:14px; display:grid; place-items:center; font-size:1.3rem; color:#fff; background:var(--franja); } .aviso-cookies-texto{ flex:1 1 auto; } .aviso-cookies-texto strong{ display:block; font-size:1rem; margin-bottom:.15rem; } .aviso-cookies-texto p{ margin:0; font-size:.86rem; color:var(--texto-suave); line-height:1.45; } .aviso-cookies-texto a{ color:var(--club-rojo); font-weight:600; } .aviso-cookies-acciones{ flex:0 0 auto; display:flex; gap:.5rem; } .btn-cookies-min{ background:transparent; border:1px solid var(--borde); color:var(--texto-suave); } .btn-cookies-min:hover{ background:var(--superficie-2); color:var(--texto); } @media (max-width:640px){ .aviso-cookies{ flex-wrap:wrap; text-align:left; } .aviso-cookies-acciones{ width:100%; } .aviso-cookies-acciones .btn{ flex:1; } } /* ============================================================================= 18 · ASISTENTE VIRTUAL ============================================================================= */ .asistente{ position:fixed; right:1.25rem; bottom:1.25rem; z-index:1075; } /* El atributo hidden debe ocultar de verdad estos elementos, aunque más abajo se les asigne display:flex. Sin esto, el panel asomaría antes de abrirlo. */ .asistente-panel[hidden], .asistente-globo[hidden], .asistente-notif[hidden]{ display:none !important; } /* Botón flotante */ .asistente-boton{ width:62px; height:62px; border-radius:50%; border:none; cursor:pointer; background:var(--franja); box-shadow:var(--sombra-md); display:grid; place-items:center; padding:0; position:relative; transition:transform var(--transicion), box-shadow var(--transicion); } .asistente-boton:hover{ transform:translateY(-3px) scale(1.04); box-shadow:var(--sombra-lg); } .asistente-boton img{ width:38px; height:38px; object-fit:contain; filter:drop-shadow(0 1px 2px rgba(0,0,0,.3)); } .asistente-boton::after{ /* Aro pulsante para llamar la atención */ content:''; position:absolute; inset:-4px; border-radius:50%; border:2px solid var(--club-rojo); opacity:.6; animation:pulso-asistente 2.4s ease-out infinite; } @keyframes pulso-asistente{ 0%{ transform:scale(1); opacity:.6; } 70%{ transform:scale(1.35); opacity:0; } 100%{ opacity:0; } } .asistente-notif{ position:absolute; top:-2px; right:-2px; min-width:20px; height:20px; padding:0 5px; background:var(--club-rojo); color:#fff; border:2px solid var(--superficie); border-radius:12px; font-size:.7rem; font-weight:700; display:grid; place-items:center; } /* Globo de saludo (preview) */ .asistente-globo{ position:absolute; right:0; bottom:76px; width:min(280px,78vw); background:var(--superficie); color:var(--texto); border:1px solid var(--borde); border-radius:var(--radio); box-shadow:var(--sombra-lg); padding:1rem 1.1rem; animation:aparece-globo .35s ease both; } .asistente-globo::after{ content:''; position:absolute; right:26px; bottom:-8px; width:16px; height:16px; background:var(--superficie); border-right:1px solid var(--borde); border-bottom:1px solid var(--borde); transform:rotate(45deg); } .asistente-globo p{ margin:0; font-size:.88rem; line-height:1.5; padding-right:.5rem; } .asistente-globo-x{ position:absolute; top:6px; right:8px; border:none; background:none; cursor:pointer; font-size:1.2rem; line-height:1; color:var(--texto-suave); } @keyframes aparece-globo{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:translateY(0); } } /* Panel de conversación */ .asistente-panel{ position:absolute; right:0; bottom:76px; width:min(340px,86vw); background:var(--superficie); border:1px solid var(--borde); border-radius:var(--radio-lg); box-shadow:var(--sombra-lg); overflow:hidden; display:flex; flex-direction:column; max-height:min(70vh,540px); animation:aparece-panel .3s cubic-bezier(.22,.61,.36,1) both; } @keyframes aparece-panel{ from{ opacity:0; transform:translateY(16px) scale(.96); } to{ opacity:1; transform:translateY(0) scale(1); } } .asistente-cab{ display:flex; align-items:center; gap:.7rem; padding:.85rem 1rem; background:var(--club-tinta); color:#fff; } .asistente-cab img{ border-radius:50%; background:rgba(255,255,255,.1); padding:3px; } .asistente-cab-txt{ flex:1 1 auto; line-height:1.15; } .asistente-cab-txt strong{ display:block; font-size:.98rem; } .asistente-cab-txt span{ font-size:.74rem; color:rgba(255,255,255,.72); display:flex; align-items:center; gap:.35rem; } .punto-online{ width:8px; height:8px; border-radius:50%; background:#39d98a; display:inline-block; } .asistente-cerrar{ border:none; background:none; color:#fff; font-size:1.1rem; cursor:pointer; opacity:.85; } .asistente-cerrar:hover{ opacity:1; } .asistente-mensajes{ flex:1 1 auto; overflow-y:auto; padding:1rem; display:flex; flex-direction:column; gap:.6rem; background:var(--superficie-2); } .asis-msj{ max-width:85%; padding:.6rem .85rem; border-radius:14px; font-size:.87rem; line-height:1.45; } .asis-msj-bot{ align-self:flex-start; background:var(--superficie); border:1px solid var(--borde); border-bottom-left-radius:4px; } .asis-msj-user{ align-self:flex-end; background:var(--club-azul); color:#fff; border-bottom-right-radius:4px; } .asis-msj a.asis-enlace{ display:inline-flex; align-items:center; gap:.4rem; margin-top:.5rem; font-weight:600; color:var(--club-rojo); text-decoration:none; font-size:.85rem; } .asis-msj a.asis-enlace:hover{ text-decoration:underline; } .asis-escribiendo{ align-self:flex-start; display:flex; gap:4px; padding:.7rem .85rem; } .asis-escribiendo span{ width:7px; height:7px; border-radius:50%; background:var(--texto-suave); opacity:.5; animation:parpadeo-punto 1.2s infinite; } .asis-escribiendo span:nth-child(2){ animation-delay:.2s; } .asis-escribiendo span:nth-child(3){ animation-delay:.4s; } @keyframes parpadeo-punto{ 0%,60%,100%{ opacity:.25; } 30%{ opacity:1; } } .asistente-sugerencias{ display:flex; flex-wrap:wrap; gap:.4rem; padding:.75rem 1rem; border-top:1px solid var(--borde); background:var(--superficie); } .asistente-sugerencias button{ border:1px solid var(--borde); background:var(--superficie-2); color:var(--texto); border-radius:999px; padding:.35rem .8rem; font-size:.8rem; cursor:pointer; transition:background var(--transicion), border-color var(--transicion); } .asistente-sugerencias button:hover{ background:var(--club-rojo); color:#fff; border-color:var(--club-rojo); } /* Campo de texto para escribir preguntas */ .asistente-form{ display:flex; align-items:center; gap:.5rem; padding:.7rem 1rem; border-top:1px solid var(--borde); background:var(--superficie); } .asistente-form input{ flex:1 1 auto; border:1px solid var(--borde); background:var(--superficie-2); color:var(--texto); border-radius:999px; padding:.55rem .9rem; font-size:.85rem; outline:none; transition:border-color var(--transicion); } .asistente-form input:focus{ border-color:var(--club-azul); } .asistente-form input::placeholder{ color:var(--texto-suave); } .asistente-form button{ flex:0 0 auto; width:38px; height:38px; border-radius:50%; border:none; cursor:pointer; background:var(--club-rojo); color:#fff; display:grid; place-items:center; transition:background var(--transicion), transform var(--transicion); } .asistente-form button:hover{ background:var(--club-azul); transform:scale(1.05); } @media (max-width:480px){ .asistente{ right:1rem; bottom:1rem; } .asistente-panel{ width:calc(100vw - 2rem); } } /* El aro pulsante molesta a quien prefiere menos movimiento */ @media (prefers-reduced-motion:reduce){ .asistente-boton::after{ animation:none; } .asis-escribiendo span{ animation:none; } }