/* ===================================================================== RetroClassic RO - Theme para FluxCP (Clásico) Estilo: noche de fantasía, dorado y pergamino. Usa flux.css del theme default para las tablas y formularios, y aquí se redefine el resto. ===================================================================== */ :root { --rc-noche: #0e0b1f; --rc-noche2: #1b1438; --rc-violeta: #3a2a6e; --rc-oro: #f3c55b; --rc-oro2: #c98a1c; --rc-oro-claro: #ffe9a8; --rc-azul: #4fb3ff; --rc-rojo: #ff5d6c; --rc-verde: #4ee08a; --rc-texto: #ece6ff; --rc-texto2: #b9b0d9; --rc-perg: #fbf5e6; --rc-perg2: #f1e6c8; --rc-tinta: #3b2f1e; --rc-radio: 16px; --rc-sombra: 0 18px 50px rgba(0, 0, 0, .45); --rc-titulos: 'Cinzel', Georgia, 'Times New Roman', serif; --rc-deco: 'Cinzel', Georgia, 'Times New Roman', serif; /* antes Cinzel Decorative: Cinzel se lee mejor */ --rc-cuerpo: 'Nunito', 'Segoe UI', Tahoma, sans-serif; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body.rc { margin: 0; padding: 0; font-family: var(--rc-cuerpo); font-size: 16px; color: var(--rc-texto); background: radial-gradient(ellipse at 20% 0%, #2c1f5c 0%, transparent 55%), radial-gradient(ellipse at 90% 30%, #46205a 0%, transparent 50%), linear-gradient(180deg, var(--rc-noche2) 0%, var(--rc-noche) 60%, #07060f 100%); background-attachment: fixed; min-height: 100vh; overflow-x: hidden; } body.rc a { color: var(--rc-oro); text-decoration: none; transition: color .2s; } body.rc a:hover { color: var(--rc-oro-claro); } body.rc table { font-size: inherit; } #rc-particulas { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; } /* ---------- Botones ---------- */ .rc-btn { position: relative; display: inline-flex; align-items: center; gap: .45em; padding: .75em 1.5em; border-radius: 999px; font-family: var(--rc-titulos); font-weight: 800; letter-spacing: .03em; color: #2a1a00 !important; background: linear-gradient(180deg, #ffe39a 0%, var(--rc-oro) 45%, var(--rc-oro2) 100%); box-shadow: 0 6px 18px rgba(243, 197, 91, .35), inset 0 1px 0 rgba(255, 255, 255, .7); border: 1px solid #ffeab0; overflow: hidden; cursor: pointer; transition: transform .2s, box-shadow .2s, filter .2s; white-space: nowrap; } .rc-btn::after { /* destello que cruza el botón */ content: ''; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .75), transparent); transform: skewX(-20deg); animation: rc-destello 3.5s infinite; } .rc-btn:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 10px 28px rgba(243, 197, 91, .55); filter: brightness(1.06); } .rc-btn-sec { color: var(--rc-oro-claro) !important; background: rgba(20, 14, 45, .55); border: 1px solid rgba(243, 197, 91, .7); box-shadow: 0 6px 18px rgba(0, 0, 0, .35); backdrop-filter: blur(6px); } .rc-btn-sec::after { opacity: .35; } .rc-btn-mini { padding: .45em 1.05em; font-size: .85em; } .rc-btn-grande { padding: .95em 2em; font-size: 1.12em; } .rc-latido { animation: rc-latido 2.4s ease-in-out infinite; } /* Botón de descarga "Próximamente" (no se puede pulsar) */ .rc-btn.rc-btn-proximamente { cursor: default; filter: saturate(.75); opacity: .92; } .rc-btn.rc-btn-proximamente:hover { transform: none; filter: saturate(.75); } .rc-btn.rc-btn-proximamente::after { animation-duration: 6s; } .rc-prox-etq { opacity: .7; font-size: .85em; } .rc-proximamente-caja { text-align: center; padding: 2.2em 1.2em; } .rc-proximamente-caja .rc-prox-ico { font-size: 3.2em; line-height: 1; margin-bottom: .3em; } .rc-proximamente-caja h3 { margin: .2em 0 .6em; } .rc-proximamente-caja p { max-width: 560px; margin: 0 auto .9em; } .rc-proximamente-caja .rc-hero-cta { justify-content: center; margin-top: 1.2em; } @keyframes rc-destello { 0% { left: -60%; } 55%, 100% { left: 130%; } } @keyframes rc-latido { 0%, 100% { box-shadow: 0 6px 18px rgba(243, 197, 91, .35), 0 0 0 0 rgba(243, 197, 91, .55); } 50% { box-shadow: 0 6px 22px rgba(243, 197, 91, .6), 0 0 0 14px rgba(243, 197, 91, 0); } } /* ---------- Navegación ---------- */ .rc-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; font-size: 15px; /* la barra mantiene su tamaño aunque el texto de la web sea un poco mayor */ transition: background .35s, box-shadow .35s, padding .35s; background: linear-gradient(180deg, rgba(8, 6, 20, .85), rgba(8, 6, 20, 0)); padding: 10px 0; } .rc-nav.solida, .rc-interior .rc-nav { background: rgba(13, 10, 30, .92); backdrop-filter: blur(10px); box-shadow: 0 6px 24px rgba(0, 0, 0, .45), inset 0 -1px 0 rgba(243, 197, 91, .25); padding: 4px 0; } .rc-nav-in { max-width: 1680px; margin: 0 auto; padding: 0 18px; display: flex; align-items: center; gap: 18px; } .rc-nav-logo img { height: 46px; display: block; filter: drop-shadow(0 3px 8px rgba(0, 0, 0, .6)); transition: transform .3s, height .3s; } .rc-nav-logo:hover img { transform: scale(1.06) rotate(-2deg); } .rc-nav.solida .rc-nav-logo img { height: 38px; } .rc-menu { display: flex; gap: 2px; flex: 1; justify-content: center; } .rc-menu-cat { position: relative; } .rc-menu-tit { display: flex; align-items: center; gap: .4em; background: none; border: 0; cursor: pointer; color: var(--rc-texto); font-family: var(--rc-titulos); font-weight: 600; font-size: .92em; padding: 12px 12px; border-radius: 10px; transition: background .2s, color .2s; white-space: nowrap; } .rc-menu-tit:hover, .rc-menu-cat:hover .rc-menu-tit, .rc-menu-cat.activa .rc-menu-tit { color: var(--rc-oro); background: rgba(243, 197, 91, .08); } .rc-ico { font-size: 1.05em; } .rc-flecha { width: 6px; height: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); margin-left: 2px; transition: transform .2s; } .rc-menu-cat:hover .rc-flecha { transform: rotate(225deg) translateY(-2px); } .rc-menu-desp { position: absolute; top: 100%; left: 50%; min-width: 220px; padding: 8px; background: rgba(18, 13, 40, .97); border: 1px solid rgba(243, 197, 91, .35); border-radius: 14px; box-shadow: var(--rc-sombra); opacity: 0; visibility: hidden; transform: translate(-50%, 10px) scale(.97); transition: opacity .2s, transform .2s, visibility .2s; } .rc-menu-cat:hover .rc-menu-desp, .rc-menu-cat:focus-within .rc-menu-desp { opacity: 1; visibility: visible; transform: translate(-50%, 4px) scale(1); } .rc-menu-desp a { display: block; padding: 9px 14px; border-radius: 9px; color: var(--rc-texto) !important; font-weight: 600; font-size: .93em; transition: background .15s, padding .15s, color .15s; } .rc-menu-desp a:hover { background: linear-gradient(90deg, rgba(243, 197, 91, .18), transparent); color: var(--rc-oro) !important; padding-left: 20px; } .rc-nav-acc { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .rc-nav-logo { flex-shrink: 0; } .rc-menu { min-width: 0; justify-content: safe center; } /* Botón de la cuenta: nombre largo -> se corta con "..." y nunca se sale de la pantalla */ .rc-btn-cuenta { max-width: 170px; } .rc-btn-cuenta span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .rc-btn-cuenta::after { display: none; } /* Estado del servidor: placa colgada bajo el logo (no ocupa sitio en la barra) */ .rc-nav-marca { position: relative; flex-shrink: 0; } .rc-estado { --rc-luz: var(--rc-rojo); position: absolute; top: calc(100% + 16px); left: 0; min-width: 100%; box-sizing: border-box; padding: 9px 12px; border-radius: 14px; background: linear-gradient(180deg, rgba(30, 22, 62, .94), rgba(12, 9, 28, .94)); border: 1px solid rgba(243, 197, 91, .45); box-shadow: 0 12px 30px rgba(0, 0, 0, .5), 0 0 0 3px rgba(243, 197, 91, .06), inset 0 1px 0 rgba(255, 255, 255, .08); backdrop-filter: blur(8px); white-space: nowrap; line-height: 1.2; transform-origin: 50% -16px; animation: rc-colgar 1.4s ease-out both; transition: top .35s, padding .35s; } .rc-estado.on { --rc-luz: var(--rc-verde); } /* cadenitas doradas que la unen al logo */ .rc-estado::before, .rc-estado::after { content: ''; position: absolute; bottom: 100%; width: 2px; height: 17px; background: repeating-linear-gradient(180deg, var(--rc-oro) 0 3px, transparent 3px 5px); opacity: .75; } .rc-estado::before { left: 24px; } .rc-estado::after { right: 24px; } .rc-estado-cab { display: flex; align-items: center; gap: 8px; } .rc-estado-luz { position: relative; flex-shrink: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--rc-luz); box-shadow: 0 0 10px var(--rc-luz); } .rc-estado-luz::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--rc-luz); animation: rc-onda 1.8s ease-out infinite; } .rc-estado-tit { font-family: var(--rc-titulos); font-size: .8em; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--rc-luz); text-shadow: 0 0 12px var(--rc-luz); } .rc-estado-num { margin-left: auto; padding-left: 10px; font-size: .78em; color: var(--rc-texto2); } .rc-estado-num b { color: #fff; font-size: 1.15em; } .rc-estado-srv { display: flex; gap: 5px; overflow: hidden; max-height: 40px; margin-top: 8px; padding-top: 8px; border-top: 1px dashed rgba(243, 197, 91, .22); transition: max-height .35s, margin .35s, padding .35s, opacity .35s, border-color .35s; } .rc-estado-srv span { flex: 1; display: flex; align-items: center; justify-content: center; gap: 5px; padding: 3px 7px; border-radius: 7px; font-size: .66em; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; background: rgba(78, 224, 138, .08); color: #bff7d4; border: 1px solid rgba(78, 224, 138, .18); } .rc-estado-srv span i { width: 6px; height: 6px; border-radius: 50%; background: var(--rc-verde); box-shadow: 0 0 6px var(--rc-verde); } .rc-estado-srv span.ko { background: rgba(255, 93, 108, .1); color: #ffc3c9; border-color: rgba(255, 93, 108, .25); } .rc-estado-srv span.ko i { background: var(--rc-rojo); box-shadow: 0 0 6px var(--rc-rojo); } /* Al bajar la página la placa se queda en una línea para molestar lo mínimo */ .rc-nav.solida .rc-estado { top: calc(100% + 10px); padding: 6px 11px; } .rc-nav.solida .rc-estado::before, .rc-nav.solida .rc-estado::after { height: 11px; } .rc-nav.solida .rc-estado-srv { max-height: 0; margin-top: 0; padding-top: 0; opacity: 0; border-color: transparent; } @keyframes rc-onda { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(2.6); opacity: 0; } } @keyframes rc-colgar { 0% { opacity: 0; transform: translateY(-8px) rotate(-4deg); } 45% { opacity: 1; transform: rotate(2.5deg); } 70% { transform: rotate(-1deg); } 100% { transform: none; } } @keyframes rc-parpadeo { 50% { opacity: .35; } } .rc-burger { display: none; background: none; border: 0; cursor: pointer; padding: 8px; margin-left: auto; } .rc-burger span { display: block; width: 24px; height: 2px; margin: 5px 0; background: var(--rc-oro); border-radius: 2px; transition: transform .25s, opacity .25s; } /* ---------- Portada (hero) ---------- */ .rc-hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; justify-content: center; overflow: hidden; z-index: 2; } .rc-hero-capa { position: absolute; inset: -6% -2% -2%; background-size: cover; background-position: center bottom; will-change: transform; } .rc-hero-fondo { filter: saturate(1.1); } .rc-hero-escena { animation: rc-respirar 18s ease-in-out infinite alternate; } @keyframes rc-respirar { from { background-size: 100% auto; } to { background-size: 104% auto; } } @supports (background-size: cover) { .rc-hero-escena { background-size: cover; animation: rc-zoom 20s ease-in-out infinite alternate; } } @keyframes rc-zoom { from { transform: scale(1); } to { transform: scale(1.06); } } .rc-hero-estrellas { position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(2px 2px at 10% 20%, #fff, transparent), radial-gradient(1.5px 1.5px at 30% 8%, #ffe9a8, transparent), radial-gradient(2px 2px at 55% 15%, #fff, transparent), radial-gradient(1.5px 1.5px at 75% 25%, #cfe6ff, transparent), radial-gradient(2px 2px at 88% 10%, #fff, transparent), radial-gradient(1.5px 1.5px at 18% 35%, #fff, transparent), radial-gradient(1.5px 1.5px at 65% 32%, #ffe9a8, transparent), radial-gradient(2px 2px at 42% 28%, #fff, transparent); animation: rc-titilar 4s ease-in-out infinite alternate; } @keyframes rc-titilar { from { opacity: .35; } to { opacity: 1; } } .rc-hero-nubes span { position: absolute; left: -40%; width: 60%; height: 140px; background: radial-gradient(ellipse at center, rgba(255, 255, 255, .22), transparent 70%); filter: blur(12px); animation: rc-nube 60s linear infinite; } .rc-hero-nubes span:nth-child(1) { top: 12%; } .rc-hero-nubes span:nth-child(2) { top: 30%; animation-duration: 85s; animation-delay: -30s; opacity: .7; } .rc-hero-nubes span:nth-child(3) { top: 5%; animation-duration: 110s; animation-delay: -70s; opacity: .5; } @keyframes rc-nube { to { transform: translateX(240%); } } .rc-hero-velo { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 40%, rgba(14, 11, 31, .15), rgba(14, 11, 31, .65) 75%), linear-gradient(180deg, rgba(14, 11, 31, .35) 0%, transparent 30%, transparent 60%, var(--rc-noche) 100%); } .rc-hero-txt { position: relative; z-index: 3; text-align: center; padding: 110px 20px 90px; max-width: 980px; } .rc-ep { display: inline-block; font-family: var(--rc-titulos); font-weight: 800; letter-spacing: .25em; text-transform: uppercase; font-size: .82em; color: var(--rc-oro-claro); padding: 7px 18px; border-radius: 999px; background: rgba(14, 11, 31, .55); border: 1px solid rgba(243, 197, 91, .55); box-shadow: 0 0 24px rgba(243, 197, 91, .25); animation: rc-entrar .9s .1s both; } .rc-hero-logo { display: block; margin: 18px auto 6px; width: min(720px, 92%); filter: drop-shadow(0 10px 30px rgba(0, 0, 0, .65)) drop-shadow(0 0 30px rgba(79, 179, 255, .35)); animation: rc-entrar-logo 1.2s .2s both, rc-flotar 6s 1.4s ease-in-out infinite; } @keyframes rc-flotar { 50% { transform: translateY(-12px); } } @keyframes rc-entrar-logo { from { opacity: 0; transform: scale(.7) translateY(30px); filter: blur(8px); } to { opacity: 1; transform: none; } } @keyframes rc-entrar { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } } .rc-hero-lema { font-size: 1.22em; line-height: 1.55; color: #fff; text-shadow: 0 2px 10px rgba(0, 0, 0, .9); margin: 6px auto 26px; animation: rc-entrar .9s .5s both; } .rc-rates { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; margin-bottom: 30px; } .rc-rate { min-width: 118px; padding: 12px 18px; border-radius: var(--rc-radio); background: linear-gradient(180deg, rgba(40, 28, 90, .75), rgba(14, 11, 31, .8)); border: 1px solid rgba(243, 197, 91, .45); box-shadow: 0 10px 30px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .08); backdrop-filter: blur(6px); animation: rc-entrar .8s both; transition: transform .25s, border-color .25s; } .rc-rate:nth-child(1) { animation-delay: .7s; } .rc-rate:nth-child(2) { animation-delay: .8s; } .rc-rate:nth-child(3) { animation-delay: .9s; } .rc-rate:nth-child(4) { animation-delay: 1s; } .rc-rate:hover { transform: translateY(-6px); border-color: var(--rc-oro); } .rc-rate b { display: block; font-family: var(--rc-deco); font-size: 2em; line-height: 1.1; background: linear-gradient(180deg, #fff6d6, var(--rc-oro) 55%, var(--rc-oro2)); -webkit-background-clip: text; background-clip: text; color: transparent; } .rc-rate span { font-size: .78em; text-transform: uppercase; letter-spacing: .14em; color: var(--rc-texto2); font-weight: 800; } .rc-hero-cta { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; animation: rc-entrar .9s 1.1s both; } .rc-hero-sellos { list-style: none; margin: 20px 0 0; padding: 0; display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 10px; animation: rc-entrar .9s 1.3s both; } .rc-hero-sellos li { padding: 5px 13px; border-radius: 999px; font-weight: 800; font-size: .9em; color: #fff; text-shadow: 0 1px 4px rgba(0, 0, 0, .8); background: rgba(14, 11, 31, .55); border: 1px solid rgba(255, 255, 255, .14); backdrop-filter: blur(4px); } /* Sello de OT Shield bajo "Protección antihack" */ .rc-hero-escudo { margin: 14px 0 0; display: flex; justify-content: center; animation: rc-entrar .9s 1.45s both; } .rc-hero-escudo img { display: block; width: 196px; max-width: 60vw; height: auto; filter: drop-shadow(0 4px 14px rgba(0, 0, 0, .6)) drop-shadow(0 0 10px rgba(79, 179, 255, .25)); } /* Redes sociales (portada y pie) */ .rc-redes { display: flex; flex-wrap: wrap; gap: 10px; } .rc-redes-hero { justify-content: center; margin: 16px 0 0; animation: rc-entrar .9s 1.4s both; } .rc-red { display: inline-flex !important; align-items: center; gap: 8px; padding: 7px 15px !important; border-radius: 999px; font-weight: 800; font-size: .92em; color: #fff !important; text-decoration: none; text-shadow: 0 1px 3px rgba(0, 0, 0, .6); border: 1px solid rgba(255, 255, 255, .18); box-shadow: 0 6px 18px rgba(0, 0, 0, .35); transition: transform .2s, box-shadow .2s, filter .2s; } .rc-red svg { flex: none; } .rc-red-discord { background: linear-gradient(180deg, #6f7cf5, #4f5bd5); } .rc-red-facebook { background: linear-gradient(180deg, #3b86f5, #1d64d6); } .rc-red:hover, .rc-red:focus-visible { transform: translateY(-2px) !important; filter: brightness(1.12); box-shadow: 0 10px 24px rgba(0, 0, 0, .45); color: #fff !important; } .rc-redes-pie { margin-top: 14px; } .rc-scroll { display: none; /* las tarjetas de estadísticas ya invitan a bajar y el ratón se montaba encima */ } .rc-scroll span { position: absolute; top: 8px; left: 50%; width: 4px; height: 9px; margin-left: -2px; border-radius: 2px; background: var(--rc-oro); animation: rc-rueda 1.8s infinite; } @keyframes rc-rueda { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(16px); } } /* ---------- Cabecera interior ---------- */ .rc-banner { position: relative; z-index: 2; height: 300px; background-size: cover; background-position: center 70%; display: flex; align-items: flex-end; justify-content: center; overflow: hidden; } .rc-banner::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14, 11, 31, .55), rgba(14, 11, 31, .2) 40%, var(--rc-noche) 100%); } .rc-banner-txt { position: relative; z-index: 2; text-align: center; padding-bottom: 34px; animation: rc-entrar .8s both; } .rc-banner h1 { margin: 12px 0 0; font-family: var(--rc-deco); font-size: 2.4em; color: #fff; text-shadow: 0 4px 18px rgba(0, 0, 0, .8), 0 0 30px rgba(243, 197, 91, .35); } /* ---------- Contenido ---------- */ .rc-main { position: relative; z-index: 3; max-width: 1240px; margin: 0 auto; padding: 0 18px 60px; } .rc-interior .rc-main { margin-top: -30px; } .rc-usuario { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0 0 16px; padding: 12px 18px; border-radius: var(--rc-radio); background: rgba(27, 20, 56, .85); border: 1px solid rgba(243, 197, 91, .3); box-shadow: var(--rc-sombra); color: var(--rc-texto2); } .rc-portada .rc-usuario { margin-top: 26px; } .rc-usuario select { margin-left: 4px; } .rc-admin { position: relative; margin-left: auto; } .rc-admin-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; display: none; width: 280px; max-height: 70vh; overflow: auto; padding: 8px; border-radius: 14px; background: rgba(18, 13, 40, .98); border: 1px solid rgba(243, 197, 91, .35); box-shadow: var(--rc-sombra); } .rc-admin.abierto .rc-admin-menu { display: block; animation: rc-entrar .2s both; } .rc-admin-menu a { display: block; padding: 8px 12px; border-radius: 8px; color: var(--rc-texto) !important; font-weight: 600; } .rc-admin-menu a:hover { background: rgba(243, 197, 91, .15); color: var(--rc-oro) !important; } /* Pergamino: aquí van las páginas normales (tablas, formularios...) */ .rc-pergamino { position: relative; color: var(--rc-tinta); background: radial-gradient(ellipse at top left, rgba(255, 255, 255, .7), transparent 60%), linear-gradient(180deg, var(--rc-perg) 0%, var(--rc-perg2) 100%); border-radius: 20px; padding: 34px 38px; box-shadow: var(--rc-sombra), inset 0 0 0 1px rgba(201, 138, 28, .35), inset 0 0 60px rgba(201, 138, 28, .12); } .rc-pergamino::before { /* marco dorado */ content: ''; position: absolute; inset: 8px; border-radius: 14px; pointer-events: none; border: 1px solid rgba(201, 138, 28, .35); } .rc-pergamino a, body.rc .rc-pergamino a { color: #9b5d00; font-weight: 700; } /* body.rc: si no, ganaba el dorado claro y no se leía */ .rc-pergamino a:hover, body.rc .rc-pergamino a:hover { color: #d47a00; } .rc-pergamino h2 { font-family: var(--rc-titulos); font-weight: 800; font-size: 1.7em; color: #4a2e05; margin: 0 0 18px; padding-bottom: 10px; border-bottom: 2px solid transparent; border-image: linear-gradient(90deg, var(--rc-oro2), rgba(201, 138, 28, 0)) 1; } .rc-pergamino h3 { font-family: var(--rc-titulos); color: #5a3a08; } .rc-pergamino h3:first-letter { color: inherit; } .rc-pergamino p { color: var(--rc-tinta); } .rc-pergamino .horizontal-table, .rc-pergamino .vertical-table, .rc-pergamino .generic-form-table { border-collapse: separate; border-spacing: 0; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 16px rgba(80, 50, 0, .12); border: 1px solid #e3cf9e; background: #fffdf6; } .rc-pergamino .horizontal-table th, .rc-pergamino .vertical-table th, .rc-pergamino .generic-form-table th { background: linear-gradient(180deg, #3a2a6e, #261b4d); color: var(--rc-oro-claro); border-color: #4a3a80; font-family: var(--rc-titulos); font-weight: 600; } .rc-pergamino .horizontal-table th a, .rc-pergamino .vertical-table th a { color: var(--rc-oro-claro); } .rc-pergamino .horizontal-table td, .rc-pergamino .vertical-table td, .rc-pergamino .generic-form-table td { border-color: #efe2c0; } .rc-pergamino .horizontal-table tr:nth-child(even) td { background: #fbf3dc; } .rc-pergamino .horizontal-table tr:hover td { background: #fff1c7; } .rc-pergamino input[type=text], .rc-pergamino input[type=password], .rc-pergamino input[type=file], .rc-pergamino input[type=email], .rc-pergamino textarea, .rc-pergamino select { border: 1px solid #d8c391; border-radius: 9px; padding: 7px 10px; background: #fffef9; color: #3b2f1e; font-family: var(--rc-cuerpo); font-size: 1em; transition: border-color .2s, box-shadow .2s; } .rc-pergamino input[type=text]:focus, .rc-pergamino input[type=password]:focus, .rc-pergamino input[type=email]:focus, .rc-pergamino textarea:focus, .rc-pergamino select:focus { outline: none; border-color: var(--rc-oro2); box-shadow: 0 0 0 3px rgba(243, 197, 91, .35); } .rc-pergamino input[type=submit], .rc-pergamino button[type=submit], .rc-pergamino input[type=button], .rc-pergamino .submit_button { font-family: var(--rc-titulos); font-weight: 800; color: #2a1a00; cursor: pointer; padding: 9px 22px; border-radius: 999px; border: 1px solid #ffeab0; background: linear-gradient(180deg, #ffe39a, var(--rc-oro) 45%, var(--rc-oro2)); box-shadow: 0 5px 14px rgba(201, 138, 28, .35); transition: transform .15s, box-shadow .15s; } .rc-pergamino input[type=submit]:hover, .rc-pergamino button[type=submit]:hover, .rc-pergamino input[type=button]:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(201, 138, 28, .5); } /* Submenú y acciones de la página: botones-píldora */ .rc-pergamino #submenu, .rc-pergamino #pagemenu { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin: 0 0 22px; padding: 0; background: none; border: 0; color: #5b4b84; } .rc-pergamino #pagemenu { margin-top: -8px; } body.rc .rc-pergamino .rc-submenu a { display: inline-block; padding: 7px 15px; border-radius: 999px; font-weight: 700; font-size: .9em; color: #4f3f7a; background: rgba(58, 42, 110, .07); border: 1px solid rgba(58, 42, 110, .2); transition: background .15s, color .15s, transform .15s; } body.rc .rc-pergamino .rc-submenu a:hover { background: rgba(243, 197, 91, .3); color: #4a2e05; transform: translateY(-1px); } body.rc .rc-pergamino .rc-submenu a.current-sub-menu { color: #2a1a00; background: linear-gradient(180deg, #ffe39a, var(--rc-oro) 50%, var(--rc-oro2)); border-color: #e3b04a; box-shadow: 0 3px 10px rgba(201, 138, 28, .3); } .rc-pergamino .rc-pagemenu-tit { font-weight: 800; font-size: .85em; color: #7a6540; margin-right: 2px; } /* Formularios RetroClassic (registro y entrada) */ .rc-pergamino form.rc-form { background: none; border: 0; padding: 0; margin: 0; box-shadow: none; } .rc-form .rc-campo { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; min-width: 0; } .rc-form .rc-campo > label, .rc-form .rc-etq { font-weight: 800; font-size: .95em; color: #4a2e05; } .rc-form .rc-etq abbr { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-left: 4px; border-radius: 50%; font-size: .75em; text-decoration: none; cursor: help; color: #fff; background: #9b7a3c; } .rc-pergamino .rc-form input[type=text], .rc-pergamino .rc-form input[type=password], .rc-pergamino .rc-form input[type=email] { width: 100%; padding: 11px 14px; font-size: 1.02em; border-radius: 11px; } .rc-pergamino .rc-form select { padding: 9px 10px; border-radius: 10px; } .rc-form .rc-campo small { color: #8a7351; font-size: .85em; } .rc-form .rc-fila { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; } .rc-reqs { list-style: none; margin: -4px 0 18px; padding: 12px 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; border-radius: 12px; background: rgba(58, 42, 110, .06); border: 1px dashed rgba(58, 42, 110, .22); } .rc-reqs li { position: relative; padding-left: 24px; font-size: .88em; color: #7a6a52; transition: color .2s; } .rc-reqs li::before { content: ''; position: absolute; left: 0; top: 50%; width: 16px; height: 16px; margin-top: -8px; border-radius: 50%; border: 2px solid #c9b48a; box-sizing: border-box; transition: background .2s, border-color .2s; } .rc-reqs li.ok { color: #23753a; font-weight: 700; } .rc-reqs li.ok::before { border-color: #2fa257; background: #2fa257 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat; } .rc-sexo { display: flex; gap: 8px; flex-wrap: wrap; } .rc-sexo label { display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; border-radius: 11px; cursor: pointer; font-weight: 700; background: #fffef9; border: 1px solid #d8c391; transition: border-color .15s, box-shadow .15s, background .15s; } .rc-sexo label:hover { border-color: var(--rc-oro2); } .rc-sexo label:has(input:checked) { background: #fff3cf; border-color: var(--rc-oro2); box-shadow: 0 0 0 3px rgba(243, 197, 91, .35); } .rc-sexo input { accent-color: #c98a1c; margin: 0; } .rc-fecha .date-field { display: flex; align-items: center; gap: 5px; color: #9b7a3c; } .rc-captcha-fila { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .rc-captcha-fila .security-code img { display: block; } .rc-captcha-fila input[type=text] { flex: 1; min-width: 140px; width: auto !important; } .rc-captcha-otro { font-size: .85em; } .rc-form-boton { width: 100%; justify-content: center; margin-top: 4px; } .rc-form-pie { text-align: center; margin: 14px 0 0; color: #6b5a3a; } .rc-reg-terminos { font-size: .88em; color: #7a6a52; margin: 4px 0 14px; } .rc-error { margin: 0 0 18px; padding: 11px 15px; border-radius: 12px; font-weight: 700; color: #8c1d2b; background: #ffe9ec; border: 1px solid #f3b5bf; } .rc-aviso { margin: 0 0 18px; padding: 11px 15px; border-radius: 12px; color: #6b4a10; background: #fff4d4; border: 1px solid #f0d58f; } .rc-reg { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr); gap: 34px; align-items: start; } .rc-reg-form h2, .rc-login h2 { margin-bottom: 8px !important; } .rc-reg-intro, .rc-login-intro { margin: 0 0 20px; color: #6b5a3a !important; } .rc-reg-lado { position: sticky; top: 90px; padding: 28px 26px; border-radius: 20px; text-align: center; color: var(--rc-texto); background: radial-gradient(circle at 50% 0%, rgba(243, 197, 91, .22), transparent 55%), linear-gradient(180deg, #2d2160, #140f2e); box-shadow: 0 18px 40px rgba(40, 20, 0, .35), inset 0 0 0 1px rgba(243, 197, 91, .4); } .rc-reg-logo { width: 78%; max-width: 260px; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .6)); } .rc-pergamino .rc-reg-lado h3 { margin: 10px 0 14px; font-weight: 800; font-size: 1.3em; color: var(--rc-oro-claro); } .rc-reg-rates { list-style: none; margin: 0 0 18px; padding: 0; display: flex; justify-content: center; gap: 8px; } .rc-reg-rates li { flex: 1; max-width: 90px; padding: 8px 4px; border-radius: 12px; font-size: .75em; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--rc-texto2); background: rgba(0, 0, 0, .3); border: 1px solid rgba(243, 197, 91, .35); } .rc-reg-rates b { display: block; font-family: var(--rc-titulos); font-size: 1.9em; letter-spacing: 0; text-transform: none; color: var(--rc-oro); } .rc-reg-lista { list-style: none; margin: 0; padding: 0; text-align: left; display: grid; gap: 8px; } .rc-reg-lista li { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 11px; background: rgba(255, 255, 255, .05); font-weight: 600; } .rc-reg-lista span { font-size: 1.25em; } .rc-pergamino .rc-reg-cuentas { margin: 18px 0 0; color: var(--rc-texto2); } .rc-reg-cuentas b { color: var(--rc-oro); font-size: 1.15em; } .rc-login { max-width: 440px; margin: 0 auto; text-align: center; } .rc-login .rc-form { text-align: left; } .rc-login-escudo { width: 70px; height: 70px; filter: drop-shadow(0 6px 12px rgba(80, 50, 0, .35)); } .rc-pergamino .rc-login h2 { border: 0; padding: 0; } .rc-login-nueva { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 22px; padding-top: 20px; border-top: 1px dashed rgba(155, 93, 0, .3); font-weight: 700; color: #6b5a3a; } .rc-pergamino .rc-login-nueva a.rc-btn, .rc-pergamino .rc-form-boton { color: #2a1a00 !important; } .rc-pergamino .message { border-radius: 12px; border: 1px solid #b8dfb0; background: #eefbe9; color: #2a6a20; padding: 10px 14px; } .rc-pergamino .notice { border-radius: 12px; } .rc-pergamino .security-code img, .rc-pergamino img[src*="captcha"] { border-radius: 10px; box-shadow: 0 3px 10px rgba(0, 0, 0, .25); } .rc-pergamino #register_form table, .rc-pergamino #login_form table { margin: 0 auto; } /* ---------- Portada: secciones ---------- */ .rc-contenido-portada { color: var(--rc-texto); } .rc-contenido-portada > .message { max-width: 700px; margin: 20px auto; padding: 12px 16px; border-radius: 12px; } .rc-seccion { margin: 80px 0; } .rc-titulo { text-align: center; margin: 0 0 34px; font-family: var(--rc-deco); font-weight: 800; font-size: 2.2em; line-height: 1.2; letter-spacing: .02em; } .rc-titulo span { position: relative; display: inline-block; background: linear-gradient(180deg, #fff6d6, var(--rc-oro) 60%, var(--rc-oro2)); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 3px 10px rgba(0, 0, 0, .5)); } .rc-titulo span::before, .rc-titulo span::after { content: '✦'; position: absolute; top: 50%; transform: translateY(-50%); font-size: .45em; color: var(--rc-oro); -webkit-text-fill-color: var(--rc-oro); } .rc-titulo span::before { left: -1.6em; } .rc-titulo span::after { right: -1.6em; } .rc-titulo.izq { text-align: left; } .rc-titulo.izq span::before { display: none; } .rc-sub { text-align: center; color: #cfc7ea; font-size: 1.05em; margin: -20px 0 30px; } .rc-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: -70px; position: relative; z-index: 4; } .rc-stat { text-align: center; padding: 20px 10px; border-radius: var(--rc-radio); background: linear-gradient(180deg, rgba(48, 34, 100, .9), rgba(20, 15, 44, .95)); border: 1px solid rgba(243, 197, 91, .3); box-shadow: var(--rc-sombra); transition: transform .25s, border-color .25s; } .rc-stat:hover { transform: translateY(-6px); border-color: var(--rc-oro); } .rc-stat-ico { display: block; font-size: 1.6em; margin-bottom: 4px; } .rc-stat b { display: block; font-family: var(--rc-deco); font-weight: 800; font-size: 2em; color: var(--rc-oro); line-height: 1.1; } .rc-stat > span:last-child { font-size: .78em; letter-spacing: .12em; text-transform: uppercase; color: var(--rc-texto2); font-weight: 800; } /* Primera casilla: en vivo (jugadores conectados o servidor apagado) */ .rc-stat-vivo { color: var(--rc-rojo); } .rc-stat-vivo.on { color: var(--rc-verde); } .rc-stat-vivo .rc-stat-ico { height: 1.5em; display: flex; align-items: center; justify-content: center; } .rc-vivo { position: relative; width: 14px; height: 14px; border-radius: 50%; background: currentColor; box-shadow: 0 0 12px currentColor; } .rc-vivo::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid currentColor; animation: rc-onda 1.8s ease-out infinite; } .rc-stat-vivo b { color: inherit; text-shadow: 0 0 14px currentColor; } .rc-stat-vivo.off b { font-size: 1.7em; text-transform: uppercase; letter-spacing: .04em; } /* Empieza a jugar en 3 pasos */ .rc-pasos { list-style: none; margin: 0; padding: 18px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; position: relative; } .rc-pasos::before { content: ''; position: absolute; top: 18px; left: 16%; right: 16%; border-top: 2px dashed rgba(243, 197, 91, .4); } .rc-paso { position: relative; text-align: center; padding: 34px 22px 26px; border-radius: 20px; background: linear-gradient(180deg, rgba(58, 42, 110, .65), rgba(20, 15, 44, .92)); border: 1px solid rgba(243, 197, 91, .28); box-shadow: var(--rc-sombra); transition: transform .3s, border-color .3s; } .rc-paso:hover { transform: translateY(-6px); border-color: rgba(243, 197, 91, .6); } .rc-paso-num { position: absolute; top: -19px; left: 50%; transform: translateX(-50%); width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-family: var(--rc-titulos); font-weight: 900; font-size: 1.15em; color: #2a1a00; background: linear-gradient(180deg, #ffe39a, var(--rc-oro) 50%, var(--rc-oro2)); box-shadow: 0 4px 14px rgba(243, 197, 91, .45), 0 0 0 5px var(--rc-noche); } .rc-paso-ico { font-size: 2.4em; line-height: 1.2; margin: 4px 0 8px; } .rc-paso h3 { margin: 0 0 6px; padding: 0; border: 0; font-family: var(--rc-titulos); font-weight: 800; font-size: 1.25em; color: var(--rc-oro-claro); } .rc-paso p { margin: 0 0 18px; color: var(--rc-texto2); line-height: 1.5; } .rc-paso.hecho { border-color: rgba(78, 224, 138, .45); } .rc-paso.hecho .rc-paso-num { background: linear-gradient(180deg, #c9ffdd, var(--rc-verde)); } .rc-paso-ok { display: inline-block; padding: .45em 1.05em; border-radius: 999px; font-weight: 800; font-size: .9em; color: #bff7d4; background: rgba(78, 224, 138, .12); border: 1px solid rgba(78, 224, 138, .45); } /* Agenda de la semana */ .rc-agenda { display: grid; grid-template-columns: 340px 1fr; gap: 22px; align-items: stretch; } .rc-ag-prox { position: relative; padding: 26px 24px; border-radius: 22px; text-align: center; background: radial-gradient(circle at 50% 0%, rgba(243, 197, 91, .2), transparent 60%), linear-gradient(180deg, rgba(58, 42, 110, .8), rgba(20, 15, 44, .96)); border: 1px solid rgba(243, 197, 91, .5); box-shadow: var(--rc-sombra), 0 0 30px rgba(243, 197, 91, .1); --ag: var(--rc-oro); } .rc-ag-prox.rc-ag-bg { --ag: #8fd0ff; border-color: rgba(79, 179, 255, .5); background: radial-gradient(circle at 50% 0%, rgba(79, 179, 255, .2), transparent 60%), linear-gradient(180deg, rgba(42, 52, 110, .8), rgba(16, 17, 44, .96)); } .rc-ag-etq { display: inline-flex; align-items: center; gap: 7px; padding: 5px 13px; border-radius: 999px; font-size: .74em; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--ag); border: 1px solid currentColor; background: rgba(0, 0, 0, .25); } .rc-ag-prox.ya .rc-ag-etq { color: #7dffb0; } .rc-ag-etq i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; animation: rc-parpadeo 1.2s infinite; } .rc-ag-ico { font-size: 2.8em; line-height: 1.2; margin: 12px 0 2px; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .5)); } .rc-ag-prox h3 { margin: 0; padding: 0; border: 0; font-family: var(--rc-titulos); font-weight: 800; font-size: 1.35em; color: #fff; } .rc-ag-cuando { margin: 6px 0 2px; font-weight: 800; font-size: 1.05em; color: var(--ag); } .rc-ag-det { margin: 0 0 16px; color: var(--rc-texto2); } .rc-ag-cuenta { padding: 12px 10px; border-radius: 14px; background: rgba(0, 0, 0, .32); border: 1px solid rgba(255, 255, 255, .08); } .rc-ag-cuenta small { display: block; font-size: .72em; letter-spacing: .16em; text-transform: uppercase; color: var(--rc-texto2); font-weight: 800; } .rc-ag-cuenta b { display: block; min-height: 1.25em; font-size: 2em; font-weight: 800; line-height: 1.25; color: var(--rc-oro-claro); font-variant-numeric: tabular-nums; letter-spacing: .03em; } .rc-ag-cuenta.cero b { color: #7dffb0; font-size: 1.4em; } .rc-ag-despues { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 6px; text-align: left; } .rc-ag-despues li { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 10px; background: rgba(255, 255, 255, .05); font-size: .92em; } .rc-ag-despues b { color: var(--rc-texto); } .rc-ag-despues em { margin-left: auto; font-style: normal; color: var(--rc-texto2); font-weight: 700; white-space: nowrap; } .rc-ag-semana { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; } .rc-ag-dia { display: flex; flex-direction: column; gap: 8px; padding: 14px 9px; border-radius: 16px; background: rgba(27, 20, 56, .72); border: 1px solid rgba(255, 255, 255, .08); } .rc-ag-dia h4 { margin: 0 0 4px; text-align: center; font-family: var(--rc-titulos); font-weight: 800; font-size: 1em; letter-spacing: .08em; text-transform: uppercase; color: var(--rc-texto); } .rc-ag-dia h4 em { display: block; width: max-content; margin: 5px auto 0; padding: 1px 9px; border-radius: 999px; font-style: normal; font-family: var(--rc-cuerpo); font-size: .66em; letter-spacing: .12em; color: #2a1a00; background: var(--rc-oro); } .rc-ag-dia.hoy { border-color: rgba(243, 197, 91, .65); background: linear-gradient(180deg, rgba(243, 197, 91, .14), rgba(27, 20, 56, .85)); box-shadow: 0 0 24px rgba(243, 197, 91, .15); } .rc-ag-ev { padding: 9px 6px; border-radius: 11px; text-align: center; } .rc-ag-ev b { display: block; font-size: 1.08em; color: #fff; } .rc-ag-ev span { display: block; margin-top: 1px; font-size: .72em; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; } .rc-ag-ev.rc-ag-woe { background: rgba(243, 197, 91, .11); border: 1px solid rgba(243, 197, 91, .38); } .rc-ag-ev.rc-ag-woe span { color: var(--rc-oro); } .rc-ag-ev.rc-ag-bg { background: rgba(79, 179, 255, .11); border: 1px solid rgba(79, 179, 255, .38); } .rc-ag-ev.rc-ag-bg span { color: #9fd6ff; } .rc-ag-ev.ahora { box-shadow: 0 0 0 2px var(--rc-verde), 0 0 18px rgba(78, 224, 138, .45); } .rc-ag-libre { margin: auto 0; text-align: center; color: #8a81b0; font-size: .82em; } .rc-ventajas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .rc-ventaja { position: relative; overflow: hidden; padding: 28px 24px; border-radius: 20px; background: linear-gradient(160deg, rgba(58, 42, 110, .55), rgba(20, 15, 44, .85)); border: 1px solid rgba(255, 255, 255, .08); box-shadow: var(--rc-sombra); transition: transform .3s, border-color .3s, box-shadow .3s; } .rc-ventaja::before { content: ''; position: absolute; inset: -1px; border-radius: 20px; background: radial-gradient(circle at var(--mx, 50%) var(--my, 0%), rgba(243, 197, 91, .25), transparent 45%); opacity: 0; transition: opacity .3s; } .rc-ventaja:hover { transform: translateY(-8px); border-color: rgba(243, 197, 91, .55); box-shadow: 0 24px 60px rgba(0, 0, 0, .55), 0 0 30px rgba(243, 197, 91, .12); } .rc-ventaja:hover::before { opacity: 1; } .rc-ventaja-ico { position: relative; width: 62px; height: 62px; display: grid; place-items: center; font-size: 1.9em; border-radius: 18px; margin-bottom: 14px; background: linear-gradient(180deg, rgba(243, 197, 91, .25), rgba(243, 197, 91, .05)); border: 1px solid rgba(243, 197, 91, .4); transition: transform .4s; } .rc-ventaja:hover .rc-ventaja-ico { transform: rotate(-8deg) scale(1.1); } .rc-ventaja-ico img { width: 40px; height: 40px; } .rc-ventaja h3 { position: relative; margin: 0 0 8px; font-family: var(--rc-titulos); font-size: 1.2em; color: var(--rc-oro-claro); } .rc-ventaja p { position: relative; margin: 0; color: var(--rc-texto2); line-height: 1.55; } /* Carrusel de clases */ .rc-carrusel { position: relative; border-radius: 22px; overflow: hidden; box-shadow: 0 30px 70px rgba(0, 0, 0, .6), 0 0 0 1px rgba(243, 197, 91, .35); aspect-ratio: 16 / 9; background: #000; } .rc-carrusel-pista { position: absolute; inset: 0; } .rc-slide { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 1s ease; } .rc-slide img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); transition: transform 7s ease-out; } .rc-slide.activo { opacity: 1; z-index: 1; } .rc-slide.activo img { transform: scale(1); } .rc-slide figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 60px 30px 46px; background: linear-gradient(180deg, transparent, rgba(8, 6, 20, .9)); transform: translateY(20px); opacity: 0; transition: transform .8s .3s, opacity .8s .3s; } .rc-slide.activo figcaption { transform: none; opacity: 1; } .rc-slide figcaption b { display: block; font-family: var(--rc-deco); font-size: 1.9em; color: var(--rc-oro); text-shadow: 0 3px 12px #000; } .rc-slide figcaption span { color: #fff; font-size: 1.05em; text-shadow: 0 2px 8px #000; } .rc-car-btn { position: absolute; top: 50%; z-index: 3; transform: translateY(-50%); width: 50px; height: 50px; border-radius: 50%; cursor: pointer; font-size: 2em; line-height: 1; color: var(--rc-oro-claro); background: rgba(14, 11, 31, .6); border: 1px solid rgba(243, 197, 91, .6); backdrop-filter: blur(4px); transition: background .2s, transform .2s; } .rc-car-btn:hover { background: rgba(243, 197, 91, .3); transform: translateY(-50%) scale(1.1); } .rc-car-btn.ant { left: 16px; } .rc-car-btn.sig { right: 16px; } .rc-car-puntos { position: absolute; bottom: 18px; right: 26px; z-index: 3; display: flex; justify-content: flex-end; gap: 8px; } .rc-car-puntos button { width: 10px; height: 10px; padding: 0; border-radius: 999px; border: 0; cursor: pointer; background: rgba(255, 255, 255, .4); transition: width .3s, background .3s; } .rc-car-puntos button.activo { width: 30px; background: var(--rc-oro); } /* Cartas de MVP */ .rc-mvps { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 22px; perspective: 1200px; } .rc-carta { aspect-ratio: 3 / 4.4; cursor: pointer; outline: none; transition-delay: var(--d, 0ms); } .rc-carta-in { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .7s cubic-bezier(.2, .8, .2, 1); } .rc-carta:hover .rc-carta-in, .rc-carta:focus .rc-carta-in, .rc-carta.girada .rc-carta-in { transform: rotateY(180deg); } .rc-carta-cara, .rc-carta-dorso { position: absolute; inset: 0; border-radius: 14px; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: 0 14px 34px rgba(0, 0, 0, .55), 0 0 0 2px rgba(243, 197, 91, .55); } .rc-carta-cara img { width: 100%; height: 100%; object-fit: cover; display: block; } .rc-brillo { position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .55) 45%, transparent 60%); transform: translateX(-100%); animation: rc-brillo-carta 5s infinite; animation-delay: var(--d, 0ms); } @keyframes rc-brillo-carta { 0%, 70% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } .rc-carta-dorso { transform: rotateY(180deg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; padding: 16px; background: radial-gradient(circle at 50% 30%, #4b357f, #1a1236 70%); } .rc-mvp-tag { font-family: var(--rc-deco); font-size: .85em; padding: 3px 12px; border-radius: 999px; color: #2a1a00; background: linear-gradient(180deg, #ffe39a, var(--rc-oro2)); } .rc-carta-dorso b { font-family: var(--rc-titulos); font-size: 1.25em; color: var(--rc-oro-claro); } .rc-carta-dorso small { color: var(--rc-texto2); font-size: .9em; } .rc-carta-dorso a { font-size: .82em; font-weight: 800; } .rc-mvps-mas { text-align: center; margin: 26px 0 0; font-weight: 800; text-wrap: balance; } .rc-solo-movil { display: none; } /* Mundo */ .rc-mundo { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: center; } .rc-mundo-mapa { border-radius: 22px; overflow: hidden; box-shadow: 0 30px 70px rgba(0, 0, 0, .6), 0 0 0 1px rgba(243, 197, 91, .4); } .rc-mundo-mapa img { display: block; width: 100%; animation: rc-mapa 26s ease-in-out infinite alternate; } @keyframes rc-mapa { from { transform: scale(1.02) translate(0, 0); } to { transform: scale(1.18) translate(-4%, -3%); } } .rc-mundo-txt p { color: var(--rc-texto2); font-size: 1.08em; line-height: 1.65; } .rc-ciudades { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 26px; } .rc-ciudades span { padding: 6px 13px; border-radius: 999px; font-size: .86em; font-weight: 700; color: var(--rc-oro-claro); background: rgba(243, 197, 91, .1); border: 1px solid rgba(243, 197, 91, .3); transition: background .2s, transform .2s; } .rc-ciudades span:hover { background: rgba(243, 197, 91, .3); transform: translateY(-3px); } /* Noticias */ .rc-noticias { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 22px; } .rc-noticia { padding: 26px 28px; } .rc-noticia h3 { margin: 0 0 6px; font-size: 1.3em; } .rc-noticia-fecha { font-size: .85em; color: #8a6a35; margin-bottom: 12px; } .rc-vacio { text-align: center; color: var(--rc-texto2); font-size: 1.1em; } /* Llamada final */ .rc-final { position: relative; margin: 90px 0 20px; border-radius: 26px; overflow: hidden; background-size: cover; background-position: center 60%; box-shadow: 0 30px 80px rgba(0, 0, 0, .6), 0 0 0 1px rgba(243, 197, 91, .45); } .rc-final-velo { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(14, 11, 31, .92), rgba(14, 11, 31, .55) 60%, rgba(14, 11, 31, .25)); } .rc-final-txt { position: relative; padding: 70px 50px; max-width: 640px; } .rc-final h2 { margin: 0 0 10px; font-family: var(--rc-deco); font-size: 2.3em; color: var(--rc-oro); text-shadow: 0 4px 16px #000; } .rc-final p { font-size: 1.12em; color: #fff; margin: 0 0 26px; } .rc-final .rc-hero-cta { justify-content: flex-start; animation: none; } /* ---------- Pie ---------- */ .rc-pie { position: relative; z-index: 3; margin-top: 40px; background: linear-gradient(180deg, rgba(8, 6, 20, 0), #07060f 30%); border-top: 1px solid rgba(243, 197, 91, .2); } .rc-pie-in { max-width: 1240px; margin: 0 auto; padding: 50px 18px 20px; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 30px; } .rc-pie-logo { width: 190px; filter: drop-shadow(0 4px 12px rgba(0, 0, 0, .6)); } .rc-pie-col p { color: var(--rc-texto2); line-height: 1.6; } .rc-pie-col h4 { margin: 4px 0 14px; font-family: var(--rc-titulos); color: var(--rc-oro); letter-spacing: .06em; } .rc-pie-col a { display: block; padding: 4px 0; color: var(--rc-texto2) !important; transition: color .2s, transform .2s; } .rc-pie-col a:hover { color: var(--rc-oro) !important; transform: translateX(4px); } .rc-pie-col label { display: block; color: var(--rc-texto2); font-size: .9em; margin-bottom: 10px; } .rc-pie-col select { display: block; width: 100%; margin-top: 4px; padding: 7px 10px; border-radius: 9px; border: 1px solid rgba(243, 197, 91, .35); background: #160f30; color: var(--rc-texto); } .rc-pie-legal { text-align: center; padding: 18px; font-size: .8em; color: #7d74a3; border-top: 1px solid rgba(255, 255, 255, .06); } .rc-arriba { position: fixed; right: 20px; bottom: 20px; z-index: 40; width: 46px; height: 46px; border-radius: 50%; cursor: pointer; color: #2a1a00; font-size: 1em; border: 1px solid #ffeab0; background: linear-gradient(180deg, #ffe39a, var(--rc-oro2)); box-shadow: 0 8px 20px rgba(0, 0, 0, .45); opacity: 0; transform: translateY(20px); pointer-events: none; transition: opacity .3s, transform .3s; } .rc-arriba.visible { opacity: 1; transform: none; pointer-events: auto; } /* Barra fija de móvil (crear cuenta / entrar): solo se ve en pantallas estrechas */ .rc-barra-movil { display: none; } /* ---------- Ventana "Próximamente" con Deviruchi ---------- */ .rc-prox { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 16px; } .rc-prox[hidden] { display: none; } .rc-prox-fondo { position: absolute; inset: 0; background: radial-gradient(circle at 50% 40%, rgba(60, 20, 70, .55), rgba(5, 3, 12, .88)); backdrop-filter: blur(5px); opacity: 0; transition: opacity .5s; } .rc-prox.visible .rc-prox-fondo { opacity: 1; } .rc-prox-caja { position: relative; width: min(560px, 100%); max-height: calc(100vh - 32px); overflow-x: hidden; overflow-y: auto; scrollbar-width: none; padding: 26px 30px 30px; text-align: center; border-radius: 26px; background: radial-gradient(ellipse at 50% 0%, #4a2a7e 0%, #1d1340 55%, #0d0920 100%); border: 2px solid rgba(243, 197, 91, .75); box-shadow: 0 30px 90px rgba(0, 0, 0, .7), 0 0 60px rgba(243, 197, 91, .25), inset 0 0 40px rgba(243, 197, 91, .1); transform: scale(.6) translateY(40px); opacity: 0; transition: transform .6s cubic-bezier(.2, 1.4, .3, 1), opacity .4s; } .rc-prox.visible .rc-prox-caja { transform: none; opacity: 1; } .rc-prox-caja::before { /* borde que gira de luz */ content: ''; position: absolute; inset: 0; border-radius: 24px; padding: 2px; pointer-events: none; background: conic-gradient(from var(--rc-ang, 0deg), transparent 0 70%, #fff3c4 80%, transparent 90%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: rc-girar-borde 4s linear infinite; } @property --rc-ang { syntax: ''; initial-value: 0deg; inherits: false; } @keyframes rc-girar-borde { to { --rc-ang: 360deg; } } .rc-prox-x { position: absolute; top: 12px; right: 14px; z-index: 3; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(243, 197, 91, .5); background: rgba(0, 0, 0, .35); color: var(--rc-oro-claro); cursor: pointer; font-size: 1em; transition: transform .2s, background .2s; } .rc-prox-x:hover { transform: rotate(90deg); background: rgba(243, 197, 91, .25); } .rc-prox-cielo { position: absolute; inset: 0; pointer-events: none; overflow: hidden; } .rc-prox-luna { position: absolute; top: 22px; left: 30px; width: 54px; height: 54px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff8dc, #f3c55b 60%, #c98a1c); box-shadow: 0 0 40px rgba(255, 220, 140, .7); animation: rc-flotar 7s ease-in-out infinite; } .rc-prox-cielo i { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #fff; box-shadow: 0 0 6px #fff; animation: rc-titilar 2s ease-in-out infinite alternate; } .rc-prox-cielo i:nth-of-type(1) { top: 12%; left: 78%; } .rc-prox-cielo i:nth-of-type(2) { top: 28%; left: 88%; animation-delay: .4s; } .rc-prox-cielo i:nth-of-type(3) { top: 8%; left: 55%; animation-delay: .8s; } .rc-prox-cielo i:nth-of-type(4) { top: 35%; left: 12%; animation-delay: 1.2s; } .rc-prox-cielo i:nth-of-type(5) { top: 22%; left: 30%; animation-delay: .2s; } .rc-prox-cielo i:nth-of-type(6) { top: 60%; left: 6%; animation-delay: 1s; } .rc-prox-cielo i:nth-of-type(7) { top: 70%; left: 93%; animation-delay: .6s; } .rc-prox-cielo i:nth-of-type(8) { top: 48%; left: 96%; animation-delay: 1.4s; } .rc-prox-cielo i:nth-of-type(9) { top: 85%; left: 15%; animation-delay: .3s; } .rc-prox-cielo i:nth-of-type(10) { top: 15%; left: 42%; animation-delay: 1.6s; } .rc-prox-escena { position: relative; height: 190px; z-index: 2; } .rc-prox-devi { position: absolute; left: 50%; top: 0; width: 117px; height: 195px; margin-left: -58px; cursor: pointer; animation: rc-devi-llega 1.6s .3s cubic-bezier(.3, 1.2, .4, 1) both; } /* Cuerpo: aleteo (fotogramas del juego) + vuelo suave */ .rc-prox-cuerpo { position: relative; z-index: 2; width: 117px; height: 195px; transform-origin: 50% 70%; animation: rc-devi-vuelo 3s ease-in-out infinite; } .rc-prox-sprite, .rc-prox-ataque { position: absolute; top: 0; left: 0; background-repeat: no-repeat; image-rendering: pixelated; image-rendering: crisp-edges; filter: drop-shadow(0 0 14px rgba(255, 120, 180, .6)) drop-shadow(0 0 3px rgba(255, 255, 255, .65)) brightness(1.35) saturate(1.2); } .rc-prox-sprite { width: 117px; height: 195px; background-size: 2340px 195px; animation: rc-devi-frames 2s steps(20) infinite, rc-devi-respira 2s ease-in-out infinite; } .rc-prox-ataque { display: none; left: -168px; top: -6px; width: 285px; height: 195px; background-size: 2850px 195px; } @keyframes rc-devi-frames { to { background-position: -2340px 0; } } @keyframes rc-devi-ataque-frames { to { background-position: -2850px 0; } } @keyframes rc-devi-respira { 50% { filter: drop-shadow(0 0 22px rgba(255, 90, 170, .85)) drop-shadow(0 0 4px rgba(255, 255, 255, .8)) brightness(1.5) saturate(1.3); } } @keyframes rc-devi-vuelo { 0%, 100% { transform: translateY(-6px) rotate(-3deg) scale(1.25); } 50% { transform: translateY(8px) rotate(3deg) scale(1.25); } } /* Ataque de fuego (cada pocos segundos) */ .rc-prox-devi.ataca .rc-prox-sprite { display: none; } .rc-prox-devi.ataca .rc-prox-ataque { display: block; animation: rc-devi-ataque-frames 1s steps(10) 1 forwards; } .rc-prox-devi.ataca .rc-prox-circulo { animation-duration: 1.2s, .3s; } .rc-prox-caja.tiembla { animation: rc-temblor .45s; } @keyframes rc-temblor { 0%, 100% { translate: 0 0; } 20% { translate: -6px 2px; } 40% { translate: 5px -3px; } 60% { translate: -4px 3px; } 80% { translate: 3px -1px; } } /* Salto y risa al tocarlo */ .rc-prox-devi.salta .rc-prox-cuerpo { animation: rc-devi-salto .9s cubic-bezier(.3, 1.4, .5, 1); } @keyframes rc-devi-salto { 0% { transform: scale(1.25); } 30% { transform: translateY(-50px) rotate(-180deg) scale(1.4); } 60% { transform: translateY(-20px) rotate(-360deg) scale(1.3); } 100% { transform: scale(1.25); } } /* Círculo mágico que gira detrás */ .rc-prox-circulo { position: absolute; left: 50%; top: 58%; width: 190px; height: 190px; margin: -95px 0 0 -95px; z-index: 0; animation: rc-girar 14s linear infinite, rc-pulso 2.5s ease-in-out infinite; } .rc-prox-circulo span { position: absolute; inset: 0; border-radius: 50%; } .rc-prox-circulo span:first-child { border: 2px dashed rgba(255, 130, 200, .75); box-shadow: 0 0 25px rgba(255, 80, 170, .55), inset 0 0 25px rgba(255, 80, 170, .45); background: radial-gradient(circle, rgba(255, 80, 170, .28), rgba(120, 40, 160, .12) 55%, transparent 70%); } .rc-prox-circulo span:last-child { inset: 22px; border: 2px solid rgba(243, 197, 91, .7); background: repeating-conic-gradient(from 0deg, rgba(243, 197, 91, .55) 0 3deg, transparent 3deg 30deg); -webkit-mask: radial-gradient(circle, transparent 58%, #000 60%, #000 70%, transparent 72%); mask: radial-gradient(circle, transparent 58%, #000 60%, #000 70%, transparent 72%); animation: rc-girar 6s linear infinite reverse; } @keyframes rc-girar { to { rotate: 360deg; } } @keyframes rc-pulso { 50% { scale: 1.12; opacity: .75; } } /* Chispas en órbita */ .rc-prox-orbita { position: absolute; left: 50%; top: 52%; width: 0; height: 0; z-index: 3; } .rc-prox-orbita b { position: absolute; width: 8px; height: 8px; margin: -4px; border-radius: 50%; background: #fff3c4; box-shadow: 0 0 10px #ffd36e, 0 0 20px #ff7ac8; animation: rc-orbita 3s linear infinite; } .rc-prox-orbita b:nth-child(2) { animation-delay: -1s; background: #ffc4ea; } .rc-prox-orbita b:nth-child(3) { animation-delay: -2s; width: 6px; height: 6px; } @keyframes rc-orbita { from { transform: rotate(0deg) translateX(88px) rotate(0deg) scaleY(1); } to { transform: rotate(360deg) translateX(88px) rotate(-360deg); } } /* Llamas/brasas que suben */ .rc-prox-llamas { position: absolute; left: 50%; bottom: 10px; width: 160px; margin-left: -80px; height: 0; z-index: 1; } .rc-prox-llamas i { position: absolute; bottom: 0; width: 7px; height: 7px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: radial-gradient(circle, #fff6c0, #ff9a3c 50%, #ff3d6e); box-shadow: 0 0 10px #ff7a3c; opacity: 0; animation: rc-brasa 2.6s ease-in infinite; } .rc-prox-llamas i:nth-child(1) { left: 10%; animation-delay: 0s; } .rc-prox-llamas i:nth-child(2) { left: 25%; animation-delay: .9s; } .rc-prox-llamas i:nth-child(3) { left: 40%; animation-delay: 1.7s; } .rc-prox-llamas i:nth-child(4) { left: 55%; animation-delay: .4s; } .rc-prox-llamas i:nth-child(5) { left: 70%; animation-delay: 1.3s; } .rc-prox-llamas i:nth-child(6) { left: 85%; animation-delay: 2.1s; } .rc-prox-llamas i:nth-child(7) { left: 33%; animation-delay: 2.4s; } .rc-prox-llamas i:nth-child(8) { left: 62%; animation-delay: 1.1s; } @keyframes rc-brasa { 0% { opacity: 0; translate: 0 0; scale: .6; } 15% { opacity: 1; } 100% { opacity: 0; translate: 12px -150px; scale: 1.3; } } .rc-prox-devi.ataca .rc-prox-llamas i { animation-duration: 1s; } @keyframes rc-devi-llega { 0% { transform: translate(-340px, -120px) scale(.4) rotate(-30deg); opacity: 0; } 60% { opacity: 1; } 100% { transform: none; opacity: 1; } } .rc-prox-sombra { width: 64px; height: 12px; margin: -26px auto 0; border-radius: 50%; background: radial-gradient(rgba(0, 0, 0, .55), transparent 70%); animation: rc-sombra 3s ease-in-out infinite; } @keyframes rc-sombra { 50% { transform: scale(.75); opacity: .6; } } .rc-prox-globo { position: absolute; left: 92px; top: 6px; z-index: 2; white-space: nowrap; padding: 8px 14px; border-radius: 16px; font-weight: 800; font-size: .9em; color: #3b1650; background: #fff; box-shadow: 0 6px 18px rgba(0, 0, 0, .4); animation: rc-globo-entra .4s 1.9s both; transition: transform .2s; } .rc-prox-globo.cambia { animation: rc-globo-pop .35s; } @keyframes rc-globo-entra { from { opacity: 0; transform: scale(.4) translateY(10px); } to { opacity: 1; transform: none; } } @keyframes rc-globo-pop { 0% { transform: scale(.6); } 60% { transform: scale(1.15); } 100% { transform: none; } } .rc-prox-globo::after { content: ''; position: absolute; left: 10px; bottom: -8px; border: 8px solid transparent; border-top-color: #fff; border-left-width: 0; } @keyframes rc-globo { 0% { opacity: 0; transform: scale(.4) translateY(10px); } 10%, 85% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-6px); } } .rc-prox-logo { position: relative; z-index: 2; width: min(380px, 88%); margin: -6px auto 0; display: block; filter: drop-shadow(0 8px 20px rgba(0, 0, 0, .7)); animation: rc-entrar .8s .6s both; } .rc-prox-titulo { position: relative; z-index: 2; margin: 8px 0 10px; font-family: var(--rc-deco); font-size: 2.6em; letter-spacing: .06em; line-height: 1.1; } .rc-prox-titulo span { display: inline-block; background: linear-gradient(180deg, #fffbe8 0%, #ffe39a 35%, var(--rc-oro) 60%, var(--rc-oro2) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 3px 0 #5a2d00) drop-shadow(0 0 12px rgba(243, 197, 91, .55)); animation: rc-letra-entra .5s calc(1s + var(--i) * .07s) both, rc-ola 2.4s calc(2s + var(--i) * .1s) ease-in-out infinite; } @keyframes rc-letra-entra { from { opacity: 0; transform: translateY(-40px) scale(1.6); } to { opacity: 1; transform: none; } } @keyframes rc-ola { 0%, 60%, 100% { transform: none; } 30% { transform: translateY(-10px); } } .rc-prox-texto { position: relative; z-index: 2; margin: 0 auto 22px; max-width: 420px; color: var(--rc-texto2); font-size: 1.02em; line-height: 1.55; animation: rc-entrar .8s 1.6s both; } .rc-prox-bot { position: relative; z-index: 2; display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; animation: rc-entrar .8s 1.8s both; } @media (max-height: 720px) { .rc-prox-escena { height: 160px; } .rc-prox-devi { transform-origin: 50% 0; scale: .85; } .rc-prox-logo { width: min(300px, 80%); } .rc-prox-titulo { font-size: 2.1em; margin: 4px 0 6px; } .rc-prox-texto { margin-bottom: 14px; font-size: .95em; } } @media (max-width: 520px) { .rc-prox-caja { padding: 20px 16px 22px; } .rc-prox-titulo { font-size: 1.75em; } .rc-prox-escena { height: 170px; } .rc-prox-globo { left: auto; right: 80px; top: -2px; } .rc-prox-globo::after { left: auto; right: 10px; border-left-width: 8px; border-right-width: 0; } } /* ---------- Aviso de cookies ---------- */ .rc-cookies { position: fixed; left: 50%; bottom: 20px; z-index: 60; width: min(860px, calc(100% - 32px)); display: flex; align-items: center; gap: 18px; padding: 18px 22px; border-radius: 18px; color: var(--rc-texto); background: linear-gradient(160deg, rgba(48, 34, 100, .97), rgba(16, 12, 36, .98)); border: 1px solid rgba(243, 197, 91, .55); box-shadow: 0 24px 60px rgba(0, 0, 0, .6), 0 0 30px rgba(243, 197, 91, .15); transform: translate(-50%, 140%); opacity: 0; transition: transform .45s cubic-bezier(.2, .8, .2, 1), opacity .45s; } .rc-cookies[hidden] { display: none; } .rc-cookies.visible { transform: translate(-50%, 0); opacity: 1; } .rc-cookies-ico { font-size: 2.4em; flex-shrink: 0; animation: rc-flotar 3s ease-in-out infinite; } .rc-cookies-txt { flex: 1; min-width: 0; } .rc-cookies-txt b { font-family: var(--rc-titulos); color: var(--rc-oro); font-size: 1.05em; } .rc-cookies-txt p { margin: 4px 0 0; font-size: .9em; line-height: 1.5; color: var(--rc-texto2); } .rc-cookies-mas { margin-top: 6px; } .rc-cookies-mas p { font-size: .84em; } .rc-cookies-mas code { color: var(--rc-oro-claro); background: rgba(0, 0, 0, .3); padding: 1px 5px; border-radius: 5px; } .rc-cookies-bot { display: flex; flex-direction: column; gap: 8px; flex-shrink: 0; align-items: stretch; } .rc-cookies-bot .rc-btn { justify-content: center; } .rc-cookies-info { background: none; border: 0; cursor: pointer; color: var(--rc-texto2); font-size: .82em; text-decoration: underline; padding: 2px; } .rc-cookies-info:hover { color: var(--rc-oro); } @media (max-width: 640px) { .rc-cookies { flex-direction: column; align-items: stretch; gap: 10px; bottom: 12px; padding: 16px; } .rc-cookies-ico { display: none; } .rc-cookies-bot { flex-direction: row; flex-wrap: wrap; } .rc-cookies-bot .rc-btn { flex: 1; } .rc-cookies-info { width: 100%; } } /* ---------- Aparición al cargar y al hacer scroll ---------- */ .rc-aparecer { animation: rc-entrar .6s .1s both; } .rc-hero-lema span { display: inline-block; padding: 8px 18px; border-radius: 14px; background: rgba(14, 11, 31, .45); backdrop-filter: blur(3px); } .rc-js .rc-revelar { opacity: 0; transform: translateY(40px); transition: opacity .8s ease, transform .8s cubic-bezier(.2, .8, .2, 1); transition-delay: var(--d, 0ms); } .rc-js .rc-revelar.visto { opacity: 1; transform: none; } .rc-js .rc-carta.rc-revelar { transform: translateY(40px) rotate(-3deg); } .rc-js .rc-carta.rc-revelar.visto { transform: none; } /* ---------- Pantallas medianas: barra más compacta ---------- */ @media (max-width: 1720px) { .rc-nav-in { gap: 10px; } .rc-menu-tit { padding: 10px 8px; font-size: .86em; gap: .3em; } .rc-nav-logo img { height: 40px; } } @media (max-width: 1320px) { .rc-ico { display: none; } .rc-btn-cuenta { max-width: 130px; } } /* ---------- Móvil ---------- */ @media (max-width: 1100px) { .rc-menu-tit { padding: 10px 8px; font-size: .85em; } .rc-ventajas { grid-template-columns: repeat(2, 1fr); } .rc-agenda { grid-template-columns: 1fr; } .rc-ag-prox { display: grid; grid-template-columns: auto 1fr; gap: 0 22px; align-items: center; text-align: left; } .rc-ag-prox > .rc-ag-etq { grid-column: 1 / -1; justify-self: start; margin-bottom: 6px; } .rc-ag-prox > .rc-ag-ico { grid-row: 2 / span 3; margin: 0; font-size: 3.4em; } .rc-ag-prox > .rc-ag-cuenta, .rc-ag-prox > .rc-ag-despues { grid-column: 1 / -1; } .rc-ag-prox > .rc-ag-cuenta { margin-top: 4px; text-align: center; } .rc-ag-despues { grid-template-columns: 1fr 1fr; } .rc-pie-in { grid-template-columns: 1fr 1fr; } } @media (max-width: 860px) { .rc-burger { display: block; } .rc-nav-acc { display: none; } .rc-menu { position: fixed; top: 56px; left: 0; right: 0; bottom: 0; flex-direction: column; justify-content: flex-start; gap: 0; padding: 10px 16px 30px; overflow: auto; background: rgba(10, 8, 24, .98); transform: translateX(100%); transition: transform .3s; } .rc-menu-abierto .rc-menu { transform: none; } .rc-menu-abierto .rc-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .rc-menu-abierto .rc-burger span:nth-child(2) { opacity: 0; } .rc-menu-abierto .rc-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .rc-menu-tit { width: 100%; font-size: 1em; padding: 14px 6px; border-bottom: 1px solid rgba(255, 255, 255, .06); border-radius: 0; } .rc-menu-desp { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; background: none; padding: 0 0 8px 26px; display: none; } .rc-menu-cat.abierta .rc-menu-desp { display: block; } .rc-menu-cat:hover .rc-menu-desp { transform: none; } .rc-nav { background: rgba(13, 10, 30, .95); padding: 4px 0; } .rc-nav-logo img { height: 40px; } /* En móvil el estado va en la propia barra, junto al logo, como una píldora */ .rc-nav-marca { display: flex; align-items: center; gap: 10px; min-width: 0; } .rc-nav-logo img { height: 34px; } .rc-estado, .rc-nav.solida .rc-estado { position: static; min-width: 0; padding: 5px 10px; border-radius: 999px; animation: none; } .rc-estado::before, .rc-estado::after, .rc-estado-srv { display: none; } .rc-estado-cab { gap: 6px; } .rc-estado-tit { font-size: .68em; letter-spacing: .08em; } .rc-estado-num { padding-left: 2px; font-size: .72em; } } @media (max-width: 420px) { /* Pantallas estrechas: "● 128 jugando" u "● OFFLINE" */ .rc-estado.on .rc-estado-tit, .rc-estado.off .rc-estado-num { display: none; } } @media (max-width: 860px) { .rc-hero-txt { padding-top: 90px; } .rc-rate { min-width: 46%; } .rc-scroll { display: none; } .rc-hero-sellos li { font-size: .82em; } .rc-ep { font-size: .7em; letter-spacing: .14em; padding: 7px 14px; } .rc-stats { grid-template-columns: repeat(2, 1fr); margin-top: -40px; } /* "¿Por qué?": tarjetas compactas con el icono a la izquierda */ .rc-ventajas { grid-template-columns: 1fr; gap: 12px; } .rc-ventaja { display: grid; grid-template-columns: 52px 1fr; gap: 2px 14px; align-items: center; padding: 16px; } .rc-ventaja-ico { grid-row: span 2; width: 52px; height: 52px; margin: 0; font-size: 1.5em; border-radius: 14px; } .rc-ventaja-ico img { width: 32px; height: 32px; } .rc-ventaja h3 { margin: 0; font-size: 1.05em; border: 0; padding: 0; } .rc-ventaja p { font-size: .92em; line-height: 1.45; } /* Carrusel: se pasa con el dedo, sin flechas encima del texto */ .rc-car-btn { display: none; } .rc-slide figcaption span { font-size: .92em; } .rc-car-puntos { right: 16px; bottom: 12px; gap: 6px; } .rc-car-puntos button { width: 8px; height: 8px; } .rc-car-puntos button.activo { width: 22px; } .rc-mundo { grid-template-columns: 1fr; } /* MVP: fila que se desliza con el dedo */ .rc-mvps { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 18px; margin: 0 -18px; padding: 8px 18px 16px; scrollbar-width: thin; } .rc-carta { flex: 0 0 min(44%, 210px); scroll-snap-align: start; } .rc-solo-movil { display: block; margin-bottom: 8px; font-weight: 700; color: var(--rc-texto2); } .rc-mvps-mas { margin-top: 12px; } /* 3 pasos en columna */ .rc-pasos { grid-template-columns: 1fr; gap: 34px; } .rc-pasos::before { top: 18px; bottom: 30px; left: 50%; right: auto; border-top: 0; border-left: 2px dashed rgba(243, 197, 91, .4); } /* Agenda: el próximo evento arriba y la semana en lista */ .rc-agenda { grid-template-columns: 1fr; } .rc-ag-prox { display: block; text-align: center; padding: 22px 16px; } .rc-ag-prox > .rc-ag-etq { margin-bottom: 0; } .rc-ag-prox > .rc-ag-ico { margin: 10px 0 2px; font-size: 2.6em; } .rc-ag-despues { grid-template-columns: 1fr; } .rc-ag-semana { grid-template-columns: 1fr; gap: 8px; } .rc-ag-dia { flex-direction: row; flex-wrap: wrap; align-items: center; padding: 10px 12px; } .rc-ag-dia h4 { width: 62px; margin: 0; text-align: left; } .rc-ag-dia h4 em { margin: 3px 0 0; } .rc-ag-ev { display: flex; align-items: baseline; gap: 6px; padding: 7px 11px; } .rc-ag-ev span { margin: 0; } .rc-ag-libre { margin: 0; } /* Registro y entrada */ .rc-reg { grid-template-columns: 1fr; } .rc-reg-lado { position: static; padding: 20px 18px; } .rc-form .rc-fila, .rc-reqs { grid-template-columns: 1fr; } /* Barra fija para crear cuenta / entrar */ .rc-barra-movil { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; display: flex; gap: 10px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px)); background: rgba(13, 10, 30, .95); backdrop-filter: blur(10px); border-top: 1px solid rgba(243, 197, 91, .3); box-shadow: 0 -8px 24px rgba(0, 0, 0, .45); transform: translateY(110%); transition: transform .35s; } .rc-barra-movil.visible { transform: none; } .rc-barra-movil .rc-btn { flex: 1; justify-content: center; padding: .75em 1em; font-size: .95em; } .rc-barra-movil .rc-btn-sec { flex: 0 0 auto; } body.rc-con-barra .rc-arriba { bottom: 86px; } body.rc-con-barra .rc-pie { padding-bottom: 72px; } .rc-titulo { font-size: 1.7em; } .rc-pergamino { padding: 22px 16px; overflow-x: auto; } .rc-banner { height: 220px; } .rc-banner h1 { font-size: 1.6em; } .rc-final-txt { padding: 44px 24px; } .rc-carrusel { aspect-ratio: 4 / 3; } .rc-slide figcaption { padding: 40px 18px 40px; } .rc-slide figcaption b { font-size: 1.4em; } .rc-pie-in { grid-template-columns: 1fr; } } /* ---------- Tráiler ---------- */ .rc-hero-trailer { display: flex; width: max-content; align-items: center; gap: 10px; margin: 16px auto 0; color: var(--rc-oro-claro); font-weight: 800; text-decoration: none; letter-spacing: .03em; animation: rc-entrar .9s 1.3s both; } .rc-hero-trailer span { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--rc-oro); font-size: .8em; padding-left: 3px; box-sizing: border-box; box-shadow: 0 0 14px rgba(243, 197, 91, .45); transition: transform .2s, background .2s; } .rc-hero-trailer:hover { color: #fff; } .rc-hero-trailer:hover span { transform: scale(1.12); background: rgba(243, 197, 91, .2); } .rc-trailer-sec { scroll-margin-top: 90px; } .rc-trailer { max-width: 980px; margin: 0 auto; } .rc-trailer-marco { position: relative; aspect-ratio: 16 / 9; border-radius: 22px; overflow: hidden; background: #000; border: 3px solid transparent; background: linear-gradient(#000, #000) padding-box, linear-gradient(135deg, #fff1c4, var(--rc-oro) 35%, #a8691c 65%, var(--rc-oro-claro)) border-box; box-shadow: 0 30px 80px rgba(0, 0, 0, .65), 0 0 60px rgba(243, 197, 91, .22); } .rc-trailer-marco video { display: block; width: 100%; height: 100%; object-fit: cover; background: #000; } .rc-trailer-marco::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at center, transparent 45%, rgba(8, 5, 20, .55)); transition: opacity .4s; } .rc-trailer-play { position: absolute; left: 50%; top: 79%; transform: translate(-50%, -50%); z-index: 2; display: flex; align-items: center; gap: 14px; padding: 10px 26px 10px 10px; cursor: pointer; border: 0; border-radius: 999px; background: rgba(20, 10, 40, .78); color: #fff; font: 800 1.15em var(--rc-cuerpo); letter-spacing: .04em; box-shadow: 0 0 0 2px rgba(243, 197, 91, .8), 0 12px 30px rgba(0, 0, 0, .55); backdrop-filter: blur(4px); transition: transform .25s, box-shadow .25s; } .rc-trailer-play:hover, .rc-trailer-play:focus-visible { transform: translate(-50%, -50%) scale(1.07); box-shadow: 0 0 0 3px var(--rc-oro-claro), 0 0 40px rgba(243, 197, 91, .55); outline: none; } .rc-trailer-ico { position: relative; width: 64px; height: 64px; border-radius: 50%; background: linear-gradient(180deg, var(--rc-oro-claro), var(--rc-oro) 55%, #c9821f); display: grid; place-items: center; } .rc-trailer-ico::before, .rc-trailer-ico::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--rc-oro); animation: rc-onda 2.2s ease-out infinite; } .rc-trailer-ico::after { animation-delay: 1.1s; } .rc-trailer-ico i { width: 0; height: 0; margin-left: 6px; border-style: solid; border-width: 13px 0 13px 21px; border-color: transparent transparent transparent #2a1440; } .rc-trailer-txt small { display: block; font-size: .7em; font-weight: 700; color: var(--rc-oro-claro); opacity: .85; } .rc-trailer-etq { position: absolute; top: 18px; right: 18px; z-index: 2; padding: 6px 16px; border-radius: 999px; background: linear-gradient(180deg, #ff7a5c, #d63a4c); color: #fff; font: 800 .85em var(--rc-cuerpo); letter-spacing: .08em; text-transform: uppercase; box-shadow: 0 6px 18px rgba(214, 58, 76, .5); animation: rc-latido 2.4s ease-in-out infinite; } .rc-trailer-marco.reproduciendo .rc-trailer-play, .rc-trailer-marco.reproduciendo .rc-trailer-etq { opacity: 0; pointer-events: none; transform: translate(-50%, -50%) scale(.8); transition: opacity .3s, transform .3s; } .rc-trailer-marco.reproduciendo .rc-trailer-etq { transform: none; } .rc-trailer-marco.reproduciendo::after { opacity: 0; } @media (max-width: 640px) { .rc-trailer-marco { border-radius: 14px; } .rc-trailer-play { padding: 4px; top: 82%; } .rc-trailer-txt { display: none; } .rc-trailer-ico { width: 44px; height: 44px; } .rc-trailer-ico i { border-width: 9px 0 9px 14px; margin-left: 4px; } .rc-trailer-etq { top: 10px; right: 10px; font-size: .7em; padding: 4px 10px; } } /* Respeta "reducir movimiento" del sistema */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } .rc-js .rc-revelar { opacity: 1; transform: none; } #rc-particulas { display: none; } } /* ---------- RetroClassic: Sistema de Referidos ---------- */ .rc-ref { display: flex; flex-direction: column; gap: 20px; } .rc-ref h2 { margin: 0; } .rc-ref h3 { margin: 0 0 12px; font-family: var(--rc-titulos); font-size: 1.12em; } .rc-ref-cab { display: flex; gap: 18px; align-items: center; } .rc-ref-cab p { margin: 6px 0 0; font-size: 1.05em; } .rc-ref-cab-ico { font-size: 3em; line-height: 1; filter: drop-shadow(0 4px 8px rgba(201, 138, 28, .35)); } .rc-ref-pasos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } .rc-ref-pasos li { position: relative; padding: 14px 14px 14px 52px; border-radius: 14px; background: rgba(255, 255, 255, .55); border: 1px solid rgba(201, 138, 28, .3); font-size: .92em; line-height: 1.35; } .rc-ref-pasos li b { display: block; font-family: var(--rc-titulos); margin-bottom: 3px; } .rc-ref-pasos li span { position: absolute; left: 12px; top: 13px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #2a1a00; background: linear-gradient(180deg, #ffe39a, var(--rc-oro) 50%, var(--rc-oro2)); } .rc-ref-rejilla { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .rc-ref-caja { padding: 18px 20px; border-radius: 16px; background: rgba(255, 255, 255, .6); border: 1px solid rgba(201, 138, 28, .35); box-shadow: 0 6px 18px rgba(59, 47, 30, .08); min-width: 0; } .rc-ref-centro { text-align: center; } .rc-ref-centro .rc-hero-cta { justify-content: center; } .rc-ref-codigo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .rc-ref-codigo code { font-family: Consolas, 'Courier New', monospace; font-size: 1.55em; font-weight: 800; letter-spacing: .12em; padding: 6px 14px; border-radius: 10px; background: #2a1d3f; color: var(--rc-oro-claro); border: 1px solid var(--rc-oro2); } .rc-ref-enlace { display: flex; gap: 8px; } .rc-ref-enlace input, .rc-ref-form input, .rc-ref-filtro input, .rc-ref-filtro select { flex: 1; min-width: 0; padding: 8px 11px; border-radius: 10px; border: 1px solid rgba(201, 138, 28, .5); background: #fffdf6; color: var(--rc-tinta); font: inherit; } .rc-ref-form { display: flex; gap: 8px; } .rc-ref-form input { text-transform: uppercase; letter-spacing: .08em; font-weight: 700; } .rc-ref-peq { font-size: .9em; opacity: .85; margin: 8px 0; } .rc-ref-ok { color: #1d7a45; font-weight: 700; } .rc-ref-aviso { margin: 10px 0 0; padding: 9px 12px; border-radius: 10px; color: #6b4a10; background: #fff4d4; border: 1px solid #f0d58f; font-size: .92em; } .rc-ref-cifras { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .rc-ref-cifras li { padding: 8px 10px; border-radius: 10px; background: rgba(241, 230, 200, .7); font-size: .82em; line-height: 1.2; } .rc-ref-cifras b { display: block; font-size: 1.6em; font-family: var(--rc-titulos); color: var(--rc-oro2); } .rc-ref-cifras li.rc-ref-destaca { background: #fff0c2; box-shadow: inset 0 0 0 2px var(--rc-oro); } .rc-ref-tabla-env { overflow-x: auto; } .rc-ref-tabla { width: 100%; border-collapse: collapse; font-size: .93em; } .rc-ref-tabla th { text-align: left; font-family: var(--rc-titulos); font-size: .85em; padding: 8px 10px; border-bottom: 2px solid rgba(201, 138, 28, .45); white-space: nowrap; } .rc-ref-tabla td { padding: 8px 10px; border-bottom: 1px solid rgba(201, 138, 28, .2); vertical-align: middle; } .rc-ref-tabla tr.rc-ref-yo td { background: #fff0c2; font-weight: 700; } .rc-ref-rank td:first-child { width: 48px; text-align: center; font-size: 1.15em; } .rc-ref-est { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: .85em; background: rgba(59, 47, 30, .08); white-space: nowrap; } .rc-ref-est-ok { background: #dcf5e6; color: #1d7a45; } .rc-ref-est-cobrar { background: #fff0c2; color: #7a5200; font-weight: 700; } .rc-ref-est-rev { background: #e7e3ff; color: #47388f; } .rc-ref-est-no { background: #ffe1e5; color: #8c1d2b; } .rc-ref-normas { font-size: .82em; opacity: .75; margin: 0; } .rc-ref-filtro { display: flex; gap: 8px; flex-wrap: wrap; max-width: 640px; } .rc-ref-admin small { opacity: .75; } .rc-ref-acc form { display: flex; gap: 6px; flex-wrap: wrap; } @media (max-width: 900px) { .rc-ref-pasos { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rc-ref-rejilla { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 520px) { .rc-ref-pasos { grid-template-columns: minmax(0, 1fr); } .rc-ref-cab { flex-direction: column; text-align: center; } .rc-ref-enlace, .rc-ref-form { flex-direction: column; } } /* ---------- RetroClassic: Referidos, opción 1 (portada "Invita y gana Cash") ---------- */ .rc-refp { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 28px; align-items: stretch; padding: 34px 36px; border-radius: 24px; background: radial-gradient(ellipse at 0% 0%, rgba(243, 197, 91, .2), transparent 55%), linear-gradient(135deg, rgba(74, 44, 128, .88), rgba(20, 15, 44, .96)); border: 1px solid rgba(243, 197, 91, .45); box-shadow: var(--rc-sombra), inset 0 0 0 1px rgba(255, 255, 255, .04); } .rc-refp-brillo { position: absolute; top: -50%; right: -15%; width: 65%; height: 200%; background: radial-gradient(circle, rgba(243, 197, 91, .16), transparent 60%); pointer-events: none; animation: rc-refp-brillo 7s ease-in-out infinite alternate; } @keyframes rc-refp-brillo { from { transform: translateX(0); } to { transform: translateX(-14%); } } .rc-refp-info, .rc-refp-top { position: relative; z-index: 1; min-width: 0; } .rc-refp-etq { display: inline-block; padding: .32em .95em; border-radius: 999px; font-size: .78em; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; color: #2a1a00; background: linear-gradient(180deg, #ffe39a, var(--rc-oro)); box-shadow: 0 0 18px rgba(243, 197, 91, .45); } .rc-refp h3 { margin: 14px 0 8px; padding: 0; border: 0; font-family: var(--rc-titulos); font-weight: 800; font-size: 1.75em; line-height: 1.2; color: #fff; } .rc-refp h3 em { font-style: normal; color: var(--rc-oro); text-shadow: 0 0 18px rgba(243, 197, 91, .4); } .rc-refp-info > p { margin: 0 0 18px; color: var(--rc-texto2); font-size: 1.05em; line-height: 1.55; } .rc-refp-info > p b { color: var(--rc-oro-claro); } .rc-refp-pasos { list-style: none; margin: 0 0 22px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } .rc-refp-pasos li { display: flex; align-items: center; gap: 9px; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(243, 197, 91, .22); font-weight: 700; font-size: .9em; line-height: 1.25; color: var(--rc-texto); } .rc-refp-pasos span { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-family: var(--rc-titulos); font-weight: 900; color: #2a1a00; background: linear-gradient(180deg, #ffe39a, var(--rc-oro) 50%, var(--rc-oro2)); } .rc-refp .rc-hero-cta { justify-content: flex-start; animation: none; } .rc-refp-mio { padding: 16px 18px; border-radius: 16px; background: rgba(10, 7, 24, .45); border: 1px dashed rgba(243, 197, 91, .5); } .rc-refp-cod { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .rc-refp-cod small { color: var(--rc-texto2); font-weight: 800; text-transform: uppercase; letter-spacing: .1em; font-size: .75em; } .rc-refp-cod code { font-family: Consolas, 'Courier New', monospace; font-size: 1.6em; font-weight: 800; letter-spacing: .14em; padding: 4px 14px; border-radius: 10px; color: var(--rc-oro-claro); background: #120c28; border: 1px solid var(--rc-oro2); text-shadow: 0 0 12px rgba(243, 197, 91, .45); } .rc-refp-yo { margin: 10px 0 14px; color: var(--rc-texto2); } .rc-refp-yo b { color: var(--rc-oro-claro); } .rc-refp-cobrar { color: #bff7d4; font-weight: 800; } .rc-refp-top { display: flex; flex-direction: column; padding: 20px 22px; border-radius: 18px; background: rgba(10, 7, 24, .55); border: 1px solid rgba(243, 197, 91, .3); } .rc-refp-top h4 { margin: 0 0 12px; font-family: var(--rc-titulos); font-size: 1.15em; color: var(--rc-oro); text-align: center; } .rc-refp-top ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .rc-refp-top li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .07); } .rc-refp-top li.rc-refp-p1 { background: linear-gradient(90deg, rgba(243, 197, 91, .24), rgba(243, 197, 91, .04)); border-color: rgba(243, 197, 91, .5); } .rc-refp-med { font-size: 1.5em; line-height: 1; } .rc-refp-nom { flex: 1; min-width: 0; font-weight: 800; color: var(--rc-texto); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rc-refp-num { color: var(--rc-texto2); font-size: .9em; white-space: nowrap; } .rc-refp-num b { color: var(--rc-oro); font-size: 1.2em; } .rc-refp-vacio { margin: 0; flex: 1; display: grid; place-items: center; text-align: center; color: var(--rc-texto2); } .rc-refp-vertodo { margin-top: auto; padding-top: 14px; text-align: center; font-weight: 800; } /* ---------- Referidos, opción 2 (botones para compartir) ---------- */ .rc-ref-compartir { margin-top: 14px; padding-top: 12px; border-top: 1px dashed rgba(201, 138, 28, .35); } .rc-ref-compartir .rc-ref-peq { margin-top: 0; } .rc-ref-redes { display: flex; flex-wrap: wrap; gap: 8px; } .rc-ref-redes .rc-ref-red { display: inline-flex; align-items: center; gap: 6px; padding: 8px 15px; border: 0; border-radius: 999px; font: inherit; font-weight: 800; font-size: .9em; color: #fff !important; cursor: pointer; box-shadow: 0 3px 10px rgba(59, 47, 30, .18); transition: transform .15s, filter .15s; } .rc-ref-redes .rc-ref-red:hover { transform: translateY(-2px); filter: brightness(1.1); } .rc-ref-redes .rc-ref-red[hidden] { display: none; } .rc-ref-wa { background: #25d366; } .rc-ref-tg { background: #229ed9; } .rc-ref-fb { background: #1877f2; } .rc-ref-x { background: #14171a; } .rc-ref-dc { background: #5865f2; } .rc-ref-nativo { background: var(--rc-violeta); } /* ---------- Referidos, opción 3 (aviso en la barra "Conectado como...") ---------- */ .rc-portada .rc-usuario-ref { margin-bottom: 86px; } /* los recuadros de la portada suben 70 px: que no tapen el aviso */ .rc-ref-barra { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 5px 6px 5px 14px; border-radius: 999px; background: linear-gradient(90deg, rgba(243, 197, 91, .18), rgba(243, 197, 91, .04)); border: 1px solid rgba(243, 197, 91, .45); font-size: .92em; } body.rc a.rc-ref-barra-txt { font-weight: 800; color: var(--rc-oro); } .rc-ref-barra-cod { color: var(--rc-texto2); } .rc-ref-barra-cod code { font-family: Consolas, 'Courier New', monospace; font-weight: 800; letter-spacing: .1em; color: var(--rc-oro-claro); background: rgba(10, 7, 24, .6); padding: 2px 8px; border-radius: 7px; border: 1px solid rgba(243, 197, 91, .35); } .rc-ref-barra-copiar { font: inherit; font-size: .85em; font-weight: 800; cursor: pointer; padding: 3px 11px; border: 0; border-radius: 999px; color: #2a1a00; background: linear-gradient(180deg, #ffe39a, var(--rc-oro)); } .rc-ref-barra-copiar:hover { filter: brightness(1.08); } body.rc a.rc-ref-barra-cobrar { font-weight: 800; color: #bff7d4; padding: 3px 12px; border-radius: 999px; background: rgba(78, 224, 138, .14); border: 1px solid rgba(78, 224, 138, .55); animation: rc-ref-pulso 2.2s ease-in-out infinite; } body.rc a.rc-ref-barra-cobrar:hover { color: #fff; } @keyframes rc-ref-pulso { 0%, 100% { box-shadow: 0 0 0 0 rgba(78, 224, 138, .4); } 50% { box-shadow: 0 0 0 7px rgba(78, 224, 138, 0); } } /* ---------- Referidos, opción 4 ("¡Nuevo!" en el menú + pestaña del Salón de la Fama) ---------- */ .rc-nuevo { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; font-style: normal; font-size: .72em; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; vertical-align: 1px; color: #2a1a00; background: linear-gradient(180deg, #ffe39a, var(--rc-oro)); box-shadow: 0 0 10px rgba(243, 197, 91, .5); } .rc-nuevo-punto { width: 8px; height: 8px; border-radius: 50%; margin-left: 1px; background: var(--rc-rojo); box-shadow: 0 0 8px var(--rc-rojo); animation: rc-ref-latir 1.6s ease-in-out infinite; } @keyframes rc-ref-latir { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.35); opacity: .75; } } .rk-ref-cta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 26px; padding: 18px 22px; border-radius: 18px; background: linear-gradient(90deg, rgba(243, 197, 91, .16), rgba(20, 14, 44, .6)); border: 1px solid rgba(243, 197, 91, .4); } .rk-ref-cta-ico { font-size: 2.2em; line-height: 1; } .rk-ref-cta p { margin: 0; flex: 1 1 320px; color: var(--rc-texto); } .rk-ref-cta strong { color: var(--rc-oro); } @media (max-width: 900px) { .rc-refp { grid-template-columns: minmax(0, 1fr); padding: 26px 22px; } .rc-refp-pasos { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 520px) { .rc-refp { padding: 22px 16px; border-radius: 18px; } .rc-refp h3 { font-size: 1.4em; } .rc-refp-pasos { grid-template-columns: minmax(0, 1fr); } .rc-refp-cod code { font-size: 1.3em; } .rc-ref-barra { border-radius: 14px; } } @media (prefers-reduced-motion: reduce) { .rc-refp-brillo, .rc-nuevo-punto, body.rc a.rc-ref-barra-cobrar { animation: none; } } /* ---------- Referidos, opción 5 (aviso en la ventana "Próximamente") ---------- */ .rc-prox-ref { position: relative; z-index: 2; display: flex; align-items: center; gap: 12px; margin: 18px auto 0; max-width: 520px; padding: 10px 16px; border-radius: 14px; text-align: left; background: linear-gradient(90deg, rgba(243, 197, 91, .2), rgba(243, 197, 91, .05)); border: 1px dashed rgba(243, 197, 91, .6); transition: transform .2s, background .2s; } .rc-prox-ref:hover { transform: translateY(-2px); background: linear-gradient(90deg, rgba(243, 197, 91, .3), rgba(243, 197, 91, .08)); } .rc-prox-ref-ico { font-size: 1.9em; line-height: 1; animation: rc-ref-latir 2s ease-in-out infinite; } .rc-prox-ref b { display: block; color: var(--rc-oro); font-family: var(--rc-titulos); } .rc-prox-ref small { display: block; color: var(--rc-texto2); font-size: .85em; margin-top: 2px; } /* Ventana Próximamente: bloque de Discord */ .rc-prox-dc { position: relative; z-index: 2; margin: 16px auto 0; max-width: 520px; padding: 11px 14px 10px; border-radius: 14px; text-align: left; background: linear-gradient(115deg, rgba(88, 101, 242, .42), rgba(88, 101, 242, .13) 62%, rgba(243, 197, 91, .12)); border: 1px solid rgba(138, 150, 255, .65); transition: box-shadow .25s, border-color .25s, transform .25s; animation: rc-entrar .8s 1.9s both; } .rc-prox-dc:hover, .rc-prox-dc:focus-within { border-color: #aab3ff; box-shadow: 0 0 26px rgba(88, 101, 242, .6); transform: translateY(-2px); } .rc-prox-dc-cab { display: flex; align-items: center; gap: 12px; } .rc-prox-dc-portal { position: relative; flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: #fff; background: #5865f2; box-shadow: 0 0 14px rgba(88, 101, 242, .85); } .rc-prox-dc-portal::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px dashed rgba(255, 233, 168, .75); animation: rc-dc-giro 7s linear infinite; } .rc-prox-dc:hover .rc-prox-dc-portal svg { animation: rc-dc-saludo .55s ease-in-out infinite alternate; } .rc-prox-dc-tit { flex: 1; min-width: 0; } .rc-prox-dc-tit b { display: block; color: #fff; font-family: var(--rc-titulos); font-size: 1.02em; line-height: 1.2; } .rc-prox-dc-tit small { display: block; margin-top: 2px; color: #d5d3f5; font-size: .85em; } body.rc a.rc-prox-dc-btn { position: relative; flex: none; overflow: hidden; padding: 9px 20px; border-radius: 999px; color: #fff; background: #5865f2; font-family: var(--rc-titulos); font-weight: 800; box-shadow: 0 3px 12px rgba(0, 0, 0, .4); transition: transform .15s, background .15s; } body.rc a.rc-prox-dc-btn:hover, body.rc a.rc-prox-dc-btn:focus-visible { color: #fff; background: #6d78f6; transform: scale(1.06); } .rc-prox-dc-btn::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; transform: skewX(-20deg); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent); animation: rc-destello 3.2s ease-in-out infinite; } .rc-prox-dc-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; } .rc-prox-dc-tabs button { flex: 1 1 auto; padding: 4px 8px; border-radius: 999px; border: 1px solid rgba(190, 196, 255, .35); background: rgba(10, 6, 30, .35); color: #dcdaf6; font: 700 .82em var(--rc-cuerpo); cursor: pointer; transition: background .2s, color .2s, border-color .2s, transform .15s; } .rc-prox-dc-tabs button:hover { transform: translateY(-1px); border-color: var(--rc-oro); } .rc-prox-dc-tabs button[aria-selected="true"] { color: #2a1a00; background: linear-gradient(180deg, #ffe39a, var(--rc-oro)); border-color: var(--rc-oro); } .rc-prox-dc-info { min-height: 1.4em; margin: 8px 2px 0; color: #ece6ff; font-size: .86em; line-height: 1.35; text-align: center; } .rc-prox-dc-info.cambia { animation: rc-dc-info .3s ease-out; } .rc-prox-dc-chispa { position: fixed; z-index: 80; width: 8px; height: 8px; border-radius: 2px; pointer-events: none; animation: rc-dc-chispa .85s ease-out forwards; } @keyframes rc-dc-giro { to { transform: rotate(360deg); } } @keyframes rc-dc-saludo { from { transform: rotate(-8deg); } to { transform: rotate(8deg) scale(1.08); } } @keyframes rc-dc-info { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } } @keyframes rc-dc-chispa { from { opacity: 1; transform: translate(0, 0) rotate(0); } to { opacity: 0; transform: translate(var(--x), var(--y)) rotate(320deg); } } @media (max-width: 480px) { .rc-prox-dc-cab { flex-wrap: wrap; } .rc-prox-dc-tit { flex-basis: calc(100% - 60px); } body.rc a.rc-prox-dc-btn { flex: 1 1 100%; text-align: center; } .rc-prox-dc-tabs button { flex: 1 1 40%; } } @media (prefers-reduced-motion: reduce) { .rc-prox-dc-portal::after, .rc-prox-dc-btn::after, .rc-prox-dc:hover .rc-prox-dc-portal svg { animation: none; } } /* Placa de Discord colgada de la barra superior */ body.rc a.rc-dc-cartel { position: absolute; top: calc(100% + 16px); right: max(18px, calc((100vw - 1680px) / 2 + 18px)); width: 360px; height: 118px; color: #fff; transform-origin: 50% -16px; animation: rc-colgar 1.4s ease-out both, rc-dc-vaiven 5s 1.4s ease-in-out infinite; transition: width .35s, height .35s, top .35s; } .rc-dc-cartel::before, .rc-dc-cartel::after { content: ''; position: absolute; bottom: 100%; width: 2px; height: 17px; background: repeating-linear-gradient(180deg, var(--rc-oro) 0 3px, transparent 3px 5px); opacity: .85; transition: height .35s; } .rc-dc-cartel::before { left: 30px; } .rc-dc-cartel::after { right: 30px; } .rc-dc-cartel:hover, .rc-dc-cartel:focus-visible { animation-play-state: paused; } .rc-dc-in { position: relative; display: block; height: 100%; box-sizing: border-box; overflow: hidden; border-radius: 14px; background: #4752c4; border: 2px solid rgba(243, 197, 91, .9); box-shadow: 0 12px 30px rgba(0, 0, 0, .55), 0 0 22px rgba(88, 101, 242, .65); transition: transform .2s, box-shadow .2s; } .rc-dc-in::after { content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 34%; transform: skewX(-20deg); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .4), transparent); animation: rc-destello 3.6s ease-in-out infinite; pointer-events: none; } .rc-dc-cartel:hover .rc-dc-in, .rc-dc-cartel:focus-visible .rc-dc-in { transform: translateY(3px) scale(1.04); box-shadow: 0 14px 34px rgba(0, 0, 0, .6), 0 0 38px rgba(120, 132, 255, 1); } .rc-dc-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .rc-dc-txt { position: absolute; top: 0; right: 12px; bottom: 0; width: 196px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; text-align: center; line-height: 1.15; } .rc-dc-kicker { color: var(--rc-oro-claro); font-size: .76em; font-weight: 800; text-shadow: 0 1px 3px rgba(0, 0, 0, .7); } .rc-dc-tit { display: flex; align-items: center; justify-content: center; gap: 6px; font-family: var(--rc-titulos); font-size: 1.04em; font-weight: 800; white-space: nowrap; text-shadow: 0 2px 5px rgba(0, 0, 0, .75); } .rc-dc-tit svg { flex: none; } .rc-dc-cartel:hover .rc-dc-tit svg { animation: rc-dc-saludo .5s ease-in-out infinite alternate; } .rc-dc-cta { padding: 4px 14px; border-radius: 999px; color: #2a1a00; background: linear-gradient(180deg, #ffe39a, var(--rc-oro)); font-family: var(--rc-titulos); font-size: .78em; font-weight: 800; box-shadow: 0 2px 8px rgba(0, 0, 0, .45); animation: rc-dc-pulso 1.6s ease-in-out infinite; } .rc-dc-aviso { position: absolute; top: -9px; right: -8px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; color: #fff; background: #ed4245; border: 2px solid #171033; font-weight: 900; font-size: .85em; line-height: 1; animation: rc-dc-pulso 1.2s ease-in-out infinite; } @keyframes rc-dc-vaiven { 0%, 100% { transform: rotate(-1.1deg); } 50% { transform: rotate(1.1deg); } } @keyframes rc-dc-pulso { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.09); } } @keyframes rc-dc-saludo { from { transform: rotate(-9deg); } to { transform: rotate(9deg) scale(1.1); } } /* Al bajar la página se queda pequeña */ body.rc .rc-nav.solida a.rc-dc-cartel { top: calc(100% + 10px); width: 214px; height: 42px; } .rc-nav.solida .rc-dc-cartel::before, .rc-nav.solida .rc-dc-cartel::after { height: 11px; } .rc-nav.solida .rc-dc-img, .rc-nav.solida .rc-dc-kicker, .rc-nav.solida .rc-dc-cta { display: none; } .rc-nav.solida .rc-dc-txt { left: 0; right: 0; width: auto; } @media (max-width: 1180px) { body.rc a.rc-dc-cartel { width: 290px; height: 102px; } .rc-dc-txt { width: 164px; right: 8px; } .rc-dc-tit { font-size: .9em; gap: 4px; } .rc-dc-tit svg { width: 18px; height: 18px; } .rc-dc-kicker { font-size: .7em; } } /* Móvil: franja bajo la barra, que desaparece al bajar */ @media (max-width: 860px) { body.rc a.rc-dc-cartel { top: 100%; left: 0; right: 0; width: auto; height: 42px; animation: none; transition: opacity .25s; } .rc-dc-cartel::before, .rc-dc-cartel::after, .rc-dc-img, .rc-dc-kicker, .rc-dc-aviso { display: none; } .rc-dc-in { border-width: 0 0 2px; border-radius: 0; background: linear-gradient(90deg, #3e42b4, #5865f2); } .rc-dc-txt { left: 0; right: 0; width: auto; flex-direction: row; gap: 12px; } .rc-dc-cartel:hover .rc-dc-in { transform: none; } body.rc .rc-nav.solida a.rc-dc-cartel { top: 100%; width: auto; height: 42px; opacity: 0; visibility: hidden; pointer-events: none; } .rc-nav.solida .rc-dc-cta { display: inline-block; } .rc-hero-txt { padding-top: 136px; } } @media (prefers-reduced-motion: reduce) { body.rc a.rc-dc-cartel, .rc-dc-in::after, .rc-dc-cta, .rc-dc-aviso { animation: none; } }