html {
scroll-behavior: smooth;
}
body {
font-family: 'Inter', sans-serif;
background-color: var(--od-marine-dark);
color: var(--od-text-light);
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: space-between;
overflow-x: hidden;
}
.bg-layer {
position: fixed;
inset: 0;
z-index: -1;
background-image: url('../img/backgrounds/background1.jpg');
background-size: cover;
background-position: center center;
}
.overlay {
background: linear-gradient(180deg, rgba(var(--od-marine-darker-rgb), 0.55) 0%, rgba(var(--od-marine-darker-rgb), 0.85) 100%);
min-height: 100vh;
width: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
/* Fondo propio, sin depender de que Tailwind genere la clase.
Las filas de dentro van transparentes, como en la referencia. */
/* Barra de navegacion: fondo propio para que no dependa de
que Tailwind genere bg-marine-dark. Sin borde, para que no
aparezca ninguna linea clara. */
.nav-bar {
background: rgba(var(--od-marine-darker-rgb), 0.92);
-webkit-backdrop-filter: blur(18px) saturate(140%);
backdrop-filter: blur(18px) saturate(140%);
box-shadow: 0 10px 26px rgba(var(--od-shadow-rgb), 0.4);
}
/* Panel del menu desplegable.
Sin fondo: se ve la imagen de la web, como el resto del sitio.
Sin sombra ni borde, para que no salga ninguna linea. La lectura la
aporta la pastilla de cada fila, no el panel. */
.menu-panel {
background: transparent;
-webkit-backdrop-filter: none;
backdrop-filter: none;
box-shadow: none;
}
.menu-panel .nav-button:not([aria-current='page']) {
background: rgba(var(--od-glass-rgb), 0.34);
color: var(--od-text-dark);
border-color: transparent;
}
.menu-panel .nav-button:not([aria-current='page']):hover {
background: rgba(var(--od-glass-rgb), 0.5);
color: var(--od-text-light);
border-color: transparent;
}
.menu-panel .nav-button-shop {
background: rgba(var(--od-marine-accent), 0.14);
border-color: transparent;
}
.menu-panel .nav-button-shop:hover {
background: rgba(var(--od-marine-accent), 0.24);
}
/* =============================================================
Menu desplegable
Copia del diseno de referencia: icono + texto en cada fila,
sin fondo ni borde. Solo la pagina actual se rellena con la
pastilla dorada. Asi el menu no parece un-stick de botones.
============================================================= */
.nav-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 9px;
min-height: 38px;
padding: 0 16px;
border-radius: 999px;
font-family: 'Inter', sans-serif;
font-size: 0.8125rem;
font-weight: 500;
letter-spacing: 0.01em;
line-height: 1;
white-space: nowrap;
text-decoration: none;
cursor: pointer;
position: relative;
border: 1px solid transparent;
background: transparent;
color: var(--od-text-dark);
-webkit-tap-highlight-color: transparent;
transition: background-color 0.18s ease, border-color 0.18s ease,
color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.nav-icon {
width: 17px;
height: 17px;
flex-shrink: 0;
opacity: 0.75;
transition: opacity 0.18s ease;
}
.nav-button:hover {
color: var(--od-text-light);
background: rgba(var(--od-glass-rgb), 0.4);
transform: translateY(-1px);
}
.nav-button:hover .nav-icon {
opacity: 1;
}
.nav-button:active {
transform: translateY(0) scale(0.98);
}
.nav-button:focus-visible {
outline: 2px solid var(--od-marine-accent);
outline-offset: 2px;
}
.nav-button-secondary {
background: transparent;
border-color: transparent;
color: var(--od-text-dark);
}
/* Tienda: sin relleno, pero con el texto en oro para que siga
leyendose como la seccion importante. */
.nav-button-shop {
background: transparent;
border-color: transparent;
color: var(--od-marine-accent);
font-weight: 600;
}
.nav-button-shop .nav-icon {
opacity: 0.9;
}
.nav-button-shop:hover {
background: rgba(var(--od-marine-accent), 0.12);
color: var(--od-gold-light);
}
/* Pagina actual: la unica pastilla rellena del menu. */
.nav-button[aria-current='page'] {
background: linear-gradient(180deg, #fde68a 0%, #eab308 100%);
border-color: transparent;
color: var(--od-ink);
font-weight: 600;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset,
0 4px 14px rgba(234, 179, 8, 0.24);
}
.nav-button[aria-current='page'] .nav-icon {
opacity: 1;
}
.nav-button[aria-current='page']:hover {
background: linear-gradient(180deg, #fef3c7 0%, #f0c02c 100%);
color: var(--od-ink);
}
/* El boton de entrar y el de menu siguen siendo acciones, no
enlaces de navegacion: por eso si llevan pastilla. */
.nav-button-primary {
background: linear-gradient(180deg, #fde68a 0%, #eab308 100%);
border-color: rgba(253, 230, 138, 0.6);
color: var(--od-ink);
font-weight: 600;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset,
0 4px 14px rgba(234, 179, 8, 0.24);
}
.nav-button-primary:hover {
background: linear-gradient(180deg, #fef3c7 0%, #f0c02c 100%);
border-color: transparent;
color: var(--od-ink);
transform: translateY(-1px);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset,
0 9px 22px rgba(234, 179, 8, 0.34);
}
.nav-button-primary:active {
transform: translateY(0) scale(0.97);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25) inset,
0 2px 8px rgba(234, 179, 8, 0.28);
}
.lang-flag-img {
width: 24px;
height: 18px;
border-radius: 3px;
display: block;
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25);
}
/* Secciones sin caja: solo el contenido, sobre la imagen de fondo.
Se mantiene el relleno vertical para que no se pegue a los bordes. */
.liquid-glass-container {
background-color: transparent;
-webkit-backdrop-filter: none;
backdrop-filter: none;
border: none;
border-radius: 0;
box-shadow: none;
padding: 1.5rem 0;
}
/* Reglas si lleva caja: es un documento largo y necesita un marco
para poder leerse. Fondo casi opaco, filo dorado arriba y
esquinas suaves. */
#reglas .liquid-glass-container {
background-color: rgba(var(--od-marine-darker-rgb), 0.92);
-webkit-backdrop-filter: blur(20px) saturate(140%);
backdrop-filter: blur(20px) saturate(140%);
border: 1px solid rgba(var(--od-border-rgb), 0.45);
border-top: 3px solid rgba(var(--od-marine-accent), 0.6);
border-radius: 1rem;
box-shadow: 0 18px 44px rgba(var(--od-shadow-rgb), 0.5);
padding: 2.5rem 2rem;
}
/* ---------- Animaciones ---------- */
.hero-title {
background: linear-gradient(180deg, var(--od-gold-light) 0%, var(--od-marine-accent) 60%, var(--od-gold-dark) 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
animation: glowPulse 3s ease-in-out infinite;
}
@keyframes glowPulse {
0%, 100% { filter: drop-shadow(0 0 6px rgba(234, 179, 8, 0.35)); }
50% { filter: drop-shadow(0 0 18px rgba(234, 179, 8, 0.7)); }
}
.reveal {
opacity: 0;
transform: translateY(34px) scale(0.97);
transition: opacity 0.8s cubic-bezier(0.22, 0.61, 0.36, 1),
transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.reveal.visible {
opacity: 1;
transform: translateY(0) scale(1);
}
.product-card {
display: flex;
flex-direction: column;
align-items: center;
padding: 1.5rem;
background-color: var(--od-marine-medium);
border-radius: 1rem;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
border: 1px solid var(--od-marine-light);
text-align: center;
position: relative;
overflow: hidden;
transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1),
box-shadow 0.35s ease,
border-color 0.35s ease;
}
.product-banner {
position: relative;
display: block;
width: calc(100% + 62px);
height: 190px;
object-fit: cover;
object-position: center;
margin: -24px -31px 0 -31px;
border-top-left-radius: 16px;
border-top-right-radius: 16px;
}
.product-card:hover {
transform: translateY(-10px) scale(1.02);
border-color: rgba(234, 179, 8, 0.8);
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5), 0 0 24px rgba(234, 179, 8, 0.25);
}
.product-card::before {
content: "";
position: absolute;
top: -60%;
left: -60%;
width: 220%;
height: 220%;
background: radial-gradient(circle at center, rgba(234, 179, 8, 0.12) 0%, transparent 60%);
opacity: 0;
transition: opacity 0.4s ease;
pointer-events: none;
}
.product-card h3,
.product-card p,
.product-card .price-tag {
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.95);
}
.product-card:hover::before {
opacity: 1;
}
.product-icon {
width: 80px;
height: 80px;
border-radius: 9999px;
background-color: var(--od-marine-dark);
border: 2px solid var(--od-marine-accent);
display: flex;
align-items: center;
justify-content: center;
font-size: 2.25rem;
transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.5s ease;
}
.product-card:hover .product-icon {
transform: scale(1.12) rotate(-6deg);
box-shadow: 0 0 20px rgba(234, 179, 8, 0.5);
}
.buy-btn {
width: 44px;
height: 44px;
margin-top: 14px;
border: none;
border-radius: 12px;
background-color: #43a047;
color: #000000;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
}
.buy-btn:hover {
background-color: #2e7d32;
transform: translateY(-2px) scale(1.08);
box-shadow: 0 8px 20px rgba(67, 160, 71, 0.4);
}
.buy-btn svg {
width: 22px;
height: 22px;
}
.price-tag {
color: var(--od-gold-light);
font-weight: 800;
display: inline-flex;
align-items: baseline;
gap: 2px;
}
.price-tag .currency {
font-size: 0.9rem;
color: var(--od-marine-accent);
}
.badge-popular {
position: absolute;
top: 14px;
right: -34px;
transform: rotate(45deg);
background: linear-gradient(90deg, var(--od-marine-accent), var(--od-gold-dark));
color: var(--od-ink);
font-size: 0.65rem;
font-weight: 700;
padding: 4px 36px;
letter-spacing: 0.05em;
z-index: 3;
}
.account-card {
position: relative;
background-color: var(--od-marine-medium);
padding: 25px;
border-radius: 8px;
width: 100%;
max-width: 500px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
border: 1px solid rgba(234, 179, 8, 0.2);
}
.account-card .user-header {
display: flex;
align-items: center;
gap: 15px;
}
.account-card .user-header img#user-bust {
width: 80px;
height: 80px;
object-fit: contain;
image-rendering: pixelated;
}
.account-card .user-info h3 {
margin: 0 0 8px 0;
font-size: 1.2rem;
color: var(--od-marine-accent);
font-weight: 700;
}
.account-card .user-actions {
display: flex;
align-items: center;
gap: 15px;
flex-wrap: wrap;
}
.account-card .btn-logout {
background-color: #261616;
color: #ff5252;
border: 1px solid #3d1c1c;
padding: 5px 12px;
border-radius: 4px;
font-weight: bold;
font-size: 0.85rem;
cursor: pointer;
transition: background-color 0.2s;
}
.account-card .btn-logout:hover {
background-color: #381a1a;
}
.account-card .divider {
border: 0;
height: 1px;
background: #1f1f1f;
margin: 20px 0;
}
.account-card .cart-empty {
text-align: center;
padding: 20px 10px;
}
.account-card .cart-empty h2 {
color: #ff5252;
font-size: 1.3rem;
margin-bottom: 10px;
letter-spacing: 1px;
}
.account-card .cart-empty p {
color: var(--od-text-dark);
font-size: 0.9rem;
margin: 0;
line-height: 1.4;
}
.account-lists {
text-align: left;
max-height: 180px;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 8px;
}
.no-items {
color: #9a9a9a;
font-size: 0.85rem;
margin: 4px 0;
}
.account-item {
background-color: var(--od-marine-darker);
border: 1px solid var(--od-marine-light);
border-radius: 8px;
padding: 10px 12px;
font-size: 0.82rem;
}
.account-item .top {
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
margin-bottom: 4px;
}
.account-item .name {
color: var(--od-text-light);
font-weight: 600;
font-size: 0.85rem;
}
.account-item .mini.pill {
font-size: 0.68rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.4px;
padding: 2px 8px;
border-radius: 9999px;
}
.pill-nuevo, .pill-proceso, .pill-pendiente {
background-color: #3b2d0f;
color: var(--od-gold-light);
}
.pill-pagado {
background-color: #0a0a0a;
color: #7dd3fc;
}
.pill-resuelto, .pill-entregado {
background-color: #0f3322;
color: #86efac;
}
.account-item .sub {
color: var(--od-text-dark);
font-size: 0.78rem;
}
.account-item .date {
color: #9a9a9a;
font-size: 0.72rem;
margin-top: 2px;
}
.filter-input,
.filter-select {
padding: 10px 14px;
border-radius: 12px;
border: 1px solid var(--od-marine-light);
background-color: var(--od-marine-darker);
color: var(--od-text-light);
font-size: 0.9rem;
font-family: 'Inter', sans-serif;
outline: none;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.filter-input {
flex: 1 1 220px;
}
.filter-select {
width: auto;
min-width: 180px;
}
.filter-input:focus,
.filter-select:focus {
border-color: var(--od-marine-accent);
box-shadow: 0 0 0 3px rgba(234, 179, 8, 0.15);
}
.cart-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 20px;
height: 20px;
padding: 0 6px;
border-radius: 9999px;
background-color: var(--od-marine-dark);
color: var(--od-gold-light);
font-size: 0.72rem;
font-weight: 700;
margin-left: 6px;
}
.cart-actions {
display: flex;
gap: 6px;
margin-top: 8px;
}
.cart-total-row {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 1.05rem;
font-weight: 700;
color: var(--od-gold-light);
margin-bottom: 12px;
}
.hero-logo {
will-change: transform;
animation: logoFloat 3.6s ease-in-out infinite !important;
transition: filter 0.4s ease, box-shadow 0.4s ease, border-radius 0.4s ease;
}
.hero-logo:hover {
filter: brightness(1.15) drop-shadow(0 0 20px rgba(234, 179, 8, 0.55));
border-radius: 18px;
}
@keyframes logoFloat {
0%, 100% { transform: translateY(0) rotate(0deg); }
50% { transform: translateY(-12px) rotate(-1.5deg); }
}
.account-card .mc-name-row {
display: flex;
align-items: center;
gap: 8px;
}
.account-card .mc-name-label {
font-size: 0.72rem;
font-weight: 600;
color: var(--od-text-dark);
white-space: nowrap;
}
.account-card .mc-name-input {
flex: 1;
min-width: 0;
background-color: var(--od-marine-dark);
border: 2px solid #2a2a2a;
color: var(--od-text-light);
border-radius: 3px;
padding: 0.35em 0.6em;
font-size: 0.8rem;
font-family: 'Inter', sans-serif;
outline: none;
}
.account-card .mc-name-input:focus {
border-color: var(--od-marine-accent);
}
.discord-btn {
position: relative;
z-index: 0;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 18px;
font-size: 15px;
font-weight: 600;
color: #5865f2;
background: transparent;
border: 1px solid #5865f2;
border-radius: 25px;
overflow: hidden;
cursor: pointer;
text-decoration: none;
transition: color 0.3s 0.1s ease-out;
}
.discord-btn svg {
width: 18px;
height: 18px;
flex-shrink: 0;
}
.discord-btn::before {
content: '';
position: absolute;
top: 0;
left: -5em;
right: 0;
bottom: 0;
margin: auto;
width: 20em;
height: 20em;
border-radius: 50%;
display: block;
z-index: -1;
transition: box-shadow 0.5s ease-out;
}
.discord-btn:hover {
color: #fff;
border-color: #5865f2;
}
.discord-btn:hover::before {
box-shadow: inset 0 0 0 10em #5865f2;
}
/* ===== Botón TikTok (pill blanca con slide) ===== */
.tiktok-btn {
position: relative;
display: inline-flex;
align-items: center;
width: 130px;
height: 35px;
border-radius: 30px;
background-color: #ffffff;
border: 1px solid #111111;
overflow: hidden;
text-decoration: none;
font-family: 'Inter', sans-serif;
cursor: pointer;
line-height: 1;
flex-shrink: 0;
}
.tiktok-btn .text1 {
font-size: 15px;
font-weight: 600;
color: #111111;
margin-left: 33%;
white-space: nowrap;
}
.tiktok-btn .text2 {
position: absolute;
top: 25%;
left: -50px;
font-weight: 700;
font-size: 14px;
color: #ffffff;
opacity: 0;
transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.45s ease;
}
.tiktok-btn .icon {
position: absolute;
top: 0;
left: 0;
transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
display: flex;
}
.tiktok-btn .icon::before {
position: absolute;
left: -100px;
top: 0;
z-index: -1;
content: '';
width: 130px;
height: 33px;
border-radius: 30px;
background-color: #111111;
}
.tiktok-btn:hover .icon {
transform: translateX(96px);
}
.tiktok-btn:hover .text2 {
transform: translateX(100px);
opacity: 1;
}
.tiktok-btn:active {
transform: scale(1.03);
}
/* ===== Botones sociales del pie =====
Misma pastilla dorada del resto de botones del sitio:
sin extrusion, sin sombra dura, solo fondo y borde. */
.discord-btn,
.tiktok-btn {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 40px;
padding: 0 22px;
border-radius: 999px;
font-family: 'Inter', sans-serif;
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 0.06em;
line-height: 1;
text-transform: uppercase;
text-decoration: none;
cursor: pointer;
outline: none;
color: var(--od-ink);
background: linear-gradient(180deg, #fde68a 0%, #eab308 55%, #ca8a04 100%);
border: 1px solid rgba(253, 230, 138, 0.55);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.35) inset,
0 4px 14px rgba(234, 179, 8, 0.24);
-webkit-tap-highlight-color: transparent;
transition: transform 0.18s ease, box-shadow 0.18s ease,
filter 0.18s ease, border-color 0.18s ease;
}
.discord-btn::before,
.tiktok-btn::before {
display: none;
}
.discord-btn svg,
.tiktok-btn svg {
width: 17px;
height: 17px;
flex-shrink: 0;
}
.discord-btn:hover,
.tiktok-btn:hover {
color: var(--od-ink);
filter: brightness(1.06);
transform: translateY(-2px);
border-color: rgba(253, 230, 138, 0.85);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.45) inset,
0 12px 28px rgba(234, 179, 8, 0.34);
}
.discord-btn:active,
.tiktok-btn:active {
color: var(--od-ink);
transform: translateY(0) scale(0.98);
filter: brightness(0.97);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset,
0 2px 8px rgba(234, 179, 8, 0.26);
}
.discord-btn:focus-visible,
.tiktok-btn:focus-visible {
outline: 2px solid var(--od-marine-accent);
outline-offset: 3px;
}
/* ===== Estilo UI Minecraft (cuadros sólidos, bordes nítidos, esquinas cuadradas) ===== */
.product-card {
border-radius: 3px;
border: 2px solid #2a2a2a;
box-shadow: 4px 4px 0 var(--od-marine-darker);
}
.product-card:hover {
transform: translateY(-4px);
border-color: var(--od-marine-accent);
box-shadow: 6px 6px 0 var(--od-marine-darker);
}
.product-card::before {
display: none;
}
.product-card:hover .product-icon {
transform: scale(1.05);
box-shadow: none;
}
.product-banner {
border-radius: 0;
}
.product-icon {
border-radius: 3px;
}
.filter-input,
.filter-select {
border-radius: 3px;
}.account-card,
.staff-panel {
border-radius: 3px;
border: 2px solid #2a2a2a;
box-shadow: 4px 4px 0 var(--od-marine-darker);
}
/* ===== Modo "cristal": recuadros translúcidos sobre el fondo =====
Ajusta el nivel de transparencia cambiando el alfa (0.55)
y el desenfoque con el valor de blur. */
:root {
--glass-bg: rgba(var(--od-glass-rgb), 0.22);
--glass-bg-soft: rgba(var(--od-glass-rgb), 0.16);
--glass-blur: 14px;
}
.bg-marine-dark,
.bg-marine-medium {
background-color: rgba(var(--od-glass-rgb), 0.72) !important;
backdrop-filter: blur(var(--glass-blur));
-webkit-backdrop-filter: blur(var(--glass-blur));
}
.product-card {
background-color: rgba(var(--od-glass-rgb), 0.25);
backdrop-filter: blur(var(--glass-blur));
-webkit-backdrop-filter: blur(var(--glass-blur));
}
.product-icon {
background-color: rgba(var(--od-glass-rgb), 0.3);
backdrop-filter: blur(var(--glass-blur));
-webkit-backdrop-filter: blur(var(--glass-blur));
}.account-card,
.staff-panel {
background-color: var(--glass-bg);
backdrop-filter: blur(var(--glass-blur));
-webkit-backdrop-filter: blur(var(--glass-blur));
}.product-card,
.account-card,
.staff-panel {
border-color: transparent;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}
.filter-input,
.filter-select,
.account-card .mc-name-input {
background-color: rgba(var(--od-glass-rgb), 0.35);
backdrop-filter: blur(var(--glass-blur));
-webkit-backdrop-filter: blur(var(--glass-blur));
}
/* ===== Avisos de respuesta en tickets ===== */
#enterNavBtn {
position: relative;
}
.ticket-notif-badge {
position: absolute;
top: -8px;
right: -8px;
min-width: 17px;
height: 17px;
line-height: 15px;
padding: 0 4px;
border-radius: 9999px;
background-color: #ef4444;
color: #ffffff;
font-size: 0.68rem;
font-weight: 700;
text-align: center;
box-sizing: border-box;
border: 2px solid var(--od-marine-dark);
}
.tickets-unread-pill {
display: inline-block;
vertical-align: middle;
background-color: #ef4444;
color: #ffffff;
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 0.03em;
border-radius: 9999px;
padding: 2px 8px;
margin-left: 6px;
}
.shop-hero {
position: relative;
text-align: center;
padding: 0.5rem 0 2.5rem;
overflow: hidden;
}
.shop-ember {
position: absolute;
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--od-gold-light);
box-shadow: 0 0 10px 2px rgba(234, 179, 8, 0.65);
bottom: 6px;
opacity: 0;
z-index: 0;
animation: emberRise 7s linear infinite;
pointer-events: none;
}
.shop-hero > span.shop-ember:nth-of-type(2) { animation-delay: 2.3s; }
.shop-hero > span.shop-ember:nth-of-type(3) { animation-delay: 4.6s; }
@keyframes emberRise {
0% { transform: translateY(0) translateX(0); opacity: 0; }
12% { opacity: 0.9; }
80% { opacity: 0.55; }
100% { transform: translateY(-260px) translateX(36px); opacity: 0; }
}
.shop-logo-wrap {
display: inline-block;
padding: 6px;
}
@keyframes conicSpin {
to { transform: rotate(360deg); }
}
.shop-badge {
display: inline-flex;
align-items: center;
gap: 9px;
padding: 0.5em 1.2em;
border-radius: 999px;
font-size: 0.7rem;
font-weight: 800;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--od-gold-light);
background: rgba(var(--od-glass-rgb), 0.35);
border: 1px solid rgba(234, 179, 8, 0.35);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
box-shadow: 0 0 24px rgba(234, 179, 8, 0.18);
margin-bottom: 1.25rem;
}
.shop-badge::before {
content: '';
width: 8px;
height: 8px;
border-radius: 999px;
background: #22c55e;
animation: statusPing 1.8s infinite;
}
@keyframes statusPing {
0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55); }
70% { box-shadow: 0 0 0 9px rgba(34, 197, 94, 0); }
100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}
.shop-title {
background: none;
-webkit-background-clip: initial;
background-clip: initial;
color: var(--od-gold-light);
text-shadow: 0 0 24px rgba(234, 179, 8, 0.45), 0 0 60px rgba(234, 179, 8, 0.25);
}
.shop-trust {
display: flex;
flex-wrap: wrap;
gap: 0.8rem;
justify-content: center;
margin-top: 1.7rem;
position: relative;
z-index: 1;
}
.shop-trust-item {
display: inline-flex;
align-items: center;
gap: 0.55rem;
padding: 0.55em 1.1em;
border-radius: 999px;
font-size: 0.76rem;
font-weight: 600;
color: var(--od-text-light);
background: rgba(var(--od-glass-rgb), 0.3);
border: 1px solid rgba(234, 179, 8, 0.22);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.shop-trust-item:hover {
transform: translateY(-3px);
border-color: rgba(234, 179, 8, 0.55);
box-shadow: 0 8px 22px rgba(234, 179, 8, 0.22);
}
.shop-filter-panel {
border-radius: 20px;
padding: 1.5rem 1.6rem;
}
.shop-filter-title {
font-size: 0.7rem;
font-weight: 800;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--od-text-dark);
margin-bottom: 1rem;
display: flex;
align-items: center;
gap: 0.55rem;
}
.shop-filter-title::before {
content: '🎁';
color: var(--od-marine-accent);
font-size: 1rem;
text-shadow: 0 0 12px rgba(234, 179, 8, 0.6);
}
.filter-input,
.filter-select {
border-radius: 12px;
background-color: rgba(var(--od-glass-rgb), 0.45);
border-color: var(--od-marine-light);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.filter-input:focus,
.filter-select:focus {
border-color: var(--od-marine-accent);
box-shadow: 0 0 0 3px rgba(234, 179, 8, 0.16);
}
.shop-sec {
border-radius: 22px;
padding: 2.25rem 1.5rem;
position: relative;
}
.shop-sec::after {
content: '';
position: absolute;
inset: 0;
border-radius: 22px;
padding: 1px;
background: linear-gradient(135deg, rgba(234, 179, 8, 0.5), rgba(56, 189, 248, 0.12) 45%, rgba(234, 179, 8, 0.2));
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
}
.shop-section-head {
text-align: center;
margin-bottom: 2rem;
}
.shop-section-title {
display: inline-flex;
align-items: center;
gap: 0.6rem;
font-weight: 800;
font-size: 1.45rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--od-gold-light);
text-shadow: 0 0 24px rgba(234, 179, 8, 0.35);
}
.shop-section-title .chip {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 14px;
background: linear-gradient(135deg, rgba(234, 179, 8, 0.22), rgba(56, 189, 248, 0.14));
border: 1px solid rgba(234, 179, 8, 0.4);
box-shadow: 0 0 18px rgba(234, 179, 8, 0.22);
font-size: 1.35rem;
}
.shop-section-sub {
display: block;
color: var(--od-text-dark);
margin-top: 0.4rem;
font-size: 0.95rem;
}
.shop-gradient-line {
display: inline-block;
width: 130px;
height: 4px;
border-radius: 999px;
background: linear-gradient(90deg, transparent, var(--od-marine-accent), var(--od-marine-accent), transparent);
box-shadow: 0 0 16px rgba(234, 179, 8, 0.55);
margin-top: 0.7rem;
}
/* ---- Tarjetas de producto ---- */
.product-card {
border-radius: 18px;
padding: 1.15rem 1.15rem 1.5rem;
border: none;
gap: 0.15rem;
background: linear-gradient(160deg,
rgba(var(--od-glass-rgb), 0.4),
rgba(var(--od-glass-rgb), 0.16));
backdrop-filter: blur(var(--glass-blur));
-webkit-backdrop-filter: blur(var(--glass-blur));
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}
.product-card::after {
content: '';
position: absolute;
inset: 0;
border-radius: 18px;
padding: 1px;
background: linear-gradient(135deg, rgba(234, 179, 8, 0.65), rgba(56, 189, 248, 0.12) 48%, rgba(234, 179, 8, 0.28));
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
transition: opacity 0.35s ease;
}
.product-card:hover {
transform: translateY(-10px) scale(1.02);
border-color: transparent;
box-shadow: 0 22px 46px rgba(0, 0, 0, 0.55), 0 0 30px rgba(234, 179, 8, 0.18);
}
.product-card:hover::after {
background: linear-gradient(135deg, var(--od-marine-accent), rgba(56, 189, 248, 0.35) 55%, var(--od-gold-light));
}
.product-banner {
height: 150px;
margin: -18px -18px 0 -18px;
width: calc(100% + 36px);
border-top-left-radius: 18px;
border-top-right-radius: 18px;
}
.product-icon {
border-radius: 18px;
border: none;
background: linear-gradient(145deg, rgba(var(--od-glass-rgb), 0.55), rgba(var(--od-glass-rgb), 0.18));
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 8px 22px rgba(0, 0, 0, 0.35);
}
.product-card:hover .product-icon {
transform: scale(1.08) rotate(-5deg);
box-shadow: 0 0 0 1px rgba(234, 179, 8, 0.5), 0 0 28px rgba(234, 179, 8, 0.4);
}
.shop-cat-tag {
display: inline-block;
font-size: 0.6rem;
font-weight: 800;
letter-spacing: 0.22em;
text-transform: uppercase;
padding: 0.4em 0.95em;
border-radius: 999px;
background: rgba(var(--od-glass-rgb), 0.5);
border: 1px solid var(--od-marine-light);
color: var(--od-text-dark);
margin: 0.35rem 0 0.25rem;
}
.cat-llaves .shop-cat-tag {
border-color: rgba(56, 189, 248, 0.45);
color: #67e8f9;
}
.cat-rangos .shop-cat-tag {
border-color: rgba(234, 179, 8, 0.45);
color: var(--od-gold-light);
}
.price-tag {
padding: 0.32em 0.95em;
border-radius: 999px;
background: linear-gradient(135deg, rgba(234, 179, 8, 0.16), rgba(56, 189, 248, 0.08));
border: 1px solid rgba(234, 179, 8, 0.32);
box-shadow: 0 0 16px rgba(234, 179, 8, 0.12);
}
.shop-buy-btn {
width: 100%;
margin-top: 1rem;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.55rem;
padding: 0.85em 1.2em;
border-radius: 999px;
background: linear-gradient(135deg, var(--od-gold-light) 0%, var(--od-marine-accent) 55%, var(--od-gold-dark) 100%);
color: var(--od-ink);
font-family: 'Inter', sans-serif;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.06em;
font-size: 0.8rem;
border: none;
cursor: pointer;
box-shadow: 0 4px 18px rgba(234, 179, 8, 0.35);
transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
.shop-buy-btn svg {
width: 16px;
height: 16px;
flex-shrink: 0;
}
.shop-buy-btn:hover {
transform: translateY(-2px);
filter: brightness(1.08);
box-shadow: 0 8px 26px rgba(234, 179, 8, 0.5);
}
.shop-buy-btn:active {
transform: translateY(0) scale(0.97);
}
.shop-buy-btn {
position: relative;
overflow: hidden;
}
.shop-buy-btn::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.4) 50%, transparent 60%);
transform: translateX(-120%);
transition: transform 0.6s ease;
}
.shop-buy-btn:hover::after {
transform: translateX(120%);
}
.shop-help {
text-align: center;
margin-top: 2rem;
font-size: 0.92rem;
}
/* =====================================================================
EXTRAS: progreso de scroll, botón arriba, partículas, íconos de
filtros y pasos de compra
===================================================================== */
.scroll-progress {
position: fixed;
top: 0;
left: 0;
height: 3px;
width: 0%;
background: linear-gradient(90deg, var(--od-marine-accent), var(--od-gold-light));
box-shadow: 0 0 10px rgba(234, 179, 8, 0.6);
z-index: 300;
transition: width 0.1s linear;
}
.back-top {
position: fixed;
left: 18px;
bottom: 18px;
z-index: 200;
width: 52px;
height: 52px;
border-radius: 14px;
border: 1px solid rgba(234, 179, 8, 0.4);
background: rgba(var(--od-glass-rgb), 0.55);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
color: var(--od-gold-light);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35);
opacity: 0;
transform: translateY(14px);
pointer-events: none;
transition: opacity 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
}
.back-top.show {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.back-top:hover {
border-color: rgba(234, 179, 8, 0.85);
transform: translateY(-4px);
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4), 0 0 20px rgba(234, 179, 8, 0.25);
}
.back-top svg {
width: 22px;
height: 22px;
}
.shop-particles {
position: absolute;
inset: 0;
overflow: hidden;
pointer-events: none;
}
.shop-particle {
position: absolute;
width: 8px;
height: 8px;
border-radius: 2px;
background: var(--od-gold-light);
box-shadow: 0 0 8px rgba(234, 179, 8, 0.7);
opacity: 0;
animation: particleFloat 9s linear infinite;
}
@keyframes particleFloat {
0% { transform: translateY(40px) rotate(0deg); opacity: 0; }
15% { opacity: 0.7; }
85% { opacity: 0.45; }
100% { transform: translateY(-340px) rotate(170deg); opacity: 0; }
}
.filter-field {
position: relative;
flex: 1 1 220px;
display: flex;
align-items: center;
}
.filter-field .field-icon {
position: absolute;
left: 14px;
width: 18px;
height: 18px;
color: var(--od-marine-accent);
pointer-events: none;
z-index: 1;
flex-shrink: 0;
}
.filter-field .filter-input,
.filter-field .filter-select {
flex: none;
width: 100%;
padding-left: 2.6rem;
}
.filter-select {
appearance: none;
-webkit-appearance: none;
padding-right: 2.3rem;
}
.filter-field .chev {
position: absolute;
right: 14px;
width: 15px;
height: 15px;
color: var(--od-text-dark);
pointer-events: none;
}
.shop-steps {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.25rem;
}
.shop-step {
text-align: center;
padding: 1.5rem 1.1rem 1.6rem;
border-radius: 16px;
background: rgba(var(--od-glass-rgb), 0.28);
border: 1px solid rgba(234, 179, 8, 0.2);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
position: relative;
transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.shop-step:hover {
transform: translateY(-6px);
border-color: rgba(234, 179, 8, 0.55);
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35), 0 0 24px rgba(234, 179, 8, 0.15);
}
.shop-step .step-chip {
width: 56px;
height: 56px;
margin: 0 auto 0.85rem;
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
background: linear-gradient(135deg, rgba(234, 179, 8, 0.25), rgba(56, 189, 248, 0.12));
border: 1px solid rgba(234, 179, 8, 0.4);
box-shadow: 0 0 18px rgba(234, 179, 8, 0.2);
}
.shop-step .step-num {
position: absolute;
top: 10px;
right: 14px;
font-size: 0.65rem;
font-weight: 800;
letter-spacing: 0.1em;
color: var(--od-text-dark);
}
.shop-step h3 {
font-size: 1.05rem;
font-weight: 800;
color: var(--od-gold-light);
margin-bottom: 0.4rem;
}
.shop-step p {
font-size: 0.85rem;
color: var(--od-text-dark);
line-height: 1.5;
}
@media (max-width: 640px) {
.shop-steps { grid-template-columns: 1fr; }
}
/* =============================================================
Botones de la web
Un solo bloque para todos: pastilla, fondo translucido, sin
contorno y hover que solo levanta el fondo. Antes cada boton
tenia reglas propias que competian entre si.
============================================================= */
.news-filter-btn,
.lang-btn,
.rating-btn,
.rating-submit,
.cb-btn,
.btn-copy-tag,
.gold-btn,
.btn-delete-mini,
.btn-danger,
.btn-logout,
.btn-action,
.btn-continue,
.btn-gold,
.btn-online,
.btn-rating-del {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 38px;
padding: 0 18px;
border-radius: 999px;
border: 1px solid rgba(253, 230, 138, 0.6);
background: linear-gradient(180deg, #fde68a 0%, #eab308 100%);
color: var(--od-ink);
font-family: 'Inter', sans-serif;
font-size: 0.8125rem;
font-weight: 600;
letter-spacing: 0.01em;
line-height: 1;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset,
0 4px 14px rgba(234, 179, 8, 0.24);
transition: background-color 0.18s ease, border-color 0.18s ease,
color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease,
filter 0.18s ease;
}
.nav-button svg),
.news-filter-btn svg,
.cb-btn svg,
.btn-copy-tag svg,
.gold-btn svg,
.rating-btn svg,
.btn-delete-mini svg,
.btn-danger svg,
.btn-logout svg {
width: 17px;
height: 17px;
flex-shrink: 0;
}
.news-filter-btn:hover,
.lang-btn:hover,
.rating-btn:hover,
.rating-submit:hover,
.cb-btn:hover,
.btn-copy-tag:hover,
.gold-btn:hover,
.btn-delete-mini:hover,
.btn-danger:hover,
.btn-logout:hover,
.btn-action:hover,
.btn-continue:hover,
.btn-gold:hover,
.btn-online:hover,
.btn-rating-del:hover {
background: linear-gradient(180deg, #fef3c7 0%, #f0c02c 100%);
transform: translateY(-1px);
color: var(--od-ink);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset,
0 9px 22px rgba(234, 179, 8, 0.34);
}
.news-filter-btn:active,
.lang-btn:active,
.rating-btn:active,
.rating-submit:active,
.cb-btn:active,
.btn-copy-tag:active,
.gold-btn:active,
.btn-delete-mini:active,
.btn-danger:active,
.btn-logout:active,
.btn-action:active,
.btn-continue:active,
.btn-gold:active,
.btn-online:active,
.btn-rating-del:active {
transform: translateY(0) scale(0.98);
}
.news-filter-btn:focus-visible,
.lang-btn:focus-visible,
.rating-btn:focus-visible,
.rating-submit:focus-visible,
.cb-btn:focus-visible,
.btn-copy-tag:focus-visible,
.gold-btn:focus-visible,
.btn-delete-mini:focus-visible,
.btn-danger:focus-visible,
.btn-logout:focus-visible,
.btn-action:focus-visible,
.btn-continue:focus-visible,
.btn-gold:focus-visible,
.btn-online:focus-visible,
.btn-rating-del:focus-visible {
outline: 2px solid var(--od-marine-accent);
outline-offset: 2px;
}
/* Estado activo: se invierte a oscuro con texto dorado, para que
se distinga de los botones dorados de alrededor. */
.news-filter-btn.active {
background: var(--od-ink);
border-color: rgba(253, 230, 138, 0.75);
color: var(--od-gold-light);
font-weight: 700;
box-shadow: 0 0 0 1px rgba(253, 230, 138, 0.35) inset,
0 4px 16px rgba(0, 0, 0, 0.35);
}
.news-filter-btn.active:hover {
background: #0a0a0a;
color: var(--od-gold-light);
}
/* Accion positiva: el boton de aceptar. */
.cb-accept {
background: linear-gradient(180deg, #fef3c7 0%, #eab308 100%);
color: var(--od-ink);
}
/* Peligro: borrar, banear, cerrar. */
.btn-danger,
.btn-rating-del,
.cb-decline {
background: rgba(220, 38, 38, 0.16);
color: #fca5a5;
}
.btn-danger:hover,
.btn-rating-del:hover,
.cb-decline:hover {
background: rgba(220, 38, 38, 0.34);
color: #fee2e2;
}
/* Cantidad del carrito: botones pequenos y cuadrados. */
.cart-qty-btn,
.cart-remove {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
min-height: 0;
padding: 0;
border-radius: 10px;
border: 1px solid transparent;
background: linear-gradient(180deg, #fde68a 0%, #eab308 100%);
border-color: rgba(253, 230, 138, 0.6);
color: var(--od-ink);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset;
font-family: 'Inter', sans-serif;
font-size: 0.9rem;
font-weight: 600;
line-height: 1;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.cart-qty-btn:hover,
.cart-remove:hover {
background: linear-gradient(180deg, #fef3c7 0%, #f0c02c 100%);
transform: translateY(-1px);
}
.cart-qty-btn:active,
.cart-remove:active {
transform: translateY(0) scale(0.95);
}
/* El menu desplegable no va en dorado: son filas de icono y
texto sobre fondo translucido, como en la referencia. */
.nav-button {
background: transparent;
border: 1px solid transparent;
color: var(--od-text-dark);
box-shadow: none;
}
.nav-button:hover {
background: rgba(var(--od-glass-rgb), 0.28);
color: var(--od-text-light);
}
/* La pagina actual si es la unica pastilla dorada del menu. */
.nav-button[aria-current='page'] {
background: linear-gradient(180deg, #fde68a 0%, #eab308 100%);
border-color: rgba(253, 230, 138, 0.6);
color: var(--od-ink);
font-weight: 600;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset,
0 4px 14px rgba(234, 179, 8, 0.24);
}
.nav-button[aria-current='page']:hover {
background: linear-gradient(180deg, #fef3c7 0%, #f0c02c 100%);
color: var(--od-ink);
}
/* Contorno dorado: fondo transparente, borde y texto dorados.
Los del hero (Discord y Proximamente, con el contador de
jugadores encima) y los del pie (Discord y TikTok). */
.discord-btn,
.tiktok-btn,
.gold-btn,
.btn-ghost {
background: transparent;
border: 1px solid rgba(234, 179, 8, 0.7);
color: var(--od-marine-accent);
box-shadow: none;
}
.discord-btn:hover,
.tiktok-btn:hover,
.gold-btn:hover,
.btn-ghost:hover {
background: rgba(234, 179, 8, 0.14);
border-color: var(--od-marine-accent);
color: var(--od-gold-light);
transform: translateY(-1px);
box-shadow: 0 6px 18px rgba(234, 179, 8, 0.2);
}
.discord-btn:active,
.tiktok-btn:active,
.gold-btn:active,
.btn-ghost:active {
transform: translateY(0) scale(0.98);
}