/* Circuito Hispano de Debate · Propuesta final Capa de efectos sobre la web original. No cambia su identidad (colores, cristal, formato por pestañas): solo añade luz y movimiento tomados de las demos Aurora, Escenario, Constelación y Nácar. */ :root { --fx-light: 225, 236, 255; --fx-pink: #ff83b0; --fx-blue: #7aabff; --fx-ease: cubic-bezier(.2, .8, .2, 1); } body { font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } /* ───── Logo: el emblema CHD como globo que gira ───── */ .emblem.fx-emblem { position: relative; overflow: hidden; isolation: isolate; color: #fff; border-color: rgba(190, 214, 255, .6); font-size: 18px; font-weight: 700; letter-spacing: -1.2px; padding-right: 1px; text-shadow: 0 1px 6px rgba(6, 14, 40, .85), 0 0 2px rgba(6, 14, 40, .8); box-shadow: 0 0 18px rgba(122, 171, 255, .25); } .fx-emblem-globe { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; border-radius: 50%; pointer-events: none; } /* ───── Luz del cursor (Escenario) ───── */ .fx-light { position: fixed; inset: 0; z-index: 40; pointer-events: none; mix-blend-mode: screen; background: radial-gradient(480px circle at var(--mx, -999px) var(--my, -999px), rgba(var(--fx-light), .1), transparent 62%); } @media (hover: none) { .fx-light { display: none; } } /* Brillo del cursor dentro de cada panel de cristal (Aurora) */ .fx-glow { isolation: isolate; } .fx-glare { display: block; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1; opacity: 0; transition: opacity .45s; background: radial-gradient(380px circle at var(--lx, 50%) var(--ly, 0%), rgba(255, 255, 255, .1), transparent 60%); } .fx-glow:hover > .fx-glare { opacity: 1; } /* ───── Inicio: palabras que revela la luz (Escenario) ───── */ .home-scene { position: relative; } .home-scene > .hero, .home-scene > .network { position: relative; z-index: 1; } .fx-words { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; display: flex; flex-direction: column; justify-content: center; gap: .04em; font-size: clamp(60px, 8.4vw, 128px); font-weight: 800; line-height: 1; letter-spacing: -.045em; text-transform: uppercase; color: transparent; -webkit-text-stroke: 1px rgba(220, 233, 255, .3); -webkit-mask-image: radial-gradient(circle 230px at var(--wx, -999px) var(--wy, -999px), #000, rgba(0, 0, 0, .4) 45%, transparent); mask-image: radial-gradient(circle 230px at var(--wx, -999px) var(--wy, -999px), #000, rgba(0, 0, 0, .4) 45%, transparent); } .fx-words div { white-space: nowrap; } .fx-words span { display: inline-block; animation: fxDrift 100s linear infinite; } .fx-words div:nth-child(even) span { animation-direction: reverse; animation-duration: 120s; } @keyframes fxDrift { to { transform: translateX(-50%); } } /* ───── Inicio: el foco, el atril y las partículas «CHD» dan paso al globo ───── */ .globe-stage .fx-stage { position: absolute; left: -30px; top: -80px; width: calc(100% + 60px); height: calc(100% + 80px); pointer-events: none; z-index: 4; } .fx-atril { position: absolute; left: 50%; bottom: 3%; height: 34%; transform: translateX(-50%); transform-origin: 50% 100%; z-index: 3; pointer-events: none; transition: transform 1.6s cubic-bezier(.65, 0, .35, 1), opacity 1.3s ease, filter 1.3s ease; } .fx-atril svg { display: block; height: 100%; width: auto; opacity: 0; transform: translateY(16px); transition: opacity 1.6s ease .6s, transform 1.9s var(--fx-ease) .6s; } .globe-stage.fx-on .fx-atril svg { opacity: 1; transform: none; } .globe-stage.fx-out .fx-atril { opacity: 0; filter: blur(8px); transform: translateX(-50%) translateY(28%) scale(.9); } .globe-stage.fx-done .fx-atril { display: none; } .globe-stage #globe { transition: opacity 1.5s ease, filter 1.6s ease; } .globe-stage .globe-badge, .globe-stage .globe-city, .globe-stage .globe-instruction, .globe-stage .globe-orbit { transition: opacity 1.4s ease .3s; } .globe-stage.fx-intro #globe { opacity: 0; filter: blur(10px); } .globe-stage.fx-intro .globe-badge, .globe-stage.fx-intro .globe-city, .globe-stage.fx-intro .globe-instruction, .globe-stage.fx-intro .globe-orbit { opacity: 0; } .globe-legend { transition: opacity 1.4s ease .4s; } .fx-legend-off { opacity: 0; } /* ───── Tu carnet: foco, reflejo y el tarjetón con lo que incluye (Escenario + Nácar) ───── */ .card-stage { position: relative; } .fx-spot { position: absolute; left: 50%; top: -150px; width: 130%; height: calc(100% + 150px); transform: translateX(-50%); pointer-events: none; z-index: -1; background: conic-gradient(from 160deg at 50% 0%, transparent 0deg, rgba(var(--fx-light), .07) 12deg, rgba(var(--fx-light), .13) 20deg, rgba(var(--fx-light), .07) 28deg, transparent 40deg); -webkit-mask-image: linear-gradient(#000 30%, transparent 92%); mask-image: linear-gradient(#000 30%, transparent 92%); opacity: 0; transition: opacity 1.8s ease .2s; } .card-stage.fx-lit .fx-spot { opacity: 1; } .fx-sweep { position: absolute; inset: 0; z-index: 4; pointer-events: none; overflow: hidden; border-radius: inherit; } .fx-sweep::before { content: ""; position: absolute; top: -30%; bottom: -30%; left: -50%; width: 32%; transform: skewX(-18deg); background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .22), transparent); animation: fxSweep 7s ease-in-out 1.2s infinite; } @keyframes fxSweep { 0% { left: -50%; } 22%, 100% { left: 135%; } } .fx-hint-actions { display: flex; gap: 10px; flex-wrap: wrap; } .softbutton.fx-ig { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; color: #fff; border-color: rgba(255, 138, 182, .5); background: linear-gradient(110deg, rgba(255, 138, 182, .2), rgba(187, 200, 255, .14)); } .softbutton.fx-ig:hover { background: linear-gradient(110deg, rgba(255, 138, 182, .3), rgba(187, 200, 255, .22)); } .fx-ig svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; } .fx-ig svg .fill { fill: currentColor; stroke: none; } .fx-ig.nudge { animation: fxNudge 1.6s ease 2; } @keyframes fxNudge { 50% { box-shadow: 0 0 0 9px rgba(255, 138, 182, .18); } } .fx-success-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; } .license-copy.fx-offer { position: relative; padding: 38px 36px 32px; border-radius: 30px; border: 1px solid rgba(255, 255, 255, .145); background: linear-gradient(135deg, rgba(255, 255, 255, .085), rgba(255, 255, 255, .02)); backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px); box-shadow: inset 0 1px rgba(255, 255, 255, .13), 0 30px 70px rgba(14, 21, 57, .22); } .fx-offer > :not(.fx-glare) { position: relative; z-index: 1; } .fx-offer h3 { margin: 16px 0 24px; } .fx-ticks { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 13px; } .fx-ticks li { display: flex; gap: 13px; align-items: flex-start; font-size: 17px; line-height: 1.45; color: #dbe7fb; } .fx-ticks i { position: relative; flex: none; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; background: linear-gradient(135deg, #7ff2bd, #2fd08e); box-shadow: 0 4px 14px rgba(47, 208, 142, .35); } .fx-ticks i::after { content: ""; position: absolute; left: 8px; top: 5px; width: 4.5px; height: 9px; border: solid #0b3a26; border-width: 0 2px 2px 0; transform: rotate(42deg); } .fx-ticks .t-fiera { color: #fff; font-weight: 500; } .fx-ticks .t-fiera i { background: linear-gradient(135deg, #fba1c3, #e4579d); box-shadow: 0 4px 14px rgba(228, 87, 157, .35); } .fx-ticks .t-fiera i::after { border-color: #fff; } .fx-offer .price { padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .14); } /* ───── Rankings: focos sobre el podio (Escenario) ───── */ .podium { position: relative; isolation: isolate; } .podium::before { content: ""; position: absolute; left: 0; right: 0; top: -60px; bottom: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity 1.4s ease; background: conic-gradient(from 164deg at 18% -6%, transparent 0deg, rgba(var(--fx-light), .07) 12deg, transparent 28deg), conic-gradient(from 160deg at 50% -10%, transparent 0deg, rgba(var(--fx-light), .09) 12deg, rgba(var(--fx-light), .16) 20deg, rgba(var(--fx-light), .09) 28deg, transparent 40deg), conic-gradient(from 168deg at 82% -6%, transparent 0deg, rgba(var(--fx-light), .07) 12deg, transparent 28deg); -webkit-mask-image: linear-gradient(#000 25%, transparent 95%); mask-image: linear-gradient(#000 25%, transparent 95%); } .podium.fx-lit::before { opacity: 1; } /* ───── FIERA: debate en vivo, explorador y veredicto ───── */ .fx-fiera-visual { aspect-ratio: auto; min-height: 520px; padding: 54px 0; } /* Las etiquetas flotantes de la web original, en los márgenes para no tapar la consola */ .fx-fiera-visual .floating-feature { z-index: 3; } .fx-fiera-visual .ff1 { top: 6px; left: 4%; right: auto; bottom: auto; } .fx-fiera-visual .ff3 { top: 6px; right: 6%; left: auto; bottom: auto; } .fx-fiera-visual .ff2 { bottom: 6px; right: 14%; left: auto; top: auto; } .fx-console { position: relative; z-index: 2; width: min(100%, 560px); padding: 20px; border-radius: 30px; transform: rotate(-2deg); border: 1px solid rgba(211, 229, 255, .44); background: linear-gradient(140deg, rgba(255, 255, 255, .17), rgba(255, 255, 255, .05)); backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px); box-shadow: inset 0 1px rgba(255, 255, 255, .33), 0 35px 65px rgba(15, 22, 79, .21); } .fx-console > :not(.fx-glare) { position: relative; z-index: 1; } .con-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; } .con-motion { font-size: 15px; color: #e3edff; } .con-badge { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 99px; font-size: 12px; font-weight: 600; color: #ffd0e2; border: 1px solid rgba(255, 138, 182, .5); background: rgba(255, 138, 182, .14); transition: color .4s, border-color .4s, background .4s; } .con-badge i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: fxBlink 1.2s infinite; } .con-badge.you { color: #d6e5ff; border-color: rgba(122, 171, 255, .55); background: rgba(122, 171, 255, .16); } @keyframes fxBlink { 50% { opacity: .25; } } .turns { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 16px 0; } .turns span { padding-top: 8px; border-top: 2px solid rgba(255, 255, 255, .16); font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #9fb4d6; transition: color .4s, border-color .4s; } .turns span.done { border-color: rgba(255, 255, 255, .4); color: #c8d9f2; } .turns span.on { border-color: var(--fx-pink); color: #ffd0e2; } .con-body { display: grid; grid-template-columns: minmax(120px, .6fr) 1fr; gap: 18px; } .con-portrait { position: relative; margin: 0; border-radius: 20px; overflow: hidden; aspect-ratio: 4 / 5; background: linear-gradient(150deg, #5d7190, #26394e); box-shadow: 0 0 0 1.5px rgba(255, 138, 182, .65), 0 0 36px rgba(255, 138, 182, .28); transition: box-shadow .6s; } .con-portrait.you { box-shadow: 0 0 0 1.5px rgba(122, 171, 255, .6), 0 0 30px rgba(122, 171, 255, .25); } .con-portrait.talk { animation: fxTalk 1.1s ease-in-out infinite; } @keyframes fxTalk { 50% { box-shadow: 0 0 0 2.5px rgba(255, 138, 182, .85), 0 0 56px rgba(255, 138, 182, .4); } } .con-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; } .con-portrait figcaption { position: absolute; left: 10px; bottom: 10px; display: flex; align-items: center; gap: 7px; padding: 6px 11px; border-radius: 99px; font-size: 12px; font-weight: 600; background: rgba(20, 32, 66, .55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .con-portrait figcaption i { width: 6px; height: 6px; border-radius: 50%; background: var(--fx-pink); } .con-live { display: flex; flex-direction: column; min-width: 0; } #wave { width: 100%; height: 60px; } .con-who { margin: 8px 0 6px; font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: #ffb3cd; transition: color .4s; } .con-who.you { color: #b9d2ff; } .con-text { margin: 0; min-height: 5em; font-size: 18px; line-height: 1.5; font-weight: 500; letter-spacing: -.02em; } .con-text .w { color: rgba(255, 255, 255, .34); transition: color .35s; } .con-text .w.on { color: #fff; } .con-foot { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .16); } .hand { display: inline-flex; align-items: center; gap: 9px; padding: 11px 17px; border-radius: 30px; border: 1px solid rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .09); color: #fff; font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; transition: background .3s, opacity .3s; } .hand:hover { background: rgba(255, 255, 255, .16); } .hand[disabled] { opacity: .6; cursor: default; } .hand svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .timer { margin-left: auto; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; padding: 8px 12px; border-radius: 14px; background: rgba(15, 25, 60, .3); border: 1px solid rgba(255, 255, 255, .14); } .mic { width: 40px; height: 40px; flex: none; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #ff83b0, #bbc8ff); animation: fxMic 2s infinite; } .mic svg { width: 17px; height: 17px; fill: none; stroke: #fff; stroke-width: 1.7; stroke-linecap: round; } @keyframes fxMic { 0% { box-shadow: 0 0 0 0 rgba(255, 131, 176, .5); } 70% { box-shadow: 0 0 0 12px rgba(255, 131, 176, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 131, 176, 0); } } .fx-verdict { position: relative; display: grid; grid-template-columns: 1fr auto 1.1fr; gap: 46px; align-items: center; margin-top: 50px; padding: 38px 40px; border-radius: 30px; border: 1px solid rgba(255, 255, 255, .145); background: linear-gradient(135deg, rgba(255, 255, 255, .085), rgba(255, 255, 255, .02)); backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px); box-shadow: inset 0 1px rgba(255, 255, 255, .13); } .fx-verdict > :not(.fx-glare) { position: relative; z-index: 1; } .fx-verdict h3 { font-size: 38px; font-weight: 550; letter-spacing: -.05em; line-height: 1.1; margin: 14px 0 12px; } .fx-verdict p { font-size: 18px; line-height: 1.6; color: #c6d8f2; margin: 0; } .v-ring { position: relative; width: 200px; aspect-ratio: 1; display: grid; place-items: center; } .v-ring svg { position: absolute; inset: 0; transform: rotate(-90deg); } .v-ring circle { fill: none; stroke-width: 7; } .r-bg { stroke: rgba(255, 255, 255, .1); } .r-fg { stroke: url(#ringG); stroke-linecap: round; stroke-dasharray: 326.7; stroke-dashoffset: 326.7; transition: stroke-dashoffset 2s var(--fx-ease); filter: drop-shadow(0 0 8px rgba(255, 131, 176, .45)); } .v-ring b { font-size: 64px; font-weight: 400; letter-spacing: -.06em; line-height: 1; font-variant-numeric: tabular-nums; } .v-ring span { position: absolute; top: 66%; font-size: 14px; color: #c6d8f2; } .v-criteria { display: grid; gap: 16px; } .crit { display: grid; grid-template-columns: 1fr auto; gap: 3px 14px; align-items: end; } .crit strong { font-size: 17px; font-weight: 600; } .crit small { grid-column: 1; font-size: 14px; color: #b4c9e8; } .crit b { grid-row: 1 / 3; grid-column: 2; font-size: 24px; font-weight: 600; font-variant-numeric: tabular-nums; } .crit b i { font-style: normal; font-size: 13px; color: #b4c9e8; font-weight: 400; } .crit .track { grid-column: 1 / -1; height: 6px; border-radius: 4px; background: rgba(255, 255, 255, .1); overflow: hidden; margin-top: 6px; } .crit .track i { display: block; height: 100%; width: 0; border-radius: 4px; transition: width 1.6s var(--fx-ease); } /* ═════ Carnet: pieles por material (debatiente) y por categoría (exdebatiente) ═════ Cada piel define sus colores en variables; las usan el carnet de la página, los selectores y la cartera. */ .card-interactive, .fx-wcard, .fx-sk-grafito { --sk-bg: linear-gradient(125deg, #3b4048 0%, #5d636d 20%, #2b2f36 44%, #4f555f 66%, #23262c 100%); --sk-tex: repeating-linear-gradient(96deg, rgba(255, 255, 255, .035) 0 1px, rgba(0, 0, 0, .045) 1px 2px, transparent 2px 4px); --sk-border: rgba(255, 255, 255, .3); --sk-hi: rgba(255, 255, 255, .38); --sk-photo: rgba(255, 255, 255, .45); --m-ink: #eef1f5; --m-sub: #aeb6c2; --m-line: rgba(255, 255, 255, .16); --m-engrave: 0 1px 0 rgba(0, 0, 0, .55), 0 -1px 0 rgba(255, 255, 255, .06); --sk-band: linear-gradient(90deg, #8ff3ff, #c5a8ff, #ffb1d6, #ffe1a1, #9effc8, #8ff3ff, #c5a8ff); } .fx-sk-titanio { --sk-bg: linear-gradient(125deg, #c9ced5 0%, #f3f5f8 20%, #aab1bb 42%, #e6e9ed 62%, #9aa2ad 82%, #d4d8de 100%); --sk-tex: repeating-linear-gradient(96deg, rgba(255, 255, 255, .22) 0 1px, rgba(0, 0, 0, .035) 1px 2px, transparent 2px 4px); --sk-border: rgba(255, 255, 255, .7); --sk-hi: rgba(255, 255, 255, .9); --sk-photo: rgba(255, 255, 255, .9); --m-ink: #1d242e; --m-sub: #47515f; --m-line: rgba(20, 28, 40, .18); --m-engrave: 0 1px 0 rgba(255, 255, 255, .7), 0 -1px 0 rgba(0, 0, 0, .12); } .fx-sk-digital { --sk-bg: radial-gradient(ellipse at 88% 8%, rgba(122, 171, 255, .38), transparent 55%), radial-gradient(ellipse at 8% 100%, rgba(255, 131, 176, .2), transparent 55%), linear-gradient(135deg, #0e1b38, #142a55 60%, #0b1630); --sk-tex: radial-gradient(rgba(190, 215, 255, .16) 1px, transparent 1.4px) 0 0 / 14px 14px; --sk-border: rgba(160, 200, 255, .45); --sk-hi: rgba(200, 225, 255, .35); --sk-photo: rgba(190, 215, 255, .5); --m-ink: #f2f6ff; --m-sub: #9fb8de; --m-line: rgba(160, 200, 255, .2); --m-engrave: 0 1px 0 rgba(0, 0, 0, .45), 0 -1px 0 rgba(255, 255, 255, .05); } .fx-sk-holo { --sk-bg: linear-gradient(125deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, .08) 50%, rgba(255, 255, 255, .5)), conic-gradient(from calc(var(--hue, 0) * 1deg) at 30% 30%, #b9f3ff, #d9c4ff, #ffc4e4, #fff1c4, #c4ffe0, #b9f3ff); --sk-tex: repeating-linear-gradient(115deg, rgba(255, 255, 255, .2) 0 2px, transparent 2px 7px); --sk-border: rgba(255, 255, 255, .9); --sk-hi: rgba(255, 255, 255, .95); --sk-photo: rgba(255, 255, 255, .95); --m-ink: #1b2230; --m-sub: #4a5466; --m-line: rgba(20, 28, 40, .16); --m-engrave: 0 1px 0 rgba(255, 255, 255, .6), 0 -1px 0 rgba(0, 0, 0, .08); } .fx-sk-carbono { --sk-bg: linear-gradient(135deg, #1d2024, #0d0e11); --sk-tex: repeating-linear-gradient(45deg, rgba(255, 255, 255, .055) 0 3px, transparent 3px 6px), repeating-linear-gradient(-45deg, rgba(0, 0, 0, .4) 0 3px, transparent 3px 6px); --sk-border: rgba(255, 255, 255, .22); --sk-hi: rgba(255, 255, 255, .25); --sk-photo: rgba(255, 255, 255, .35); --m-ink: #f1f3f7; --m-sub: #9aa3b0; --m-line: rgba(255, 255, 255, .14); --m-engrave: 0 1px 0 rgba(0, 0, 0, .6), 0 -1px 0 rgba(255, 255, 255, .05); } .fx-sk-leyenda { --sk-bg: linear-gradient(125deg, #17150f 0%, #2c2516 38%, #12110d 70%, #231d12 100%); --sk-tex: repeating-linear-gradient(96deg, rgba(255, 215, 140, .06) 0 1px, transparent 1px 3px); --sk-border: rgba(243, 215, 154, .6); --sk-hi: rgba(243, 215, 154, .45); --sk-photo: rgba(243, 215, 154, .7); --sk-band: linear-gradient(90deg, #8a6a2c, #f3d79a, #b8913f, #fff0c4, #9c7a36, #f3d79a, #8a6a2c); --m-ink: #f3d79a; --m-sub: #b99c62; --m-line: rgba(243, 215, 154, .22); --m-engrave: 0 1px 0 rgba(0, 0, 0, .6), 0 -1px 0 rgba(255, 230, 170, .08); } .fx-sk-plata { --sk-bg: linear-gradient(125deg, #e9ecef 0%, #ffffff 22%, #c3c8ce 45%, #f1f3f5 65%, #b5bbc3 100%); --sk-tex: repeating-linear-gradient(96deg, rgba(255, 255, 255, .3) 0 1px, rgba(0, 0, 0, .03) 1px 2px, transparent 2px 4px); --sk-border: rgba(255, 255, 255, .95); --sk-hi: rgba(255, 255, 255, .95); --sk-photo: rgba(255, 255, 255, .95); --sk-band: linear-gradient(90deg, #9aa2ad, #ffffff, #b8bfc8, #eef1f4, #a3abb5, #ffffff, #9aa2ad); --m-ink: #2a3038; --m-sub: #5a636e; --m-line: rgba(20, 28, 40, .16); --m-engrave: 0 1px 0 rgba(255, 255, 255, .75), 0 -1px 0 rgba(0, 0, 0, .1); } .fx-sk-bronce { --sk-bg: linear-gradient(125deg, #5e3820 0%, #9c6640 22%, #4f2e1b 45%, #8a5935 66%, #44271a 100%); --sk-tex: repeating-linear-gradient(96deg, rgba(255, 230, 200, .07) 0 1px, rgba(0, 0, 0, .05) 1px 2px, transparent 2px 4px); --sk-border: rgba(255, 220, 190, .5); --sk-hi: rgba(255, 225, 200, .5); --sk-photo: rgba(255, 225, 200, .65); --sk-band: linear-gradient(90deg, #7a4b2c, #e6a77a, #9c6640, #ffd6b5, #8a5935, #e6a77a, #7a4b2c); --m-ink: #fff3e8; --m-sub: #f6dcc4; --m-line: rgba(255, 225, 200, .22); --m-engrave: 0 1px 0 rgba(0, 0, 0, .45), 0 -1px 0 rgba(255, 255, 255, .06); } .card-interactive .license-card { color: var(--m-ink); border-radius: 26px; border: 1px solid var(--sk-border); background: var(--sk-tex), var(--sk-bg); box-shadow: inset 0 1px 0 var(--sk-hi), inset 0 -1px 0 rgba(0, 0, 0, .3), 0 0 0 1px rgba(0, 0, 0, .2), 0 26px 60px rgba(4, 8, 26, .42); backdrop-filter: none; -webkit-backdrop-filter: none; transition: border-color .5s, color .5s; } /* Reflejo especular que sigue la inclinación (usa --shine-x/--shine-y que ya pone app.js) */ .card-interactive .license-card::before { inset: 0; z-index: 5; mix-blend-mode: soft-light; opacity: 1; animation: none; transform: none; background: radial-gradient(circle at var(--shine-x, 30%) var(--shine-y, 20%), rgba(255, 255, 255, .55), transparent 46%); } .card-interactive .license-card::after { inset: 0; width: auto; height: auto; border: 0; border-radius: inherit; transform: none; box-shadow: none; z-index: 1; opacity: 1; background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .2) 45%, rgba(255, 255, 255, .04) 55%, transparent 70%) var(--shine-x, 50%) 0 / 300% 100% no-repeat; mix-blend-mode: overlay; } .card-interactive .card-energy { display: none; } .card-interactive .card-ghost { color: transparent; -webkit-text-stroke: 1px var(--m-line); text-shadow: none; } .card-interactive .cardlogo, .card-interactive .cardby, .card-interactive .carddata strong, .card-interactive .carddata b, .card-interactive .cardbottom b, .card-interactive .cardstrip, .card-interactive .cardstrip b, .card-interactive .cardstrip strong, .card-interactive .card-back h3 { color: var(--m-ink); text-shadow: var(--m-engrave); } .card-interactive .cardlabel, .card-interactive .carddata span, .card-interactive .cardbottom span, .card-interactive .cardstrip span, .card-interactive .card-back p, .card-interactive .back-bottom { color: var(--m-sub); text-shadow: var(--m-engrave); } .card-interactive .carddata b, .card-interactive .cardstrip span, .card-interactive .back-bottom { font-family: "JetBrains Mono", ui-monospace, Consolas, monospace; letter-spacing: .02em; } .card-interactive .license-dot { background: #ff83b0; box-shadow: 0 0 8px rgba(255, 131, 176, .8); } .card-interactive .portrait { border: 1px solid rgba(255, 255, 255, .45); box-shadow: 0 6px 18px rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(0, 0, 0, .2); } .card-interactive .portrait { border-color: var(--sk-photo); } .card-interactive #qr { background: transparent; border: 0; padding: 0; fill: var(--m-ink); opacity: .9; } .card-interactive .cardstrip { background: transparent; border-top: 1px solid var(--m-line); backdrop-filter: none; -webkit-backdrop-filter: none; } /* Sello holográfico: cambia de color al inclinar el carnet */ .fx-holo { position: absolute; right: 28px; top: 74px; width: 62px; height: 62px; border-radius: 50%; z-index: 3; display: grid; place-items: center; background: conic-gradient(from calc(var(--hue, 0) * 1deg), #8ff3ff, #c5a8ff, #ffb1d6, #ffe1a1, #9effc8, #8ff3ff); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6), inset 0 0 12px rgba(255, 255, 255, .5), 0 4px 14px rgba(0, 0, 0, .3); opacity: .88; -webkit-mask-image: radial-gradient(circle, #000 64%, transparent 66%); mask-image: radial-gradient(circle, #000 64%, transparent 66%); } .fx-holo::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: repeating-radial-gradient(circle, rgba(255, 255, 255, .28) 0 1px, transparent 1px 4px); mix-blend-mode: overlay; } .fx-holo span { font-size: 15px; font-weight: 700; letter-spacing: -.06em; color: rgba(20, 28, 40, .55); text-shadow: 0 1px 0 rgba(255, 255, 255, .5); } /* ═════ Reverso del carnet: banda de seguridad, roseta guilloché, mapa del circuito y trayectoria ═════ Medidas relativas al propio carnet (cqw/cqh): se ve igual de proporcionado a cualquier tamaño. */ .card-interactive .card-back { container: back / size; padding: 0; } .card-interactive .card-back .cardtop { position: absolute; z-index: 2; top: 5.5cqh; left: 4.1cqw; right: 4.1cqw; } .card-back .cardlogo { font-size: 4.6cqw; gap: 1.6cqw; } .card-back .cardlogo small { font-size: max(6px, 1.3cqw); } .card-back .cardby { font-size: max(8px, 1.8cqw); } .fx-rosette { position: absolute; z-index: 0; left: -13cqw; top: 13cqh; width: 60cqw; aspect-ratio: 1; color: var(--m-line); opacity: .85; pointer-events: none; -webkit-mask-image: radial-gradient(circle, #000 30%, transparent 68%); mask-image: radial-gradient(circle, #000 30%, transparent 68%); } .fx-band { position: absolute; z-index: 2; left: 0; right: 0; top: 17cqh; height: 4.8cqh; display: flex; align-items: center; overflow: hidden; background: var(--sk-band) calc(var(--hue, 0) * .3%) 0 / 260% 100%; opacity: .86; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -1px 0 rgba(0, 0, 0, .18), 0 1px 0 rgba(255, 255, 255, .06); } .fx-band::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(100deg, rgba(255, 255, 255, .28) 0 1px, transparent 1px 3px); mix-blend-mode: overlay; } .fx-band span { padding-left: 4.1cqw; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: max(5px, .95cqw); font-weight: 500; letter-spacing: .26em; white-space: nowrap; color: rgba(16, 22, 34, .5); } .fx-back-deb, .fx-back-ex { position: absolute; z-index: 2; top: 27cqh; bottom: 28cqh; left: 4.1cqw; right: 4.1cqw; display: grid; align-items: center; } .fx-back-deb[hidden], .fx-back-ex[hidden] { display: none !important; } .fx-back-deb { grid-template-columns: 1fr 31cqw; gap: 3cqw; } .fx-back-eyebrow { display: block; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: max(7px, 1.35cqw); letter-spacing: .16em; color: var(--m-sub); text-shadow: var(--m-engrave); } .card-interactive .card-back .fx-back-deb h3 { font-size: 4.3cqw; line-height: 1.04; letter-spacing: -.05em; margin: .9cqw 0; max-width: none; } .card-interactive .card-back .fx-back-deb p { font-size: max(9px, 1.75cqw); line-height: 1.45; max-width: 40ch; margin: 0; } .fx-formats { display: flex; flex-wrap: wrap; gap: .8cqw; margin-top: 1.7cqw; } .fx-formats span { padding: .5cqw .95cqw; border-radius: .8cqw; border: 1px solid var(--m-line); font-family: "JetBrains Mono", ui-monospace, monospace; font-size: max(6.5px, 1.2cqw); letter-spacing: .14em; color: var(--m-ink); text-shadow: var(--m-engrave); background: rgba(255, 255, 255, .04); } .fx-backmap { margin: 0; display: grid; justify-items: center; gap: .9cqw; } .fx-backmap svg { display: block; width: 100%; height: auto; overflow: visible; } .fx-backmap figcaption { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: max(6px, 1.15cqw); letter-spacing: .18em; color: var(--m-sub); text-shadow: var(--m-engrave); } #backMap path { fill: none; stroke-linecap: round; } #backMap .m-dim { stroke: var(--m-sub); stroke-opacity: .3; stroke-width: 1.1; } #backMap .m-mem { stroke: var(--m-ink); stroke-width: 1.45; } #backMap .m-inv { stroke: #ff83b0; stroke-opacity: .75; stroke-width: 1.3; } #backMap .m-arc { stroke: var(--m-ink); stroke-opacity: .35; stroke-width: .32; stroke-dasharray: 1 1.4; } #backMap .m-hub { fill: #ff83b0; } #backMap .m-ring { fill: none; stroke: #ff83b0; stroke-width: .5; transform-box: fill-box; transform-origin: center; animation: fxPing 2.6s ease-out infinite; } @keyframes fxPing { from { transform: scale(1); opacity: .9; } to { transform: scale(4.2); opacity: 0; } } .fx-back-ex { grid-template-columns: 25cqw 1fr; gap: 5cqw; } .fx-medal { display: grid; justify-items: center; text-align: center; gap: .5cqw; } .fx-medal svg { width: 19cqw; height: auto; color: var(--m-ink); filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .35)); } .fx-medal b { margin-top: .4cqw; font-size: 2.1cqw; font-weight: 650; letter-spacing: .18em; color: var(--m-ink); text-shadow: var(--m-engrave); } .fx-medal span { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: max(6px, 1.15cqw); letter-spacing: .18em; color: var(--m-sub); } .fx-record dl { margin: 1.1cqw 0 0; display: grid; } .fx-record dl div { display: flex; justify-content: space-between; align-items: baseline; gap: 2cqw; padding: 1cqw 0; border-bottom: 1px solid var(--m-line); } .fx-record dl div:last-child { border-bottom: 0; } .fx-record dt { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: max(6.5px, 1.2cqw); letter-spacing: .14em; color: var(--m-sub); white-space: nowrap; } .fx-record dd { margin: 0; font-size: max(9px, 1.85cqw); font-weight: 550; letter-spacing: -.02em; text-align: right; color: var(--m-ink); text-shadow: var(--m-engrave); } .fx-back-code { position: absolute; z-index: 2; left: 4.1cqw; right: 4.1cqw; bottom: 12cqh; display: flex; align-items: center; gap: 2cqw; padding: 1.3cqh 1.8cqw; border-radius: 1.6cqw; background: rgba(245, 247, 250, .94); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08), 0 2px 10px rgba(0, 0, 0, .12); } .fx-back-code svg { flex: 1; height: 8.5cqh; min-width: 0; } .fx-back-code span { font-family: "JetBrains Mono", ui-monospace, Consolas, monospace; font-size: max(7px, 1.6cqw); font-weight: 500; letter-spacing: .06em; color: #1d242e; white-space: nowrap; } .card-interactive .back-bottom { position: absolute; z-index: 2; left: 4.1cqw; right: 4.1cqw; bottom: 4.6cqh; border-top: 0; padding-top: 0; font-size: max(5.5px, 1.2cqw); letter-spacing: .1em; } /* Carnet en vertical (móvil y tableta): más aire y letra algo mayor */ @container back (max-aspect-ratio: 13 / 10) { .card-interactive .card-back .cardtop { top: 4.6cqh; left: 5.5cqw; right: 5.5cqw; } .card-back .cardlogo { font-size: min(7cqw, 5.6cqh); gap: 2.4cqw; } .card-back .cardlogo small { font-size: max(6px, min(2cqw, 1.7cqh)); } .card-back .cardby { font-size: max(8px, min(2.7cqw, 2.3cqh)); } .fx-rosette { left: -24cqw; top: 16cqh; width: 96cqw; } .fx-band { top: 13.5cqh; height: 4cqh; } .fx-band span { padding-left: 5.5cqw; font-size: max(5px, 1.7cqw); } .fx-back-deb, .fx-back-ex { top: 21cqh; bottom: 27cqh; left: 5.5cqw; right: 5.5cqw; } .fx-back-deb { grid-template-columns: 1fr 35cqw; gap: 3.5cqw; } .fx-back-eyebrow { font-size: max(7px, min(2.2cqw, 1.85cqh)); } .card-interactive .card-back .fx-back-deb h3 { font-size: min(6.4cqw, 5.4cqh); margin: min(1.6cqw, 1.3cqh) 0; } .card-interactive .card-back .fx-back-deb p { font-size: max(9px, min(3.1cqw, 2.6cqh)); } .fx-formats { gap: 1.4cqw; margin-top: min(2.6cqw, 2.2cqh); } .fx-formats span { padding: min(.9cqw, .75cqh) 1.6cqw; border-radius: 1.4cqw; font-size: max(6.5px, min(2.1cqw, 1.8cqh)); } .fx-backmap { gap: 1.6cqw; } .fx-backmap figcaption { font-size: max(6px, min(1.9cqw, 1.6cqh)); letter-spacing: .12em; } .fx-back-ex { grid-template-columns: 33cqw 1fr; gap: 5cqw; } .fx-medal svg { width: min(30cqw, 26cqh); } .fx-medal b { font-size: min(3.3cqw, 2.8cqh); } .fx-medal span { font-size: max(6px, min(1.9cqw, 1.6cqh)); letter-spacing: .12em; } .fx-record dl { margin-top: min(1.8cqw, 1.5cqh); } .fx-record dl div { display: grid; gap: .6cqw; padding: min(1.7cqw, 1.4cqh) 0; } .fx-record dt { font-size: max(6.5px, min(2cqw, 1.7cqh)); } .fx-record dd { font-size: max(9px, min(3.4cqw, 2.9cqh)); text-align: left; } .fx-back-code { left: 5.5cqw; right: 5.5cqw; bottom: 9.5cqh; padding: 1.4cqh 2.6cqw; border-radius: 2.6cqw; gap: 2.6cqw; } .fx-back-code svg { height: 7.2cqh; } .fx-back-code span { font-size: max(7px, min(2.5cqw, 2.1cqh)); } .card-interactive .back-bottom { left: 5.5cqw; right: 5.5cqw; bottom: 3.4cqh; font-size: max(5.5px, min(1.85cqw, 1.55cqh)); } } /* ═════ Rankings: más arriba, podio más bajo, lista con scroll, banderas, subidas y bajadas, países y Excel ═════ */ .rankings .sectionhead { margin-bottom: 26px; } .rankings .sectionhead h2 { font-size: clamp(30px, 3.2vw, 44px); } .rankings .sectionhead > p { width: min(540px, 100%); } .ranking-panel .rank-focus { display: none; } .ranking-panel .rank-controls { margin-bottom: 4px; align-items: center; flex-wrap: wrap; } .fx-xlsx { display: inline-flex; align-items: center; gap: 9px; padding: 12px 20px; border-radius: 30px; border: 1px solid rgba(110, 231, 168, .42); background: linear-gradient(135deg, rgba(47, 208, 142, .22), rgba(47, 208, 142, .06)); color: #dcfff0; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; box-shadow: inset 0 1px rgba(255, 255, 255, .14); transition: background .3s, transform .2s; } .fx-xlsx:hover { background: linear-gradient(135deg, rgba(47, 208, 142, .34), rgba(47, 208, 142, .1)); transform: translateY(-1px); } .fx-xlsx svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } /* Podio un dedo más bajo */ .ranking-panel .podium { padding-top: 16px; gap: 14px; } .ranking-panel .podium-person { padding-top: 14px; gap: 7px; } .ranking-panel .podium-place { font-size: 14px; } .ranking-panel .podium-avatar { width: 50px; height: 50px; font-size: 19px; } .ranking-panel .podium-person strong { font-size: 19px; } .ranking-panel .podium-person > span.fx-pcountry { display: inline-flex; align-items: center; gap: 7px; font-size: 15px; color: #c6d8f2; } .ranking-panel .podium-person > b { font-size: 28px; font-weight: 750; letter-spacing: -.03em; } .ranking-panel .podium-person.place-1 > b { color: #ffe3a6; } .ranking-panel .podium-bar { height: 32px; margin-top: 2px; } .ranking-panel .place-1 .podium-bar { height: 64px; } .ranking-panel .place-3 .podium-bar { height: 14px; } .fx-flag { flex: none; display: inline-block; width: 24px; height: 16px; border-radius: 3px; overflow: hidden; box-shadow: 0 0 0 1px rgba(255, 255, 255, .22), 0 2px 6px rgba(0, 0, 0, .25); } .fx-flag svg { display: block; width: 100%; height: 100%; } .fx-pcountry .fx-flag { width: 21px; height: 14px; } /* Lista + ranking por países */ .fx-rk-body { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 26px; margin-top: 24px; align-items: start; } .fx-rk-filters { display: grid; grid-template-columns: minmax(0, 1fr) 200px 200px; gap: 10px; margin-bottom: 12px; } .fx-search { position: relative; display: block; } .fx-search svg { position: absolute; left: 15px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); fill: none; stroke: #a8bfdc; stroke-width: 1.8; stroke-linecap: round; pointer-events: none; } .fx-rk-filters input, .fx-rk-filters select { width: 100%; height: 46px; padding: 0 14px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .06); color: #fff; font: inherit; font-size: 15px; outline: none; transition: border-color .25s, background .25s; } .fx-rk-filters input { padding-left: 42px; } .fx-rk-filters input::placeholder { color: #9fb4d3; } .fx-rk-filters input:focus, .fx-rk-filters select:focus { border-color: rgba(197, 224, 255, .6); background: rgba(255, 255, 255, .1); } .fx-rk-filters option { color: #101626; background: #fff; } .fx-rlist { position: relative; max-height: 560px; overflow-y: auto; overscroll-behavior: contain; border-radius: 18px; border: 1px solid rgba(255, 255, 255, .1); background: rgba(4, 10, 30, .2); scrollbar-width: thin; scrollbar-color: rgba(197, 224, 255, .32) transparent; outline: none; } .fx-rlist:focus-visible { box-shadow: 0 0 0 2px rgba(197, 224, 255, .5); } .fx-rhead, .fx-rr { display: grid; grid-template-columns: 40px 58px minmax(0, 1fr) 168px 108px; align-items: center; column-gap: 10px; padding: 0 16px; } .fx-rhead { position: sticky; top: 0; z-index: 2; height: 40px; font-size: 11px; letter-spacing: .14em; color: #a8bfdc; background: rgba(20, 34, 70, .94); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid rgba(255, 255, 255, .1); } .fx-rhead span:last-child { text-align: right; } .fx-rr { min-height: 60px; border-top: 1px solid rgba(255, 255, 255, .065); transition: background .2s; } .fx-rhead + .fx-rr { border-top: 0; } .fx-rr:hover { background: rgba(255, 255, 255, .05); } .fx-rpos { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 15px; font-weight: 500; color: #c6d8f2; } .fx-rr.top1 .fx-rpos { color: #f6dc9f; } .fx-rr.top2 .fx-rpos { color: #e3e9f2; } .fx-rr.top3 .fx-rpos { color: #f0b98f; } .fx-mv { display: inline-flex; align-items: center; gap: 4px; width: fit-content; font-size: 13.5px; font-weight: 700; font-variant-numeric: tabular-nums; } .fx-mv svg { width: 10px; height: 10px; fill: currentColor; } .fx-mv.up { color: #3ddc97; } .fx-mv.down { color: #ff6b81; } .fx-mv.eq { color: #8197b8; padding-left: 2px; } .fx-mv.new { padding: 3px 7px; border-radius: 8px; font-size: 9.5px; letter-spacing: .1em; background: rgba(122, 171, 255, .18); color: #c3d8ff; } .fx-rwho { display: flex; align-items: center; gap: 12px; min-width: 0; } .fx-rwho > div { min-width: 0; } .fx-rav { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; font-size: 13px; font-weight: 600; color: #eaf2ff; background: linear-gradient(145deg, rgba(178, 212, 255, .22), rgba(222, 172, 211, .16)); border: 1px solid rgba(208, 228, 255, .3); } .fx-rwho strong { display: block; font-size: 16px; font-weight: 550; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fx-rwho small { display: block; margin-top: 2px; font-size: 12.5px; color: #9fb4d3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fx-rco { display: flex; align-items: center; gap: 9px; min-width: 0; font-size: 14px; color: #c6d8f2; } .fx-rco > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fx-rpts { text-align: right; font-size: 20px; font-weight: 750; letter-spacing: -.03em; color: #fff; font-variant-numeric: tabular-nums; } .fx-rpts small { margin-left: 4px; font-size: 11px; font-weight: 500; letter-spacing: .03em; color: #9fb4d3; } .fx-rr.top1 .fx-rpts { color: #ffe3a6; } .fx-rr.top2 .fx-rpts { color: #eef2f8; } .fx-rr.top3 .fx-rpts { color: #f6c39c; } .fx-rempty { padding: 46px 20px; text-align: center; font-size: 16px; color: #dce9ff; line-height: 1.6; } .fx-rempty small { color: #9fb4d3; font-size: 13.5px; } .fx-rk-countries { border-radius: 22px; border: 1px solid rgba(255, 255, 255, .12); background: linear-gradient(160deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .015)); padding: 18px 12px 10px; } .fx-rkc-head { padding: 0 8px 10px; } .fx-rkc-head h3 { margin: 0 0 5px; font-size: 19px; font-weight: 600; letter-spacing: -.03em; color: #fff; } .fx-rkc-head p { margin: 0; font-size: 13px; line-height: 1.45; color: #9fb4d3; } #rkCountries { list-style: none; margin: 0; padding: 0; max-height: 536px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(197, 224, 255, .32) transparent; } #rkCountries button { width: 100%; display: grid; grid-template-columns: 20px 24px minmax(0, 1fr) auto; column-gap: 10px; row-gap: 6px; align-items: center; padding: 10px 8px; border: 0; border-radius: 14px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: background .2s; } #rkCountries button:hover { background: rgba(255, 255, 255, .06); } #rkCountries button[aria-pressed="true"] { background: rgba(255, 255, 255, .11); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); } .fx-cpos { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 12.5px; color: #9fb4d3; } .fx-cname { min-width: 0; font-size: 15px; font-weight: 550; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fx-cnum { text-align: right; font-size: 19px; font-weight: 750; letter-spacing: -.02em; color: #fff; font-variant-numeric: tabular-nums; } .fx-cnum small { display: block; margin-top: -2px; font-size: 9.5px; font-weight: 500; letter-spacing: .06em; color: #9fb4d3; } .fx-cbar { grid-column: 3 / 5; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .08); overflow: hidden; } .fx-cbar i { display: block; height: 100%; border-radius: inherit; transform-origin: left; background: linear-gradient(90deg, #7aabff, #c5a8ff); } .fx-cbar.g1 i { background: linear-gradient(90deg, #f3d79a, #ffe9b8); box-shadow: 0 0 10px rgba(243, 215, 154, .6); } .fx-cbar.g2 i { background: linear-gradient(90deg, #c9d2de, #f1f4f8); } .fx-cbar.g3 i { background: linear-gradient(90deg, #c58b5f, #f0b98f); } .fx-cmeta { grid-column: 3 / 5; font-size: 12px; color: #9fb4d3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 1100px) { .fx-rk-body { grid-template-columns: 1fr; } #rkCountries { max-height: 430px; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); column-gap: 8px; align-content: start; } } @media (max-width: 760px) { .ranking-panel .rank-controls { gap: 12px; } .fx-xlsx { padding: 10px 16px; font-size: 14px; } .ranking-panel .podium { gap: 8px; padding-top: 10px; } .ranking-panel .podium-person { padding-top: 12px; gap: 6px; } .ranking-panel .podium-avatar { width: 40px; height: 40px; font-size: 15px; } .ranking-panel .podium-person strong { font-size: 15px; min-height: 36px; } .ranking-panel .podium-person > span.fx-pcountry { font-size: 12.5px; gap: 5px; } .ranking-panel .podium-person > b { font-size: 21px; } .ranking-panel .podium-person small { font-size: 12px; } .ranking-panel .podium-bar { height: 22px; } .ranking-panel .place-1 .podium-bar { height: 44px; } .ranking-panel .place-3 .podium-bar { height: 10px; } .fx-rk-filters { grid-template-columns: 1fr 1fr; } .fx-rk-filters .fx-search { grid-column: 1 / -1; } .fx-rk-filters select { font-size: 14px; padding: 0 10px; } .fx-rlist { max-height: 470px; } .fx-rhead, .fx-rr { grid-template-columns: 24px 34px minmax(0, 1fr) 22px 54px; column-gap: 7px; padding: 0 10px; } .fx-rhead { font-size: 9.5px; letter-spacing: .08em; } .fx-rhead span:nth-child(4) { visibility: hidden; } .fx-rr { min-height: 58px; } .fx-rco > span { display: none; } .fx-rpos { font-size: 13px; } .fx-mv { font-size: 12px; } .fx-mv.new { padding: 2px 5px; font-size: 8px; letter-spacing: .06em; } .fx-rwho { gap: 9px; } .fx-rav { display: none; } .fx-rwho strong { font-size: 14.5px; } .fx-rwho small { font-size: 11.5px; } .fx-rpts { font-size: 16.5px; } .fx-rco .fx-flag { width: 22px; height: 15px; } .fx-rpts small { display: none; } #rkCountries { max-height: 420px; grid-template-columns: 1fr; } } /* ═════ Tu carnet: de tu ID a tu trayectoria (pasos 01·02·03, traídos de Rankings) ═════ */ .fx-steps { --g: 28px; list-style: none; margin: 0 0 46px; padding: 26px 32px 28px; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--g); border-radius: 28px; border: 1px solid rgba(255, 255, 255, .12); background: linear-gradient(135deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .015)); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: inset 0 1px rgba(255, 255, 255, .1), 0 24px 60px rgba(14, 21, 57, .18); } .fx-steps li { position: relative; } .fx-step-n { position: relative; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 13px; font-weight: 500; letter-spacing: .04em; color: #fff; background: radial-gradient(circle at 32% 26%, rgba(255, 255, 255, .24), rgba(255, 255, 255, .04) 70%), rgba(10, 18, 44, .35); box-shadow: 0 8px 22px rgba(4, 8, 26, .35), 0 0 0 6px rgba(122, 171, 255, .06); transition: box-shadow .4s; } .fx-step-n::before { content: ""; position: absolute; inset: 0; border-radius: 50%; padding: 1.5px; background: conic-gradient(from 210deg, #7aabff, #c5a8ff, #ec639e, #7aabff); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; } .fx-steps li:hover .fx-step-n { box-shadow: 0 8px 22px rgba(4, 8, 26, .35), 0 0 0 6px rgba(236, 99, 158, .12), 0 0 26px rgba(122, 171, 255, .35); } /* Conector con una luz que viaja de un paso al siguiente */ .fx-steps li:not(:last-child)::after { content: ""; position: absolute; top: 22px; left: 62px; right: calc(16px - var(--g)); height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent 40%, rgba(255, 255, 255, .95) 50%, transparent 60%) 100% 0 / 250% 100% no-repeat, linear-gradient(90deg, rgba(122, 171, 255, .55), rgba(236, 99, 158, .4)); animation: fxStepFlow 3.6s cubic-bezier(.45, 0, .55, 1) infinite; } .fx-steps li:nth-child(2)::after { animation-delay: 1.8s; } @keyframes fxStepFlowV { 0% { background-position: 0 100%, 0 0; } 50%, 100% { background-position: 0 0%, 0 0; } } @keyframes fxStepFlow { 0% { background-position: 100% 0, 0 0; } 50%, 100% { background-position: 0% 0, 0 0; } } .fx-steps h3 { margin: 16px 0 6px; font-size: 20px; font-weight: 600; letter-spacing: -.035em; line-height: 1.2; color: #fff; } .fx-steps p { margin: 0; max-width: 34ch; font-size: 15px; line-height: 1.55; color: #b8cce8; } /* Interruptor Debatiente / Exdebatiente, arriba del tarjetón */ .fx-seg { position: relative; display: grid; grid-template-columns: 1fr 1fr; padding: 5px; margin: 0 0 30px; border-radius: 22px; background: rgba(4, 10, 30, .26); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .3), inset 0 0 0 1px rgba(255, 255, 255, .07), 0 1px 0 rgba(255, 255, 255, .07); } .fx-seg-thumb { position: absolute; top: 5px; bottom: 5px; left: 5px; width: calc(50% - 5px); border-radius: 17px; pointer-events: none; background: linear-gradient(135deg, rgba(255, 255, 255, .21), rgba(255, 255, 255, .07)); box-shadow: inset 0 1px rgba(255, 255, 255, .38), inset 0 0 0 1px rgba(255, 255, 255, .1), 0 10px 24px rgba(4, 8, 26, .35); transition: transform .6s cubic-bezier(.2, .9, .2, 1); } .fx-seg-thumb::after { content: ""; position: absolute; left: 26%; right: 26%; bottom: -1px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, #7aabff, #ec639e); box-shadow: 0 0 12px rgba(236, 99, 158, .65); transition: left .6s, right .6s; } .fx-seg[data-on="ex"] .fx-seg-thumb { transform: translateX(100%); } .fx-seg[data-on="ex"] .fx-seg-thumb::after { background: linear-gradient(90deg, #f3d79a, #ec639e); box-shadow: 0 0 12px rgba(243, 215, 154, .6); } .fx-seg button { position: relative; z-index: 1; display: grid; gap: 3px; justify-items: center; padding: 12px 10px 13px; border: 0; border-radius: 17px; background: none; color: rgba(214, 228, 250, .58); font: inherit; cursor: pointer; transition: color .4s; } .fx-seg button b { font-size: 16.5px; font-weight: 600; letter-spacing: -.025em; } .fx-seg button small { font-size: 11.5px; letter-spacing: .04em; opacity: .85; } .fx-seg button:hover { color: rgba(234, 242, 255, .85); } .fx-seg button[aria-pressed="true"] { color: #fff; } .fx-seg button:focus-visible { outline: 2px solid rgba(197, 224, 255, .7); outline-offset: 2px; } /* Material o categoría y propuesta de nombres */ .fx-skins { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 16px; } .fx-skins button { display: inline-flex; align-items: center; gap: 9px; padding: 7px 13px 7px 7px; border-radius: 30px; border: 1px solid rgba(255, 255, 255, .17); background: rgba(255, 255, 255, .05); color: #d9e7ff; font: inherit; font-size: 13px; cursor: pointer; transition: background .3s, border-color .3s; } .fx-skins button b { font-weight: 600; color: #fff; } .fx-skins button small { font-size: 12px; color: #a8bfdc; } .fx-skins button[aria-checked="true"] { background: rgba(255, 255, 255, .15); border-color: rgba(255, 255, 255, .55); } .fx-skins .sw { width: 22px; height: 22px; border-radius: 50%; background: var(--sk-tex), var(--sk-bg); box-shadow: inset 0 0 0 1px var(--sk-border); } .fx-names[hidden], .fx-panel[hidden] { display: none !important; } .fx-names { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; margin-top: 12px; font-size: 12px; color: #a8bfdc; } .fx-names button { padding: 6px 11px; border-radius: 20px; border: 1px dashed rgba(255, 255, 255, .28); background: none; color: #c6d8f2; font: inherit; font-size: 12px; cursor: pointer; } .fx-names button[aria-pressed="true"] { border-style: solid; border-color: rgba(255, 255, 255, .6); color: #fff; background: rgba(255, 255, 255, .08); } .fx-offer .fx-matline { margin: 6px 0 22px; font-size: 15px; line-height: 1.5; color: #c6d8f2; max-width: none; } .fx-offer .fx-matline b { color: #fff; } .fx-offer .fx-tierline { margin: -8px 0 18px; font-size: 15px; line-height: 1.5; color: #c6d8f2; max-width: none; } .fx-offer .fx-tierline b { color: #fff; } .fx-ticks li.off { opacity: .4; } .fx-ticks li.off i { background: rgba(255, 255, 255, .14); box-shadow: none; } .fx-ticks li.off i::after { display: none; } .fx-hint-actions .softbutton svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; vertical-align: -3px; margin-right: 6px; } /* Mi cartera */ .fx-wallet-btn { position: relative; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .07); color: #fff; display: grid; place-items: center; cursor: pointer; transition: background .3s; } .fx-wallet-btn:hover { background: rgba(255, 255, 255, .15); } .fx-wallet-btn svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; } .fx-wallet-btn b { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #ff83b0; color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; } .fx-wallet-btn b:empty { display: none; } dialog.fx-wallet-dlg { max-width: 560px; width: calc(100% - 28px); } .fx-wallet-stack[hidden], .fx-wallet-detail[hidden] { display: none; } .fx-wallet-stack { display: grid; margin: 22px 0 18px; } .fx-wcard { position: relative; width: 100%; aspect-ratio: 1.58; border-radius: 22px; padding: 18px 22px; display: flex; flex-direction: column; gap: 4px; text-align: left; overflow: hidden; cursor: pointer; font: inherit; color: var(--m-ink); background: var(--sk-tex), var(--sk-bg); border: 1px solid var(--sk-border); box-shadow: inset 0 1px 0 var(--sk-hi), 0 14px 34px rgba(4, 8, 26, .4); transition: transform .45s cubic-bezier(.2, .8, .2, 1); } .fx-wallet-stack .fx-wcard + .fx-wcard { margin-top: -46%; } .fx-wallet-stack .fx-wcard:hover { transform: translateY(-10px); } .fx-wcard .wc-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 22px; font-weight: 700; letter-spacing: -.06em; text-shadow: var(--m-engrave); } .fx-wcard .wc-top small { font-size: 11px; font-weight: 600; letter-spacing: .12em; color: var(--m-sub); text-align: right; } .fx-wcard .wc-seal { position: absolute; right: 22px; top: 54px; width: 38px; height: 38px; border-radius: 50%; opacity: .85; background: conic-gradient(#8ff3ff, #c5a8ff, #ffb1d6, #ffe1a1, #9effc8, #8ff3ff); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6); } .fx-wcard .wc-name { margin-top: auto; font-size: 20px; font-weight: 600; letter-spacing: -.03em; text-shadow: var(--m-engrave); } .fx-wcard .wc-id { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 12px; color: var(--m-sub); } .fx-wcard.big { cursor: default; } .fx-wcode { display: flex; align-items: center; gap: 14px; margin: 16px 0 6px; padding: 12px 16px; border-radius: 16px; background: #f5f7fa; } .fx-wcode svg { flex: 1; height: 54px; min-width: 0; } .fx-wcode span { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 13px; font-weight: 500; color: #1d242e; white-space: nowrap; } .fx-wactions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; } .fx-wallet-empty { padding: 34px 20px; text-align: center; border: 1px dashed rgba(255, 255, 255, .28); border-radius: 22px; color: #c6d8f2; font-size: 15px; line-height: 1.6; } .fx-wallet-empty b { color: #fff; } /* Solicitud de exdebatiente */ .fx-roles { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin: 4px 0 16px; font-size: 14px; color: #c6d8f2; } .fx-roles label { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; color: #eaf2ff; } .fx-roles input, .fx-privacy input { width: 16px; height: 16px; accent-color: #ff83b0; } #exForm input[type=file] { padding: 9px; font-size: 13px; } .fx-ex-result { text-align: center; } .fx-ex-result h3 { font-size: 40px; font-weight: 650; letter-spacing: -.05em; margin: 6px 0 14px; } .fx-ex-result .eyebrow { justify-content: center; } .fx-ex-result .fx-wcard { max-width: 360px; margin: 0 auto 14px; cursor: default; } .fx-ex-result .fx-wactions { justify-content: center; } .fx-analyzing { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 50px 0; font-size: 17px; color: #dce9ff; } .fx-analyzing i { width: 20px; height: 20px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .25); border-top-color: #ff83b0; animation: fxSpin .8s linear infinite; } @keyframes fxSpin { to { transform: rotate(360deg); } } /* Compartir: qué se ve en la imagen */ .fx-privacy { margin: 16px 0 0; padding: 12px 16px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 18px; } .fx-privacy legend { padding: 0 6px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #a8bfdc; } .fx-privacy label { display: inline-flex; align-items: center; gap: 7px; margin: 4px 16px 4px 0; font-size: 14px; color: #eaf2ff; cursor: pointer; } .fx-privacy p { margin: 8px 0 0; font-size: 12.5px; line-height: 1.5; color: #a8bfdc; } /* ═════ Inicio: selector Globo / Mapa digital ═════ */ .fx-view { position: absolute; top: 4%; right: 3%; z-index: 6; display: flex; gap: 4px; padding: 4px; border-radius: 50px; border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .05); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); transition: opacity 1.2s ease .6s; } .fx-view button { display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border-radius: 40px; border: 0; background: none; color: #c6d8f2; font: inherit; font-size: 13px; cursor: pointer; transition: background .3s, color .3s; } .fx-view button i { font-style: normal; font-size: 12px; } .fx-view button[aria-pressed="true"] { background: rgba(255, 255, 255, .16); color: #fff; box-shadow: inset 0 1px rgba(255, 255, 255, .25); } .fx-view button[data-view="map"][aria-pressed="true"] { background: rgba(94, 225, 255, .18); color: #c9f6ff; box-shadow: inset 0 1px rgba(160, 240, 255, .35), 0 0 18px rgba(94, 225, 255, .2); } .globe-stage.fx-intro .fx-view { opacity: 0; pointer-events: none; } .fx-map { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; opacity: 0; pointer-events: none; transition: opacity .7s ease; cursor: crosshair; } .globe-stage.fx-mapmode .fx-map { opacity: 1; pointer-events: auto; } .globe-stage.fx-mapmode #globe, .globe-stage.fx-mapmode .globe-orbit, .globe-stage.fx-mapmode .globe-badge, .globe-stage.fx-mapmode .globe-city, .globe-stage.fx-mapmode .globe-instruction { opacity: 0 !important; pointer-events: none; } .globe-stage.fx-mapmode::before { opacity: .35; } /* ═════ Rankings: gráficas de partículas ═════ */ .podium .podium-bar { background: none !important; border-top-color: transparent !important; } .fx-podium { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 3; } /* ═════ Organizadores: red neuronal del circuito + simulador ═════ */ .fx-neural { width: 100%; max-width: 1180px; margin-top: 56px; display: grid; grid-template-columns: 1.55fr 1fr; gap: 22px; text-align: left; } .fx-net-stage { position: relative; min-height: 470px; border-radius: 30px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .145); background: radial-gradient(ellipse at 60% 40%, rgba(122, 171, 255, .12), transparent 65%), linear-gradient(135deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .015)); backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px); box-shadow: inset 0 1px rgba(255, 255, 255, .13); } #fxNet { position: absolute; inset: 0; width: 100%; height: 100%; cursor: pointer; } .fx-net-head { position: absolute; left: 20px; right: 20px; top: 16px; display: flex; justify-content: space-between; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: .12em; color: #b9d0f2; pointer-events: none; } .fx-net-head i { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #9ff0ff; box-shadow: 0 0 10px #7fe3ff; margin-right: 8px; animation: fxBlink 1.6s infinite; } .fx-net-cols { position: absolute; left: 0; right: 0; bottom: 14px; display: grid; grid-template-columns: repeat(5, 1fr); text-align: center; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: #8ea8cf; pointer-events: none; } .fx-net-tip { position: absolute; z-index: 3; max-width: 240px; padding: 12px 14px; border-radius: 16px; pointer-events: none; font-size: 13px; line-height: 1.45; color: #e8f1ff; background: rgba(20, 34, 70, .82); border: 1px solid rgba(255, 255, 255, .22); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 14px 30px rgba(6, 12, 34, .35); } .fx-net-tip b { display: block; font-size: 14px; margin-bottom: 3px; color: #fff; } .fx-sim { position: relative; padding: 28px 26px 22px; border-radius: 30px; border: 1px solid rgba(255, 255, 255, .145); background: linear-gradient(135deg, rgba(255, 255, 255, .085), rgba(255, 255, 255, .02)); backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px); box-shadow: inset 0 1px rgba(255, 255, 255, .13); } .partner .fx-sim .eyebrow { justify-content: flex-start; font-size: 11px; } .fx-sim h3 { font-size: 28px; font-weight: 550; letter-spacing: -.045em; line-height: 1.15; margin: 12px 0 18px; } .fx-sim label { display: grid; gap: 6px; margin-bottom: 12px; font-size: 12px; font-weight: 600; letter-spacing: .04em; color: #b9cdea; } .fx-sim input:not([type=range]), .fx-sim select { width: 100%; padding: 11px 13px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .07); color: #fff; font: inherit; font-size: 14px; font-weight: 400; letter-spacing: 0; } .fx-sim select option { background: #1f3156; } .fx-sim input:focus, .fx-sim select:focus { outline: none; border-color: rgba(187, 200, 255, .7); box-shadow: 0 0 0 4px rgba(122, 171, 255, .15); } .fx-sim-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .fx-sim output { font-family: "JetBrains Mono", ui-monospace, monospace; color: #fff; font-weight: 500; } .fx-sim input[type=range] { width: 100%; accent-color: #ff83b0; } .partner .fx-sim .pill { width: 100%; margin: 8px 0 0; } .partner .fx-sim .sample { font-size: 12px; margin-top: 12px; text-align: center; } .fx-sim-result { margin-top: 16px; padding: 14px 16px; border-radius: 18px; border: 1px solid rgba(159, 240, 255, .3); background: rgba(94, 225, 255, .07); } .fx-sim-result b { display: block; font-size: 15px; margin-bottom: 8px; color: #fff; } .fx-sim-result ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; } .fx-sim-result li { display: grid; grid-template-columns: 22px 1fr; gap: 8px; align-items: start; font-size: 13px; line-height: 1.45; color: #c6d8f2; opacity: .35; transition: opacity .5s, color .5s; } .fx-sim-result li i { width: 18px; height: 18px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .35); margin-top: 1px; position: relative; transition: background .4s, border-color .4s; } .fx-sim-result li.done { opacity: 1; color: #eef5ff; } .fx-sim-result li.done i { background: linear-gradient(135deg, #7aabff, #ff83b0); border-color: transparent; } .fx-sim-result li.done i::after { content: ""; position: absolute; left: 6px; top: 3px; width: 4px; height: 8px; border: solid #fff; border-width: 0 1.6px 1.6px 0; transform: rotate(42deg); } .fx-sim-result p { margin: 10px 0 0; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11.5px; letter-spacing: .04em; color: #9ff0ff; } /* ───── Pie de página: enlaces legales y derechos ───── */ footer { flex-wrap: wrap; row-gap: 18px; column-gap: 28px; } /* El CSS original da reglas a cualquier