/* /src/styles/accesibilidad.css */
.shop-btn.sin-saldo {
opacity: .8;
color: #9aa4bf;
border-color: #48506b;
}
.empty-state-icon {
opacity: 1;
color: var(--text-secondary, #8892b0);
}
.footer-creditos {
color: #b8c0d4;
}
.fav-btn,
.favorite-btn,
.back-to-top {
min-width: 44px;
min-height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.filter-pill,
.follow-btn,
.tab-btn,
.auth-tab-btn,
.shop-btn,
.pixel-btn,
.carousel-see-all,
.profile-social a,
.navbar-search-input,
.skip-link,
.skip-to-content {
min-height: 44px;
}
.follow-btn,
.filter-pill,
.carousel-see-all {
padding-inline: 14px;
}
.navbar-logo,
.navbar-coins,
.breadcrumb a {
position: relative;
}
.navbar-logo::after,
.navbar-coins::after,
.breadcrumb a::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
height: 100%;
min-width: 44px;
min-height: 44px;
z-index: 0;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible {
outline: 3px solid var(--accent-games, #00f5d4);
outline-offset: 2px;
border-radius: 2px;
}
@media (prefers-reduced-motion: reduce) {
.fav-btn,
.favorite-btn,
.back-to-top,
.filter-pill,
.follow-btn {
transition: none !important;
}
}
/* /src/styles/zonas.css */
@property --zone-primary {
syntax: '<color>';
inherits: true;
initial-value: #26d0d8;
}
@property --zone-secondary {
syntax: '<color>';
inherits: true;
initial-value: #129aa8;
}
@property --zone-pr { syntax: '<number>'; inherits: true; initial-value: 38; }
@property --zone-pg { syntax: '<number>'; inherits: true; initial-value: 208; }
@property --zone-pb { syntax: '<number>'; inherits: true; initial-value: 216; }
@property --zone-sr { syntax: '<number>'; inherits: true; initial-value: 18; }
@property --zone-sg { syntax: '<number>'; inherits: true; initial-value: 154; }
@property --zone-sb { syntax: '<number>'; inherits: true; initial-value: 168; }
@property --zone-bg-base {
syntax: '<color>';
inherits: true;
initial-value: #05080d;
}
@property --zone-drift-x { syntax: '<percentage>'; inherits: true; initial-value: 12%; }
@property --zone-drift-y { syntax: '<percentage>'; inherits: true; initial-value: -6%; }
:root {
--zone-primary: #26d0d8;
--zone-primary-rgb: 38, 208, 216;
--zone-secondary: #129aa8;
--zone-secondary-rgb: 18, 154, 168;
--zone-glow-rgb: 38, 208, 216;
--zone-intensity: .8;
--zone-pr: 38;  --zone-pg: 208; --zone-pb: 216;
--zone-sr: 18;  --zone-sg: 154; --zone-sb: 168;
--zone-bg-base: #05080d;
--zone-transition: 320ms ease;
--zone-bg-transition: 560ms ease;
}
@media (prefers-reduced-motion: reduce) {
:root {
--zone-transition: 0ms;
--zone-bg-transition: 0ms;
}
}
body[data-zone="novedades"],
body[data-zone="gratis"],
body[data-zone="social"] {
--zone-primary: #d94a9d;
--zone-primary-rgb: 217, 74, 157;
--zone-secondary: #a93b84;
--zone-secondary-rgb: 169, 59, 132;
--zone-glow-rgb: 217, 74, 157;
--zone-intensity: .8;
--zone-pr: 217; --zone-pg: 74;  --zone-pb: 157;
--zone-sr: 169; --zone-sg: 59;  --zone-sb: 132;
--zone-bg-base: #0a0611;
}
body[data-zone="noticias"] {
--zone-primary: #d94a9d;
--zone-primary-rgb: 217, 74, 157;
--zone-secondary: #a93b84;
--zone-secondary-rgb: 169, 59, 132;
--zone-glow-rgb: 217, 74, 157;
--zone-intensity: .8;
--zone-pr: 217; --zone-pg: 74;  --zone-pb: 157;
--zone-sr: 169; --zone-sg: 59;  --zone-sb: 132;
--zone-bg-base: #0a0e18;
background-image: none;
}
body[data-zone="pase"],
body[data-zone="tienda"],
body[data-zone="perfil"] {
--zone-primary: #d6a63a;
--zone-primary-rgb: 214, 166, 58;
--zone-secondary: #9c7822;
--zone-secondary-rgb: 156, 120, 34;
--zone-glow-rgb: 214, 166, 58;
--zone-intensity: .8;
--zone-pr: 214; --zone-pg: 166; --zone-pb: 58;
--zone-sr: 156; --zone-sg: 120; --zone-sb: 34;
--zone-bg-base: #0d0a05;
}
.navbar-link,
.navbar-link::after,
.nav-grupo-boton,
.nav-sep {
transition:
color var(--zone-transition),
background var(--zone-transition),
border-color var(--zone-transition),
box-shadow var(--zone-transition),
width var(--transition-normal);
}
.navbar-link.active,
.nav-grupo-boton.active {
color: var(--zone-primary);
}
.navbar-link::after {
background: var(--zone-primary);
box-shadow: 0 0 5px rgba(var(--zone-glow-rgb), .5);
}
.navbar::before {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: -1px;
height: 2px;
opacity: .45;
background: linear-gradient(
90deg,
#26d0d8 0%,
#26d0d8 32%,
#d94a9d 32%,
#d94a9d 66%,
#d6a63a 66%,
#d6a63a 100%
);
filter: blur(.4px);
pointer-events: none;
}
body {
background-color: var(--zone-bg-base);
background-image:
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/></svg>"),
radial-gradient(1.5px 1.5px at 8% 22%, rgba(var(--zone-pr), var(--zone-pg), var(--zone-pb), .35), transparent 60%),
radial-gradient(1.5px 1.5px at 42% 68%, rgba(var(--zone-pr), var(--zone-pg), var(--zone-pb), .28), transparent 60%),
radial-gradient(1.5px 1.5px at 78% 34%, rgba(var(--zone-pr), var(--zone-pg), var(--zone-pb), .3), transparent 60%),
radial-gradient(1.5px 1.5px at 63% 88%, rgba(var(--zone-pr), var(--zone-pg), var(--zone-pb), .22), transparent 60%),
linear-gradient(rgba(var(--zone-pr), var(--zone-pg), var(--zone-pb), .028) 1px, transparent 1px),
linear-gradient(90deg, rgba(var(--zone-pr), var(--zone-pg), var(--zone-pb), .028) 1px, transparent 1px),
radial-gradient(1200px 800px at 92% 12%, rgba(var(--zone-sr), var(--zone-sg), var(--zone-sb), .065), transparent 65%),
radial-gradient(1300px 850px at var(--zone-drift-x) var(--zone-drift-y), rgba(var(--zone-pr), var(--zone-pg), var(--zone-pb), .1), transparent 70%),
linear-gradient(180deg, rgba(var(--zone-pr), var(--zone-pg), var(--zone-pb), .06) 0%, var(--zone-bg-base) 60%);
background-repeat: repeat, no-repeat, no-repeat, no-repeat, no-repeat, repeat, repeat, no-repeat, no-repeat, no-repeat;
background-size: 100px 100px, 600px 600px, 600px 600px, 600px 600px, 600px 600px, 34px 34px, 34px 34px, auto, auto, auto;
background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0;
background-attachment: fixed;
animation: zona-respirar 48s steps(8) infinite;
transition:
background-color var(--zone-bg-transition),
--zone-pr var(--zone-bg-transition),
--zone-pg var(--zone-bg-transition),
--zone-pb var(--zone-bg-transition),
--zone-sr var(--zone-bg-transition),
--zone-sg var(--zone-bg-transition),
--zone-sb var(--zone-bg-transition),
--zone-bg-base var(--zone-bg-transition);
}
@keyframes zona-respirar {
0%, 100% { --zone-drift-x: 12%; --zone-drift-y: -6%; }
50%      { --zone-drift-x: 17%; --zone-drift-y: -2%; }
}
@media (prefers-reduced-motion: reduce) {
body { animation: none; }
}
body::before {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
background: radial-gradient(140% 120% at 50% 12%, transparent 40%, rgba(2, 3, 6, .5) 100%);
}
@media (max-width: 768px) {
body {
position: relative;
background-attachment: scroll;
animation: none;
}
body::before { position: absolute; }
}
.youtuber-card {
transition: border-color var(--zone-transition), box-shadow var(--zone-transition);
}
body[data-zone] .youtuber-card {
border-color: rgba(var(--zone-primary-rgb), .18);
box-shadow: inset 0 0 40px rgba(var(--zone-primary-rgb), .05);
}
body[data-zone="novedades"] .page-title.neon-text-cyan,
body[data-zone="gratis"] .page-title.neon-text-cyan,
body[data-zone="social"] .page-title.neon-text-cyan,
body[data-zone="pase"] .page-title.neon-text-cyan,
body[data-zone="tienda"] .page-title.neon-text-cyan,
body[data-zone="perfil"] .page-title.neon-text-cyan {
color: var(--zone-primary);
text-shadow:
0 0 4px rgba(var(--zone-glow-rgb), .45),
0 0 12px rgba(var(--zone-glow-rgb), .22);
}
body[data-zone="novedades"] .tab-btn.active,
body[data-zone="gratis"] .tab-btn.active,
body[data-zone="social"] .tab-btn.active,
body[data-zone="pase"] .tab-btn.active,
body[data-zone="tienda"] .tab-btn.active,
body[data-zone="perfil"] .tab-btn.active {
color: var(--zone-primary);
}
body[data-zone="novedades"] .tab-btn.active::after,
body[data-zone="gratis"] .tab-btn.active::after,
body[data-zone="social"] .tab-btn.active::after,
body[data-zone="pase"] .tab-btn.active::after,
body[data-zone="tienda"] .tab-btn.active::after,
body[data-zone="perfil"] .tab-btn.active::after {
background: var(--zone-primary);
}
body,
body[data-zone] {
--zone-bg-base: #06080f;
background-color: #06080f;
background-image:
linear-gradient(rgba(150, 175, 255, .03) 1px, transparent 1px),
linear-gradient(90deg, rgba(150, 175, 255, .03) 1px, transparent 1px);
background-size: 32px 32px;
background-repeat: repeat;
background-position: 0 0;
background-attachment: scroll;
animation: none;
}
@media (hover: hover) and (pointer: fine) {
body,
body[data-zone] { background-attachment: fixed; }
}
/* /src/styles/index.css */
body.redsocial-activa #radio-bar,
body.redsocial-activa #main-navbar,
body.redsocial-activa #main-footer,
body.redsocial-activa #neo-root,
body.redsocial-activa #back-to-top {
display: none !important;
}
body.redsocial-activa #page-content {
margin: 0;
max-width: none;
min-height: 100vh;
padding: 0;
}