/* ============================================================ Thunder Games Store - hoja de estilos Tema oscuro unico (la marca vive en negro/azul noche). Paleta derivada del logo: negro noche, azul electrico, dorado rayo. ============================================================ */ :root { /* Fondos */ --bg: #0a0e17; --bg-2: #0c1119; --surface: #141b2b; --surface-2: #1a2236; --surface-3: #212c45; /* Lineas / bordes */ --line: #26324f; --line-soft: #1c2740; /* Marca */ --gold: #f7b733; --gold-deep: #f5851f; --volt: #2c7be5; --volt-soft: #3f8ff0; /* Texto (neutros con leve sesgo azul) */ --text: #eaeef7; --text-dim: #98a4bd; --text-mute: #63708c; /* Semantica */ --ok: #34d399; --ok-bg: rgba(52, 211, 153, 0.12); /* Formas */ --radio: 14px; --radio-sm: 10px; --radio-pill: 999px; /* Sombra */ --sombra: 0 18px 40px -18px rgba(0, 0, 0, 0.65); --sombra-hover: 0 26px 55px -20px rgba(0, 0, 0, 0.75); /* Tipografia */ --f-display: "Chakra Petch", "Segoe UI", system-ui, sans-serif; --f-body: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif; --ancho: 1180px; /* Alto real de la Barra de Anuncios (la mide script.js); 0 si esta oculta/desactivada */ --anuncios-alto: 0px; } /* ---------- Reset ligero ---------- */ * { box-sizing: border-box; } * { margin: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } /* al saltar a #cuentas, #nosotros... el header sticky no tapa el destino. Va en las secciones (scroll-margin) y no en (scroll-padding) para que escribir en el buscador del header no dispare un scroll al inicio. */ .hero, .seccion, main > section[id] { scroll-margin-top: calc(var(--anuncios-alto, 0px) + 128px); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } body { background: var(--bg); color: var(--text); font-family: var(--f-body); font-size: 1rem; line-height: 1.65; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; } :focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; } /* ---------- Utilidades de layout ---------- */ /* Solo para lectores de pantalla / SEO: no ocupa espacio ni se ve */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .contenedor { width: 100%; max-width: var(--ancho); margin-inline: auto; padding-inline: clamp(1.1rem, 4vw, 2.5rem); } .seccion { padding-block: clamp(3.5rem, 8vw, 6rem); } .seccion__intro { max-width: 640px; margin-bottom: 2.6rem; } .eyebrow { display: inline-flex; align-items: center; gap: 0.55rem; font-family: var(--f-display); font-weight: 700; font-size: clamp(1.05rem, 2.4vw, 1.35rem); letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.8rem; } h1, h2, h3, h4 { font-family: var(--f-display); font-weight: 700; line-height: 1.12; text-wrap: balance; letter-spacing: -0.01em; } .titulo { font-size: clamp(1.8rem, 4vw, 2.7rem); } .seccion__intro p:not(.eyebrow) { color: var(--text-dim); margin-top: 0.9rem; font-size: 1.05rem; } /* ---------- Botones ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; padding: 0.85rem 1.5rem; border: 1px solid transparent; border-radius: var(--radio-pill); font-family: var(--f-display); font-weight: 600; font-size: 0.95rem; letter-spacing: 0.02em; transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease; } .btn svg { width: 1.15em; height: 1.15em; flex-shrink: 0; } .btn:hover { transform: translateY(-2px); } .btn:active { transform: translateY(0); } .btn--whatsapp { background: linear-gradient(135deg, #26d366, #1aa851); color: #04220f; box-shadow: 0 12px 30px -12px rgba(38, 211, 102, 0.6); } .btn--whatsapp:hover { box-shadow: 0 18px 40px -12px rgba(38, 211, 102, 0.7); } .btn--volt { background: linear-gradient(135deg, var(--volt-soft), var(--volt)); color: #04101f; box-shadow: 0 12px 30px -14px rgba(44, 123, 229, 0.7); } .btn--ghost { background: transparent; border-color: var(--line); color: var(--text); } .btn--ghost:hover { border-color: var(--gold); color: var(--gold); } .btn--bloque { width: 100%; } .btn--sm { padding: 0.62rem 1rem; font-size: 0.85rem; } .btn--ig { background: linear-gradient(135deg, #f58529, #dd2a7b 55%, #8134af); color: #fff; box-shadow: 0 12px 30px -12px rgba(221, 42, 123, 0.6); } .btn--ig:hover { box-shadow: 0 18px 40px -12px rgba(221, 42, 123, 0.78); } /* ============================================================ Barra de Anuncios (franja fija arriba del header, opcional) ============================================================ */ .anuncios { position: sticky; top: 0; z-index: 51; /* por encima del header (50): la barra queda arriba del todo */ background: linear-gradient(90deg, var(--gold-deep), var(--gold), var(--gold-deep)); color: #241500; text-align: center; padding: 0.55rem 1rem; font-family: var(--f-display); font-weight: 700; font-size: 0.85rem; letter-spacing: 0.03em; } .anuncios[hidden] { display: none; } .anuncios--clic { cursor: pointer; } .anuncios--clic:hover, .anuncios--clic:focus-visible { background: linear-gradient(90deg, var(--gold), var(--gold-deep), var(--gold)); } .anuncios--clic:focus-visible { outline: 2px solid var(--bg); outline-offset: -4px; } .anuncios--clic:hover .anuncios__msg, .anuncios--clic:focus-visible .anuncios__msg { text-decoration: underline; } @media (max-width: 560px) { .anuncios { padding: 0.5rem 0.8rem; font-size: 0.78rem; } } /* ============================================================ Header ============================================================ */ .header { position: sticky; top: var(--anuncios-alto, 0px); /* deja sitio arriba si la Barra de Anuncios esta activa (tambien sticky) */ z-index: 50; background: rgba(10, 14, 23, 0.72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line-soft); } /* Al hacer scroll, la línea dorada del separador queda pegada al header en todas las páginas */ .header::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: linear-gradient(90deg, transparent, var(--gold) 22%, var(--gold-deep) 50%, var(--gold) 78%, transparent); box-shadow: 0 0 22px 1px rgba(247, 183, 51, 0.45); opacity: 0; transition: opacity 0.2s ease; pointer-events: none; } body.scrolleado .header::after { opacity: 1; } /* el separador decorativo de debajo del header se atenúa al hacer scroll para que no se dupliquen las líneas mientras baja hacia el header */ .separador--top { transition: opacity 0.2s ease; } body.scrolleado .separador--top { opacity: 0; } .header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.3rem; min-height: 94px; /* header a lo ancho: el logo queda pegado a la izquierda */ max-width: none; padding-block: 0.35rem; padding-left: clamp(0.7rem, 2vw, 1.4rem); padding-right: clamp(0.8rem, 2.5vw, 1.6rem); } .marca { display: flex; align-items: center; font-family: var(--f-display); font-weight: 700; line-height: 0; flex-shrink: 0; } /* Logo horizontal (emblema + THUNDER GAMES STORE), PNG transparente que se funde con el tema oscuro. Se dimensiona por la ALTURA; el ancho es proporcional. */ .marca img { width: auto; height: 92px; object-fit: contain; background: transparent; } .header .marca img { height: 80px; } .nav { display: flex; align-items: center; gap: 0.9rem; } .nav__links { display: flex; gap: 1.6rem; list-style: none; font-family: var(--f-display); font-weight: 500; font-size: 0.92rem; } .nav__links a { color: var(--text-dim); transition: color 0.18s ease; padding-block: 0.4rem; } .nav__links a:hover { color: var(--text); } /* ---------- Submenu de "Catalogo" (Juegos PS4 / PS5 / Xbox) ---------- */ .nav__has-sub { position: relative; } .nav__has-sub > a { padding-block: 1.1rem; } /* area de hover alta hasta el submenu */ .nav__sub { display: none; position: absolute; top: 100%; left: 0; min-width: 190px; margin: 0; padding: 6px; list-style: none; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radio-sm); box-shadow: var(--sombra); z-index: 40; } .nav__has-sub:hover .nav__sub, .nav__has-sub:focus-within .nav__sub { display: block; } .nav__sub li { border: 0; } .nav__sub a { display: block; padding: 0.55rem 0.75rem; border-radius: 6px; font-size: 0.85rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-dim); white-space: nowrap; } .nav__sub a:hover { background: var(--surface-3); color: var(--gold); } .nav__toggle { display: none; background: transparent; border: 1px solid var(--line); border-radius: var(--radio-sm); padding: 0.5rem; color: var(--text); } .nav__toggle svg { width: 22px; height: 22px; } /* ---------- Buscador de juegos ---------- */ .buscador { position: relative; flex: 1 1 220px; min-width: 0; max-width: 440px; } .buscador__icono { position: absolute; left: 0.85rem; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--text-mute); pointer-events: none; } .buscador__input { width: 100%; height: 42px; padding: 0 2.4rem 0 2.6rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radio-pill); color: var(--text); font: inherit; font-size: 0.92rem; appearance: none; -webkit-appearance: none; transition: border-color 0.16s ease, background 0.16s ease; } .buscador__input::placeholder { color: var(--text-mute); } .buscador__input::-webkit-search-cancel-button { display: none; } .buscador__input:focus { outline: none; border-color: var(--gold); background: var(--surface-2); } .buscador__limpiar { position: absolute; right: 0.5rem; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; display: grid; place-items: center; border: none; border-radius: 50%; background: transparent; color: var(--text-dim); } .buscador__limpiar:hover { color: var(--text); background: var(--surface-3); } .buscador__limpiar svg { width: 15px; height: 15px; } .buscador__lista { position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 20; margin: 0; padding: 8px; list-style: none; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radio); box-shadow: var(--sombra); min-width: min(360px, 88vw); max-width: 92vw; max-height: min(74vh, 560px); overflow-y: auto; } .buscador__item { display: flex; align-items: center; gap: 0.9rem; padding: 0.65rem 0.6rem; border-radius: var(--radio-sm); cursor: pointer; } .buscador__item.is-activo, .buscador__item:hover { background: var(--surface-3); } .buscador__thumb { flex-shrink: 0; width: 58px; aspect-ratio: 22 / 25; /* misma proporción que las carátulas (880×1000) */ border-radius: 0; /* portada con puntas, no redondeada */ overflow: hidden; background: var(--surface-3); border: 1px solid var(--line-soft); } .buscador__thumb img { width: 100%; height: 100%; object-fit: cover; /* llena sin deformar la imagen */ display: block; } .buscador__info { min-width: 0; display: flex; flex-direction: column; gap: 3px; } .buscador__nom { font-family: var(--f-display); font-weight: 600; font-size: 1rem; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .buscador__meta { font-size: 0.82rem; color: var(--text-dim); } .buscador__vacio { padding: 0.9rem 0.6rem; color: var(--text-dim); font-size: 0.9rem; text-align: center; } /* Fila "Ver los N resultados" al pie del desplegable */ .buscador__todos { margin-top: 4px; padding: 0.65rem 0.6rem; border-top: 1px solid var(--line-soft); color: var(--gold); font-family: var(--f-display); font-weight: 600; font-size: 0.85rem; cursor: pointer; border-radius: var(--radio-sm); } .buscador__todos:hover, .buscador__todos.is-activo { background: var(--surface-3); } /* ============================================================ Pagina de resultados de busqueda (#buscar=...) Es una seccion normal: el header y el footer del sitio se mantienen visibles; solo se oculta el
de la tienda. ============================================================ */ .resultados[hidden] { display: none; } body.con-resultados > main { display: none; } /* el separador de debajo del header se mantiene en TODAS las páginas (búsqueda y catálogos incluidos); solo se oculta el
de la tienda */ .resultados { min-height: 70vh; background: radial-gradient(900px 500px at 80% -10%, rgba(44, 123, 229, 0.16), transparent 60%), var(--bg); } .resultados__volver { display: inline-flex; align-items: center; gap: 0.4rem; margin-bottom: 1.4rem; padding: 0.5rem 0.9rem; border: 1px solid var(--line); border-radius: var(--radio-pill); background: var(--surface); color: var(--text); font-family: var(--f-display); font-weight: 600; font-size: 0.88rem; } .resultados__volver:hover { border-color: var(--gold); color: var(--gold); } .resultados__volver svg { width: 15px; height: 15px; } .resultados__head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.9rem 1.4rem; margin-bottom: 1.6rem; } .resultados__wa[hidden] { display: none; } .resultados__wa { flex-shrink: 0; } .resultados__titulo { font-size: clamp(1.3rem, 3.5vw, 2rem); } .resultados__titulo span { color: var(--text-dim); font-family: var(--f-body); font-weight: 500; font-size: 0.62em; } .resultados__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); } @media (max-width: 480px) { .resultados__grid { grid-template-columns: repeat(2, 1fr); } } /* Página de Suscripciones: en vez de rejilla, apila carruseles (ESSENTIAL/EXTRA/DELUXE) */ .resultados__grid--carruseles { display: block; } .resultados__grid--carruseles .carrusel:first-of-type { margin-top: 0; } /* Si las tarjetas de un nivel caben sin desbordar, se centran en el carril */ .resultados__grid--carruseles .carrusel--estatico .carrusel__track { justify-content: center; } .resultados__grid--carruseles .carrusel--estatico .carrusel__head { text-align: center; } /* Contenedor ancho como el del catálogo -> las tarjetas salen del mismo tamaño que en la portada */ .resultados--ancho .resultados__cont { max-width: min(97vw, 2100px); padding-inline: clamp(0.75rem, 2.2vw, 1.6rem); } .resultados__vacio { display: flex; flex-direction: column; align-items: flex-start; gap: 1.1rem; color: var(--text-dim); font-size: 1.02rem; } .resultados__vacio b { color: var(--text); } /* ---------- Paginación de las páginas de catálogo (Juegos PS4 / PS5 / Xbox) ---------- */ .resultados__pager { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.4rem; margin-top: clamp(1.6rem, 3vw, 2.4rem); } .resultados__pager[hidden] { display: none; } .resultados__pag { min-width: 2.5rem; padding: 0.5rem 0.7rem; border-radius: var(--radio-sm); border: 1px solid var(--line); background: var(--surface-2); color: var(--text); font-family: var(--f-display); font-weight: 600; font-size: 0.92rem; line-height: 1; cursor: pointer; transition: border-color 0.15s ease, color 0.15s ease; } .resultados__pag:hover { border-color: var(--gold); color: var(--gold); } .resultados__pag.is-activa { background: linear-gradient(135deg, var(--gold), var(--gold-deep)); border-color: transparent; color: #241500; cursor: default; } .resultados__pag:disabled { opacity: 0.35; cursor: default; border-color: var(--line); color: var(--text); } .resultados__pag-gap { padding: 0 0.15rem; color: var(--text-dim); align-self: center; } /* ---------- Selector de moneda (USD / VES) ---------- */ .moneda-sel { display: inline-flex; border: 1px solid var(--line); border-radius: var(--radio-pill); overflow: hidden; background: var(--surface); } .moneda-sel[hidden] { display: none; } .moneda-sel__btn { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.7rem; background: transparent; border: 0; color: var(--text-dim); font-family: var(--f-display); font-weight: 600; font-size: 0.82rem; letter-spacing: 0.03em; transition: background 0.18s ease, color 0.18s ease; } .moneda-sel__btn + .moneda-sel__btn { border-left: 1px solid var(--line); } .moneda-sel__btn:hover { color: var(--text); } .moneda-sel__btn.is-activa { background: linear-gradient(135deg, var(--gold), var(--gold-deep)); color: #241500; } .moneda-sel .bandera { width: 20px; height: 14px; border-radius: 2px; flex-shrink: 0; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2); } @media (max-width: 560px) { .moneda-sel__btn span { display: none; } .moneda-sel__btn { padding: 0.4rem 0.55rem; } } /* ============================================================ Hero ============================================================ */ .hero { position: relative; overflow: hidden; min-height: clamp(180px, 34vh, 340px); background: radial-gradient(900px 500px at 78% -10%, rgba(44, 123, 229, 0.28), transparent 60%), radial-gradient(700px 500px at 5% 110%, rgba(247, 183, 51, 0.14), transparent 55%), var(--bg); } /* ---------- Separador entre el hero y el catalogo ---------- */ .separador { position: relative; height: 2px; background: linear-gradient(90deg, transparent, var(--gold) 22%, var(--gold-deep) 50%, var(--gold) 78%, transparent); box-shadow: 0 0 22px 1px rgba(247, 183, 51, 0.45); } .separador::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; transform: translate(-50%, -50%) rotate(45deg); background: var(--gold-deep); box-shadow: 0 0 14px 2px rgba(245, 133, 31, 0.6); } /* Separador antes del footer en las páginas de catálogo/búsqueda/ofertas (el
y su separador quedan ocultos con body.con-resultados) */ .separador--resultados { display: none; } body.con-resultados .separador--resultados { display: block; } .hero__bolt { position: absolute; inset: 0; pointer-events: none; opacity: 0.5; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cpath d='M66 8 40 62h20l-8 50 34-62H64z' fill='none' stroke='%23f5851f' stroke-width='2'/%3E%3C/svg%3E"); background-size: 240px; mask-image: linear-gradient(180deg, transparent, #000 40%, transparent); -webkit-mask-image: linear-gradient(180deg, transparent, #000 40%, transparent); animation: hero-rayos 14s linear infinite; } /* Los rayos del fondo del hero bajan lentamente en bucle */ @keyframes hero-rayos { from { background-position: 0 0; } to { background-position: 0 240px; } } @media (prefers-reduced-motion: reduce) { .hero__bolt { animation: none; } .hero.hero--movil #hero-slider-movil .hero__slide { transition: opacity 0.25s ease; } } /* --- Diapositivas del hero (escritorio / movil) --- */ .hero__slider { display: none; position: absolute; inset: 0; pointer-events: none; } .hero__slide { position: absolute; inset: 0; opacity: 0; transition: opacity 0.9s ease; } .hero__slide.is-active { opacity: 1; } .hero__slide-pic { position: absolute; inset: 0; background-position: center; background-repeat: no-repeat; background-size: cover; /* la imagen llena todo el hero, de borde a borde */ } /* Flechas laterales */ .hero__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 4; pointer-events: auto; width: 48px; height: 48px; display: grid; place-items: center; border: none; border-radius: 50%; background: rgba(10, 14, 23, 0.5); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); color: #fff; cursor: pointer; transition: background 0.18s ease, transform 0.12s ease; } .hero__nav:hover { background: rgba(10, 14, 23, 0.82); } .hero__nav:active { transform: translateY(-50%) scale(0.88); } .hero__nav svg { width: 22px; height: 22px; } .hero__nav--prev { left: 1.5rem; } .hero__nav--next { right: 1.5rem; } /* Puntos indicadores (abajo, centrados) */ .hero__dots { position: absolute; left: 50%; bottom: 1.5rem; transform: translateX(-50%); z-index: 4; pointer-events: auto; display: flex; gap: 0.55rem; } .hero__dot { width: 10px; height: 10px; padding: 0; border: none; border-radius: 50%; background: rgba(255, 255, 255, 0.45); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4); cursor: pointer; transition: background 0.2s ease, transform 0.2s ease; } .hero__dot:hover { background: rgba(255, 255, 255, 0.75); } .hero__dot.is-active { background: var(--gold); transform: scale(1.3); } @media (min-width: 901px) { .hero { min-height: 0; aspect-ratio: 1920 / 600; /* banda ancha: imagenes de 1920x600 */ max-height: 90vh; } #hero-slider { display: block; } /* slider de escritorio */ .hero__bolt { display: none; } } /* Slider de movil: solo en pantallas pequenas y solo si hay imagenes cargadas (script.js pone .hero--movil cuando construye ese slider) */ @media (max-width: 900px) { .hero.hero--movil { min-height: 0; aspect-ratio: 1080 / 1440; /* imagenes verticales de 1080x1440 (3:4) */ max-height: 88vh; } .hero.hero--movil #hero-slider-movil { display: block; overflow: hidden; } .hero.hero--movil .hero__bolt { display: none; } /* Transición de deslizamiento lateral (swipe / flechas) — la mueve script.js */ .hero.hero--movil #hero-slider-movil .hero__slide { transition: transform 0.5s cubic-bezier(0.33, 0, 0.2, 1), opacity 0.5s ease; will-change: transform, opacity; } /* Flechas y puntos algo mas compactos para el hero vertical de movil */ .hero.hero--movil .hero__nav { width: 40px; height: 40px; } .hero.hero--movil .hero__nav svg { width: 19px; height: 19px; } .hero.hero--movil .hero__nav--prev { left: 0.7rem; } .hero.hero--movil .hero__nav--next { right: 0.7rem; } .hero.hero--movil .hero__dots { bottom: 1rem; } } /* ============================================================ Catalogo (carruseles "Los mas vendidos") ============================================================ */ /* Catalogo casi a pantalla completa: caben 8 tarjetas grandes por pagina */ #catalogo > .contenedor { max-width: min(97vw, 2100px); padding-inline: clamp(0.75rem, 2.2vw, 1.6rem); position: relative; } /* Fondo animado de rayos detras de los carruseles (baja lentamente en bucle) */ #catalogo { position: relative; isolation: isolate; } #catalogo::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0.38; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cpath d='M66 8 40 62h20l-8 50 34-62H64z' fill='none' stroke='%23f5851f' stroke-width='2'/%3E%3C/svg%3E"); background-size: 240px; mask-image: linear-gradient(180deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(180deg, transparent, #000 8%, #000 92%, transparent); animation: hero-rayos 16s linear infinite; } @media (prefers-reduced-motion: reduce) { #catalogo::before { animation: none; } } .carrusel { margin-top: 2.8rem; } .carrusel:first-of-type { margin-top: 0; } .carrusel[hidden] { display: none; } .carrusel__head { margin-bottom: 1.3rem; } .carrusel__titulo { font-size: clamp(1.35rem, 3vw, 2rem); text-transform: uppercase; letter-spacing: 0.05em; } /* Zona con las flechas a los lados (fuera de las tarjetas) y el track en el centro */ .carrusel__viewport { position: relative; padding-inline: 52px; } .carrusel__btn { position: absolute; top: calc(50% - 11px); /* centrado sobre las portadas (el track tiene mas padding abajo) */ transform: translateY(-50%); z-index: 5; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--text); box-shadow: var(--sombra); transition: transform 0.11s ease, background 0.15s ease, border-color 0.15s ease, color 0.15s ease, opacity 0.2s ease; } .carrusel__btn--prev { left: 0; } .carrusel__btn--next { right: 0; } .carrusel__btn svg { width: 19px; height: 19px; } .carrusel__btn:hover:not(:disabled) { border-color: var(--gold); color: var(--gold); background: var(--surface-2); } /* Efecto de pulsacion */ .carrusel__btn:active:not(:disabled) { transform: translateY(-50%) scale(0.82); background: linear-gradient(135deg, var(--gold), var(--gold-deep)); border-color: transparent; color: #241500; box-shadow: 0 4px 14px -6px rgba(247, 183, 51, 0.7); } .carrusel__btn:disabled { opacity: 0.28; pointer-events: none; } /* Aunque un carrusel no desborde (pocos juegos) mantenemos las flechas y los canales laterales: todos los carruseles se ven igual (mismas flechas, mismo tamano de tarjeta). Las flechas quedan atenuadas por :disabled. */ @media (max-width: 560px) { /* En movil se navega con swipe: sin flechas ni margen lateral */ .carrusel__viewport { padding-inline: 0; } .carrusel__btn { display: none; } } .carrusel__track { --gap: 1.3rem; --vis: 9; display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - (var(--vis) - 1) * var(--gap)) / var(--vis)); gap: var(--gap); overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 12px 6px 36px; margin-inline: -6px; scrollbar-width: none; -ms-overflow-style: none; } .carrusel__track::-webkit-scrollbar { display: none; } .carrusel__track > .card { scroll-snap-align: start; } .carrusel__track:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; } @media (max-width: 1700px) { .carrusel__track { --vis: 8; } } @media (max-width: 1480px) { .carrusel__track { --vis: 7; } } @media (max-width: 1240px) { .carrusel__track { --vis: 5.5; } } @media (max-width: 1000px) { .carrusel__track { --vis: 4.5; } } @media (max-width: 760px) { .carrusel__track { --vis: 3.15; } } @media (max-width: 560px) { .carrusel__track { --vis: 2.45; --gap: 0.8rem; } } @media (max-width: 400px) { .carrusel__track { --vis: 2; } } .card { display: flex; flex-direction: column; /* leve degradado (luz desde arriba) para que la tarjeta "levante" del fondo */ background: linear-gradient(180deg, var(--surface-2), var(--surface) 62%); border: 1px solid var(--line-soft); border-top-color: var(--line); border-radius: 0; /* tarjetas con puntas, no redondeadas */ overflow: hidden; cursor: pointer; -webkit-tap-highlight-color: transparent; /* sin flash gris/azul al tocar en móvil */ /* relieve en reposo: filo superior iluminado + sombra de contacto + sombra proyectada */ box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 2px 6px -3px rgba(0, 0, 0, 0.55), 0 16px 34px -16px rgba(0, 0, 0, 0.7); transition: transform 0.18s ease, box-shadow 0.22s ease, border-color 0.2s ease; } /* El "levantar + brillo azul" solo en dispositivos con puntero real: en táctil el :hover se queda pegado tras el toque y se veía un destello de la tarjeta detrás del popup del producto. */ @media (hover: hover) { .card:hover { transform: translateY(-4px); border-color: var(--line); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 8px 18px -8px rgba(0, 0, 0, 0.6), 0 30px 60px -22px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(63, 143, 240, 0.16); } } .card__media { position: relative; aspect-ratio: 22 / 25; /* proporcion de las caratulas (880 x 1000) - sin franjas */ background: linear-gradient(135deg, var(--surface-3), var(--surface-2)); overflow: hidden; } /* Fondo desenfocado con la misma imagen: rellena sin recortar la caratula */ .card__media-bg { position: absolute; inset: 0; background-size: cover; background-position: center; filter: blur(22px) brightness(0.5); transform: scale(1.25); z-index: 1; } .card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; /* la caratula se ve completa */ z-index: 2; } .card__media .fallback { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 1rem 1.2rem; font-family: var(--f-display); font-weight: 600; color: var(--text-mute); font-size: 0.9rem; line-height: 1.3; letter-spacing: 0.02em; } .card__body { display: flex; flex-direction: column; gap: 0.7rem; padding: 1.1rem 1.1rem 1.25rem; flex: 1; } .card__titulo { font-size: 1.08rem; line-height: 1.25; flex: 1; } .precios { display: flex; flex-direction: column; gap: 0.4rem; padding-top: 0.3rem; } .precio-fila { display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem; padding: 0.5rem 0.7rem; border-radius: var(--radio-sm); background: var(--surface-2); border: 1px solid var(--line-soft); } .precio-fila__modo { display: flex; align-items: center; gap: 0.45rem; font-family: var(--f-display); font-weight: 600; font-size: 0.8rem; letter-spacing: 0.03em; } .punto { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; } .punto--principal { background: var(--gold); } .punto--secundaria { background: var(--volt-soft); } .precio-fila__valor { font-family: var(--f-display); font-weight: 700; font-variant-numeric: tabular-nums; font-size: 0.98rem; } .precio-unico { font-family: var(--f-display); font-weight: 700; font-size: 1.35rem; font-variant-numeric: tabular-nums; color: var(--gold); } .precio-desde { font-size: 0.62em; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-dim); } /* ----- Descuentos: burbuja sobre la imagen, abajo a la izquierda ----- */ .badge-desc { position: absolute; bottom: 0.75rem; left: 0.75rem; z-index: 3; padding: 0.3rem 0.62rem; border-radius: var(--radio-pill); font-family: var(--f-display); font-weight: 700; font-size: 0.74rem; letter-spacing: 0.03em; color: #241500; background: linear-gradient(135deg, var(--gold), var(--gold-deep)); box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.45); } /* ----- Oferta: burbuja abajo a la izquierda, sin % y sin tocar el precio ----- */ .badge-oferta { position: absolute; bottom: 0.75rem; left: 0.75rem; z-index: 3; padding: 0.3rem 0.66rem; border-radius: var(--radio-pill); font-family: var(--f-display); font-weight: 700; font-size: 0.74rem; letter-spacing: 0.07em; text-transform: uppercase; color: #04210f; background: linear-gradient(135deg, #2fe08a, #16b46b); box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.45); } .mp__media .badge-oferta { bottom: 1rem; left: 1rem; } /* Si además hay burbuja de descuento, la de "OFERTA" se apila encima */ .card__media:has(.badge-desc) .badge-oferta { bottom: calc(0.75rem + 2rem); } .mp__media:has(.badge-desc) .badge-oferta { bottom: calc(1rem + 2rem); } .card--agotado .badge-oferta, .mp--agotado .badge-oferta { display: none; } /* ----- Promo "Compra 2, lleva 1 gratis" (pagina de la Barra de Anuncios) ----- */ .promo-barra { display: grid; gap: 0.5rem; padding: 0.75rem 0.95rem; border: 1px solid var(--line); border-radius: var(--radio-sm); background: var(--surface); } .promo-barra[hidden] { display: none; } .promo-barra__texto { font-family: var(--f-display); font-weight: 600; font-size: 0.9rem; color: var(--text); } .promo-barra__pista { height: 10px; border-radius: var(--radio-pill); background: var(--surface-3); overflow: hidden; } .promo-barra__fill { height: 100%; width: 0; border-radius: var(--radio-pill); background: linear-gradient(90deg, var(--gold), var(--gold-deep)); transition: width 0.35s ease; } .promo-barra--pagina { margin-bottom: 1.8rem; } .mp__promo { margin: 0.2rem 0 0.4rem; } /* ----- Ficha: descripcion + peso del juego ----- */ .mp__desc { display: grid; gap: 0.5rem; margin: 0.1rem 0 0.2rem; } .mp__desc[hidden] { display: none; } .mp__desc-p { color: var(--text-dim); font-size: 0.92rem; line-height: 1.55; } .mp__desc-peso { font-size: 0.9rem; color: var(--text); } .mp__desc-peso strong { color: var(--gold); font-family: var(--f-display); font-weight: 700; } .promo-seccion { margin-bottom: 2.6rem; } .promo-seccion__tit { font-size: clamp(1.05rem, 2.6vw, 1.4rem); margin-bottom: 0.9rem; } .promo-seccion__lock, .promo-seccion__vacio { color: var(--text-dim); font-size: 0.95rem; margin-bottom: 1rem; } .promo-seccion--regalo .resultados__grid { transition: opacity 0.25s ease, filter 0.25s ease; } .promo-seccion--regalo:not(.promo-seccion--abierta) .resultados__grid { opacity: 0.45; pointer-events: none; filter: grayscale(0.7); } .badge-gratis { position: absolute; bottom: 0.75rem; left: 0.75rem; z-index: 3; padding: 0.3rem 0.66rem; border-radius: var(--radio-pill); font-family: var(--f-display); font-weight: 700; font-size: 0.74rem; letter-spacing: 0.05em; text-transform: uppercase; color: #04210f; background: linear-gradient(135deg, #2fe08a, #16b46b); box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.45); } .mp__media .badge-gratis { bottom: 1rem; left: 1rem; } .precio-gratis { color: #2fe08a !important; font-weight: 800; letter-spacing: 0.04em; } .carrito__item--gratis { position: relative; } .carrito__precio--gratis { color: #2fe08a; font-weight: 800; } /* ----- Agotado ----- */ .badge-agotado { position: absolute; top: 0.75rem; right: 0.75rem; z-index: 3; padding: 0.3rem 0.62rem; border-radius: var(--radio-pill); font-family: var(--f-display); font-weight: 700; font-size: 0.74rem; letter-spacing: 0.06em; color: #fff; background: #b02a2a; box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.5); } .badge-agotado--mp { top: 1rem; left: 1rem; right: auto; } .card--agotado .card__media img, .card--agotado .card__media-bg { filter: grayscale(0.85) brightness(0.7); } .card--agotado .precio-unico { opacity: 0.55; } /* Enlace final "Ver catálogo completo" de los carruseles "Los más vendidos". Sin fondo, borde ni sombra: solo el texto (con una flecha), centrado en el hueco. */ .card--vermas { align-items: center; justify-content: center; text-align: center; padding: 1rem 0.6rem; background: none; border: 0; box-shadow: none; } .card--vermas__txt { display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--f-display); font-weight: 700; font-size: 1rem; line-height: 1.3; color: var(--gold); letter-spacing: 0.01em; } .card--vermas__flecha { flex-shrink: 0; display: inline-grid; place-items: center; transition: transform 0.18s ease; } .card--vermas__flecha svg { width: 18px; height: 18px; } @media (hover: hover) { .card--vermas:hover { transform: none; border: 0; box-shadow: none; } .card--vermas:hover .card--vermas__txt { text-decoration: underline; text-underline-offset: 3px; } .card--vermas:hover .card--vermas__flecha { transform: translateX(3px); } } @media (max-width: 560px) { .card--vermas__txt { font-size: 0.9rem; } } .mp--agotado .mp__media img, .mp--agotado .mp__media-bg { filter: grayscale(0.85) brightness(0.7); } #mp-add:disabled { opacity: 0.45; cursor: not-allowed; } .precio-fila__valor.con-descuento { display: inline-flex; align-items: baseline; flex-wrap: wrap; justify-content: flex-end; gap: 0.4rem; } .precio-unico.con-descuento { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.5rem; } .precio-antes { color: var(--text-mute); text-decoration: line-through; font-weight: 600; font-size: 0.8em; } .precio-ahora { color: var(--gold); } .catalogo__vacio { grid-column: 1 / -1; text-align: center; color: var(--text-mute); padding: 3rem 1rem; font-family: var(--f-display); } /* ============================================================ Como funcionan las cuentas ============================================================ */ .cuentas { background: var(--bg-2); border-block: 1px solid var(--line-soft); } .cuentas__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; margin-bottom: 1.6rem; } .cuenta { position: relative; background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radio); padding: 1.7rem 1.6rem; overflow: hidden; transition: transform 0.18s ease, box-shadow 0.18s ease; } /* Banda de color arriba de cada tarjeta */ .cuenta::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; } .cuenta:hover { transform: translateY(-3px); } .cuenta--principal { border-color: rgba(247, 183, 51, 0.38); background: linear-gradient(180deg, rgba(247, 183, 51, 0.10), transparent 42%), var(--surface); box-shadow: 0 20px 45px -26px rgba(247, 183, 51, 0.4); } .cuenta--principal::before { background: linear-gradient(90deg, var(--gold), var(--gold-deep)); } .cuenta--principal:hover { box-shadow: 0 28px 58px -22px rgba(247, 183, 51, 0.55); } .cuenta--secundaria { border-color: rgba(63, 143, 240, 0.38); background: linear-gradient(180deg, rgba(44, 123, 229, 0.12), transparent 42%), var(--surface); box-shadow: 0 20px 45px -26px rgba(44, 123, 229, 0.4); } .cuenta--secundaria::before { background: linear-gradient(90deg, var(--volt), var(--volt-soft)); } .cuenta--secundaria:hover { box-shadow: 0 28px 58px -22px rgba(44, 123, 229, 0.55); } .cuenta__tag { display: inline-block; font-family: var(--f-display); font-size: clamp(0.95rem, 2.2vw, 1.15rem); font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.55rem 1.1rem; border-radius: var(--radio-pill); margin-bottom: 0.9rem; } .cuenta--principal .cuenta__tag { background: linear-gradient(135deg, var(--gold), var(--gold-deep)); color: #241500; } .cuenta--secundaria .cuenta__tag { background: linear-gradient(135deg, var(--volt), var(--volt-soft)); color: #04121f; } .cuenta ul { list-style: none; margin-top: 0.5rem; display: flex; flex-direction: column; gap: 1rem; } .cuenta li { display: flex; gap: 0.7rem; font-size: 1.02rem; line-height: 1.45; color: #fff; font-weight: 600; } .cuenta li strong { font-weight: 700; color: #fff; } .cuenta li svg { width: 1.2rem; height: 1.2rem; flex-shrink: 0; margin-top: 0.15rem; } .cuenta--principal li svg { color: var(--gold); } .cuenta--secundaria li svg { color: var(--volt-soft); } .cuentas__cta { display: flex; align-items: center; flex-wrap: wrap; gap: 0.8rem 1.2rem; padding: 1.1rem 1.3rem; border-radius: var(--radio); border: 1px solid rgba(38, 211, 102, 0.3); background: linear-gradient(135deg, rgba(38, 211, 102, 0.12), transparent 62%), var(--surface); } .cuentas__cta-icono { width: 30px; height: 30px; flex-shrink: 0; color: #26d366; } .cuentas__cta p { flex: 1 1 220px; margin: 0; font-size: 1rem; color: var(--text-dim); } .cuentas__cta p strong { color: var(--text); } .cuentas__cta .btn { flex-shrink: 0; } @media (max-width: 560px) { .cuentas__cta .btn { width: 100%; justify-content: center; } } /* ============================================================ Quienes somos ============================================================ */ /* Fondo animado de rayos detras de "Quienes somos" (igual que el hero / catalogo) */ #nosotros { position: relative; isolation: isolate; } #nosotros::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0.34; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cpath d='M66 8 40 62h20l-8 50 34-62H64z' fill='none' stroke='%23f5851f' stroke-width='2'/%3E%3C/svg%3E"); background-size: 240px; mask-image: linear-gradient(180deg, transparent, #000 10%, #000 90%, transparent); -webkit-mask-image: linear-gradient(180deg, transparent, #000 10%, #000 90%, transparent); animation: hero-rayos 16s linear infinite; } @media (prefers-reduced-motion: reduce) { #nosotros::before { animation: none; } } .nosotros__grid { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; } .nosotros p:not(.eyebrow) { color: #fff; } .nosotros p + p { margin-top: 1rem; } .stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; } .stat { background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radio); padding: 1.3rem; text-align: center; text-transform: uppercase; } .stat b { display: block; font-family: var(--f-display); font-size: 1.6rem; color: var(--gold); } .stat span { display: block; margin-top: 0.3rem; font-size: 0.82rem; letter-spacing: 0.06em; color: var(--text-dim); } /* ============================================================ Contacto ============================================================ */ .contacto { background: var(--bg-2); border-block: 1px solid var(--line-soft); } .contacto__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; } .contacto__cta { display: flex; flex-direction: column; background: linear-gradient(160deg, var(--surface-2), var(--surface)); border: 1px solid var(--line); border-radius: var(--radio); padding: 2rem; } .contacto__cta .btn { margin-top: auto; } .contacto__cta h3 { font-size: 1.35rem; margin-bottom: 0.6rem; } .contacto__cta p { color: var(--text-dim); margin-bottom: 1.4rem; font-size: 0.95rem; } .contacto__lista { display: flex; flex-direction: column; gap: 1rem; } /* La última tarjeta (Instagram) se estira para que la columna llegue hasta abajo, a la misma altura que la tarjeta de WhatsApp de al lado */ .contacto__lista .contacto__item:last-child { flex: 1 1 auto; } .contacto__item { display: flex; align-items: center; gap: 0.9rem; padding: 1rem 1.1rem; border-radius: var(--radio-sm); background: var(--surface); border: 1px solid var(--line-soft); transition: border-color 0.18s ease; } .contacto__item:hover { border-color: var(--gold); } .contacto__item svg { width: 1.3rem; height: 1.3rem; color: var(--gold); flex-shrink: 0; } .contacto__item span { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-mute); display: block; } .contacto__item b { font-family: var(--f-display); font-weight: 600; font-size: 0.98rem; word-break: break-word; } /* Tarjeta de Instagram: icono + usuario a la izquierda arriba, botón abajo a lo ancho */ .contacto__item--ig { flex-direction: column; align-items: stretch; gap: 1rem; /* el padding inferior iguala al de la tarjeta de WhatsApp (2rem) para que el botón "Abrir Instagram" quede a la misma altura que "Abrir WhatsApp" */ padding: 1.1rem 1.1rem 2rem; } .contacto__item--ig .contacto__item__head { display: flex; align-items: center; justify-content: flex-start; gap: 0.9rem; } .contacto__item--ig:hover { border-color: var(--line-soft); } .contacto__item--ig .btn { margin-top: auto; } .contacto__item--ig .btn svg { width: 1.15em; height: 1.15em; color: currentColor; } .redes-vacias { font-size: 0.85rem; color: var(--text-mute); } /* ============================================================ Footer ============================================================ */ .footer { background: var(--bg); border-top: 1px solid var(--line-soft); padding-block: 3rem 2rem; } .footer__top { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2rem; padding-bottom: 2rem; border-bottom: 1px solid var(--line-soft); } .footer__marca p { color: var(--text-mute); font-size: 0.88rem; margin-top: 0.8rem; max-width: 32ch; } .footer h4 { font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 0.9rem; } .footer__top > div:not(.footer__marca) { text-align: center; } .footer ul { list-style: none; display: flex; flex-direction: column; gap: 0.55rem; margin: 0; padding: 0; } .footer__top > div:not(.footer__marca) ul { align-items: center; } .footer ul a { color: var(--text-mute); font-size: 0.9rem; } .footer ul a:hover { color: var(--gold); } .footer__bottom { display: flex; justify-content: center; text-align: center; flex-wrap: wrap; gap: 0.6rem; padding-top: 1.5rem; font-size: 0.82rem; color: var(--text-mute); } /* ============================================================ Banner de cookies ============================================================ */ .cookies { position: fixed; left: 50%; bottom: 1.2rem; transform: translateX(-50%); z-index: 60; width: min(680px, calc(100% - 2rem)); display: flex; align-items: center; gap: 1rem; padding: 1rem 1.2rem; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radio); box-shadow: var(--sombra); } .cookies[hidden] { display: none; } .cookies p { font-size: 0.85rem; color: var(--text-dim); flex: 1; } .cookies a { color: var(--gold); } .cookies__acciones { display: flex; gap: 0.5rem; flex-shrink: 0; } /* ============================================================ Modal (politica de privacidad / cookies) ============================================================ */ .modal { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 1.5rem; background: rgba(4, 7, 12, 0.7); backdrop-filter: blur(4px); } .modal[hidden] { display: none; } .modal__caja { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radio); max-width: 620px; width: 100%; max-height: 82vh; overflow-y: auto; padding: 2rem; box-shadow: var(--sombra-hover); } .modal__caja h3 { font-size: 1.4rem; margin-bottom: 1rem; color: #fff; } .modal__caja h4 { margin: 1.3rem 0 0.4rem; color: #fff; font-size: 0.95rem; letter-spacing: 0; text-transform: none; } .modal__caja p { font-size: 0.9rem; color: var(--text-dim); margin-top: 0.5rem; line-height: 1.6; overflow-wrap: break-word; } .modal__cerrar { float: right; background: transparent; border: 1px solid var(--line); border-radius: var(--radio-sm); color: var(--text-dim); width: 34px; height: 34px; font-size: 1.2rem; line-height: 1; } .modal__cerrar:hover { color: var(--text); border-color: var(--gold); } /* ----- Menú de métodos de pago ----- */ #modal-pago { z-index: 100; } /* por encima del carrito (90) y la ficha (80) */ .modal__caja--pago { max-width: 400px; text-align: center; } .modal__caja--pago h3 { margin-bottom: 0.4rem; } .pago__sub { color: var(--text-dim); font-size: 0.92rem; margin: 0 0 1.5rem; } .pago__lista { display: flex; flex-direction: column; gap: 0.6rem; } .pago__btn { width: 100%; padding: 0.95rem 1rem; border: 1px solid var(--line); border-radius: var(--radio-sm); background: var(--surface-2); color: var(--text); font-family: var(--f-display); font-weight: 600; font-size: 1rem; letter-spacing: 0.01em; transition: border-color 0.15s ease, background 0.15s ease, transform 0.1s ease; } .pago__btn:hover { border-color: var(--gold); background: var(--surface-3); color: var(--gold); } .pago__btn:active { transform: scale(0.98); } /* ----- Modal de ficha de producto ----- */ .modal__caja--producto { position: relative; max-width: 920px; padding: 0; } .mp { display: grid; grid-template-columns: 40% 1fr; } .mp__media { position: relative; aspect-ratio: 22 / 25; /* misma proporcion que las caratulas - sin franjas */ align-self: start; background: linear-gradient(135deg, var(--surface-3), var(--surface-2)); overflow: hidden; } .mp__media-bg { position: absolute; inset: 0; background-size: cover; background-position: center; filter: blur(28px) brightness(0.5); transform: scale(1.25); z-index: 1; } .mp__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; /* la caratula se ve completa, sin recortes */ display: block; z-index: 2; } .mp__fallback { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 1.5rem; font-family: var(--f-display); font-weight: 700; color: var(--text-mute); } .mp__info { padding: 2rem; display: flex; flex-direction: column; gap: 0.85rem; } .modal__caja--producto .mp__titulo { margin: 0; font-size: 1.55rem; } .mp__precios { display: flex; flex-direction: column; gap: 0.4rem; } /* Precio dentro de la ficha: mas grande que en las tarjetas */ .mp__precios .precio-unico { font-size: 2.15rem; line-height: 1.1; } .mp__precios .precio-antes { font-size: 0.55em; } /* Selectores de consola y licencia */ .mp__opciones { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; } .mp__opciones[hidden] { display: none; } @media (max-width: 500px) { .mp__opciones { grid-template-columns: 1fr; } } .mp__campo { display: flex; flex-direction: column; gap: 0.4rem; } .mp__campo > span { font-family: var(--f-display); font-weight: 600; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim); } .mp__campo select { width: 100%; padding: 0.7rem 2rem 0.7rem 0.85rem; border: 1px solid var(--line); border-radius: var(--radio-sm); background: var(--surface-2); color: var(--text); font-family: var(--f-display); font-weight: 600; font-size: 0.9rem; letter-spacing: 0.02em; cursor: pointer; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2398a4bd' stroke-width='2'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.7rem center; } .mp__campo select:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } .mp__campo select option { background: var(--surface-2); color: var(--text); } .mp__acciones { margin-top: auto; display: grid; gap: 0.6rem; } .mp__add.en-carrito { border-color: var(--gold); color: var(--gold); } .mp__cta { padding: 1.15rem 1.6rem; font-size: 1.15rem; border-radius: var(--radio); } .mp__cta svg { width: 1.3em; height: 1.3em; } .modal__caja--producto .modal__cerrar { position: absolute; top: 0.85rem; right: 0.85rem; z-index: 4; float: none; width: 38px; height: 38px; color: var(--text); background: rgba(10, 14, 23, 0.72); backdrop-filter: blur(4px); } /* Con la ficha de un juego abierta, el boton flotante del carrito queda por encima del fondo del popup (80) para poder abrir el carrito sin cerrar la ficha. */ body.ficha-abierta .cart-fab { z-index: 85; } @media (max-width: 720px) { .mp { grid-template-columns: 1fr; } .mp__media { aspect-ratio: 22 / 25; max-width: 320px; margin-inline: auto; width: 100%; } .mp__info { padding: 1.5rem; } .modal__caja--producto .mp__titulo { font-size: 1.3rem; } .mp__precios .precio-unico { font-size: 1.8rem; } /* Botón "Pedir por WhatsApp" más compacto en el popup */ .mp__cta { padding: 0.8rem 1.2rem; font-size: 1rem; border-radius: var(--radio-sm); } .mp__cta svg { width: 1.1em; height: 1.1em; } .mp__acciones { gap: 0.5rem; } } /* ============================================================ Carrito ============================================================ */ /* Boton del header */ .cart-btn { position: relative; display: grid; place-items: center; width: 42px; height: 42px; flex-shrink: 0; border: 1px solid var(--line); border-radius: var(--radio-sm); background: transparent; color: var(--text); transition: border-color 0.18s ease, color 0.18s ease; } .cart-btn:hover { border-color: var(--gold); color: var(--gold); } .cart-btn svg { width: 20px; height: 20px; } .cart-btn__count { position: absolute; top: -7px; right: -7px; min-width: 18px; height: 18px; padding: 0 4px; display: grid; place-items: center; border-radius: var(--radio-pill); background: linear-gradient(135deg, var(--gold), var(--gold-deep)); color: #241500; font-family: var(--f-display); font-weight: 700; font-size: 0.68rem; font-variant-numeric: tabular-nums; } .cart-btn__count[hidden] { display: none; } @keyframes cart-pop { 40% { transform: scale(1.18); } } .cart-btn--pulso { animation: cart-pop 0.4s ease; } /* Boton flotante (abajo a la derecha) */ .cart-fab { position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 70; width: 58px; height: 58px; display: grid; place-items: center; border: none; border-radius: 50%; background: linear-gradient(135deg, var(--gold), var(--gold-deep)); color: #241500; box-shadow: 0 16px 34px -10px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(247, 183, 51, 0.25); transition: transform 0.15s ease, box-shadow 0.2s ease; } .cart-fab:hover { transform: translateY(-3px); box-shadow: 0 22px 46px -12px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(247, 183, 51, 0.4); } .cart-fab:active { transform: translateY(0) scale(0.93); } .cart-fab svg { width: 24px; height: 24px; } .cart-fab__count { position: absolute; top: -5px; right: -5px; min-width: 22px; height: 22px; padding: 0 5px; display: grid; place-items: center; border-radius: var(--radio-pill); background: #f0453e; color: #fff; border: 2px solid var(--bg); font-family: var(--f-display); font-weight: 700; font-size: 0.72rem; font-variant-numeric: tabular-nums; line-height: 1; } .cart-fab__count[hidden] { display: none; } .cart-fab--pulso { animation: cart-pop 0.4s ease; } @media (max-width: 560px) { .cart-fab { right: 1rem; bottom: 1rem; width: 54px; height: 54px; } /* mientras el aviso de cookies ocupa la parte inferior, ocultamos el flotante */ body.con-cookies .cart-fab { display: none; } } /* ============================================================ Aviso flotante "Agregado al carrito" (toast) ============================================================ */ .toast { position: fixed; top: calc(var(--anuncios-alto, 0px) + 1rem); left: 50%; z-index: 120; /* por encima de la ficha (80) y el menú de pago (100) */ display: flex; align-items: center; gap: 0.6rem; max-width: calc(100vw - 2rem); padding: 0.65rem 1.15rem 0.65rem 0.65rem; border-radius: var(--radio-pill); background: var(--surface-2); border: 1px solid rgba(38, 211, 102, 0.5); box-shadow: 0 18px 44px -12px rgba(0, 0, 0, 0.6); color: var(--text); font-family: var(--f-display); font-weight: 600; font-size: 0.95rem; letter-spacing: 0.01em; white-space: nowrap; opacity: 0; transform: translate(-50%, -16px); pointer-events: none; transition: opacity 0.22s ease, transform 0.32s cubic-bezier(0.22, 1, 0.36, 1); } .toast.visible { opacity: 1; transform: translate(-50%, 0); } .toast__check { flex-shrink: 0; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(135deg, #26d366, #1aa851); color: #04220f; } .toast__check svg { width: 15px; height: 15px; } @media (prefers-reduced-motion: reduce) { .toast { transition: opacity 0.2s ease; transform: translate(-50%, 0); } } @media (max-width: 420px) { .toast { font-size: 0.88rem; white-space: normal; text-align: left; } } /* ============================================================ Aviso de compra reciente (social proof) - abajo a la izquierda Tarjeta BLANCA para que resalte sobre el fondo oscuro. ============================================================ */ .social-proof { position: fixed; left: 1.25rem; bottom: 1.25rem; z-index: 55; display: flex; align-items: center; gap: 0.7rem; width: min(340px, calc(100vw - 2.5rem)); padding: 0.7rem 1.9rem 0.7rem 0.7rem; background: #ffffff; border: 1px solid #e4e7ec; border-radius: 16px; box-shadow: 0 18px 44px -12px rgba(0, 0, 0, 0.45); color: #0a0e17; opacity: 0; transform: translateX(-14px) translateY(6px); transition: opacity 0.4s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1); pointer-events: none; } .social-proof[hidden] { display: none; } .social-proof.visible { opacity: 1; transform: none; pointer-events: auto; } /* Carátula del juego: mismo formato que el catálogo (22:25, esquinas rectas) */ .social-proof__media { flex-shrink: 0; width: 48px; aspect-ratio: 22 / 25; border-radius: 0; overflow: hidden; background: #e9ebf0 center / 58% no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa1ac' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='6' y1='12' x2='10' y2='12'/%3E%3Cline x1='8' y1='10' x2='8' y2='14'/%3E%3Cline x1='15' y1='11' x2='15.01' y2='11'/%3E%3Cline x1='18' y1='13' x2='18.01' y2='13'/%3E%3Crect x='2' y='6' width='20' height='12' rx='6'/%3E%3C/svg%3E"); } .social-proof__media img { width: 100%; height: 100%; object-fit: cover; display: block; } .social-proof__texto { min-width: 0; display: flex; flex-direction: column; } .social-proof__linea { font-size: 0.8rem; color: #5b6472; } .social-proof__linea b { color: #0a0e17; font-weight: 700; } .social-proof__juego { font-family: var(--f-display); font-weight: 700; font-size: 0.95rem; color: #0a0e17; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 1px 0; } .social-proof__meta { font-size: 0.72rem; color: #7a828f; letter-spacing: 0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .social-proof.sp-sin-consola [data-sp-consola], .social-proof.sp-sin-consola .social-proof__sep { display: none; } .social-proof__cerrar { position: absolute; top: 5px; right: 5px; width: 22px; height: 22px; display: grid; place-items: center; border: none; border-radius: 50%; background: transparent; color: #9aa1ac; font-size: 1.05rem; line-height: 1; } .social-proof__cerrar:hover { color: #0a0e17; background: #eef0f3; } @media (max-width: 560px) { .social-proof { left: 0.6rem; bottom: 0.75rem; width: calc(100vw - 6rem); /* deja libre el botón flotante del carrito */ max-width: 300px; } /* si el aviso de cookies ocupa la parte inferior, no lo estorbamos */ body.con-cookies .social-proof { display: none; } } @media (prefers-reduced-motion: reduce) { .social-proof { transition: opacity 0.25s ease; transform: none; } .social-proof.visible { transform: none; } } /* Panel lateral */ .carrito { position: fixed; inset: 0; z-index: 90; } .carrito[hidden] { display: none; } .carrito__fondo { position: absolute; inset: 0; background: rgba(4, 7, 12, 0.62); opacity: 0; transition: opacity 0.25s ease; } .carrito.abierto .carrito__fondo { opacity: 1; } .carrito__panel { position: absolute; top: 0; right: 0; height: 100%; width: min(400px, 92vw); display: flex; flex-direction: column; background: var(--surface); border-left: 1px solid var(--line); box-shadow: -24px 0 60px -24px rgba(0, 0, 0, 0.7); transform: translateX(100%); transition: transform 0.28s ease; } .carrito.abierto .carrito__panel { transform: translateX(0); } .carrito__head { display: flex; align-items: center; justify-content: space-between; padding: 1.3rem 1.4rem; border-bottom: 1px solid var(--line-soft); } .carrito__head h3 { font-size: 1.2rem; } .carrito__head .modal__cerrar { position: static; float: none; } /* Zona con scroll: la lista de productos + el bloque de promo. El pie (total + botón) queda SIEMPRE fijo abajo, visible. */ .carrito__scroll { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } .carrito__lista { padding: 1.1rem 1.4rem; display: flex; flex-direction: column; gap: 1rem; } .carrito__vacio { color: var(--text-mute); text-align: center; padding: 3rem 1rem; font-family: var(--f-display); } .carrito__item { display: grid; grid-template-columns: 50px 1fr auto; gap: 0.85rem; align-items: start; } .carrito__thumb { width: 50px; aspect-ratio: 22 / 25; border-radius: 0; background: var(--surface-2) center / cover no-repeat; border: 1px solid var(--line-soft); } .carrito__titulo { font-family: var(--f-display); font-weight: 600; font-size: 0.9rem; line-height: 1.25; } .carrito__meta { font-size: 0.72rem; color: var(--text-mute); margin-top: 0.15rem; font-family: var(--f-display); font-weight: 600; letter-spacing: 0.02em; } .carrito__precio { font-size: 0.86rem; font-family: var(--f-display); font-weight: 700; color: var(--gold); font-variant-numeric: tabular-nums; margin-top: 0.2rem; } .carrito__qty { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 0.5rem; } .carrito__qbtn { width: 24px; height: 24px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 6px; background: var(--surface-2); color: var(--text); font-size: 1rem; line-height: 1; } .carrito__qbtn:hover { border-color: var(--gold); color: var(--gold); } .carrito__qnum { font-family: var(--f-display); font-weight: 700; min-width: 1.2ch; text-align: center; font-variant-numeric: tabular-nums; } .carrito__quitar { background: none; border: none; color: var(--text-mute); font-size: 0.74rem; text-decoration: underline; padding: 0; } .carrito__quitar:hover { color: #f0453e; } .carrito__pie { flex-shrink: 0; padding: 1.2rem 1.4rem; padding-bottom: calc(1.2rem + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line-soft); background: var(--surface); display: flex; flex-direction: column; gap: 0.85rem; } .carrito__pie[hidden] { display: none; } .carrito__total { display: flex; align-items: baseline; justify-content: space-between; } .carrito__total span { color: var(--text-dim); font-size: 0.85rem; } .carrito__total b { font-family: var(--f-display); font-size: 1.4rem; color: var(--gold); font-variant-numeric: tabular-nums; } .carrito__vaciar { background: none; border: none; color: var(--text-mute); font-size: 0.8rem; text-decoration: underline; align-self: center; } .carrito__vaciar:hover { color: var(--text); } /* ----- Promo "Compra 2, llévate 1 gratis" dentro del carrito ----- */ .carrito__promo { padding: 1rem 1.4rem 1.15rem; border-top: 1px solid var(--line-soft); background: linear-gradient(180deg, rgba(38, 211, 102, 0.09), transparent 70%); } .carrito__promo[hidden] { display: none; } .carrito__promo-tit { font-family: var(--f-display); font-weight: 700; font-size: 0.98rem; color: var(--text); } .carrito__promo-sub { font-size: 0.8rem; color: var(--text-dim); margin-top: 0.15rem; } .carrito__promo-lista { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; margin-top: 0.85rem; /* fluye dentro del scroll del carrito (.carrito__scroll); sin scroll propio */ padding: 0.15rem 0 0.15rem 0; } /* Confirmación compacta cuando el regalo ya está elegido */ .carrito__promo-elegido { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.7rem; padding: 0.6rem 0.75rem; border: 1px solid rgba(38, 211, 102, 0.4); border-radius: var(--radio-sm); background: rgba(38, 211, 102, 0.1); font-size: 0.9rem; } .carrito__promo-elegido b { font-family: var(--f-display); color: var(--text); flex: 1; min-width: 0; } .carrito__promo-cambiar { flex-shrink: 0; background: none; border: none; color: var(--gold); font-family: var(--f-display); font-weight: 700; font-size: 0.82rem; text-decoration: underline; padding: 0.2rem; } .carrito__promo-card { display: flex; flex-direction: column; gap: 0.4rem; padding: 0 0 0.55rem; border: 1px solid var(--line); border-radius: 0; /* puntas rectas, igual que las carátulas del catálogo */ background: var(--surface-2); color: var(--text); text-align: left; overflow: hidden; transition: border-color 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease; } .carrito__promo-card:hover { border-color: var(--gold); transform: translateY(-2px); } .carrito__promo-card.is-elegido { border-color: #26d366; box-shadow: inset 0 0 0 1px #26d366; } .carrito__promo-thumb { display: block; width: 100%; aspect-ratio: 22 / 25; /* proporción de las carátulas: rectángulo, sin deformar */ border-radius: 0; background: var(--surface-3) center / cover no-repeat; } .carrito__promo-nom { font-family: var(--f-display); font-weight: 600; font-size: 0.78rem; line-height: 1.25; padding: 0 0.5rem; /* título completo: sin recorte, envuelve las líneas que haga falta */ overflow-wrap: anywhere; } @media (max-width: 400px) { .carrito__promo-lista { grid-template-columns: repeat(2, 1fr); } } body.carrito-abierto { overflow: hidden; } /* ============================================================ Responsive ============================================================ */ @media (max-width: 900px) { .cuentas__grid, .nosotros__grid, .contacto__grid { grid-template-columns: 1fr; } .footer__top { grid-template-columns: 1fr 1fr; } .footer__marca { grid-column: 1 / -1; } .header__inner { flex-wrap: wrap; padding-bottom: 0.4rem; column-gap: 0.8rem; min-height: 80px; } .marca img { height: 84px; } .header .marca img { height: 66px; } /* Inputs a 16px reales en móvil: iOS no hace zoom al enfocarlos */ .buscador__input, .mp__campo select { font-size: 16px; } /* Selector de moneda + carrito + menu (☰): siempre juntos y a la derecha */ .nav { order: 2; margin-left: auto; flex-shrink: 0; gap: 0.7rem; } .buscador { order: 3; flex-basis: 100%; max-width: none; margin-top: 0.1rem; } .buscador__input { height: 40px; } .nav__links { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; gap: 0; background: var(--surface); border-bottom: 1px solid var(--line); padding: 0.5rem 1.2rem 1rem; } .nav__links.abierto { display: flex; } .nav__links li { border-top: 1px solid var(--line-soft); } .nav__links li:first-child { border-top: none; } .nav__links a { display: block; padding: 0.85rem 0; font-size: 1rem; } .nav__toggle { display: inline-flex; } .nav .btn--whatsapp { display: none; } /* Submenu: en movil se muestra siempre, indentado bajo "Catalogo" */ .nav__has-sub > a { padding-block: 0.85rem; } .nav__sub { display: block; position: static; transform: none; min-width: 0; margin: 0 0 0.4rem; padding: 0 0 0 1rem; background: transparent; border: 0; box-shadow: none; } .nav__sub li { border-top: 0; } .nav__sub a { padding: 0.6rem 0; font-size: 0.9rem; } } @media (max-width: 640px) { /* Secciones más compactas y con más aire lateral en móvil */ .seccion { padding-block: clamp(2.6rem, 9vw, 3.6rem); } .seccion__intro { margin-bottom: 1.8rem; } .cuenta { padding: 1.35rem 1.2rem; } .cuenta li { font-size: 0.98rem; } .contacto__cta { padding: 1.5rem 1.3rem; } .card__body { padding: 0.7rem 0.7rem 0.85rem; gap: 0.45rem; } .card__titulo { font-size: 0.95rem; } .precio-unico { font-size: 1.15rem; } .precio-fila { padding: 0.4rem 0.55rem; } .precio-fila__valor { font-size: 0.9rem; } /* Ficha de producto: más ancho útil, menos margen del overlay */ .modal { padding: 0.8rem; } .modal__caja { padding: 1.4rem; } /* Objetivos táctiles más grandes */ .modal__cerrar { width: 42px; height: 42px; } .resultados__volver { padding: 0.65rem 1rem; font-size: 0.9rem; } .carrito__qbtn { width: 30px; height: 30px; } .buscador__limpiar { width: 32px; height: 32px; } } @media (max-width: 560px) { .footer__top { grid-template-columns: 1fr; text-align: center; } .footer__marca { text-align: center; } .footer__marca .marca { justify-content: center; } .footer__marca p { margin-inline: auto; } .stats { grid-template-columns: 1fr; } .cookies { flex-direction: column; align-items: stretch; text-align: center; } .cookies__acciones { justify-content: center; } .cookies__acciones .btn { flex: 1; } /* En pantallas estrechas achicamos el logo para que los controles de la derecha (moneda, carrito, menu) quepan en la misma fila */ .marca img { height: 68px; } .header .marca img { height: 54px; } .header__inner { min-height: 66px; column-gap: 0.6rem; } .nav { gap: 0.45rem; } /* Botones de ancho completo donde antes quedaban a medias */ .cuentas__cta .btn, .resultados__wa { width: 100%; } .resultados__head { gap: 0.8rem; } } @media (max-width: 380px) { .header .marca img { height: 46px; } .contenedor { padding-inline: 0.9rem; } .resultados__grid { gap: 0.7rem; } .btn { padding: 0.8rem 1.1rem; } }