/* ===================================================================== FIFA.COM — Sistema de estilos fiel (Copa Mundial 2026) Tokens extraídos de las variables CSS reales de https://www.fifa.com/es/tournaments/mens/worldcup/canadamexicousa2026 (junio 2026): paleta "fcds", color primario #4462ED, base navy #020F2A, tipografía FIFASans → Poppins (sustituto libre) → Noto Sans. Prefijo de clases: .fc- · Activar con ===================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Noto+Sans:wght@400;500;600&display=swap'); :root { /* --- Base / superficies ----------------------------------------- */ --fc-navy: #020F2A; /* fondo base del sitio */ --fc-black: #000000; /* secciones hero / editorial */ --fc-white: #FFFFFF; --fc-surface: #FFFFFF; /* secciones de contenido (tablas) */ --fc-surface-2: #F7F9FC; /* fcds-lightest-grey */ /* --- Color primario --------------------------------------------- */ --fc-primary: #4462ED; /* azul eléctrico FIFA (banda/acento) */ --fc-primary-700: #2C46C8; /* --- Paleta fcds ------------------------------------------------- */ --fc-blue: #045694; --fc-blue-med: #0070DF; --fc-blue-light: #D9E6EF; --fc-green: #00B140; --fc-green-med: #27DF6A; --fc-green-light: #D9F3E2; --fc-yellow: #FFCC00; --fc-yellow-med: #FFE476; --fc-yellow-light:#FFF7D8; --fc-orange: #F09316; --fc-orange-light:#FCF2E1; --fc-red: #DF1C3C; --fc-red-light: #FCEAED; /* --- Grises fcds ------------------------------------------------- */ --fc-grey: #505B73; /* texto secundario / micro-cabeceras */ --fc-grey-med: #A5ACBB; --fc-grey-light: #E4E8F0; /* bordes de tabla */ --fc-grey-lightest:#F7F9FC; /* --- Gradientes (reales del sitio) ------------------------------ */ --fc-grad-blue: linear-gradient(135.6deg, #D9E6EF 1.03%, #0070DF 48%, #045694); --fc-grad-green: linear-gradient(135.6deg, #D9F3E2 1.03%, #27DF6A 48%, #00B140); --fc-grad-yellow: linear-gradient(135.6deg, #FFF7D8 1.03%, #FFE476 48%, #FFCC00); --fc-grad-header: linear-gradient(90deg, #045694 0%, #020F2A 70%); /* --- Tipografía -------------------------------------------------- */ --fc-font: 'Poppins', 'Noto Sans', 'Helvetica Neue', Arial, sans-serif; /* --- Forma ------------------------------------------------------- */ --fc-radius: 4px; /* tarjetas/inputs (real del sitio) */ --fc-radius-lg: 16px; /* promos / módulos destacados */ --fc-pill: 999px; /* botones */ --fc-maxw: 1240px; --fc-shadow: 0 8px 28px rgba(2,15,42,.16); } /* --------------------------------------------------------------------- Base --------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } body.fc { margin: 0; font-family: var(--fc-font); background: var(--fc-navy); color: var(--fc-white); -webkit-font-smoothing: antialiased; line-height: 1.5; } /* En FIFA.com los títulos son Poppins peso 600 en CAJA NORMAL (no mayúsculas) */ .fc h1, .fc h2, .fc h3 { font-weight: 600; letter-spacing: -.01em; line-height: 1.15; margin: 0 0 .5em; } .fc h1 { font-size: clamp(28px, 4.5vw, 44px); } .fc h2 { font-size: clamp(22px, 3vw, 30px); } .fc h3 { font-size: 20px; } .fc a { color: var(--fc-primary); text-decoration: none; } .fc a:hover { text-decoration: underline; } .fc-container { max-width: var(--fc-maxw); margin-inline: auto; padding: 0 20px; } /* --------------------------------------------------------------------- Cabecera FIFA (barra navy + subnav negra) --------------------------------------------------------------------- */ .fc-topbar { background: var(--fc-grad-header); } .fc-topbar__inner { display: flex; align-items: center; gap: 18px; height: 50px; max-width: var(--fc-maxw); margin-inline: auto; padding: 0 20px; } .fc-logo { font-weight: 700; font-size: 20px; letter-spacing: .5px; color: #fff; font-style: italic; } .fc-topbar__spacer { margin-left: auto; } .fc-topbar__links { display: flex; gap: 18px; font-size: 12px; color: #cfd6e6; } .fc-subnav { background: var(--fc-black); border-bottom: 1px solid #15203a; } .fc-subnav__inner { display: flex; align-items: center; gap: 26px; height: 56px; max-width: var(--fc-maxw); margin-inline: auto; padding: 0 20px; overflow-x: auto; } .fc-subnav__brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .5px; white-space: nowrap; } .fc-subnav__link { color: #fff; font-size: 13px; text-transform: uppercase; letter-spacing: .3px; white-space: nowrap; opacity: .92; } .fc-subnav__link:hover { opacity: 1; text-decoration: none; color: var(--fc-yellow); } .fc-subnav__link.is-active { color: var(--fc-yellow); } /* --------------------------------------------------------------------- Banda de torneo (azul primario) + countdown --------------------------------------------------------------------- */ .fc-band { background: var(--fc-primary); } .fc-band__inner { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; max-width: var(--fc-maxw); margin-inline: auto; padding: 18px 20px; } .fc-band__title { font-weight: 600; font-size: 22px; } .fc-band__dates { font-size: 13px; opacity: .85; } .fc-band__spacer { margin-left: auto; } .fc-countdown { display: flex; gap: 16px; } .fc-countdown__cell { text-align: center; min-width: 44px; } .fc-countdown__num { font-size: 28px; font-weight: 600; line-height: 1; } .fc-countdown__lab { font-size: 11px; opacity: .8; } /* --------------------------------------------------------------------- Botones (píldora) --------------------------------------------------------------------- */ .fc-btn { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-family: var(--fc-font); font-weight: 600; font-size: 14px; border: 1px solid transparent; padding: 11px 22px; border-radius: var(--fc-pill); transition: .15s; } .fc-btn--black { background: var(--fc-black); color: #fff; } .fc-btn--white { background: #fff; color: var(--fc-black); } .fc-btn--primary { background: var(--fc-primary); color: #fff; } .fc-btn--outline { background: transparent; color: #fff; border-color: rgba(255,255,255,.6); } .fc-btn:hover { transform: translateY(-1px); } /* --------------------------------------------------------------------- Superficies de contenido (claras, como las páginas de datos) --------------------------------------------------------------------- */ .fc-surface { background: var(--fc-surface); color: var(--fc-black); } .fc-surface--soft { background: var(--fc-surface-2); } .fc-surface .fc-section { padding: 36px 0; } .fc-surface h1, .fc-surface h2, .fc-surface h3 { color: var(--fc-black); } /* --------------------------------------------------------------------- Tarjetas / promos --------------------------------------------------------------------- */ .fc-card { background: #fff; color: var(--fc-black); border: 1px solid var(--fc-grey-light); border-radius: var(--fc-radius); } .fc-promo { background: var(--fc-primary); color: #fff; border-radius: var(--fc-radius-lg); padding: 28px; } .fc-promo--panel { background: rgba(2,15,42,.35); border-radius: 12px; padding: 14px; } /* --------------------------------------------------------------------- Etiquetas / chips (paleta fcds) --------------------------------------------------------------------- */ .fc-tag { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--fc-pill); font-size: 12px; font-weight: 600; } .fc-tag--blue { background: var(--fc-blue-light); color: var(--fc-blue); } .fc-tag--green { background: var(--fc-green-light); color: var(--fc-green); } .fc-tag--yellow { background: var(--fc-yellow-light); color: #8a6d00; } .fc-tag--red { background: var(--fc-red-light); color: var(--fc-red); } .fc-tag--live { background: var(--fc-red); color: #fff; } /* --------------------------------------------------------------------- Tabla de clasificación (estilo FIFA: clara, bordes #e4e8f0) --------------------------------------------------------------------- */ .fc-table { width: 100%; border-collapse: collapse; background: #fff; color: var(--fc-black); font-family: var(--fc-font); } .fc-table th { font-weight: 500; font-size: 13px; color: var(--fc-grey); text-align: center; padding: 14px 6px; border-bottom: 1px solid var(--fc-grey-light); } .fc-table th.fc-teamcol, .fc-table td.fc-teamcol { text-align: left; padding-left: 16px; } .fc-table td { font-size: 15px; padding: 14px 6px; text-align: center; border-bottom: 1px solid var(--fc-grey-light); } .fc-table .fc-pos { color: var(--fc-grey); width: 30px; } .fc-table .fc-pts { font-weight: 700; } .fc-table tbody tr:hover { background: var(--fc-surface-2); } /* franja de clasificación a octavos */ .fc-row--q { box-shadow: inset 3px 0 0 var(--fc-green); } .fc-row--q3 { box-shadow: inset 3px 0 0 var(--fc-yellow); } .fc-team { display: inline-flex; align-items: center; gap: 10px; } .fc-flag { width: 24px; height: 18px; border-radius: 2px; object-fit: cover; } /* --------------------------------------------------------------------- Ficha de partido --------------------------------------------------------------------- */ .fc-match { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--fc-grey-light); background: #fff; color: var(--fc-black); } .fc-match__home { display: flex; align-items: center; gap: 10px; justify-content: flex-end; text-align: right; } .fc-match__away { display: flex; align-items: center; gap: 10px; } .fc-match__score { font-weight: 700; font-size: 18px; min-width: 70px; text-align: center; background: var(--fc-surface-2); border-radius: var(--fc-radius); padding: 6px 8px; } /* --------------------------------------------------------------------- Utilidades --------------------------------------------------------------------- */ .fc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px,1fr)); gap: 16px; } .fc-muted { color: var(--fc-grey); } .fc-section-title { font-weight: 600; font-size: 26px; margin: 0 0 18px; } @media (max-width: 640px) { .fc-band__inner { gap: 12px; } .fc-countdown { gap: 10px; } .fc-countdown__num { font-size: 22px; } .fc-band__spacer { margin-left: 0; width: 100%; } .fc-table { font-size: 14px; } .fc-table th, .fc-table td { padding: 10px 4px; } }