/* Portada «Neón» — fondo oscuro, menú lateral y tarjetas con borde luminoso. * * Sólo se carga en la portada, y todo cuelga de `.p-neon` para no teñir el * resto de la tienda. La paleta es la que pidió el cliente, con un ajuste: su * morado #8A2BE2 sobre negro da 3,1:1, que no llega para texto. Se usa como * fondo de botón (blanco encima: 4,6:1) y para bordes, y el cian #00F0FF queda * para lo que sí es texto, donde pasa de 12:1. */ /* Los colores van en `:root`, NO en `.p-neon`. * * Parece un detalle y no lo es. `.p-neon` cuelga del ``; la paleta que el * dueño elige en el panel se escribe en `:root`. Una clase (0,1,0) gana a un * elemento, así que declarándolos aquí esta portada pisaba SIEMPRE al panel, en * cualquier orden de hojas: JB Store tenía el cian configurado y los botones le * salían morados. En `:root` empatan, y como el panel se imprime después, manda * el panel — que es lo que tiene que pasar. * * Esta hoja sólo se descarga en la portada, así que tocar `:root` aquí no afecta * al resto de la tienda. */ :root { --n-fondo: #0F0F12; --n-panel: #16161C; --n-panel2: #1D1D26; --n-borde: #2A2A36; --n-morado: #8A2BE2; --n-cian: #00F0FF; --n-verde: #39FF14; --n-magenta: #FF007F; --n-txt: #FFFFFF; --n-txt2: #A9A9BC; /* 8,4:1 sobre el fondo */ /* Se reescriben las variables DEL MOTOR, no se parchean sus selectores uno a uno. Así la barra, el pie, los botones y las tarjetas se vuelven oscuros solos, y si mañana el motor añade un componente nuevo ya nace con la paleta correcta en vez de aparecer blanco sobre negro. Son los valores POR DEFECTO: si el dueño puso paleta en el panel, gana. */ --bg: var(--n-fondo); --fg: var(--n-txt); --card: var(--n-panel); --border: var(--n-borde); --muted: var(--n-panel2); --muted-fg: var(--n-txt2); --primary: var(--n-morado); --primary-fg:#FFFFFF; --accent: var(--n-panel2); --radius: 14px; } .p-neon { background: var(--bg); color: var(--fg); } /* La barra lleva su color escrito a fuego (un rgba claro con desenfoque), así que esa sí hay que decírsela. Se conserva el desenfoque: es lo que hace que el contenido se vea pasar por debajo. */ .p-neon .nav-inner { background: rgba(22,22,28,.86); border-color: var(--n-borde); color: var(--n-txt); } /* `:not(.btn)` a propósito: esta regla pintaba TODOS los enlaces de la barra, y el botón «Ingresar» es un . Resultado: texto gris lavanda sobre el cian del botón, 1,64:1 — invisible, y SÓLO en la portada, porque esta hoja no se carga en el resto del sitio. El botón conserva su --primary-fg, que el motor calcula midiendo el contraste real. */ .p-neon .nav-inner a:not(.btn) { color: var(--n-txt2); } .p-neon .nav-inner a:hover, .p-neon .nav-inner a.active { color: var(--n-txt); } .p-neon .nav-brand { color: var(--n-txt); } .p-neon .footer, .p-neon .footer-app { background: var(--n-panel); border-color: var(--n-borde); } .p-neon .footer a { color: var(--n-txt2); } .p-neon .footer a:hover { color: var(--n-cian); } /* Un resplandor muy suave detrás de todo, para que el negro no sea plano. */ .p-neon .neon::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(680px circle at 12% -6%, rgba(138,43,226,.20), transparent 62%), radial-gradient(560px circle at 92% 8%, rgba(0,240,255,.12), transparent 60%); } /* ── Estructura: lateral + cuerpo ─────────────────────────────────────── */ .neon { display: grid; grid-template-columns: 232px minmax(0,1fr); gap: 22px; max-width: 1240px; margin: 0 auto; padding: 22px 16px 48px; } /* Sin esto, la tira de categorías —que es ancha a propósito— estira su columna y arrastra a toda la rejilla: el carrusel y las tarjetas se salían por la derecha en el móvil. Un hijo de grid no encoge por debajo de su contenido a menos que se le diga. */ .neon > * { min-width: 0; } @media (max-width: 900px) { .neon { grid-template-columns: minmax(0,1fr); } } .neon-lat { position: sticky; top: 82px; align-self: start; background: var(--n-panel); border: 1px solid var(--n-borde); border-radius: 16px; padding: 14px 10px; } .neon-lat-tit { margin: 4px 8px 10px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--n-txt2); } .neon-lat nav { display: flex; flex-direction: column; gap: 2px; } .neon-lat a { display: flex; align-items: center; gap: 9px; padding: 10px 10px; border-radius: 10px; color: var(--n-txt2); text-decoration: none; font-size: 14px; transition: background .18s, color .18s; } .neon-lat a:hover, .neon-lat a:focus-visible { background: var(--n-panel2); color: var(--n-txt); } .neon-lat a:focus-visible { outline: 2px solid var(--n-cian); outline-offset: 2px; } .neon-lat-pt { width: 6px; height: 6px; border-radius: 50%; background: var(--n-morado); box-shadow: 0 0 8px var(--n-morado); flex: 0 0 auto; } .neon-lat-todo { margin-top: 8px; border-top: 1px solid var(--n-borde); padding-top: 12px !important; color: var(--n-cian) !important; font-weight: 600; } /* En móvil la columna se convierte en una tira que se desliza. Va DESPUÉS de las reglas de arriba a propósito: si se pone antes, la regla base `.neon-lat nav{flex-direction:column}` la pisa por orden y la tira sigue saliendo vertical — pasó en la primera prueba. Con la columna entera, había que pasar diez categorías para ver el primer producto. */ @media (max-width: 900px) { .neon-lat { position: static; padding: 10px; } .neon-lat-tit { display: none; } .neon-lat nav { flex-direction: row; gap: 8px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: 2px; } .neon-lat nav::-webkit-scrollbar { display: none; } .neon-lat a { flex: 0 0 auto; white-space: nowrap; background: var(--n-panel2); border: 1px solid var(--n-borde); padding: 8px 13px; font-size: 13px; } .neon-lat-todo { margin-top: 0 !important; border-top: 0 !important; padding-top: 8px !important; } } .neon-cuerpo { display: flex; flex-direction: column; gap: 26px; min-width: 0; } /* ── Carrusel ─────────────────────────────────────────────────────────── */ .neon-car { border-radius: 20px; overflow: hidden; border: 1px solid var(--n-borde); background: linear-gradient(120deg, #1A1030, #101826); min-height: 250px; } .neon-lamina { display: grid; grid-template-columns: 1.15fr .85fr; align-items: center; min-height: 250px; } @media (max-width: 720px) { .neon-lamina { grid-template-columns: 1fr; } } .neon-lamina img { width: 100%; height: 100%; max-height: 300px; object-fit: cover; grid-column: 2; opacity: .92; } @media (max-width: 720px) { .neon-lamina img { grid-column: 1; grid-row: 1; max-height: 160px; } } /* El hueco de abajo deja sitio a las flechas y a los puntos. */ .neon-lamina-txt { grid-column: 1; grid-row: 1; padding: 30px 28px 62px; } @media (max-width: 720px) { .neon-lamina-txt { grid-row: 2; padding: 20px 20px 56px; } } .neon-eyebrow { margin: 0 0 6px; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--n-cian); } .neon-lamina h2 { margin: 0 0 10px; font-size: clamp(22px, 3.4vw, 34px); line-height: 1.08; } .neon-lamina-precio { margin: 0 0 16px; color: var(--n-txt2); font-size: 14px; } .neon-lamina-precio strong { color: var(--n-verde); font-size: 24px; margin-left: 4px; } /* Las flechas van juntas abajo a la izquierda, fuera del texto. Centradas a los lados pisaban el precio: la de la izquierda caía justo encima de «desde». */ .neon-car-flecha { position: absolute; bottom: 14px; z-index: 3; width: 34px; height: 34px; border-radius: 50%; cursor: pointer; background: rgba(20,20,28,.82); color: var(--n-txt); border: 1px solid var(--n-borde); font-size: 19px; line-height: 1; } .neon-car-flecha.izq { left: 26px; } .neon-car-flecha.der { left: 66px; } @media (max-width: 720px) { .neon-car-flecha { bottom: 10px; } .neon-car-flecha.izq { left: 16px; } .neon-car-flecha.der { left: 56px; } } .neon-car-flecha:hover { background: var(--primary); border-color: var(--primary); } .neon-car-flecha:focus-visible { outline: 2px solid var(--n-cian); outline-offset: 2px; } .neon-car-puntos { position: absolute; bottom: 24px; left: 112px; display: flex; gap: 6px; z-index: 3; color: var(--n-cian); } @media (max-width: 720px) { .neon-car-puntos { left: 100px; bottom: 20px; } } /* ── Secciones ────────────────────────────────────────────────────────── */ .neon-sec-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; } .neon-sec-cab h2 { margin: 0; font-size: 21px; } .neon-sec-cab a { color: var(--n-cian); text-decoration: none; font-size: 14px; font-weight: 600; } .neon-sec-cab a:hover { text-decoration: underline; } .neon-rej { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } .neon-cd { position: relative; border-radius: 15px; overflow: hidden; background: var(--n-panel); border: 1px solid var(--n-borde); display: flex; flex-direction: column; } /* El borde luminoso: un degradado que sólo se ve al pasar por encima. */ .neon-cd::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(135deg, var(--n-morado), var(--n-cian)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity .25s; pointer-events: none; z-index: 2; } .neon-cd:hover::before, .neon-cd:focus-within::before { opacity: 1; } .neon-cd:hover { box-shadow: 0 12px 30px rgba(138,43,226,.24); } .neon-cd-img { display: block; position: relative; aspect-ratio: 1/1; background: var(--n-panel2); } .neon-cd-img img { width: 100%; height: 100%; object-fit: cover; } .neon-cd-off { position: absolute; top: 8px; left: 8px; z-index: 3; background: var(--n-magenta); color: #fff; font-size: 11px; font-weight: 800; padding: 3px 7px; border-radius: 7px; } .neon-cd-txt { padding: 11px 12px 13px; display: flex; flex-direction: column; gap: 8px; flex: 1; } .neon-cd-txt h3 { margin: 0; font-size: 13.5px; line-height: 1.3; } .neon-cd-txt h3 a { color: var(--n-txt); text-decoration: none; } .neon-cd-txt h3 a:hover { color: var(--n-cian); } .neon-cd-precio { margin: 0 0 auto; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; } .neon-cd-precio s { color: var(--n-txt2); font-size: 12px; } .neon-cd-precio strong { color: var(--n-verde); font-size: 17px; } .neon-desde { color: var(--n-txt2); font-size: 11px; font-weight: 500; } /* El botón sigue al PANEL, no al morado de esta portada. Su lámina de marca pone el botón principal en cian con texto oscuro, y ahora eso se puede configurar sin tocar este fichero. `--primary-fg` lo calcula el motor midiendo el contraste real sobre el color que quede. Los acentos de TEXTO siguen en cian a propósito: el morado sobre el fondo oscuro da 3,21:1 y no llega para leerse; de fondo de botón con texto blanco sí (5,96:1). Por eso no se cambian los dos a la vez. */ .neon-btn { display: inline-block; background: var(--primary); color: var(--primary-fg); border: 0; border-radius: 10px; padding: 10px 18px; font-weight: 700; text-decoration: none; font-size: 14px; transition: filter .2s, box-shadow .2s; } .neon-btn:hover { filter: brightness(1.14); box-shadow: 0 0 20px rgba(138,43,226,.5); } .neon-btn:focus-visible { outline: 2px solid var(--n-cian); outline-offset: 2px; } .neon-btn--sm { padding: 7px 12px; font-size: 12.5px; text-align: center; } .neon-vacio { color: var(--n-txt2); } /* ── Cifras ───────────────────────────────────────────────────────────── */ .neon-cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px,1fr)); gap: 12px; background: var(--n-panel); border: 1px solid var(--n-borde); border-radius: 16px; padding: 20px 16px; text-align: center; } .neon-cifras strong { display: block; font-size: 28px; color: var(--n-cian); line-height: 1.1; } .neon-cifras span { font-size: 12.5px; color: var(--n-txt2); } /* ── Formas de pago ───────────────────────────────────────────────────── */ .neon-pagos { background: var(--n-panel); border: 1px solid var(--n-borde); border-radius: 16px; padding: 16px 0 18px; --bg: var(--n-panel); } .neon-pagos > p { margin: 0 18px 12px; font-size: 14px; color: var(--n-txt2); } .neon-pagos > p strong { color: var(--n-txt); } .neon-pago { border: 1px solid var(--n-borde); border-radius: 9px; padding: 7px 14px; font-size: 13px; color: var(--n-txt2); white-space: nowrap; background: var(--n-panel2); }