/* ========================================================================== DRAGON CLOCK · HOJA DE ESTILOS PRINCIPAL -------------------------------------------------------------------------- ÍNDICE 1. PANEL DE CONTROL → colores, tipografías, imágenes y velocidades 2. Base, cabecera y menú 3. Botones 4. Portada (logo, marca, carrusel) 5. Categorías, catálogo y fichas de reloj 6. Pieza destacada, galería, estadística 7. Sobre nosotros, reseñas (con fondos traslúcidos) 8. Logística y envíos 9. Redes, pie de página, WhatsApp flotante, carrito 10. Franja superior (ticker) Todo lo que suele cambiarse está en el bloque 1. ========================================================================== */ /* 1. PANEL DE CONTROL ---------------------------------------------------- */ :root{ /* ADMIN:THEME:START */ /* Colores de la marca */ --gold: #C9A227; --gold-soft: #E8D9A6; --emerald: #0B6E4F; --emerald-deep: #063A2A; --black: #0A0F0C; --black-2: #0F1613; --ivory: #F6F3EC; --ivory-dim: #DAD6C9; /* Tipografías (se cargan desde Google Fonts en index.html) */ --font-display: "Fraunces", Georgia, "Times New Roman", serif; --font-body: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-brand: "Cinzel", "Trajan Pro", Georgia, serif; --font-script: "Cormorant Garamond", Georgia, serif; --radius: 2px; --container: 1240px; /* Imágenes (rutas relativas a este archivo, o incrustadas como data:) */ --logo-url: url("../assets/media/media-313.png"); --img-daydate: url("../assets/media/media-314.webp"); --img-hero-bg: url("../assets/media/media-315.webp"); --img-pagani: url("../assets/media/media-316.webp"); --img-poedagar: url("../assets/media/media-317.webp"); --img-nibosi: url("../assets/media/media-318.webp"); --img-courier-olva: url("../assets/media/media-319.webp"); --img-courier-shalom: url("../assets/media/media-320.webp"); --img-welcome-popup: url("../assets/media/media-321.webp"); --band-pos-x: 64%; /* Animaciones */ --carousel-speed: 1s; --carousel-interval: 3200ms; --sheen-duration: 4.5s; --halo-duration: 6s; --flame-duration: 2.6s; /* ADMIN:THEME:END */ /* Degradado plata → oro de las letras, y su destello */ --lux-base: linear-gradient(90deg, #d9dde0 0%, #f7f8f8 20%, #a9aeb2 46%, #b98f24 54%, #f3d97f 76%, #b98e23 100%); --lux-sheen: linear-gradient(105deg, rgba(255,255,255,0) 38%, rgba(255,251,236,0.95) 50%, rgba(255,255,255,0) 62%); } :root:not([data-theme="light"]){ color-scheme: dark; } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ color-scheme: dark; } } *{ box-sizing: border-box; } html{ scroll-behavior: smooth; } body{ margin:0; background: var(--black); color: var(--ink); font-family: var(--font-body); -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; } ::selection{ background: var(--gold); color:#111; } .wrap{ max-width: var(--container); margin:0 auto; padding: 0 28px; } @media (max-width: 640px){ .wrap{ padding: 0 18px; } } h1,h2,h3,h4{ font-family: var(--font-display); font-weight: 500; margin:0; letter-spacing: 0.01em; } .eyebrow{ font-family: var(--font-body); font-size: 12.5px; letter-spacing: 0.14em; color: var(--gold); font-weight: 700; } :focus-visible{ outline: 2px solid var(--gold); outline-offset: 3px; } @media (prefers-reduced-motion: reduce){ *{ animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ---------- Reveal on scroll ---------- */ .reveal{ opacity:0; transform: translateY(18px); transition: opacity .8s ease, transform .8s ease; } .reveal.in{ opacity:1; transform:none; } /* ---------- Header ---------- */ header.site{ position: sticky; top:0; z-index: 500; background: rgba(10,15,12,0.72); backdrop-filter: blur(10px) saturate(120%); border-bottom: 1px solid var(--line); transition: padding .3s ease, background .3s ease; } header.site.shrink{ background: rgba(10,15,12,0.92); } .header-inner{ display:flex; align-items:center; justify-content:space-between; padding: 20px 0; transition: padding .3s ease; } header.site.shrink .header-inner{ padding: 12px 0; } .brand{ display:flex; align-items:center; gap:10px; } .brand-logo-img{ width:38px; height:38px; object-fit:contain; flex-shrink:0; filter: drop-shadow(0 0 6px rgba(201,162,39,0.25)); } .hero-logo{ width:74px; height:74px; object-fit:contain; margin-bottom:20px; filter: drop-shadow(0 0 14px rgba(201,162,39,0.3)); } .footer-logo{ width:50px; height:50px; object-fit:contain; margin-bottom:14px; } .review-logo-mark{ width:20px; height:20px; object-fit:contain; opacity:.9; } .brand svg{ width:30px; height:30px; flex-shrink:0; } .brand-word{ font-family: var(--font-display); font-size: 22px; letter-spacing: 0.06em; color: var(--ivory); } .brand-word b{ color: var(--gold); font-weight:600; } nav.main-nav{ display:flex; gap: 30px; } nav.main-nav a{ font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ivory-dim); position:relative; padding: 4px 0; transition: color .25s ease; } nav.main-nav a::after{ content:""; position:absolute; left:0; right:0; bottom:-2px; height:1px; background: var(--gold); transform: scaleX(0); transform-origin:left; transition: transform .3s ease; } nav.main-nav a:hover{ color: var(--ivory); } nav.main-nav a:hover::after{ transform: scaleX(1); } .header-actions{ display:flex; align-items:center; gap: 18px; } .icon-btn{ background:none; border:none; color: var(--ivory-dim); width:22px; height:22px; padding:0; display:flex; align-items:center; justify-content:center; position:relative; transition: color .2s ease; } .icon-btn:hover{ color: var(--gold); } .icon-btn svg{ width:20px; height:20px; } .cart-badge{ position:absolute; top:-8px; right:-10px; background: var(--gold); color:#141210; font-size:10px; font-weight:800; width:16px; height:16px; border-radius:50%; display:flex; align-items:center; justify-content:center; } .hamburger{ display:none; } .search-panel{ max-height:0; overflow:hidden; border-bottom: 1px solid transparent; transition: max-height .35s ease, border-color .35s ease; } .search-panel.open{ max-height: 90px; border-color: var(--line); } .search-panel-inner{ padding: 16px 0; display:flex; gap:10px; } .search-panel input{ flex:1; background: var(--black-2); border:1px solid var(--line); color: var(--ivory); padding: 12px 16px; font-family: var(--font-body); font-size:15px; } .search-panel input::placeholder{ color: var(--ivory-dim); opacity:.6; } @media (max-width: 980px){ nav.main-nav{ display:none; } .hamburger{ display:flex; } } /* mobile menu */ .mobile-menu{ position: fixed; inset:0; background: var(--black); z-index: 900; display:flex; flex-direction:column; padding: 26px 22px; transform: translateX(100%); transition: transform .35s ease; } .mobile-menu.open{ transform: translateX(0); } .mobile-menu-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom: 40px; } .mobile-menu a{ font-family: var(--font-display); font-size: 26px; padding: 14px 0; border-bottom:1px solid var(--line); color: var(--ivory); } .mobile-menu .mm-actions{ margin-top:auto; display:flex; flex-direction:column; gap:12px; } /* ---------- Buttons ---------- */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding: 15px 30px; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; font-weight:700; border: 1px solid transparent; transition: all .3s ease; white-space:nowrap; } /* Dorado biselado (mismo lenguaje visual que el botón de WhatsApp): degradé profundo, luz interior y el mismo efecto de "olas" deslizándose despacio por dentro, pero con su propio ritmo (duraciones y retrasos distintos a los de WhatsApp y a los de "Añadir al carrito") para que ninguna de las tres nunca se mueva en sincronía. */ .btn-gold{ position:relative; overflow:hidden; isolation:isolate; border-radius:11px; background: linear-gradient(135deg, #8A6A12 0%, #C9A227 45%, #F0C550 100%); color:#161207; font-weight:800; border: 1px solid rgba(255,255,255,0.16); box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), inset 0 -3px 6px rgba(0,0,0,0.28), 0 3px 10px rgba(0,0,0,0.3), 0 0 7px rgba(212,168,54,0.10); } .btn-gold:hover{ filter: brightness(1.07); transform: translateY(-1px); } .btn-gold::before, .btn-gold::after{ content:""; position:absolute; top:-20%; height:140%; z-index:1; pointer-events:none; } .btn-gold::before{ left:-35%; width:70%; background: linear-gradient(100deg, transparent 15%, rgba(255,255,255,0.18) 50%, transparent 85%); transform: translateX(-40%); animation: waterFlow 10.4s infinite linear -4.7s; } .btn-gold::after{ left:-25%; width:24%; background: linear-gradient(115deg, transparent 25%, rgba(255,255,255,0.32) 50%, transparent 75%); transform: translateX(-60%); animation: waterFlow 7.3s infinite linear -1.9s; } @media (prefers-reduced-motion: reduce){ .btn-gold::before, .btn-gold::after{ animation:none; } } .btn-outline{ border-color: var(--ivory-dim); color: var(--ivory); background:transparent; } .btn-outline:hover{ border-color: var(--gold); color: var(--gold); } /* Verde premium biselado: degradé profundo (no plano, no fosforescente) + acabado con esquinas suaves y luz interior, a tono con el resto de piezas "de lujo" del bloque. */ .btn-wsp{ position:relative; overflow:hidden; isolation:isolate; border-radius:11px; background: linear-gradient(135deg, #006B46 0%, #008F5A 45%, #00B874 100%); color: var(--ivory); border: 1px solid rgba(255,255,255,0.16); box-shadow: inset 0 1px 0 rgba(255,255,255,0.32), inset 0 -3px 6px rgba(0,0,0,0.38), 0 3px 10px rgba(0,0,0,0.3), 0 0 7px rgba(212,168,54,0.08); } .btn-wsp:hover{ filter: brightness(1.07); transform: translateY(-1px); } .btn-wsp svg{ width:20px; height:20px; flex-shrink:0; } /* Efecto "cristal líquido": dos capas de luz moviéndose a distinta velocidad dentro del verde, como agua en calma con un reflejo deslizándose por encima. Continuo, lento, sutil (no brillo fuerte), sin parpadeo. ::before = cuerpo de la onda (ancha, tenue, se desplaza despacio); ::after = el reflejo fino (algo más claro, cruza más rápido). */ .btn-wsp::before, .btn-wsp::after{ content:""; position:absolute; top:-20%; height:140%; z-index:1; pointer-events:none; } .btn-wsp::before{ left:-35%; width:70%; background: linear-gradient(100deg, transparent 15%, rgba(255,255,255,0.08) 50%, transparent 85%); transform: translateX(-40%); animation: waterFlow 7.5s infinite linear; } .btn-wsp::after{ left:-25%; width:24%; background: linear-gradient(115deg, transparent 25%, rgba(255,255,255,0.22) 50%, transparent 75%); transform: translateX(-60%); animation: waterFlow 6s infinite linear; } @keyframes waterFlow{ 0%{ transform: translateX(-60%); } 100%{ transform: translateX(430%); } } @media (prefers-reduced-motion: reduce){ .btn-wsp::before, .btn-wsp::after{ animation:none; } } .btn-sm{ padding: 10px 16px; font-size: 11.5px; } .btn-sm.btn-wsp svg{ width:18px; height:18px; } .btn-block{ width:100%; } /* ---------- Botones "premium" de la ficha de producto: icono | separador | texto (+ subtítulo) | flecha ---------- */ .btn-premium{ justify-content:flex-start; gap:0; position:relative; padding: 13px 18px; } .btn-premium .btn-ico{ display:flex; align-items:center; justify-content:center; flex-shrink:0; } .btn-premium .btn-ico svg{ width:22px; height:22px; } .btn-premium .btn-divider{ width:1px; align-self:stretch; margin: 0 14px; background: rgba(255,255,255,0.22); flex-shrink:0; } .btn-outline.btn-premium .btn-divider{ background: var(--line); } .btn-premium .btn-text{ display:flex; flex-direction:column; align-items:flex-start; gap:2px; flex:1; min-width:0; text-align:left; } .btn-premium .btn-text strong{ font-family: var(--font-body); font-weight:600; font-size:12.5px; letter-spacing:0.06em; text-transform:uppercase; } .btn-premium .btn-text small{ font-family: var(--font-body); font-weight:500; font-size:9.5px; letter-spacing:0.1em; text-transform:uppercase; opacity:.78; } .btn-premium .btn-chevron{ display:flex; align-items:center; flex-shrink:0; margin-left:10px; opacity:.8; transition: transform .25s ease; } .btn-premium .btn-chevron svg{ width:16px; height:16px; } .btn-premium:hover .btn-chevron{ transform: translateX(3px); opacity:1; } /* Icono de WhatsApp: 40% más grande que el tamaño base de los íconos premium (22px), blanco, con más presencia visual que el resto. */ .btn-wsp .btn-ico svg{ width:31px; height:31px; } /* Icono del carrito: dorado y también con más tamaño, a la par del de WhatsApp. */ .btn-cart-shine .btn-ico svg{ width:27px; height:27px; } /* ---------- "Añadir al carrito": fondo dorado biselado (mismo lenguaje visual que el botón de WhatsApp), texto/icono en negro para contraste, con el mismo efecto de "olas" de luz deslizándose despacio por dentro. ---------- */ .btn-cart-shine{ position:relative; overflow:hidden; isolation:isolate; border-radius:11px; background: linear-gradient(135deg, #8A6A12 0%, #C9A227 45%, #F0C550 100%); color:#161207; border: 1px solid rgba(255,255,255,0.16); box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), inset 0 -3px 6px rgba(0,0,0,0.28), 0 3px 10px rgba(0,0,0,0.3), 0 0 7px rgba(212,168,54,0.10); } .btn-cart-shine .btn-ico, .btn-cart-shine .btn-chevron{ color:#161207; } .btn-cart-shine .btn-divider{ background: rgba(0,0,0,0.22); } .btn-cart-shine .btn-text strong{ color:#161207; font-weight:800; } .btn-cart-shine:hover{ filter: brightness(1.06); transform: translateY(-1px); } .btn-cart-shine::before, .btn-cart-shine::after{ content:""; position:absolute; top:-20%; height:140%; z-index:1; pointer-events:none; } /* Duraciones y retrasos distintos a los del botón de WhatsApp para que las dos "olas" nunca se muevan en sincronía entre sí. */ .btn-cart-shine::before{ left:-35%; width:70%; background: linear-gradient(100deg, transparent 15%, rgba(255,255,255,0.16) 50%, transparent 85%); transform: translateX(-40%); animation: waterFlow 8.8s infinite linear -2.6s; } .btn-cart-shine::after{ left:-25%; width:24%; background: linear-gradient(115deg, transparent 25%, rgba(255,255,255,0.30) 50%, transparent 75%); transform: translateX(-60%); animation: waterFlow 5.2s infinite linear -1.1s; } @media (prefers-reduced-motion: reduce){ .btn-cart-shine::before, .btn-cart-shine::after{ animation:none; } } /* ---------- 4. PORTADA: logo + marca + carrusel ---------- */ .hero{ position:relative; isolation:isolate; overflow:hidden; display:flex; flex-direction:column; align-items:center; padding: clamp(28px, 5vh, 60px) 0 clamp(26px, 5vh, 56px); /* sin fondo propio: la foto viene de .section-bg, compartida con Categorías, para que ambas se vean como una sola imagen continua en movimiento */ } .hero-content{ position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; text-align:center; } .hero-lockup{ display:flex; flex-direction:column; align-items:center; } .hero .hero-logo{ width:100%; height:100%; } .hero-word{ margin:0; display:flex; justify-content:center; align-items:baseline; gap:.34em; font-family: var(--font-brand); font-weight:700; font-size: clamp(32px, 4.6vw, 64px); line-height:1.05; letter-spacing:.14em; text-transform:uppercase; padding-left:.14em; filter: drop-shadow(0 8px 26px rgba(0,0,0,0.65)); } .hero-tagline{ margin: clamp(10px, 1.6vh, 16px) 0 0; font-family: var(--font-script); font-style:italic; font-weight:500; font-size: clamp(24px, 2.8vw, 36px); line-height:1.15; color: var(--ivory); text-shadow: 0 4px 24px rgba(0,0,0,0.8); } .hero-ctas{ display:flex; gap:14px; margin-top: clamp(22px, 3.6vh, 34px); flex-wrap:wrap; justify-content:center; } @media (max-width: 700px){ .hero{ padding-top: 34px; } .hero-word{ flex-direction:column; align-items:center; font-size: clamp(38px, 12vw, 52px); gap:.02em; padding-left:0; } .hero-word span{ padding-left:.14em; } .hero-word.lux-text{ background: var(--lux-sheen) 100% 0 / 260% 100% no-repeat, linear-gradient(180deg, #f1f3f4 0%, #a9aeb2 44%, #c9a227 56%, #f3d97f 78%, #b98e23 100%); -webkit-background-clip:text; background-clip:text; } .hero-ctas{ flex-direction:column; width:min(100%, 300px); } .hero-ctas .btn{ width:100%; padding: 14px 22px; } } @media (max-width: 640px){ header.site .header-inner, header.site.shrink .header-inner{ padding-left:18px; padding-right:18px; } } /* Encabezado: la marca en Cinzel es más ancha; se compacta en pantallas medianas y pequeñas */ @media (max-width: 1180px){ nav.main-nav{ gap:20px; } nav.main-nav a{ font-size:12.5px; letter-spacing:.06em; } .brand-word{ font-size:17px; letter-spacing:.09em; } } @media (min-width: 981px) and (max-width: 1040px){ nav.main-nav{ gap:14px; } nav.main-nav a{ font-size:12px; letter-spacing:.04em; } .header-actions{ gap:14px; } .brand-word{ font-size:15.5px; } } @media (max-width: 480px){ .brand-word{ font-size:15.5px; letter-spacing:.08em; } .brand-logo-img{ width:34px; height:41px; } .header-actions{ gap:14px; } } /* ---------- Section shell ---------- */ section{ padding: 110px 0; position:relative; } @media (max-width: 700px){ section{ padding: 70px 0; } } .section-head{ max-width: 640px; margin-bottom: 56px; } .section-head h2{ font-size: clamp(30px, 4vw, 46px); color: var(--ivory); margin-top: 14px; } .section-head p{ color: var(--ivory-dim); font-size: 16px; line-height:1.7; margin-top: 16px; max-width: 520px; } .section-alt{ background: var(--black-2); } /* ---------- Categories ---------- */ /* tarjetas más compactas y minimalistas: menos alto, ícono y texto más discretos, sin el relleno excesivo de la versión anterior. La grilla usa auto-fit (no un número fijo de columnas) para que se acomode sola sin dejar huecos, sea cual sea la cantidad de categorías (el panel admin permite agregar/quitar categorías libremente) */ .cat-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); } .cat-card{ background: var(--black); padding: 20px 16px; min-height: 128px; display:flex; flex-direction:column; justify-content:flex-end; gap:6px; position:relative; overflow:hidden; transition: background .35s ease; } .cat-card::before{ content:""; position:absolute; inset:0; background: radial-gradient(circle at 30% 20%, rgba(201,162,39,0.13), transparent 60%); opacity:0; transition: opacity .35s ease; } .cat-card:hover{ background:#0d1310; cursor:pointer; } .cat-card:hover::before{ opacity:1; } .cat-card svg{ width:20px; height:20px; color: var(--gold); } .cat-card h3{ font-size: 15px; font-weight:600; color: var(--ivory); letter-spacing:0.02em; } .cat-card small{ color: var(--ivory-dim); font-size: 10.5px; letter-spacing: 0.06em; } @media (max-width: 480px){ .cat-grid{ grid-template-columns: 1fr 1fr; } .cat-card{ min-height:110px; padding:16px 14px;} } /* ---------- Catalog & filters ---------- */ .catalog-layout{ display:grid; grid-template-columns: 250px 1fr; gap: 46px; align-items:flex-start; } /* min-width:0 SOLO en celular: sin esto, la columna "1fr" de la grilla no puede encogerse por debajo del ancho de contenido de sus hijos (comportamiento por defecto de CSS Grid) y el product-grid/las tarjetas terminan más anchos que la pantalla -esa es la causa real de que las tarjetas se vieran gigantes en celular-. En escritorio la columna ya cabe sin problema, así que se deja intacta (sin min-width:0) para no tocar nada de la versión PC. */ @media (max-width: 900px){ .catalog-layout{ grid-template-columns: 1fr; } .catalog-content{ min-width:0; } /* .filters TAMBIÉN es un item de esta grilla (comparte la misma columna "1fr" que .catalog-content) — sin min-width:0 aquí, la fila de chips sin salto de línea de adentro (.filters-mobile-chips) le pasa su ancho de contenido completo a ESTE item, e infla la columna igual que si no hubiera arreglado nada en .catalog-content. */ .filters{ min-width:0; } } /* Filtros: acordeón ORIGINAL en escritorio (Marca/Movimiento/Estilo/Precio/Color, tal cual estaba antes de tocar nada) y, aparte, una barra de chips horizontal SOLO para celular (.filters-mobile-chips), sin desplegable. Cada breakpoint muestra únicamente lo suyo (ver los display:none cruzados más abajo); nunca se mezclan ambos diseños. */ .filters{ position:sticky; top: 96px; } .filter-group{ border-bottom: 1px solid var(--line); padding: 18px 0; } .filter-group summary{ list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; font-size: 12.5px; letter-spacing:0.1em; text-transform:uppercase; color: var(--ivory); font-weight:700; } .filter-group summary::-webkit-details-marker{ display:none; } .filter-group summary::after{ content:"+"; color: var(--gold); font-size:16px; } .filter-group[open] summary::after{ content:"–"; } .filter-opts{ margin-top: 14px; display:flex; flex-direction:column; gap: 11px; } .filter-opts label{ display:flex; align-items:center; gap:10px; font-size: 14px; color: var(--ivory-dim); cursor:pointer; } .filter-opts input{ accent-color: var(--gold); width:15px; height:15px; } .clear-filters{ margin-top:18px; font-size:12px; color: var(--gold); letter-spacing:0.06em; text-transform:uppercase; border-bottom:1px solid var(--gold); padding-bottom:2px; } /* La barra de chips de celular no existe visualmente en escritorio. */ .filters-mobile-chips{ display:none; } @media (max-width: 900px){ .filters{ position:static; border:none; padding:0; margin-bottom: 26px; } /* El acordeón original desaparece en celular: sus checkboxes/radios de Movimiento/Estilo/Precio/Color siguen en el DOM (categoryGrid y los enlaces [data-quickfilter] los siguen consultando por selector), solo se ocultan visualmente. */ .filters-body{ display:none; } /* Carril de chips horizontal, premium, siempre visible, sin scrollbar visible, con desplazamiento táctil fluido (uno o dos dedos, inercia nativa) Y flechas laterales (para 8+ marcas sin depender solo del dedo). */ .filters-mobile-chips-wrap{ display:flex; align-items:center; gap:6px; } .filters-mobile-chips{ display:flex; gap:10px; overflow-x:auto; overflow-y:hidden; padding: 2px 2px 6px; scrollbar-width:none; -ms-overflow-style:none; scroll-behavior:smooth; -webkit-overflow-scrolling:touch; flex:1; min-width:0; } .filters-mobile-chips::-webkit-scrollbar{ display:none; height:0; } .filter-chip{ flex-shrink:0; white-space:nowrap; background:none; cursor:pointer; border:1px solid rgba(201,162,39,0.45); border-radius:999px; padding:10px 18px; font-family:inherit; font-size:12px; font-weight:700; letter-spacing:0.09em; text-transform:uppercase; color: var(--gold-soft, var(--gold)); transition: border-color .2s ease, background .2s ease, color .2s ease; } .filter-chip:active{ transform: scale(.97); } .filter-chip.is-active{ background: var(--gold); border-color: var(--gold); color:#171208; } /* Flechas: mismo lenguaje visual que las de la galería de fotos — circulares, doradas, se apagan solas al llegar al principio/final del carril, y se ocultan por completo si las marcas ya caben todas sin necesidad de scroll. */ .chips-nav{ flex-shrink:0; display:flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:50%; background:none; padding:0; cursor:pointer; border:1px solid rgba(201,162,39,0.45); color: var(--gold-soft, var(--gold)); transition: opacity .2s ease, border-color .2s ease, color .2s ease; } .chips-nav svg{ width:14px; height:14px; } .chips-nav[disabled]{ opacity:.25; cursor:default; pointer-events:none; } } .catalog-toolbar{ display:flex; justify-content:space-between; align-items:center; margin-bottom: 26px; flex-wrap:wrap; gap:12px; } .result-count{ color: var(--ivory-dim); font-size: 13px; letter-spacing:0.04em; } .product-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 34px 26px; } /* "Ver todo" + paginación numerada debajo de la grilla de relojes */ .catalog-pager{ margin-top: 34px; display:flex; flex-direction:column; align-items:center; gap:14px; } .pager-viewall{ min-width:220px; } .pager-nums{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:center; } .pager-num{ min-width:38px; height:38px; padding:0 10px; border-radius:2px; border:1px solid var(--line); background:transparent; color: var(--ivory-dim); font-size:13px; font-weight:700; cursor:pointer; transition: border-color .2s ease, color .2s ease, background .2s ease; } .pager-num:hover{ border-color: var(--gold); color: var(--ivory); } .pager-num.active{ background: var(--gold); border-color: var(--gold); color:#171208; } .pager-num[disabled]{ opacity:.35; cursor:default; } .pager-num[disabled]:hover{ border-color: var(--line); color: var(--ivory-dim); } @media (max-width: 980px){ .product-grid{ grid-template-columns: repeat(2, 1fr); } } /* Catálogo compacto SOLO celular: tarjetas más chicas (foto un poco menos alta, botones lado a lado en vez de apilados, textos/espacios reducidos) para que entren ~4 relojes en la pantalla de un vistazo, como pedido -sin tocar nada de la versión de escritorio, que sigue con las reglas de arriba tal cual. */ @media (max-width: 560px){ .catalog-toolbar{ margin-bottom:14px; } .product-grid{ grid-template-columns: repeat(2, 1fr); gap: 10px 9px; } /* min-width:0 en la tarjeta y en cada eslabón de la fila de botones: sin esto, ".card" (flex-column) y ".card-actions"/".btn" (flex-row, cada botón con texto "WHATSAPP" que no se puede partir) no se dejan encoger por debajo de su ancho de contenido -el mismo bug de "min-width:auto" ya visto en otras partes-, así que la columna derecha del grid termina más ancha que el hueco real y la tarjeta se recorta/desalinea contra el borde de la pantalla. */ .card{ min-width:0; } .card-photo{ aspect-ratio: 1/1; } .card-info{ padding-top:8px; gap:2px; } .card-brand{ font-size:9.5px; } .card-model{ font-size:13px; line-height:1.2; } .card-meta{ display:none; } .card-price{ font-size:16px; margin-top:2px; } .card-actions{ flex-direction:row; gap:6px; margin-top:8px; min-width:0; } .card-actions .btn{ padding:8px 6px; font-size:9.5px; letter-spacing:0.03em; min-width:0; } .badge{ font-size:9px; padding:4px 7px; top:8px; left:8px; } } .card{ display:flex; flex-direction:column; } /* touch-action:pan-y desde el primer toque (no solo mientras dura el gesto): así el navegador le deja el arrastre horizontal a nuestro JS desde el primer intento, en vez de "decidir" que es scroll de página y comerse ese primer swipe (el bug de "recién al segundo intento responde"). */ .card-photo{ position:relative; aspect-ratio: 4/5; overflow:hidden; border: 1px solid var(--line); touch-action: pan-y; } .card-photo img{ width:100%; height:100%; object-fit:cover; transition: transform .6s ease; } .card:hover .card-photo img{ transform: scale(1.045); filter: brightness(1.03) saturate(1.04); } /* Resplandor sutil (intensidad reducida) al pasar el mouse por la foto del reloj; también es clicable: abre el detalle del reloj igual que el botón "Ver reloj" */ .card-photo{ transition: border-color .7s ease, box-shadow .7s ease; cursor: pointer; } .card-photo::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none; opacity:0; transition: opacity .7s ease; background: radial-gradient(70% 55% at 50% 38%, rgba(255,255,255,0.20), rgba(214,222,230,0.07) 55%, transparent 78%), linear-gradient(180deg, rgba(255,255,255,0.04), transparent 40%); mix-blend-mode: screen; } .card:hover .card-photo{ border-color: rgba(224,230,236,0.42); box-shadow: 0 0 0 1px rgba(200,210,220,0.20), 0 20px 54px -20px rgba(200,210,220,0.30), inset 0 0 46px rgba(214,222,230,0.08); } .card:hover .card-photo::after{ opacity:1; } .card-photo .badge{ z-index:2; } .card:hover .placeholder svg{ transform: scale(1.05); } /* ---------- Carrusel premium de fotos dentro de la tarjeta del catálogo ---------- Cada foto vive en su propio "slide" superpuesto (position:absolute, mismo tamaño que la tarjeta, sin alterarla). Hay dos modos de transición, elegidos por JS según cómo se disparó el cambio (clase modificadora en .card-photo): .nav-zoom → al entrar el mouse (PC): fundido + zoom de acercamiento. .nav-slide → con las flechas (PC) y el cambio automático/swipe (celular): fundido + desplazamiento lateral, SIN zoom. El zoom "de lupa" al pasar el cursor (arriba, .card:hover .card-photo img) sigue aplicándose igual sobre la foto activa, porque ".card-photo img" también selecciona la dentro del slide. */ .card-photo-track{ position:absolute; inset:0; z-index:0; } .card-photo-slide{ position:absolute; inset:0; opacity:0; pointer-events:none; z-index:1; transition: opacity .9s cubic-bezier(.22,.61,.24,1), transform .9s cubic-bezier(.22,.61,.24,1); } .card-photo-slide.active{ opacity:1; pointer-events:auto; z-index:2; } .card-photo.nav-slide .card-photo-slide{ transform: translateX(26px); } .card-photo.nav-slide .card-photo-slide.active{ transform: translateX(0); } .card-photo.nav-slide .card-photo-slide.leaving{ transform: translateX(-26px); z-index:1; } .card-photo.nav-zoom .card-photo-slide{ transform: scale(1.12); transition-duration: 1.05s; } .card-photo.nav-zoom .card-photo-slide.active{ transform: scale(1); } .card-photo.nav-zoom .card-photo-slide.leaving{ transform: scale(.94); z-index:1; } /* el brillo al pasar el mouse (::after, agregado más arriba) debe quedar por encima de las fotos del carrusel, y flechas/puntos por encima de todo eso */ .card-photo::after{ z-index:2; } .card-photo-dots{ position:absolute; left:50%; bottom:10px; transform:translateX(-50%); z-index:4; display:flex; align-items:center; gap:5px; pointer-events:none; } .card-photo-dot{ width:5px; height:5px; border-radius:50%; background: rgba(255,255,255,.45); box-shadow: 0 0 0 1px rgba(0,0,0,.25); transition: background .4s ease, width .4s ease; } .card-photo-dot.active{ background: var(--gold); width:14px; border-radius:3px; } /* Flechas de navegación manual (solo relevantes en PC, con hover; en celular quedan ocultas y se navega con swipe). Discretas, no tapan el reloj, aparecen con un fundido suave solo al pasar el cursor por la foto. */ .card-photo-nav{ position:absolute; top:50%; transform:translateY(-50%); z-index:4; width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; background: rgba(15,13,10,.55); border:1px solid rgba(255,255,255,.22); color:#fff; opacity:0; pointer-events:none; cursor:pointer; transition: opacity .35s ease, background .25s ease, border-color .25s ease, transform .25s ease; } .card-photo-nav svg{ width:15px; height:15px; } .card-photo-nav--prev{ left:9px; } .card-photo-nav--next{ right:9px; } .card-photo:hover .card-photo-nav{ opacity:1; pointer-events:auto; } .card-photo-nav:hover{ background: rgba(0,0,0,.72); border-color: var(--gold); color: var(--gold); } .card-photo-nav:active{ transform: translateY(-50%) scale(.92); } @media (hover:none), (max-width: 720px){ .card-photo-nav{ display:none; } } .badge{ position:absolute; top:14px; left:14px; background: var(--gold); color:#171208; font-size:10.5px; font-weight:800; letter-spacing:0.08em; padding: 5px 10px; } .badge.badge-oferta{ background: var(--emerald); color: var(--ivory); } .card-info{ padding-top: 16px; display:flex; flex-direction:column; gap:6px; } .card-brand{ font-size: 11.5px; letter-spacing:0.1em; text-transform:uppercase; color: var(--gold); font-weight:700; } .card-model{ font-family: var(--font-display); font-size: 19px; color: var(--ivory); } .card-meta{ font-size: 12.5px; color: var(--ivory-dim); } .card-price{ font-family: var(--font-display); font-size: 22px; color: var(--gold-soft); margin-top:6px; } .card-price small{ font-family: var(--font-body); font-size:12px; color: var(--ivory-dim); } .card-actions{ display:flex; gap:10px; margin-top:14px; } .card-actions .btn{ flex:1; padding: 12px 14px; } /* ---------- Variantes de color (mismo modelo agrupado en una sola tarjeta) ---------- Fila de círculos pequeños debajo del contenido de la tarjeta: cada uno usa la primera foto de ESE color como miniatura de fondo (no un mapeo color→hex), y al hacer clic abre directamente la ficha de esa variante exacta. */ .card-variant-swatches{ display:flex; flex-wrap:wrap; gap:7px; margin-top:10px; } .card-variant-swatch{ width:26px; height:26px; border-radius:50%; flex-shrink:0; padding:0; cursor:pointer; background-size:cover; background-position:center; background-color: var(--black-2); border:2px solid var(--line); box-shadow: 0 2px 6px rgba(0,0,0,.35); transition: transform .18s ease, border-color .18s ease; } .card-variant-swatch:hover{ transform: scale(1.1); border-color: var(--gold-soft); } .card-variant-swatch.active{ border-color: var(--gold); box-shadow: 0 0 0 2px rgba(212,168,54,.25); } .empty-state{ padding: 70px 20px; text-align:center; color: var(--ivory-dim); border: 1px dashed var(--line); } /* ---------- Product Modal ---------- */ .modal-overlay{ position: fixed; inset:0; background: rgba(6,9,7,0.82); backdrop-filter: blur(4px); z-index: 1000; display:flex; align-items:center; justify-content:center; padding: 24px; opacity:0; pointer-events:none; transition: opacity .3s ease; } .modal-overlay.open{ opacity:1; pointer-events:auto; } .modal-box{ background: var(--black-2); border: 1px solid var(--line); max-width: 900px; width:100%; max-height: 88vh; overflow:auto; display:grid; grid-template-columns: 1fr 1fr; transform: translateY(20px) scale(.98); transition: transform .35s ease; } .modal-overlay.open .modal-box{ transform:none; } .modal-photo{ position:relative; } .modal-photo img{ width:100%; height:100%; object-fit:cover; } /* align-items:flex-start (en vez del stretch por defecto) es la corrección clave: sin esto, un carril de miniaturas con muchas fotos "estira" la fila entera vía flexbox y arrastra a la foto principal a esa misma altura inflada. Con flex-start, la foto principal SIEMPRE mide su altura solo por su propio aspect-ratio (contenedor fijo, ver abajo), sin importar si el producto tiene 5 o 50 fotos; el carril lateral se ajusta después por JS/CSS a esa misma altura ya estable, nunca al revés. */ .modal-photo-inner{ display:flex; flex-direction:row; align-items:flex-start; gap:10px; min-width:0; } .modal-photo-inner.modal-photo-inner--single{ display:block; } .modal-main-photo{ position:relative; flex:1; min-width:0; overflow:hidden; aspect-ratio: 4/5; background: var(--black); } .modal-photo-inner--single .modal-main-photo{ aspect-ratio: 4/5; } /* object-fit:contain (en vez de cover): la foto nunca se recorta ni se deforma, se ve completa dentro del marco fijo, como en un ecommerce premium (Alibaba, Amazon). El fondo oscuro del contenedor rellena el espacio sobrante si la proporción de la foto no calza exacto con el marco 4:5. */ .modal-main-photo img{ width:100%; height:100%; object-fit:contain; transition: opacity .32s ease, transform .32s ease; } .modal-main-photo img.mp-fade{ opacity:0; transform: translateX(14px) scale(1.02); } /* Slider táctil premium de la foto principal (celular, ficha de producto): mientras dura el gesto se arma un "riel" de 3 fotos (anterior + actual + siguiente) en una sola fila flex de ancho 300% -técnica estándar de carrusel infinito, sin fotos sueltas superpuestas- que se desliza como un solo bloque con el dedo; al terminar, la vecina que quedó centrada "se convierte" en la foto real (vuelve a quedar una sola , igual que en reposo) sin que se note el cambio, así el ciclo nunca tiene un salto brusco en ningún sentido. */ .modal-main-photo.mmp-swipeable{ touch-action: pan-y; } /* Oculta (sin desconectar del documento) la de reposo mientras dura un gesto de swipe — ver el comentario en buildTrack()/teardownTrack() en el JS: mantenerla en el DOM (solo invisible) es lo que evita el "doble toque". */ .mmp-hidden-during-drag{ display:none; } .mmp-swipe-track{ display:flex; width:300%; height:100%; will-change: transform; backface-visibility: hidden; } .mmp-slide{ flex:0 0 33.3334%; width:33.3334%; height:100%; } .mmp-slide img{ width:100%; height:100%; object-fit:contain; display:block; background: var(--black); } /* Indicador de fotos (● ○ ○ ○), solo en celular: se sincroniza tanto al deslizar como al tocar una miniatura, para que siempre refleje la foto activa. */ .modal-photo-dots{ position:absolute; left:0; right:0; bottom:10px; z-index:5; display:none; align-items:center; justify-content:center; gap:6px; pointer-events:none; } .modal-photo-dots .modal-dot{ width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.55); box-shadow:0 0 0 1px rgba(0,0,0,.18); transition: background .25s ease, width .25s ease; } .modal-photo-dots .modal-dot.active{ background:#fff; width:16px; border-radius:4px; } @media (max-width:720px){ .modal-photo-dots{ display:flex; } } /* Carril de miniaturas: columna flex con una flecha arriba, la tira de fotos (con scroll propio + scroll-behavior:smooth para que tanto el clic en las flechas como el scrollIntoView del JS se vean como un desplazamiento suave, no un salto) y una flecha abajo. */ .modal-thumbs-rail{ position:relative; display:flex; flex-direction:column; width:64px; flex-shrink:0; gap:6px; } /* Flechas "inteligentes" estilo Alibaba: ocultas por defecto, solo aparecen al pasar el mouse sobre el carril (no hay que salir a buscarlas). En touch (celular/tablet) se quedan siempre visibles porque ahí no existe :hover. */ .thumbs-nav{ display:flex; align-items:center; justify-content:center; width:100%; height:20px; flex-shrink:0; background:none; border:1px solid var(--line); color: var(--ivory-dim); padding:0; cursor:pointer; opacity:.55; transition: opacity .25s ease, color .2s ease, border-color .2s ease; } .modal-thumbs-rail:hover .thumbs-nav{ opacity:1; } @media (hover:none){ .thumbs-nav{ opacity:.85; } } .thumbs-nav svg{ width:14px; height:14px; } .thumbs-nav:hover{ color: var(--gold); border-color: var(--gold); } .thumbs-nav[disabled]{ opacity:.18; cursor:default; pointer-events:none; } .modal-thumbs-rail:hover .thumbs-nav[disabled]{ opacity:.18; } /* Sin barra de desplazamiento visible en ningún navegador: el carril sigue desplazándose (flechas, hover-auto-scroll, touch/wheel directo), solo que sin el track/thumb gris de la scrollbar nativa. */ .modal-thumbs{ display:flex; flex-direction:column; gap:8px; flex:1; min-height:0; overflow-y:auto; scroll-behavior:smooth; scrollbar-width:none; -ms-overflow-style:none; } .modal-thumbs::-webkit-scrollbar{ display:none; width:0; height:0; } .modal-thumb{ width:64px; height:64px; flex-shrink:0; border:1px solid var(--line); overflow:hidden; opacity:.6; cursor:pointer; padding:0; background:none; transition: opacity .2s ease, border-color .2s ease; } .modal-thumb img{ width:100%; height:100%; object-fit:cover; } /* Miniatura seleccionada: borde dorado con un pulso suave y continuo, para que el cliente identifique de un vistazo qué foto está viendo. */ .modal-thumb.active{ opacity:1; border-color: var(--gold); animation: thumbGoldPulse 2.2s ease-in-out infinite; } @keyframes thumbGoldPulse{ 0%, 100%{ box-shadow: 0 0 0 1px rgba(201,162,39,0.35), 0 0 5px 1px rgba(201,162,39,0.22); } 50%{ box-shadow: 0 0 0 1px rgba(201,162,39,0.85), 0 0 11px 3px rgba(201,162,39,0.45); } } @media (prefers-reduced-motion: reduce){ .modal-thumb.active{ animation:none; } } /* Celular: la foto principal pasa arriba y el carril de miniaturas se convierte en una tira horizontal debajo (en vez de la columna al costado de escritorio), con las mismas flechas (ahora apuntando izquierda/derecha) y el mismo deslizamiento táctil de siempre. */ @media (max-width: 720px){ .modal-photo-inner{ flex-direction:column; gap:10px; min-width:0; } .modal-photo-inner .modal-main-photo{ order:1; aspect-ratio: 4/5; } /* min-width:0 aquí es lo que evita que la tira horizontal de miniaturas (o de videos, ver ppx-video-list) "empuje" el ancho de este contenedor -y con él el de la foto principal- más allá del viewport cuando el producto tiene muchas fotos; sin esto, el min-content de la fila sin salto de línea se le pasa al padre flex igual que ocurre con las columnas de una grilla. */ .modal-photo-inner .modal-thumbs-rail{ order:2; flex-direction:row; width:100%; min-width:0; height:auto !important; gap:8px; } .thumbs-nav{ width:26px; height:54px; flex-shrink:0; } .thumbs-nav svg{ transform: rotate(-90deg); } .modal-thumbs{ flex-direction:row; overflow-x:auto; overflow-y:hidden; gap:8px; min-width:0; } .modal-thumb{ width:54px; height:54px; } } @media (max-width: 480px){ .modal-photo-inner{ gap:8px; } .thumbs-nav{ width:22px; height:46px; } .modal-thumb{ width:46px; height:46px; } } .modal-close{ position:absolute; top:16px; right:16px; width:36px; height:36px; background: rgba(10,15,12,0.7); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; color: var(--ivory); z-index:2; } .modal-details{ padding: 40px 34px; display:flex; flex-direction:column; } .modal-avail{ font-size:12px; color: var(--emerald); letter-spacing:0.08em; text-transform:uppercase; font-weight:700; margin-top:16px; } .modal-specs{ margin-top: 26px; border-top: 1px solid var(--line); } .spec-row{ display:flex; justify-content:space-between; gap:14px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 14px; } .spec-row span:first-child{ color: var(--ivory-dim); } .spec-row span:last-child{ color: var(--ivory); text-align:right; } .modal-details .card-price{ margin-top: 4px; font-size:28px; } /* Selector de cantidad: pequeño, elegante, fondo oscuro con borde dorado — no un contador de ventas, es lo que el cliente añade al carrito. */ .pp-qty-row{ margin-top:18px; display:flex; align-items:center; gap:12px; } .pp-qty-label{ font-size:11px; letter-spacing:.12em; text-transform:uppercase; color: var(--ivory-dim); } .pp-qty-stepper{ display:inline-flex; align-items:center; background: var(--black-2); border:1px solid rgba(201,162,39,0.45); border-radius:8px; overflow:hidden; } .pp-qty-btn{ width:32px; height:32px; display:flex; align-items:center; justify-content:center; background:none; border:none; color: var(--gold); font-size:16px; line-height:1; cursor:pointer; transition: background .2s ease, color .2s ease; } .pp-qty-btn:hover{ background: rgba(201,162,39,0.14); } .pp-qty-btn:disabled{ opacity:.3; cursor:default; pointer-events:none; } .pp-qty-value{ min-width:34px; text-align:center; font-family: var(--font-display); font-size:15px; color: var(--ivory); border-left:1px solid rgba(201,162,39,0.3); border-right:1px solid rgba(201,162,39,0.3); padding:0 6px; line-height:32px; } .modal-actions{ margin-top:14px; display:flex; flex-direction:column; gap:10px; } @media (max-width: 720px){ .modal-box{ grid-template-columns: 1fr; } .modal-photo{ aspect-ratio: 1/1; } .modal-details{ padding: 28px 22px; } } /* ---------- Trust ---------- */ .trust-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap: 30px; } @media (max-width: 900px){ .trust-grid{ grid-template-columns: repeat(2,1fr); } } @media (max-width: 520px){ .trust-grid{ grid-template-columns: 1fr; } } .trust-item{ border-top: 1px solid var(--gold); padding-top: 20px; } .trust-item svg{ width:26px; height:26px; color: var(--gold); margin-bottom: 16px; } .trust-item h4{ font-size: 17px; color: var(--ivory); font-family: var(--font-display); font-weight:500; } .trust-item p{ color: var(--ivory-dim); font-size: 14px; margin-top:8px; line-height:1.6; } /* ---------- Stats (clientes satisfechos) ---------- */ .stats-block{ text-align:center; max-width: 640px; margin:0 auto; } .stats-number{ font-family: var(--font-display); font-weight:600; font-size: clamp(52px, 9vw, 96px); color: var(--gold); margin-top: 14px; line-height:1; letter-spacing: -0.01em; text-shadow: 0 0 26px rgba(201,162,39,0.28); } .stats-copy{ color: var(--ivory-dim); font-size: 15.5px; line-height:1.7; margin-top: 16px; } /* ---------- Reviews ---------- */ .reviews-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 26px; } @media (max-width: 900px){ .reviews-grid{ grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 82%; gap:16px; overflow-x:auto; scroll-snap-type: x mandatory; padding-bottom: 10px; margin: 0 -18px; padding-left:18px; padding-right:18px; } .review-card{ scroll-snap-align:center; } } .review-card{ background: var(--black-2); border: 1px solid var(--line); padding: 26px; display:flex; flex-direction:column; gap:14px; position:relative; } .review-card.placeholder-card{ border-style:dashed; } .review-top{ display:flex; align-items:center; gap:12px; } .review-avatar{ width:68px; height:68px; border-radius:50%; overflow:hidden; background: var(--black); border:1px solid var(--line); flex-shrink:0; display:flex; align-items:center; justify-content:center; } .review-avatar img{ width:100%; height:100%; object-fit:cover; } .review-avatar span{ font-family: var(--font-display); color: var(--gold); font-size:20px; } .review-name{ font-size:14.5px; color: var(--ivory); font-weight:700; } .review-stars{ color: var(--gold); font-size:13px; letter-spacing:2px; margin-top:2px; } .review-text{ color: var(--ivory-dim); font-size:14.5px; line-height:1.7; flex:1; } .review-card.placeholder-card .review-text{ font-style: italic; } .review-mark{ position:absolute; bottom:16px; right:16px; } /* ---------- 7b. Fondos de sección con foto traslúcida ---------- */ .has-bg{ position:relative; overflow:hidden; } .section-bg{ position:absolute; inset:0; z-index:0; pointer-events:none; background: var(--bg-img) var(--bg-pos, 50% 50%) / var(--bg-size, cover) no-repeat; opacity: var(--bg-opacity, .22); -webkit-mask-image: var(--bg-mask-a), var(--bg-mask-b); -webkit-mask-composite: source-in; mask-image: var(--bg-mask-a), var(--bg-mask-b); mask-composite: intersect; --bg-mask-b: linear-gradient(to bottom, transparent 0, #000 20%, #000 80%, transparent 100%); } .has-bg > .wrap{ position:relative; z-index:1; } /* Nosotros (Pagani turquesa, otro recuadro) y Reseñas (Poedagar verde) también tienen movimiento propio por scroll (igual patrón que Tienda: desliza + zoom sutil), cada una dentro de su propio recuadro/sección — ver el bloque JS más abajo (soloItems) */ #nosotros .section-bg{ --bg-img: var(--img-pagani); --bg-size: 128% auto; --bg-pos: 100% 0%; --bg-opacity:.32; will-change: background-position, transform; transform-origin: 100% 0%; --bg-mask-a: linear-gradient(to left, #000 0%, rgba(0,0,0,.7) 38%, transparent 80%); --bg-mask-b: linear-gradient(to bottom, transparent 0, #000 12%, rgba(0,0,0,.55) 46%, transparent 80%); } #reseñas .section-bg{ --bg-img: var(--img-poedagar); --bg-pos: 66% 50%; --bg-opacity:.30; will-change: background-position, transform; transform-origin: 66% 50%; --bg-mask-a: radial-gradient(ellipse 78% 90% at 55% 48%, #000 0%, rgba(0,0,0,.55) 45%, transparent 80%); } /* Reseñas: además del parallax continuo de arriba, la foto ENTRA deslizando + con fade cada vez que la sección aparece en pantalla al hacer scroll (igual patrón direccional que "Pieza destacada": desde la derecha al bajar, desde la izquierda al subir, y se repite cada vez). Esto vive en un envoltorio aparte (.section-bg-reveal) para no interferir con .section-bg, que ya recibe su propio transform/background- position en cada frame vía JS (soloItems) — así los dos efectos conviven sin pisarse. */ .section-bg-reveal{ position:absolute; inset:0; z-index:0; overflow:hidden; opacity:0; transform: translateX(260px); transition: transform 1.15s cubic-bezier(.16,.6,.18,1), opacity 1.15s ease-out; } #reseñas.rv-dir-left .section-bg-reveal{ transform: translateX(-260px); } #reseñas.rv-in .section-bg-reveal{ opacity:1; transform:translateX(0); } @media (prefers-reduced-motion: reduce){ .section-bg-reveal{ transition-duration:.01ms !important; transform:none !important; opacity:1 !important; } } /* ---------- Botones: flecha en "Ver colección" + ícono de WhatsApp con halo ---------- */ .btn-gold:hover{ box-shadow: 0 0 0 1px rgba(201,162,39,.55), 0 0 18px 4px rgba(201,162,39,.55), 0 0 34px 10px rgba(201,162,39,.28); } .btn-wsp:hover{ box-shadow: 0 0 0 1px rgba(37,211,102,.45), 0 0 14px 3px rgba(37,211,102,.42), 0 0 26px 8px rgba(37,211,102,.20); } .btn.wsp-outline:hover{ border-color: var(--emerald); color: var(--emerald); box-shadow: 0 0 0 1px rgba(37,211,102,.32), 0 0 12px 2px rgba(37,211,102,.30); } .btn-arrow{ display:inline-flex; flex:0 0 auto; margin-left:2px; transition: transform .3s ease; } .btn-arrow svg{ width:15px; height:15px; display:block; } .btn:hover .btn-arrow{ transform: translateX(4px); } /* el ícono de WhatsApp se "enciende" con un halo verde alrededor al pasar el cursor (intensidad reducida un poco) */ .wsp-icon{ display:inline-flex; flex:0 0 auto; transition: filter .3s ease; } .wsp-icon svg{ width:17px; height:17px; display:block; } .btn:hover .wsp-icon{ filter: drop-shadow(0 0 4px rgba(56,224,140,.8)) drop-shadow(0 0 10px rgba(56,224,140,.5)); } #wspHeaderBtn:hover{ color: var(--emerald); filter: drop-shadow(0 0 5px rgba(56,224,140,.75)) drop-shadow(0 0 11px rgba(56,224,140,.42)); } .wsp-float:hover{ box-shadow: 0 12px 30px rgba(0,0,0,.4), 0 0 0 6px rgba(37,211,102,.20), 0 0 20px 6px rgba(37,211,102,.42); } /* Hero + Categorías ("Catálogo por estilo") comparten UNA sola foto de fondo continua (el reloj plateado) con un único recorrido de scroll — se ven como una sola imagen en movimiento, sin corte entre ambos bloques. Colección ("Tienda") tiene su propio fondo independiente (Pagani turquesa), que arranca recién ahí hasta el final de "Nuestra colección" */ .style-catalog-wrap{ position:relative; overflow:hidden; } .style-catalog-wrap > .hero, .style-catalog-wrap > #categorias, .style-catalog-wrap > #coleccion, .style-catalog-wrap > #entrega, .style-catalog-wrap > #social{ position:relative; z-index:1; } .style-catalog-wrap--shop > #coleccion{ background: transparent; } .style-catalog-wrap--ship > #entrega, .style-catalog-wrap--ship > #social{ background: transparent; } .style-catalog-wrap--cat > .section-bg{ --bg-img: var(--img-hero-bg); --bg-opacity:.20; /* El ancho de la foto es el --cat-zoom% del bloque (100% = su tamaño natural, sin recorte extra) y el alto queda proporcional (auto). Como esa foto es más baja que el bloque combinado Hero+Categorías, el JS la desliza (solo con background-position-y) desde arriba (empieza junto al logo) hasta abajo, una sola imagen en movimiento entre ambas "ventanas". En pantallas angostas el reloj se veía chico/desencuadrado con solo el 100%, así que --cat-zoom lo agranda un poco más cuanto más angosta es la pantalla (manteniendo el mismo movimiento, el JS ya lo tiene en cuenta). */ --cat-zoom: 145%; --bg-size: var(--cat-zoom) auto; --bg-pos-x: 68%; --bg-pos: var(--bg-pos-x) 0%; will-change: background-position; transform-origin: 50% 50%; --bg-mask-a: linear-gradient(to bottom, transparent 0, #000 8%, #000 92%, transparent 100%); --bg-mask-b: linear-gradient(to bottom, #000 0%, #000 100%); } @media (min-width: 641px){ .style-catalog-wrap--cat > .section-bg{ --cat-zoom: 118%; } } @media (min-width: 981px){ .style-catalog-wrap--cat > .section-bg{ --bg-pos-x: 84%; --cat-zoom: 100%; } } .style-catalog-wrap--shop > .section-bg{ --bg-img: var(--img-pagani); --bg-size: 120% auto; --bg-pos: 56% 44%; --bg-opacity:.27; will-change: background-position, transform; transform-origin: 56% 44%; /* un solo desvanecido (vertical, arriba/abajo del bloque): un segundo desvanecido horizontal aquí hacía que la foto casi desapareciera en pantallas muy anchas */ --bg-mask-a: linear-gradient(to bottom, transparent 0, #000 6%, #000 96%, transparent 100%); --bg-mask-b: linear-gradient(to bottom, #000 0%, #000 100%); } /* Logística → Comunidad: mismo patrón continuo en movimiento (foto de varios relojes, Nibosi), pero con bastante menos zoom que Tienda (--bg-size más chico y variación de escala reducida en el JS) para que la foto se vea más "plana"/quieta */ .style-catalog-wrap--ship > .section-bg{ --bg-img: var(--img-nibosi); --bg-size: 104% auto; --bg-pos: 50% 30%; --bg-opacity:.30; will-change: background-position, transform; transform-origin: 50% 30%; --bg-mask-a: linear-gradient(to bottom, transparent 0, #000 6%, #000 96%, transparent 100%); --bg-mask-b: linear-gradient(to bottom, #000 0%, #000 100%); } /* ---------- 8. Logística y envíos ---------- */ .ship-grid{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 26px; } .ship-card{ --accent: var(--gold); --accent-line: rgba(201,162,39,.45); --accent-soft: rgba(201,162,39,.12); position:relative; border:1px solid var(--line); border-radius:8px; overflow:hidden; background: rgba(10,15,12,0.66); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: border-color .5s ease, transform .5s ease, box-shadow .5s ease; } .ship-card:hover{ border-color: var(--accent-line); box-shadow: 0 24px 60px -30px var(--accent-line); } .ship-wide{ grid-column: 1 / -1; } .ship-num{ font-family: var(--font-display); font-size:13px; letter-spacing:.14em; color: var(--accent); opacity:.85; } .ship-card h3{ font-size: clamp(22px, 2.4vw, 28px); color: var(--ivory); margin-top:6px; } .ship-lead{ color: var(--ivory-dim); font-size:15.5px; line-height:1.65; margin:12px 0 0; max-width: 560px; } .ship-lead strong, .ship-steps strong{ color: var(--ivory); font-weight:700; } .ship-chips{ display:flex; flex-wrap:wrap; gap:8px; margin: 16px 0 4px; } .chip{ font-size:12px; font-weight:700; letter-spacing:.05em; padding:7px 12px; border:1px solid var(--accent-line); background: var(--accent-soft); color: var(--ivory); border-radius:99px; } .ship-steps{ list-style:none; counter-reset: step; margin: 20px 0 0; padding:0; display:grid; gap:14px; } .ship-steps li{ counter-increment: step; position:relative; padding-left:42px; min-height:26px; color: var(--ivory-dim); font-size:14.5px; line-height:1.6; } .ship-steps li::before{ content: counter(step); position:absolute; left:0; top:0; width:26px; height:26px; border-radius:50%; border:1px solid var(--accent); color: var(--accent); display:flex; align-items:center; justify-content:center; font-family: var(--font-display); font-size:12.5px; } .ship-lima{ display:grid; grid-template-columns: 1.25fr 1fr; gap:0; } .ship-lima-main{ padding: clamp(24px, 3vw, 38px); } .ship-facts{ display:grid; align-content:center; gap:1px; background: var(--line); border-left:1px solid var(--line); } .fact{ background: rgba(10,15,12,0.72); padding: 20px 26px; display:flex; flex-direction:column; gap:4px; } .fact b{ font-family: var(--font-display); font-weight:500; font-size:24px; color: var(--gold-soft); } .fact span{ font-size:13px; color: var(--ivory-dim); letter-spacing:.02em; } .fact-big{ padding: 30px 26px; background: linear-gradient(135deg, rgba(201,162,39,.16), rgba(10,15,12,.72) 70%); } .fact-big b{ font-family: var(--font-brand); font-weight:700; font-size: clamp(34px, 4vw, 48px); letter-spacing:.1em; color: var(--gold); text-shadow: 0 0 30px rgba(201,162,39,.35); } .courier{ background:#0b100d; } .courier-shalom{ --accent:#F0555A; --accent-line: rgba(240,85,90,.5); --accent-soft: rgba(196,22,28,.16); } .courier-olva{ --accent:#F5B800; --accent-line: rgba(245,184,0,.5); --accent-soft: rgba(245,184,0,.13); } .courier-visual{ position:relative; aspect-ratio: 3 / 2; background: var(--courier-img) center top / cover no-repeat; transition: transform 1.2s cubic-bezier(.2,.6,.2,1); } .courier-shalom .courier-visual{ --courier-img: var(--img-courier-shalom); } .courier-olva .courier-visual{ --courier-img: var(--img-courier-olva); } .courier:hover .courier-visual{ transform: scale(1.03); } .courier-visual::after{ content:""; position:absolute; inset:0; background: linear-gradient(to bottom, rgba(11,16,13,0) 26%, rgba(11,16,13,.78) 58%, #0b100d 90%); } .courier-media{ overflow:hidden; } .courier-body{ position:relative; z-index:1; margin-top:-56px; padding: 0 clamp(22px, 2.6vw, 34px) clamp(24px, 2.6vw, 32px); } .ship-store{ display:flex; align-items:center; gap: 22px; padding: clamp(22px, 2.6vw, 32px) clamp(22px, 3vw, 38px); flex-wrap:wrap; } .ship-store .pin{ width:54px; height:54px; border-radius:50%; border:1px solid var(--accent-line); background: var(--accent-soft); display:flex; align-items:center; justify-content:center; flex:none; } .ship-store .pin svg{ width:24px; height:24px; color: var(--gold); } .ship-store .txt{ flex:1; min-width:240px; } .ship-store p{ color: var(--ivory-dim); font-size:15px; margin:8px 0 0; line-height:1.6; } @media (max-width: 900px){ .ship-grid{ grid-template-columns: 1fr; } .ship-lima{ grid-template-columns: 1fr; } .ship-facts{ border-left:0; border-top:1px solid var(--line); grid-template-columns: repeat(2, 1fr); } .fact-big{ grid-column: 1 / -1; } } /* ---------- Social ---------- */ .social-strip{ display:flex; flex-wrap:wrap; gap: 18px; } .social-pill{ display:flex; align-items:center; gap:10px; border:1px solid var(--line); padding: 14px 22px; font-size:13px; letter-spacing:0.06em; text-transform:uppercase; color: var(--ivory-dim); transition: all .25s ease; } .social-pill svg{ width:18px; height:18px; } .social-pill:hover{ border-color: var(--gold); color: var(--gold); } /* ---------- Footer ---------- */ footer{ background: var(--black-2); border-top: 1px solid var(--line); padding: 70px 0 30px; } .footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; } @media (max-width: 900px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 560px){ .footer-grid{ grid-template-columns: 1fr; } } .footer-col h5{ font-size: 12px; letter-spacing:0.1em; text-transform:uppercase; color: var(--gold); margin-bottom: 18px; font-weight:700; } .footer-col a, .footer-col p{ display:block; color: var(--ivory-dim); font-size: 14px; margin-bottom: 11px; line-height:1.6; } .footer-col a:hover{ color: var(--gold); } .footer-bottom{ margin-top: 60px; padding-top: 24px; border-top: 1px solid var(--line); display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:12.5px; color: var(--ivory-dim); } /* ---------- Floating WhatsApp ---------- */ .wsp-float{ position: fixed; right: 22px; bottom: 22px; z-index: 700; width:58px; height:58px; border-radius:50%; background: var(--emerald); display:flex; align-items:center; justify-content:center; box-shadow: 0 12px 30px rgba(0,0,0,.4); transition: transform .25s ease, background .25s ease; } .wsp-float:hover{ background:#0d8360; transform: scale(1.06); } .wsp-float svg{ width:28px; height:28px; color:#fff; } .wsp-float::before{ content:""; position:absolute; inset:-6px; border-radius:50%; border: 1px solid rgba(11,110,79,0.5); animation: pulse 2.4s ease-out infinite; } @keyframes pulse{ 0%{ transform: scale(0.9); opacity:.8; } 100%{ transform: scale(1.35); opacity:0; } } /* ---------- Cart drawer ---------- */ .cart-overlay{ position:fixed; inset:0; background: rgba(6,9,7,0.7); z-index: 1050; opacity:0; pointer-events:none; transition: opacity .3s ease; } .cart-overlay.open{ opacity:1; pointer-events:auto; } .cart-drawer{ position:fixed; top:0; right:0; bottom:0; width: min(400px,92vw); background: var(--black-2); border-left:1px solid var(--line); z-index: 1060; transform: translateX(100%); transition: transform .35s ease; display:flex; flex-direction:column; padding: 26px 24px; } .cart-drawer.open{ transform:none; } .cart-drawer-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom: 24px; flex-shrink:0; } .cart-drawer-head .icon-btn{ width:30px; height:30px; background: rgba(255,255,255,0.06); border-radius:50%; } .cart-drawer-head .icon-btn svg{ width:16px; height:16px; } .cart-drawer{ overflow:hidden; } .cart-items{ flex:1; min-height:0; overflow:auto; display:flex; flex-direction:column; gap:16px; } .cart-item{ position:relative; display:flex; gap:14px; border-bottom: 1px solid var(--line); padding:0 26px 14px 0; } .cart-item-photo{ width:64px; height:80px; flex-shrink:0; border:1px solid var(--line); overflow:hidden; background: var(--black); } .cart-item-photo img{ width:100%; height:100%; object-fit:cover; display:block; } .cart-item-info{ flex:1; min-width:0; } .cart-item-info .brand{ font-size:10.5px; letter-spacing:0.08em; text-transform:uppercase; color: var(--gold); } .cart-item-info h4{ font-family: var(--font-display); font-size:15px; color: var(--ivory); margin-top:2px; } .cart-item-row{ display:flex; align-items:flex-end; justify-content:space-between; margin-top:10px; gap:10px; } .cart-item-stepper{ display:flex; align-items:center; gap:0; border:1px solid var(--line); border-radius:20px; overflow:hidden; flex-shrink:0; } .cart-item-qty-btn{ background:none; border:none; color: var(--ivory); width:26px; height:26px; font-size:15px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; transition: color .2s ease; } .cart-item-qty-btn:disabled{ color: var(--ivory-dim); opacity:.35; cursor:default; } .cart-item-qty-btn:not(:disabled):hover{ color: var(--gold); } .cart-item-qty-value{ min-width:20px; text-align:center; font-size:13px; font-weight:700; color: var(--ivory); } .cart-item-prices{ text-align:right; flex-shrink:0; } .cart-item-prices strong{ display:block; font-family: var(--font-display); font-size:16px; color: var(--ivory); } .cart-item-prices small{ display:block; font-size:10.5px; color: var(--ivory-dim); margin-top:2px; } .cart-item-remove{ position:absolute; top:0; right:0; background:none; border:none; padding:4px; color: var(--ivory-dim); cursor:pointer; display:flex; align-items:center; justify-content:center; transition: color .2s ease; } .cart-item-remove svg{ width:16px; height:16px; } .cart-item-remove:hover{ color: var(--gold); } .cart-empty{ color: var(--ivory-dim); font-size:14px; text-align:center; padding: 40px 10px; } .cart-footer{ border-top: 1px solid var(--line); padding-top: 20px; margin-top:12px; flex-shrink:0; } .toast{ position: fixed; bottom: 96px; right: 22px; background: var(--gold); color:#171208; padding: 13px 20px; font-size:13px; font-weight:700; letter-spacing:0.03em; z-index: 1100; transform: translateY(12px); opacity:0; transition: all .3s ease; pointer-events:none; } .toast.show{ transform:none; opacity:1; } /* ---------- Ticker bar ---------- */ .ticker-bar{ background: var(--black-2); border-bottom: 1px solid var(--line); overflow:hidden; white-space:nowrap; } .ticker-track{ display:inline-flex; align-items:center; gap:34px; padding: 9px 0; animation: tickerScroll 26s linear infinite; will-change: transform; } .ticker-bar:hover .ticker-track{ animation-play-state: paused; } .ticker-item{ display:inline-flex; align-items:center; gap:8px; font-size:11px; letter-spacing:0.09em; text-transform:uppercase; color: var(--ivory-dim); font-weight:700; } .ticker-item svg{ width:15px; height:15px; color: var(--gold); flex-shrink:0; } .ticker-sep{ color: var(--gold); opacity:.45; font-size:10px; } @keyframes tickerScroll{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce){ .ticker-track{ animation: none; } } /* ================= LOGO ORO PULIDO + FOTOS + VIDEO (nuevo) ================= */ /* ---------- 9b. Logo: halo dorado fijo + brillo plateado que lo recorre ---------- */ .logo-mark{ position:relative; display:block; flex-shrink:0; isolation:isolate; /* Fuerza a Chrome a pintar la máscara del logo desde el primer frame: sin esto, a veces el logo queda invisible hasta que el usuario redimensiona la ventana (bug conocido de Chrome con mask-image + variables CSS en la primera carga). */ transform: translateZ(0); backface-visibility: hidden; } .logo-mark::before{ content:""; position:absolute; inset:-9%; z-index:0; pointer-events:none; border-radius:50%; background: radial-gradient(closest-side, rgba(255,222,140,0.20) 0%, rgba(201,162,39,0.08) 58%, rgba(201,162,39,0) 78%); opacity:.5; transform: scale(.98); will-change: opacity, transform; animation: logoHalo var(--halo-duration) ease-in-out infinite; } .logo-mark::after{ content:""; position:absolute; inset:0; z-index:1; background: var(--logo-url) center/contain no-repeat; filter: drop-shadow(0 0 3px rgba(255,205,90,0.18)) saturate(1.1) contrast(1.04); } @keyframes logoHalo{ 0%,100%{ opacity:.17; transform: scale(.97); } 50%{ opacity:.33; transform: scale(1.02); } } /* brillo plateado que recorre el dragón, recortado a su silueta exacta */ .logo-mark .logo-shine{ content:""; position:absolute; inset:0; z-index:2; pointer-events:none; background: linear-gradient(100deg, transparent 32%, rgba(255,255,255,0.55) 44%, rgba(255,255,255,0.98) 50%, rgba(255,255,255,0.55) 56%, transparent 68%); background-size: 220% 100%; background-position: 150% 0; -webkit-mask-image: var(--logo-url); -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; mask-image: var(--logo-url); mask-size: contain; mask-repeat: no-repeat; mask-position: center; mix-blend-mode: screen; animation: logoShine var(--sheen-duration) cubic-bezier(.4,0,.2,1) infinite; } @keyframes logoShine{ 0%,14%{ background-position: 150% 0; } 62%,100%{ background-position: -70% 0; } } .brand-logo-img{ width:40px; height:48px; } .footer-logo{ width:54px; height:65px; margin-bottom:14px; } .review-logo-mark{ width:22px; height:26px; opacity:.92; } .review-logo-mark::before{ display:none; } /* ---------- 9c. Logo grande del hero (la foto ahora va de fondo en todo el recuadro del hero) ---------- */ .hero-logo-wrap{ position:relative; display:block; margin: 0 0 clamp(14px, 2.2vh, 22px); width: clamp(88px, 8.6vw, 118px); aspect-ratio: 520 / 627; } .hero-logo-wrap .logo-mark{ position:absolute; inset:0; width:100%; height:100%; z-index:1; } @media (prefers-reduced-motion: reduce){ .logo-mark .logo-shine{ animation:none; } } /* ---------- 9d. Texto de lujo: brillo plata + oro que recorre las letras ---------- */ .lux-text{ background: var(--lux-sheen) 100% 0 / 220% 100% no-repeat, var(--lux-base); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; animation: luxSheen var(--sheen-duration) cubic-bezier(.45,0,.25,1) infinite; } .lux-text *{ color:inherit; -webkit-text-fill-color:inherit; font-weight:inherit; } .brand-word.lux-text b{ color:inherit; -webkit-text-fill-color:inherit; font-weight:inherit; } @keyframes luxSheen{ 0%,14%{ background-position: 100% 0, 0 0; } 62%,100%{ background-position: -20% 0, 0 0; } } .brand-word{ font-family: var(--font-brand); font-weight:700; font-size:19px; letter-spacing:.12em; text-transform:uppercase; white-space:nowrap; } .brand-word b{ font-weight:inherit; } /* ---------- HERO: la foto viene de .section-bg (compartida con Categorías, ver .style-catalog-wrap--cat más abajo) para que se vea como UNA sola imagen continua en movimiento entre ambos bloques, sin corte. Aquí solo queda el velo oscuro que mantiene el texto legible sobre la foto. ---------- */ .hero{ isolation:isolate; } .hero-overlay{ position:absolute; inset:0; z-index:0; pointer-events:none; /* sin ningún tono dorado/verde arriba del logo: solo un velo oscuro neutro, y para que no se note el cambio junto a Categorías (que no tiene velo propio) se desvanece a 0 (transparente del todo) antes de llegar al final del bloque */ background: linear-gradient(180deg, rgba(4,7,5,0.55) 0%, rgba(4,7,5,0.22) 40%, rgba(4,7,5,0) 78%, rgba(4,7,5,0) 100%); } /* ---------- Banda fotográfica full-bleed ---------- */ .photo-band{ position:relative; min-height: 460px; display:flex; align-items:center; overflow:hidden; padding: 90px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); } /* Capa de la foto del reloj, separada del texto para poder animarla de forma independiente. Entra deslizando desde la derecha al bajar, o desde la izquierda al subir (clase "pb-dir-left" puesta por JS según la dirección del scroll). */ .photo-band-img{ position:absolute; inset:0; z-index:0; overflow:hidden; opacity:0; transform: translateX(80px); transition: transform 1.05s cubic-bezier(.16,.6,.18,1), opacity 1.05s ease-out; } .photo-band.pb-dir-left .photo-band-img{ transform: translateX(-80px); } .photo-band.pb-in .photo-band-img{ opacity:1; transform:translateX(0); } .photo-band-img-inner{ position:absolute; inset:-4%; background: var(--img-daydate) var(--band-pos-x) center/cover no-repeat; } /* Respiración sutil y continua tras la entrada: solo empieza cuando la animación de entrada ya terminó, para no mezclar dos transforms distintos a la vez. */ .photo-band.pb-in .photo-band-img-inner{ animation: pbBreathe 8.5s ease-in-out 1.1s infinite; } @keyframes pbBreathe{ 0%, 100% { transform: scale(1); } 50% { transform: scale(1.018); } } .photo-band::before{ content:""; position:absolute; inset:0; z-index:1; background: linear-gradient(90deg, rgba(6,10,8,0.90) 0%, rgba(6,10,8,0.62) 42%, rgba(6,10,8,0.12) 100%); } .photo-band .wrap{ position:relative; z-index:2; width:100%; } .photo-band h2{ font-size: clamp(30px, 4.4vw, 52px); color: var(--ivory); max-width: 620px; line-height:1.05; margin-top:14px; } .photo-band h2 em{ font-style:italic; color: var(--gold); } .photo-band p{ color: var(--ivory-dim); max-width: 460px; margin-top:18px; line-height:1.75; font-size:16px; } .photo-band .band-ctas{ display:flex; gap:14px; margin-top:30px; flex-wrap:wrap; } /* Entrada del texto: fundido + leve desplazamiento hacia arriba, en cascada, un poco después de que empieza a entrar la foto del reloj. */ .photo-band .eyebrow, .photo-band h2, .photo-band p, .photo-band .band-ctas{ opacity:0; transform: translateY(16px); transition: opacity .7s ease-out, transform .7s ease-out; } .photo-band.pb-in .eyebrow{ opacity:1; transform:none; transition-delay: .25s; } .photo-band.pb-in h2{ opacity:1; transform:none; transition-delay: .40s; } .photo-band.pb-in p{ opacity:1; transform:none; transition-delay: .55s; } .photo-band.pb-in .band-ctas{ opacity:1; transform:none; transition-delay: .70s; } @media (max-width: 900px){ .photo-band{ background-position: center 40%; min-height:auto; padding: 70px 0; } .photo-band::before{ background: linear-gradient(180deg, rgba(6,10,8,0.60), rgba(6,10,8,0.90)); } } @media (prefers-reduced-motion: reduce){ .photo-band-img, .photo-band .eyebrow, .photo-band h2, .photo-band p, .photo-band .band-ctas{ transition-duration:.01ms !important; transform:none !important; } .photo-band.pb-in .photo-band-img-inner{ animation:none; } } /* ---------- Sección galería ---------- */ .gallery-grid{ display:grid; grid-template-columns: 1.4fr 1fr; gap:18px; } .gallery-tile{ position:relative; overflow:hidden; border:1px solid var(--line); background:#0b100d; min-height:280px; } .gallery-tile.placeholder-card{ border-style:dashed; color: var(--ivory-dim); } .gallery-tile img, .gallery-tile video{ width:100%; height:100%; object-fit:cover; display:block; transition: transform .8s ease; } .gallery-tile:hover img{ transform: scale(1.05); } .gallery-tile figcaption{ position:absolute; left:0; right:0; bottom:0; padding:18px 20px; z-index:2; background: linear-gradient(transparent, rgba(6,10,8,0.92)); font-size:12.5px; letter-spacing:0.1em; text-transform:uppercase; color: var(--gold-soft); } @media (max-width:760px){ .gallery-grid{ grid-template-columns:1fr; } .gallery-tile{ min-height:240px; } } /* ---------- 10. Destello plateado al pasar el cursor (menú + filtros) ---------- */ :root{ /* el texto base durante el destello queda un poco más apagado que su blanco/marfil normal (--shine-base), para que la franja de luz blanca que lo recorre se note al pasar — igual que el brillo plateado se nota al recorrer el logo */ --shine-sweep: linear-gradient(100deg, rgba(255,255,255,0) 22%, rgba(255,255,255,.85) 40%, #fff 50%, rgba(255,255,255,.85) 60%, rgba(255,255,255,0) 78%); } @keyframes textShine{ 0%{ background-position: 160% 0, 0 0; } 100%{ background-position: -80% 0, 0 0; } } nav.main-nav a{ --shine-base: #948d7a; } .filter-group summary{ --shine-base: #948d7a; } .filter-opts label{ --shine-base: #948d7a; } .clear-filters{ --shine-base: #8a6a1c; } nav.main-nav a:hover, .filter-group summary:hover, .filter-opts label:hover, .clear-filters:hover{ background-image: var(--shine-sweep), linear-gradient(var(--shine-base), var(--shine-base)); background-size: 240% 100%, 100% 100%; background-repeat: no-repeat, no-repeat; background-position: 160% 0, 0 0; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; animation: textShine 1.05s cubic-bezier(.4,0,.2,1); } @media (prefers-reduced-motion: reduce){ nav.main-nav a:hover, .filter-group summary:hover, .filter-opts label:hover, .clear-filters:hover{ animation:none; } } /* ---------- 11. Ficha de producto en página completa (antes: modal pequeño) ---------- */ .modal-overlay{ display:block; padding:0; overflow-y:auto; -webkit-overflow-scrolling:touch; } .pp-page{ min-height:100%; background: var(--black); transform: translateY(14px); opacity:0; transition: transform .35s ease, opacity .35s ease; } .modal-overlay.open .pp-page{ transform:none; opacity:1; } .pp-topbar{ position:sticky; top:0; z-index:5; display:flex; align-items:center; gap:18px; padding: 16px 28px; background: rgba(15,22,19,0.92); backdrop-filter: blur(6px); border-bottom: 1px solid var(--line); } .pp-back{ display:flex; align-items:center; gap:8px; background:none; border:none; padding:0; color: var(--ivory); font-family: var(--font-body); font-size: 13px; letter-spacing:0.04em; flex-shrink:0; } .pp-back svg{ width:16px; height:16px; color: var(--gold); } .pp-back:hover{ color: var(--gold); } .pp-breadcrumb{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:12.5px; color: var(--ivory-dim); min-width:0; } .pp-breadcrumb a{ color: var(--ivory-dim); } .pp-breadcrumb a:hover{ color: var(--gold); } .pp-breadcrumb span.pp-crumb-sep{ color: var(--line); } .pp-breadcrumb span.pp-crumb-current{ color: var(--gold-soft); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .pp-body{ max-width: var(--container); margin:0 auto; padding: 40px 28px 80px; } /* min-width:0 en las dos columnas de la grilla es la corrección clave: sin esto, una fila horizontal sin salto de línea dentro de la galería (el carril de miniaturas o la lista de videos, ambos con overflow-x:auto propio) le pasa su ancho de contenido completo (min-content) a la COLUMNA de la grilla -el comportamiento por defecto de CSS Grid-, inflando toda la columna (y con ella la foto principal) más allá del viewport, sin importar cuántas miniaturas o videos tenga el producto (5, 13, 30, 50...). Con min-width:0 la columna puede encogerse hasta su ancho asignado y cada fila interna hace su propio scroll. */ .pp-main{ display:grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items:start; } .pp-gallery{ position:sticky; top: 78px; min-width:0; } .pp-gallery .modal-photo{ border:1px solid var(--line); background: var(--black-2); padding:10px; } .pp-gallery .modal-main-photo{ border:1px solid var(--line); background: var(--black); } .pp-gallery .modal-thumb{ background: var(--black); } .pp-details{ padding: 0; min-width:0; } .pp-details h1{ font-family: var(--font-display); font-size: clamp(26px, 2.6vw, 36px); font-weight:500; color: var(--ivory); margin-top:10px; line-height:1.2; } /* ---------- Selector de colores (variantes) dentro de la ficha de producto ---------- Distinto y separado del sistema legado de swatches (.ppx-swatch / #ppSwatchSlot, que solo aplica a un producto puntual con "fotos intercambiables" falsas): esta sección solo aparece cuando el producto tiene variantes REALES (otros productos activos con el mismo variantGroup) y cada círculo usa la foto principal de esa variante. Reutiliza el mismo estilo .card-variant-swatch del catálogo, un poco más grande para la ficha. ---------- */ .pp-variant-block{ margin-top:16px; } .pp-variant-label{ display:block; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color: var(--ivory-dim,#9b968a); font-weight:700; margin:0 0 9px; } .pp-variant-row{ display:flex; flex-wrap:wrap; gap:9px; } .pp-variant-row .card-variant-swatch{ width:34px; height:34px; } .pp-gallery{ transition: opacity .18s ease; } .pp-gallery.ppv-swap-out{ opacity:.18; } /* ---------- Métodos de pago: franja premium en DOS filas fijas (fila 1: icono+texto | logos; fila 2: candado+texto, centrada abajo con su propio separador horizontal). Estructura estable en cualquier ancho -no depende de un salto de línea improvisado-, paleta negro-dorado propia. ---------- */ .pp-payment-methods{ margin-top:18px; padding:14px 20px; border:1px solid rgba(212,168,54,0.45); border-radius:16px; background: #07100D; box-shadow: 0 0 15px rgba(212,168,54,0.15), inset 0 1px 0 rgba(255,255,255,0.08); display:flex; flex-direction:column; gap:10px; } .pp-pay-row{ display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap; } .pp-pay-row--bottom{ padding-top:10px; border-top:1px solid rgba(212,168,54,0.2); } .pp-pay-info, .pp-pay-secure{ display:flex; align-items:center; gap:10px; } .pp-pay-ico{ display:flex; align-items:center; justify-content:center; flex-shrink:0; color: #D4A836; } .pp-pay-ico svg{ width:19px; height:19px; } .pp-pay-text{ display:flex; flex-direction:column; gap:2px; line-height:1.2; } .pp-pay-text strong{ font-size:13px; font-weight:600; letter-spacing:0.4px; text-transform:uppercase; color: #F5E7C1; } .pp-pay-text small{ font-size:10px; font-weight:500; letter-spacing:0.03em; text-transform:uppercase; color: #B8B8B8; } .pp-pay-text--secure{ font-size:10.5px; font-weight:600; letter-spacing:0.03em; text-transform:uppercase; color: #F5E7C1; white-space:nowrap; } .pp-pay-sep{ width:1px; align-self:stretch; background: rgba(212,168,54,0.3); flex-shrink:0; } /* Logos de medios de pago: PNG con fondo transparente, proporción original de cada logo (solo se fija la altura, el ancho queda automático), tamaño compacto y separación uniforme. */ .pp-pay-logos{ display:flex; align-items:center; gap:12px; flex-shrink:0; } .pp-pay-logo{ height:20px; width:auto; display:block; object-fit:contain; } .pp-pay-logo--wide{ height:17px; } @media (max-width: 480px){ .pp-payment-methods{ padding:12px 14px; gap:8px; } .pp-pay-row{ gap:10px; } .pp-pay-text small{ display:none; } .pp-pay-logos{ gap:8px; } .pp-pay-logo{ height:17px; } .pp-pay-logo--wide{ height:14px; } } .pp-acc-specs .spec-row{ display:flex; justify-content:space-between; gap:14px; padding:10px 0; border-bottom:1px solid var(--line); font-size:13.5px; } .pp-acc-specs .spec-row:last-child{ border-bottom:none; } .pp-acc-specs .spec-row span:first-child{ color: var(--ivory-dim); } .pp-acc-specs .spec-row span:last-child{ color: var(--ivory); text-align:right; } .pp-sold{ margin-top:12px; font-size:13.5px; color: var(--ivory-dim); letter-spacing:0.01em; } .pp-sold strong{ color: var(--gold); font-weight:600; } .pp-price-block{ margin-top:14px; display:flex; align-items:center; gap:12px; flex-wrap:wrap; } .pp-price-old{ font-family: var(--font-display); font-size:17px; color: var(--ivory-dim); text-decoration: line-through; opacity:.7; } .pp-price-now{ font-family: var(--font-display); font-size:28px; color: var(--ivory); } .pp-offer-pill{ display:inline-flex; align-items:center; padding: 4px 10px; background: #b3213a; color:#fff; font-size:11px; font-weight:700; letter-spacing:0.04em; text-transform:uppercase; border-radius:3px; } /* ---------- Métodos de envío: recuadro premium con la imagen de referencia (Contraentrega Lima / Shalom / Otra agencia) ---------- Bloque a todo el ancho del modal (fuera de la columna de detalles) para que la imagen se vea grande y legible, en vez de encogida al ancho de la galería. */ .pp-shipping-frame{ padding:18px 20px; border:1px solid var(--line); background: var(--black-2); position:relative; } .pp-shipping-frame--full{ margin-top:24px; width:100%; max-width:none; } .pp-shipping-frame::before, .pp-shipping-frame::after{ content:""; position:absolute; width:18px; height:18px; border: 1.5px solid var(--gold); opacity:.85; } .pp-shipping-frame::before{ top:-1px; left:-1px; border-right:none; border-bottom:none; } .pp-shipping-frame::after{ bottom:-1px; right:-1px; border-left:none; border-top:none; } .pp-shipping-head{ display:flex; align-items:center; justify-content:center; gap:10px; padding-bottom:12px; margin-bottom:14px; border-bottom:1px solid var(--line); color: var(--gold-soft); font-family: var(--font-display); font-size:14px; letter-spacing:0.14em; text-transform:uppercase; } .pp-shipping-head svg{ width:19px; height:19px; } .pp-shipping-img{ display:block; width:100%; height:auto; border-radius:2px; border:1px solid var(--line); } .pp-shipping-img--mobile{ display:none; } .pp-warranty-note{ margin-top:18px; display:flex; align-items:center; gap:10px; font-size:12.5px; color: var(--ivory-dim); } .pp-warranty-note svg{ width:18px; height:18px; color: var(--gold); flex-shrink:0; } .pp-warranty-note strong{ color: var(--ivory); font-weight:600; } .pp-accordion{ margin-top:40px; display:flex; flex-direction:column; gap:14px; } .pp-acc-item{ border:1px solid var(--line); background: var(--black-2); } .pp-acc-head{ width:100%; display:flex; align-items:center; justify-content:center; gap:10px; position:relative; padding:16px 44px; background:none; border:none; cursor:pointer; font-family: var(--font-display); font-size:13px; letter-spacing:0.14em; color: var(--ivory); } .pp-acc-head svg{ position:absolute; right:16px; top:50%; transform: translateY(-50%); width:16px; height:16px; color: var(--gold); transition: transform .25s ease; } .pp-acc-head[aria-expanded="false"] svg{ transform: translateY(-50%) rotate(-90deg); } .pp-acc-head:hover{ color: var(--gold); } .pp-acc-body{ border-top:1px solid var(--line); display:grid; grid-template-rows: 1fr; transition: grid-template-rows .28s ease; } .pp-acc-body.is-collapsed{ border-top-color: transparent; grid-template-rows: 0fr; } .pp-acc-body > .pp-acc-inner{ overflow:hidden; padding: 20px 22px; } .pp-acc-body.is-collapsed > .pp-acc-inner{ padding-top:0; padding-bottom:0; } .pp-acc-inner p{ font-size:13.5px; line-height:1.7; color: var(--ivory-dim); } .pp-acc-inner ul{ display:flex; flex-direction:column; gap:8px; } .pp-acc-inner li{ font-size:13.5px; line-height:1.6; color: var(--ivory-dim); padding-left:16px; position:relative; } .pp-acc-inner li::before{ content:""; position:absolute; left:0; top:8px; width:5px; height:5px; background: var(--gold); } .pp-acc-inner li strong{ color: var(--ivory); font-weight:600; } .pp-related{ margin-top: 96px; padding-top: 64px; border-top:1px solid var(--line); } .pp-related .section-head{ margin-bottom:40px; } .pp-related .product-grid{ grid-template-columns: repeat(4,1fr); gap: 26px 20px; } @media (max-width: 1080px){ .pp-related .product-grid{ grid-template-columns: repeat(3,1fr); } } @media (max-width: 900px){ .pp-main{ grid-template-columns: 1fr; gap:32px; } .pp-gallery{ position:static; } } @media (max-width: 720px){ .pp-topbar{ padding: 14px 18px; gap:12px; } .pp-breadcrumb{ display:none; } .pp-body{ padding: 28px 18px 60px; } .pp-related .product-grid{ grid-template-columns: repeat(2,1fr); gap:14px 10px; } /* Métodos de envío: se extiende de borde a borde de la pantalla (fuera del padding lateral del body) con padding mínimo, para que la imagen se vea grande, no como miniatura. */ .pp-shipping-frame--full{ margin-top:10px; width:calc(100% + 36px); margin-left:-18px; margin-right:-18px; } .pp-shipping-frame{ padding:6px; } .pp-shipping-head{ padding-bottom:6px; margin-bottom:6px; font-size:12px; gap:6px; } .pp-shipping-head svg{ width:15px; height:15px; } .pp-shipping-img{ border-radius:1px; } /* En móvil se usa la imagen vertical (las 3 opciones apiladas, texto más grande y legible) en vez de encoger la horizontal de escritorio. */ .pp-shipping-img--desktop{ display:none; } .pp-shipping-img--mobile{ display:block; } } /* ---------- Videos del producto: sección PREMIUM CENTRADA debajo de la foto principal (plantilla global — se genera automáticamente para cualquier producto que tenga videos cargados desde el Admin, sin configuración manual). Reemplaza el viejo sistema de columna/lista lateral: ahora los videos quedan reproduciéndose en línea (no son miniaturas que solo abren un lightbox), centrados, con un layout que depende de cuántos videos tiene el producto: 1 video -> un solo reproductor centrado. 2 videos -> dos reproductores centrados uno junto al otro (sin estirarlos). 3+ videos-> carrusel horizontal centrado con flechas prev/next. Se mantienen en el flujo normal del documento (nada de position:sticky) y un IntersectionObserver por video se encarga de reanudar/pausar la reproducción con un fundido de opacidad al entrar/salir de pantalla, para que "acompañen" el scroll sin desaparecer de golpe ni romper el layout. */ .ppx-vid-wrap{ margin-top:18px; } .ppx-vid-label{ display:block; text-align:center; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ivory-dim,#9b968a); font-weight:700; margin:0 0 10px; } .ppx-vid-carousel{ position:relative; } .ppx-vid-grid{ display:flex; flex-direction:row; justify-content:center; align-items:flex-start; gap:14px; } .ppx-vid-grid.count-3plus{ justify-content:flex-start; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; padding:2px 4px 8px; scrollbar-width:none; -ms-overflow-style:none; } .ppx-vid-grid.count-3plus::-webkit-scrollbar{ display:none; height:0; } .ppx-vid-item{ position:relative; flex:0 0 auto; z-index:1; aspect-ratio:9/16; border-radius:14px; overflow:hidden; border:1px solid var(--line); cursor:pointer; box-shadow: 0 10px 28px rgba(0,0,0,.4); background:#000; scroll-snap-align:center; transition: opacity .45s ease, transform .25s ease, box-shadow .25s ease, border-color .25s ease; } .ppx-vid-item:hover{ transform: scale(1.02); box-shadow: 0 12px 32px rgba(0,0,0,.55); border-color: var(--gold); } .ppx-vid-item.io-hidden{ opacity:.4; } .ppx-vid-grid.count-1 .ppx-vid-item{ width:min(300px, 72vw); } .ppx-vid-grid.count-2 .ppx-vid-item{ width:min(230px, 42vw); } .ppx-vid-grid.count-3plus .ppx-vid-item{ width:min(210px, 56vw); } .ppx-vid-item video{ width:100%; height:100%; object-fit:cover; display:block; } .ppx-vid-mute{ position:absolute; right:9px; bottom:9px; width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; z-index:2; background: rgba(0,0,0,.55); border:1px solid rgba(255,255,255,.5); color:#fff; cursor:pointer; } .ppx-vid-mute svg{ width:14px; height:14px; } .ppx-vid-mute .ico-on{ display:block; } .ppx-vid-mute .ico-off{ display:none; } .ppx-vid-mute.is-unmuted .ico-on{ display:none; } .ppx-vid-mute.is-unmuted .ico-off{ display:block; } /* Flechas laterales "◀ Video / Video ▶": solo en carrusel de 3+ videos. Reemplazan la antigua barra/scrollbar inferior -ya quitada arriba-; minimalistas, en la misma línea visual que .ppx-video-lightbox-nav, y SOLO aparecen con hover real (mouse), con una transición de opacidad fluida en vez de un toggle brusco. En touch/mobile no hay hover:hover, así que quedan permanentemente invisibles e inertes (pointer-events:none): el carrusel táctil sigue siendo puro swipe, sin flechas nuevas, tal como antes. */ .ppx-vid-nav{ position:absolute; top:50%; transform:translateY(-50%); z-index:3; display:flex; align-items:center; gap:6px; padding:8px 13px; border-radius:999px; background: rgba(10,10,10,.55); border:1px solid rgba(255,255,255,.22); color: var(--ivory); cursor:pointer; opacity:0; pointer-events:none; transition: opacity .35s ease, color .25s ease, border-color .25s ease, background-color .25s ease; } .ppx-vid-nav:hover{ color: var(--gold); border-color: var(--gold); background: rgba(10,10,10,.78); } .ppx-vid-nav svg{ width:15px; height:15px; flex:0 0 auto; } .ppx-vid-nav-label{ font-size:10px; letter-spacing:.13em; text-transform:uppercase; font-weight:700; } .ppx-vid-nav--prev{ left:-4px; } .ppx-vid-nav--next{ right:-4px; } @media (hover: hover) and (pointer: fine){ .ppx-vid-carousel:hover .ppx-vid-nav{ opacity:1; pointer-events:auto; } } @media (max-width: 720px){ .ppx-vid-wrap{ margin-top:14px; } .ppx-vid-nav{ padding:6px 10px; } .ppx-vid-nav svg{ width:13px; height:13px; } .ppx-vid-nav-label{ font-size:9px; } .ppx-vid-nav--prev{ left:0; } .ppx-vid-nav--next{ right:0; } .ppx-vid-mute{ width:26px; height:26px; } } .ppx-video-lightbox{ position:fixed; inset:0; z-index:1100; background: rgba(0,0,0,.92); display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition: opacity .22s ease; } .ppx-video-lightbox.open{ opacity:1; pointer-events:auto; } .ppx-video-lightbox video{ max-width:min(92vw,520px); max-height:88vh; width:100%; border-radius:6px; background:#000; } .ppx-video-lightbox-close{ position:absolute; top:20px; right:20px; width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.08); border:1px solid var(--line); color: var(--ivory); cursor:pointer; } .ppx-video-lightbox-close:hover{ color: var(--gold); border-color: var(--gold); } .ppx-video-lightbox-nav{ position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.08); border:1px solid var(--line); color: var(--ivory); cursor:pointer; z-index:2; } .ppx-video-lightbox-nav:hover{ color: var(--gold); border-color: var(--gold); } .ppx-video-lightbox-nav svg{ width:20px; height:20px; } .ppx-video-lightbox-prev{ left:16px; } .ppx-video-lightbox-next{ right:16px; } .ppx-video-lightbox-nav[hidden]{ display:none; } .ppx-video-lightbox-counter{ position:absolute; bottom:18px; left:50%; transform:translateX(-50%); font-size:12px; letter-spacing:.04em; color: var(--ivory); background: rgba(0,0,0,.5); border:1px solid var(--line); padding:4px 10px; border-radius:20px; } .ppx-video-lightbox-counter[hidden]{ display:none; } @media (max-width: 480px){ .ppx-video-lightbox-nav{ width:36px; height:36px; } .ppx-video-lightbox-nav svg{ width:16px; height:16px; } .ppx-video-lightbox-prev{ left:8px; } .ppx-video-lightbox-next{ right:8px; } } /* ---------- Mini-player flotante y arrastrable de reels ---------- */ .ppx-float-video{ position:fixed; width:116px; aspect-ratio:9/16; z-index:1050; border-radius:14px; overflow:hidden; border:1.5px solid var(--gold); background:#000; cursor:grab; box-shadow:0 10px 30px rgba(0,0,0,.5); opacity:0; transform:translateY(16px) scale(.94); pointer-events:none; touch-action:none; transition: opacity .38s cubic-bezier(.22,.9,.3,1), transform .38s cubic-bezier(.22,.9,.3,1), box-shadow .22s ease; } .ppx-float-video.is-visible{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; } .ppx-float-video.is-dragging{ cursor:grabbing; transition:box-shadow .22s ease; box-shadow:0 16px 40px rgba(0,0,0,.62); } .ppx-float-video video{ width:100%; height:100%; object-fit:cover; display:block; pointer-events:none; } .ppx-float-video-badge{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:30px; height:30px; display:flex; align-items:center; justify-content:center; border-radius:50%; background: rgba(0,0,0,.45); border:1px solid rgba(255,255,255,.6); color:#fff; pointer-events:none; } .ppx-float-video-badge svg{ width:13px; height:13px; margin-left:1px; } .ppx-float-video-close{ position:absolute; top:6px; right:6px; width:24px; height:24px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.55); border:1px solid rgba(255,255,255,.5); color:#fff; cursor:pointer; z-index:2; } .ppx-float-video-close svg{ width:12px; height:12px; } .ppx-float-video-close:hover{ background:rgba(0,0,0,.8); border-color: var(--gold); } @media (max-width:720px){ .ppx-float-video{ width:88px; } .ppx-float-video-badge{ width:24px; height:24px; } .ppx-float-video-badge svg{ width:10px; height:10px; } } /* ---------- Mini-video superpuesto en la FOTO PRINCIPAL del producto ---------- (distinto del mini-player de reels de arriba, y ya no un video "flotante" pegado a una esquina de la PANTALLA como antes: ahora vive DENTRO de #modalMainPhoto, que ya tiene position:relative -ver .modal-main-photo en css_raw.css-, pegado a su esquina inferior derecha, sin tapar el reloj ni cambiar el tamaño de la foto. Visible desde que se abre la ficha (autoplay mudo en loop) y se apaga con un fundido cuando la sección grande de video(s) entra en pantalla al hacer scroll -ver wirePhotoVideoPreview en el JS-. Igual en web y en celular, solo cambia el tamaño proporcionalmente. */ .ppx-photo-vid-preview{ position:absolute; right:4%; bottom:4%; width:24%; max-width:150px; min-width:64px; aspect-ratio:9/16; z-index:4; border-radius:12px; overflow:hidden; border:1.5px solid var(--gold); background:#000; box-shadow:0 8px 22px rgba(0,0,0,.5); opacity:0; transform:scale(.94); pointer-events:none; transition: opacity .45s ease, transform .45s ease; } .ppx-photo-vid-preview.is-visible{ opacity:1; transform:scale(1); } .ppx-photo-vid-preview video{ width:100%; height:100%; object-fit:cover; display:block; } .ppx-photo-vid-badge{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:26px; height:26px; display:flex; align-items:center; justify-content:center; border-radius:50%; background: rgba(0,0,0,.45); border:1px solid rgba(255,255,255,.6); color:#fff; pointer-events:none; } .ppx-photo-vid-badge svg{ width:11px; height:11px; margin-left:1px; } /* Botón de cierre (X): el contenedor .ppx-photo-vid-preview tiene pointer-events:none a propósito -para no interferir con el zoom/swipe de la foto principal-, así que este botón necesita su propio pointer-events:auto para poder recibir el click. */ .ppx-photo-vid-close{ position:absolute; top:4px; right:4px; z-index:6; width:20px; height:20px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:rgba(0,0,0,.55); border:1px solid rgba(255,255,255,.55); color:#fff; cursor:pointer; padding:0; pointer-events:auto; transition:background .2s ease, transform .2s ease; } .ppx-photo-vid-close:hover{ background:rgba(0,0,0,.8); transform:scale(1.08); } .ppx-photo-vid-close svg{ width:10px; height:10px; } @media (max-width:720px){ .ppx-photo-vid-preview{ right:3%; bottom:3%; width:26%; min-width:52px; border-radius:9px; } .ppx-photo-vid-badge{ width:20px; height:20px; } .ppx-photo-vid-badge svg{ width:9px; height:9px; } .ppx-photo-vid-close{ width:18px; height:18px; top:3px; right:3px; } .ppx-photo-vid-close svg{ width:9px; height:9px; } } /* ---------- Zoom interactivo de la foto principal del producto ---------- */ .modal-main-photo{ cursor: zoom-in; } .modal-main-photo::after{ content:""; position:absolute; left:14px; bottom:14px; width:34px; height:34px; border-radius:50%; background: rgba(0,0,0,.5) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F5E7C1' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M20 20l-4.2-4.2'/%3E%3C/svg%3E") center/16px no-repeat; border:1px solid rgba(212,168,54,.55); opacity:0; transform:scale(.85); transition: opacity .22s ease, transform .22s ease; pointer-events:none; z-index:2; } .modal-main-photo:hover::after{ opacity:1; transform:scale(1); } @media (hover:none){ .modal-main-photo::after{ display:none; } } .ppz-lightbox{ position:fixed; inset:0; z-index:1080; display:flex; align-items:center; justify-content:center; background: rgba(6,9,7,.88); backdrop-filter: blur(6px); opacity:0; pointer-events:none; transition: opacity .32s ease; padding:32px; } .ppz-lightbox.open{ opacity:1; pointer-events:auto; } .ppz-stage{ position:relative; width:min(78vw, 640px); aspect-ratio: 4/5; max-height:82vh; display:flex; align-items:center; justify-content:center; overflow:hidden; border-radius:10px; background: var(--black-2); cursor: zoom-in; } .ppz-lightbox.is-zoomed .ppz-stage{ cursor: zoom-out; } .ppz-stage img{ width:100%; height:100%; object-fit:contain; display:block; transform: scale(.92); opacity:0; user-select:none; -webkit-user-drag:none; touch-action:none; transition: transform .42s cubic-bezier(.22,1.28,.4,1), opacity .32s ease; will-change: transform; } .ppz-lightbox.open .ppz-stage img{ transform: scale(1); opacity:1; } .ppz-lightbox.is-zoomed .ppz-stage img{ transition: transform .3s cubic-bezier(.22,1,.36,1), opacity .32s ease; } .ppz-close{ position:absolute; top:22px; right:22px; width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.08); border:1px solid var(--line); color: var(--ivory); cursor:pointer; z-index:2; transition: color .2s ease, border-color .2s ease, transform .2s ease; } .ppz-close:hover{ color: var(--gold); border-color: var(--gold); transform:scale(1.06); } .ppz-close svg{ width:18px; height:18px; } .ppz-hint-text{ position:absolute; left:50%; bottom:20px; transform:translateX(-50%); font-family: var(--font-body); font-size:12px; letter-spacing:.04em; color: rgba(245,231,193,.75); background: rgba(0,0,0,.4); padding:7px 16px; border-radius:100px; border:1px solid rgba(212,168,54,.3); opacity:0; transition: opacity .3s ease .15s; pointer-events:none; white-space:nowrap; } .ppz-lightbox.open .ppz-hint-text{ opacity:1; } .ppz-lightbox.is-zoomed .ppz-hint-text{ opacity:0; } @media (max-width:720px){ .ppz-close{ width:38px; height:38px; top:14px; right:14px; } .ppz-hint-text{ font-size:11px; bottom:14px; padding:6px 14px; } .ppz-stage{ width:92vw; } } /* ---------- 12. Landing enriquecida por producto (colores + video + franjas) ---------- */ .ppx-landing-extra{ margin-top:64px; } .ppx-swatch-row{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:14px 0 0; } #ppSwatchSlot .ppx-swatch-row{ margin:14px 4px 0; } .ppx-swatch-label{ font-size:12.5px; color: var(--ivory-dim); margin-right:4px; } .ppx-swatch{ width:28px; height:28px; border-radius:50%; border:2px solid rgba(255,255,255,0.15); cursor:pointer; transition:border-color .2s ease, transform .2s ease; flex-shrink:0; } .ppx-swatch.active{ border-color: var(--gold); transform:scale(1.12); } .ppx-block{ margin-top:72px; } .ppx-block .section-head{ max-width:600px; margin:0 auto 40px; text-align:center; } .ppx-block .section-head h2{ font-size:clamp(24px,3vw,32px); margin-top:10px; } .ppx-feature-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; } .ppx-feature-card{ text-align:center; padding:26px 18px; border:1px solid var(--line); background: var(--black-2); } .ppx-feature-card svg{ width:26px; height:26px; color: var(--gold); margin-bottom:14px; } .ppx-feature-card h4{ font-family: var(--font-display); font-size:15px; font-weight:500; color: var(--ivory); } .ppx-feature-card p{ color: var(--ivory-dim); font-size:12.5px; margin-top:8px; line-height:1.6; } .ppx-reel-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; max-width:560px; margin:0 auto; } .ppx-reel-card{ position:relative; border:1px solid var(--line); overflow:hidden; aspect-ratio:9/16; background:#000; cursor:pointer; } .ppx-reel-card video{ width:100%; height:100%; object-fit:cover; display:block; pointer-events:none; } .ppx-como-comprar{ margin:56px 0; } .ppx-como-comprar-img{ display:block; width:100%; height:auto; border-radius:18px; } .ppx-como-comprar-img--mobile{ display:none; } .ppx-social-strip{ display:flex; align-items:center; justify-content:center; gap:50px; flex-wrap:wrap; margin-top:72px; padding-top:44px; border-top:1px solid var(--line); } .ppx-social-stat{ text-align:center; } .ppx-social-stat strong{ display:block; font-family: var(--font-display); font-size:32px; color: var(--gold-soft); } .ppx-social-stat span{ font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color: var(--ivory-dim); } @media (max-width: 900px){ .ppx-feature-grid{ grid-template-columns:repeat(2,1fr); } } @media (max-width: 768px){ .ppx-como-comprar{ margin:36px 0; } .ppx-como-comprar-img--desktop{ display:none; } .ppx-como-comprar-img--mobile{ display:block; border-radius:14px; } } @media (max-width: 720px){ .ppx-reel-grid{ grid-template-columns:repeat(2,1fr); gap:10px; max-width:none; } .ppx-social-strip{ gap:28px; } } /* ---------- 12. Popup de bienvenida: banner final "Compra tranquilo" ---------- La imagen es un banner terminado (no se recompone en HTML): se muestra tal cual, completa y sin recortar, dentro de un modal centrado con fondo oscuro. Lo único que se agrega encima es la X de cierre, grande y bien visible. */ .welcome-overlay{ position:fixed; inset:0; z-index:2000; background: rgba(6,9,7,0.88); backdrop-filter: blur(4px); display:flex; align-items:center; justify-content:center; padding:28px; opacity:0; pointer-events:none; transition: opacity .4s ease; } .welcome-overlay.open{ opacity:1; pointer-events:auto; } .welcome-card{ position:relative; max-width:min(760px, 80vw); max-height:80vh; transform: translateY(14px) scale(.96); opacity:0; transition: transform .45s cubic-bezier(.2,.7,.2,1), opacity .45s ease; } .welcome-overlay.open .welcome-card{ transform:none; opacity:1; } /* ancho definido primero (no depende del alto del padre), la altura sale sola de aspect-ratio a partir de ese ancho — así se evita el problema clásico de poner height:100% dentro de un contenedor cuya altura depende justamente de su contenido */ .welcome-card{ width:min(760px, 82vw); } .welcome-photo{ display:block; width:100%; aspect-ratio: 1800 / 1012; max-height:80vh; background: var(--img-welcome-popup) center/contain no-repeat; border-radius:14px; box-shadow: 0 24px 70px rgba(0,0,0,0.55); } /* X de cierre: grande, dorada sobre fondo circular oscuro semitransparente con borde dorado sutil, apenas afuera de la esquina superior derecha de la imagen — fácil de ver y de tocar en celular, sin taparse con el contenido del banner. */ .welcome-close{ position:absolute; top:-16px; right:-16px; z-index:2; width:44px; height:44px; border-radius:50%; background: rgba(10,13,11,0.78); border:1.5px solid rgba(201,162,39,0.65); color: var(--gold); display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow: 0 6px 18px rgba(0,0,0,0.45); transition: transform .2s ease, background .2s ease, border-color .2s ease; } .welcome-close:hover{ background: rgba(10,13,11,0.94); border-color: var(--gold); transform: scale(1.08); } .welcome-close svg{ width:20px; height:20px; } @media (max-width: 640px){ .welcome-overlay{ padding:0 24px; } .welcome-card{ width:100%; } .welcome-photo{ max-height:78vh; border-radius:10px; } .welcome-close{ width:40px; height:40px; } .welcome-close svg{ width:18px; height:18px; } } .pp-cart-btn{ margin-left:auto; flex-shrink:0; } .pp-addcart-badge{ position:absolute; top:-9px; right:-9px; background: var(--gold); color:#141210; font-size:12px; font-weight:800; width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center; box-shadow: 0 2px 8px rgba(0,0,0,0.45); z-index:2; } .pp-addcart-badge.pop{ animation: addCartPop .3s ease; } @keyframes addCartPop{ 0%{ transform:scale(0.4); } 60%{ transform:scale(1.25); } 100%{ transform:scale(1); } } /* Miniatura que "vuela" del producto hacia el ícono del carrito al agregar */ .fly-to-cart{ position:fixed; border-radius:6px; overflow:hidden; pointer-events:none; z-index:2000; box-shadow: 0 8px 24px rgba(0,0,0,0.5); transition: transform .55s cubic-bezier(.3,.1,.2,1), opacity .55s ease; } .fly-to-cart img{ width:100%; height:100%; object-fit:cover; display:block; } #cartToggle.cart-bump{ animation: cartBump .35s ease; } @keyframes cartBump{ 0%{ transform:scale(1); } 40%{ transform:scale(1.35); } 100%{ transform:scale(1); } } .cart-promo-callout{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; background: rgba(37,167,91,0.14); border:1px solid rgba(37,167,91,0.5); border-radius:6px 6px 0 0; padding:9px 16px; margin-bottom:-1px; } .cart-promo-real{ font-size:12px; color: var(--ivory-dim); text-decoration: line-through; } .cart-promo-line{ font-size:13px; font-weight:800; color: #FFFFFF; letter-spacing:0.02em; } .cart-total-row{ display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; background: rgba(201,162,39,0.1); border:1px solid rgba(201,162,39,0.35); border-radius:6px; padding:14px 16px; } .cart-total-row span{ font-size:12px; color: var(--ivory-dim); text-transform:uppercase; letter-spacing:0.06em; } .cart-total-row strong{ font-family: var(--font-display); font-size:28px; font-weight:700; color: var(--gold); text-shadow: 0 0 18px rgba(201,162,39,0.35); }