/* ================================================================ Welcome.css – Polla Futbolera Multiroble 2026 Tipografía y Paleta Oficial: FIFA World Cup 2026™ Event Typeface: Bebas Neue | Supporting: Noto Sans Las fuentes se cargan desde el del HTML (más rápido) ================================================================ */ /* Tipografia local oficial (TTF): - FWC2026-SemiExpandedBlack.e378fa1c.ttf -> Titulos - FWC2026-NormalRegular.77c3c249.ttf -> Texto general Si faltan, se usa el fallback web del . */ @font-face { font-family: 'FWC26 Display'; src: url('../fonts/FWC2026-SemiExpandedBlack.e378fa1c.ttf') format('truetype'); font-style: normal; font-weight: 900; font-display: swap; } @font-face { font-family: 'FWC26 Text'; src: url('../fonts/FWC2026-NormalRegular.77c3c249.ttf') format('truetype'); font-style: normal; font-weight: 400; font-display: swap; } :root { --font-display: 'FWC26 Display', 'Bebas Neue', 'Arial Narrow', sans-serif; --font-text: 'FWC26 Text', 'Noto Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; } /* ─── PALETA OFICIAL FWC26 ───────────────────────────────────── Negro #000000 Blanco #FFFFFF Amarillo #FFD100 Rojo #E3001B Naranja #F26522 Verde #007A53 Teal #009CA6 Azul #0035A0 Cielo #4B9FD4 Lima #7DC242 Púrpura #4A1F7A Magenta #C0006E ─────────────────────────────────────────────────────────────── */ /* ---------- RESET ---------- */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } /* ---------- BODY ---------- */ body.welcome-body { overflow: hidden; height: 100vh; width: 100vw; font-family: var(--font-text); font-weight: 400; } /* ---------- FONDO ANIMADO · FWC26 --------- */ .welcome-bg { position: fixed; inset: 0; background: linear-gradient( 135deg, #000000 0%, #0a0520 20%, #4A1F7A 40%, #0035A0 60%, #0a0a0a 80%, #000000 100% ); background-size: 400% 400%; animation: bgShift 12s ease infinite; z-index: -2; } @keyframes bgShift { 0% { background-position: 0% 50%; } 25% { background-position: 100% 50%; } 50% { background-position: 100% 0%; } 75% { background-position: 0% 0%; } 100% { background-position: 0% 50%; } } /* ---------- OVERLAY PATRÓN FWC26 (UNIFY) ---------- */ .field-overlay { position: fixed; inset: 0; background: radial-gradient(ellipse at 0% 100%, rgba(74,31,122,.40) 0%, transparent 50%), radial-gradient(ellipse at 100% 0%, rgba(0,53,160,.40) 0%, transparent 50%), radial-gradient(ellipse at 100% 100%, rgba(0,156,166,.25) 0%, transparent 45%), radial-gradient(ellipse at 0% 0%, rgba(227,0,27,.25) 0%, transparent 40%), repeating-linear-gradient( -45deg, transparent 0px, transparent 80px, rgba(255,209,0,.018) 80px, rgba(255,209,0,.018) 82px ); z-index: -1; } /* ---------- PARTÍCULAS ---------- */ .particle { position: fixed; pointer-events: none; animation: floatUp linear infinite; z-index: 1; user-select: none; } .particle-img { width: 100%; height: 100%; object-fit: contain; border-radius: 6px; filter: drop-shadow(0 0 5px rgba(0,0,0,.35)); } @keyframes floatUp { 0% { transform: translateY(105vh) rotate(0deg); opacity: 0; } 8% { opacity: .9; } 90% { opacity: .6; } 100% { transform: translateY(-10vh) rotate(720deg); opacity: 0; } } /* ---------- CONTENEDOR PRINCIPAL ---------- */ .welcome-container { position: relative; z-index: 10; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; padding: 15px 10px; gap: 14px; } /* ---------- LOGO / BADGE ---------- */ .logo-badge { display: inline-flex; align-items: center; gap: 10px; background: rgba(0,0,0,.35); backdrop-filter: blur(12px); border: 2px solid rgba(255,221,0,.5); border-radius: 50px; padding: 8px 24px; } .logo-icon-img { width: 34px; height: 34px; object-fit: contain; filter: drop-shadow(0 0 8px rgba(255,209,0,.45)); } .logo-icon-fallback { font-family: var(--font-display); font-size: 1rem; letter-spacing: 2px; color: #FFD100; } .logo-text { font-family: var(--font-display); font-size: 1.6rem; color: #FFD100; letter-spacing: 4px; } .logo-year { font-family: var(--font-display); font-size: 1.1rem; color: rgba(255,255,255,.7); letter-spacing: 3px; } /* ---------- MASCOTAS OFICIALES ---------- */ .mascots-official { background: rgba(0,0,0,.40); backdrop-filter: blur(14px); border-radius: 22px; padding: 16px 20px; border: 2px solid rgba(255,209,0,.35); box-shadow: 0 8px 32px rgba(0,0,0,.5), inset 0 0 20px rgba(255,209,0,.03); text-align: center; min-width: 200px; max-width: 300px; transition: transform .3s; } .mascots-official:hover { transform: translateY(-5px); } .mascots-img { width: 260px; max-width: 100%; border-radius: 14px; filter: drop-shadow(0 6px 20px rgba(0,0,0,.7)) brightness(1.05); animation: mascotFloat 3.5s ease-in-out infinite; display: block; margin: 0 auto; } @keyframes mascotFloat { 0%,100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-10px) scale(1.02); } } .mascots-names { display: flex; justify-content: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; } .mascots-names span { font-family: var(--font-display); font-size: .78rem; color: #FFD100; letter-spacing: 1.5px; background: rgba(0,0,0,.35); padding: 3px 9px; border-radius: 10px; border: 1px solid rgba(255,209,0,.3); } .mascots-sub { font-family: var(--font-text); font-size: .58rem; color: rgba(255,255,255,.55); letter-spacing: 1.5px; margin-top: 6px; font-weight: 600; text-transform: uppercase; } /* ---------- FWC26 WORDMARK BLOCK ---------- */ .fwc26-wordmark { background: rgba(0,0,0,.50); backdrop-filter: blur(14px); border-radius: 22px; padding: 18px 22px; border: 2px solid rgba(255,209,0,.35); box-shadow: 0 8px 32px rgba(0,0,0,.5); text-align: center; min-width: 220px; max-width: 260px; display: flex; flex-direction: column; align-items: center; gap: 4px; } .fwc26-emblem-img { width: 120px; max-width: 100%; object-fit: contain; } .fwc26-trophy-img { width: 52px; max-width: 100%; object-fit: contain; filter: drop-shadow(0 0 10px rgba(255,209,0,.45)); } .fwc26-logo-text { font-family: var(--font-display); font-size: 1.5rem; color: #FFD100; letter-spacing: 6px; } .fwc26-logo-sub { font-family: var(--font-display); font-size: 1rem; color: #ffffff; letter-spacing: 4px; } .fwc26-logo-num { font-family: var(--font-display); font-size: 5.4rem; line-height: 1; color: #FFD100; text-shadow: 0 0 30px rgba(255,209,0,.5); animation: numPulse 2.5s ease-in-out infinite; } @keyframes numPulse { 0%,100% { text-shadow: 0 0 20px rgba(255,209,0,.4); } 50% { text-shadow: 0 0 50px rgba(255,209,0,.9), 0 0 80px rgba(242,101,34,.5); } } .fwc26-host-flags { font-size: 1.2rem; letter-spacing: 4px; margin: 4px 0; } .fwc26-slogan { font-family: var(--font-display); font-size: .9rem; color: rgba(255,255,255,.7); letter-spacing: 4px; border-top: 1px solid rgba(255,209,0,.25); padding-top: 6px; margin-top: 4px; width: 100%; } /* ---------- FILA MASCOTAS ---------- */ .mascots-row { display: grid; grid-template-columns: minmax(180px, 260px) minmax(0, 1fr) minmax(180px, 250px); align-items: center; justify-items: center; gap: 20px; width: 100%; max-width: 1200px; } /* ---------- SECCIÓN TÍTULO CENTRAL ---------- */ .main-title-section { width: 100%; text-align: center; min-width: 0; max-width: 100%; padding: 0 8px; overflow: hidden; } /* Pelota animada */ .soccer-ball-wrapper { position: relative; display: flex; align-items: center; justify-content: center; width: clamp(260px, 34vw, 410px); min-height: clamp(86px, 10vw, 132px); margin-bottom: 14px; padding: 14px 18px; overflow: visible; } .soccer-ball-wrapper::before { content: ''; position: absolute; inset: -10px; border-radius: 34px; background: radial-gradient(circle at center, rgba(255,255,255,1) 0%, rgba(255,255,255,.88) 26%, rgba(255,255,255,.48) 54%, rgba(255,255,255,.12) 76%, rgba(255,255,255,0) 100%); box-shadow: 0 0 45px rgba(255,255,255,.55); filter: blur(18px); opacity: 1; z-index: 0; } .soccer-ball-icon { font-size: clamp(3.5rem, 10vw, 5.5rem); display: inline-block; animation: ballBounce 1.8s ease-in-out infinite; filter: drop-shadow(0 0 20px rgba(255,255,255,.4)); } .soccer-ball-image { position: relative; z-index: 1; width: clamp(420px, 56vw, 680px); max-width: none; height: auto; object-fit: contain; display: block; animation: none !important; transform: translateX(clamp(-48px, -4vw, -22px)) !important; transform-origin: center; transition: none !important; clip-path: inset(0 34% 0 0); filter: drop-shadow(0 0 24px rgba(255,255,255,1)) drop-shadow(0 0 54px rgba(255,255,255,.98)); } .soccer-ball-fallback { font-family: var(--font-display); color: #FFD100; } @keyframes ballBounce { 0%,100% { transform: translateY(0) rotate(0deg); } 40% { transform: translateY(-22px) rotate(180deg); } 70% { transform: translateY(-10px) rotate(300deg); } } .ball-glow { position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%); width: 60%; height: 12px; background: rgba(255,221,0,.25); border-radius: 50%; filter: blur(4px); display: none; } @keyframes shadowPulse { 0%,100% { transform: translateX(-50%) scaleX(1); opacity:.4; } 40% { transform: translateX(-50%) scaleX(.4); opacity:.1; } } /* Textos del título */ .welcome-label { font-family: var(--font-text); font-size: clamp(.65rem, 1.8vw, .9rem); font-weight: 600; color: rgba(255,255,255,.85); letter-spacing: clamp(2px, 0.5vw, 4px); margin-bottom: -6px; } .main-title { line-height: .95; margin: 6px 0; } .title-word { display: block; font-family: var(--font-display); font-size: clamp(1.8rem, 4.5vw, 3.6rem); letter-spacing: clamp(1px, 0.4vw, 4px); animation: titleGlow 2.5s ease-in-out infinite; white-space: nowrap; } .title-polla { color: #FFD100; } .title-futbolera{ color: #fff; } @keyframes titleGlow { 0%,100% { text-shadow: 2px 2px 12px rgba(0,0,0,.6), 0 0 30px rgba(255,209,0,.25); } 50% { text-shadow: 2px 2px 12px rgba(0,0,0,.6), 0 0 60px rgba(255,209,0,.8), 0 0 90px rgba(242,101,34,.5); } } .brand-title { font-family: var(--font-display); font-size: clamp(1rem, 3vw, 2rem); letter-spacing: clamp(3px, 0.8vw, 8px); margin: 2px 0 10px; } .brand-title .brand-multi { color: #D57206 !important; text-shadow: none; } .brand-title .brand-roble { color: #218735 !important; text-shadow: none; } /* Badge Mundial · FWC26 Wordmark style */ .world-cup-badge { display: inline-flex; align-items: center; justify-content: center; gap: 10px; background: #FFD100; background-size: 200% 100%; animation: badgeShine 2.5s linear infinite; color: #000; font-family: var(--font-display); font-weight: 700; font-size: clamp(.65rem, 1.8vw, .9rem); padding: 5px 18px; border-radius: 4px; letter-spacing: 3px; box-shadow: 0 2px 14px rgba(255,209,0,.45); margin-bottom: 10px; } .badge-trophy-img { width: 18px; height: 18px; object-fit: contain; } @keyframes badgeShine { 0% { background-position: 0%; } 100% { background-position: 200%; } } /* Banderas sedes */ .host-flags { font-size: 1.5rem; letter-spacing: 6px; animation: flagsBounce 2s ease-in-out infinite; } @keyframes flagsBounce { 0%,100% { transform: scale(1); } 50% { transform: scale(1.08); } } /* ---------- SECCIÓN REDIRECCIÓN ---------- */ .redirect-section { text-align: center; width: 100%; max-width: 380px; background: rgba(0,0,0,.3); backdrop-filter: blur(10px); border-radius: 16px; padding: 14px 20px; border: 1px solid rgba(255,255,255,.2); } .redirect-label { color: rgba(255,255,255,.9); font-size: .82rem; font-weight: 500; letter-spacing: 1px; margin-bottom: 8px; display: flex; align-items: center; justify-content: center; gap: 8px; } /* Loader puntitos */ .dots-loader { display: inline-flex; gap: 4px; } .dots-loader span { width: 6px; height: 6px; background: #FFD100; border-radius: 50%; animation: dotPulse 1.2s ease-in-out infinite; } .dots-loader span:nth-child(2) { animation-delay: .2s; } .dots-loader span:nth-child(3) { animation-delay: .4s; } @keyframes dotPulse { 0%,100% { transform: scale(1); opacity:.5; } 50% { transform: scale(1.5); opacity:1; } } /* Barra de progreso */ .progress-container { background: rgba(255,255,255,.15); border-radius: 10px; height: 10px; overflow: hidden; margin: 6px 0 8px; } .progress-fill { height: 100%; width: 0%; background: linear-gradient(90deg, #4A1F7A, #0035A0, #009CA6, #007A53, #FFD100, #F26522, #E3001B); background-size: 400% 100%; animation: progressShine 1.5s linear infinite; border-radius: 10px; transition: width .25s linear; } @keyframes progressShine { 0% { background-position: 0%; } 100% { background-position: 300%; } } .countdown-text { color: rgba(255,255,255,.8); font-size: .78rem; margin-bottom: 10px; } #countdown-num { font-family: var(--font-display); font-size: 1.3rem; color: #FFD100; } /* Botón entrar ahora · FWC26 */ .btn-enter { background: linear-gradient(135deg, #FFD100 0%, #F26522 100%); color: #000; border: none; padding: 9px 28px; border-radius: 4px; font-family: var(--font-display); font-size: 1.05rem; letter-spacing: 3px; cursor: pointer; box-shadow: 0 4px 18px rgba(255,209,0,.4); transition: transform .2s, box-shadow .2s; text-transform: uppercase; } .btn-enter:hover { transform: translateY(-2px) scale(1.05); box-shadow: 0 6px 28px rgba(255,209,0,.65); } .btn-enter:active { transform: scale(.97); } /* ---------- FOOTER WORLD CUP ---------- */ .welcome-footer { position: fixed; left: 0; right: 0; bottom: 0; z-index: 12; padding: 8px 14px 10px; background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.72) 40%, rgba(0,0,0,.86) 100%); } .footer-brand-assets { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; } .footer-asset-card { min-width: 140px; max-width: 190px; flex: 1; background: rgba(9,11,30,.6); border: 1px solid rgba(255,209,0,.2); border-radius: 10px; padding: 6px 8px; text-align: center; } .footer-asset-label { display: block; font-family: var(--font-display); color: #FFD100; letter-spacing: 2px; font-size: .7rem; margin-bottom: 2px; } .footer-asset-img { width: 100%; max-height: 48px; object-fit: contain; } .footer-asset-fallback { font-family: var(--font-display); font-size: .8rem; color: #fff; letter-spacing: 1px; } .footer-copy { margin-top: 6px; text-align: center; font-size: .62rem; color: rgba(255,255,255,.8); letter-spacing: .8px; } /* ================================================================ RESPONSIVE ================================================================ */ @media (max-width: 700px) { .welcome-container { justify-content: flex-start; padding-top: 10px; padding-bottom: 148px; min-height: 100dvh; } .mascots-row { display: flex; gap: 14px; flex-direction: row; align-items: flex-start; justify-content: center; flex-wrap: wrap; } .mascots-official { min-width: 160px; max-width: 220px; padding: 10px 12px; } .mascots-img { width: 180px; } .main-title-section { order: -1; min-width: 0; width: 100%; max-width: 100%; } .title-word { font-size: clamp(1.6rem, 7vw, 3rem); letter-spacing: clamp(1px, 0.3vw, 3px); } .brand-title { font-size: clamp(.9rem, 4.5vw, 1.6rem); letter-spacing: clamp(2px, 0.5vw, 6px); } .fwc26-wordmark { min-width: 180px; max-width: 210px; padding: 12px; } .fwc26-logo-num { font-size: 3.5rem; } } @media (max-width: 400px) { body.welcome-body { overflow-y: auto; overflow-x: hidden; height: auto; } .welcome-container { padding-bottom: 166px; } .mascots-row { flex-direction: column; gap: 10px; } .mascots-official { min-width: 92%; max-width: 92%; } .mascots-img { width: 100%; max-width: 260px; } .main-title-section { min-width: 0; width: 96%; } .title-word { font-size: clamp(1.5rem, 9vw, 2.4rem); letter-spacing: 2px; } .brand-title { font-size: clamp(.85rem, 5.5vw, 1.4rem); letter-spacing: 3px; } .fwc26-wordmark { min-width: 92%; max-width: 92%; } .footer-asset-card { min-width: 30%; } .footer-asset-img { max-height: 40px; } }