/** Shopify CDN: Minification failed Line 1312:0 Unexpected "}" **/ /* ════════════════════════════════════════════════════════════════════ CP&M JOYERÍA — Light Luxury System v6 Fonts : Elms Sans (todo el sitio) Palette: #FFFFFF white · #C9A84C gold · #1C1A17 warm dark ════════════════════════════════════════════════════════════════════ */ /* Fuente Elms Sans: se carga desde theme.liquid con preload async (preconnect + rel=preload + media=print onload) para no bloquear el render. NO usar @import aquí: encadena peticiones y retrasa el LCP. */ /* ──────────────────────────────────────────────────────────────────── 1. DESIGN TOKENS ────────────────────────────────────────────────────────────────────── */ :root { --g-bg: #FFFFFF; --g-bg1: #FAFAF8; --g-bg2: #F5F3EF; --g-bg3: #EDE8DF; --g-bg4: #E5DFD5; /* Text — NEGRO SÓLIDO en todo el texto (sin grises ni opacidades). Los tokens "atenuados" ahora apuntan al mismo negro sólido para máxima legibilidad. Sólo -30/-15 (uso estructural: dividers/iconos faint) y los tokens de borde conservan transparencia. */ --g-ink: #1C1A17; --g-ink-80: #1C1A17; --g-ink-65: #1C1A17; --g-ink-50: #1C1A17; --g-ink-30: rgba(28,26,23,.30); /* Keep --g-cream pointing to text color for compatibility */ --g-cream: #1C1A17; --g-cream-80: #1C1A17; --g-cream-60: #1C1A17; --g-cream-35: #1C1A17; --g-cream-15: rgba(28,26,23,.15); --g-gold: #C9A84C; --g-gold-lt: #DEAD6B; --g-gold-dim: rgba(201,168,76,.20); --g-gold-10: rgba(201,168,76,.10); --g-gold-06: rgba(201,168,76,.06); --g-border: rgba(28,26,23,.10); --g-border-hv: rgba(201,168,76,.55); --g-f-d: 'Elms Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --g-f-u: 'Elms Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --g-f-m: 'Elms Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --g-ease: cubic-bezier(.16,1,.3,1); --g-bounce: cubic-bezier(.34,1.56,.64,1); --g-t: .55s var(--g-ease); --g-tf: .25s var(--g-ease); } :root { --font-heading-family: 'Elms Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-body-family: 'Elms Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-heading-weight: 600; --font-body-weight: 400; } /* ──────────────────────────────────────────────────────────────────── 2. BASE ────────────────────────────────────────────────────────────────────── */ html { color-scheme: light; background: var(--g-bg); scroll-behavior: smooth; } /* Respeta a quien pide menos movimiento */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body, body.gradient { background-color: var(--g-bg) !important; background-image: none !important; color: var(--g-ink) !important; font-family: var(--g-f-u) !important; /* FIX tamaño: el override anterior a 1rem (~11.5px) achicaba TODO el texto. 1.6rem ≈ 18px → cuerpo grande y legible (escala con body_scale). */ font-size: 1.6rem !important; font-weight: 400 !important; } .gradient, [class*="color-scheme"], [class*="color-"] { background-color: var(--g-bg) !important; background-image: none !important; color: var(--g-ink) !important; } .color-scheme-2 { background-color: var(--g-bg1) !important; } .color-scheme-3 { background-color: var(--g-bg2) !important; } .color-scheme-4 { background-color: var(--g-bg3) !important; } .color-scheme-5 { background-color: var(--g-bg1) !important; } ::selection { background: var(--g-gold-dim); color: var(--g-ink); } /* ──────────────────────────────────────────────────────────────────── 3. GLOBAL TYPOGRAPHY NOTE: no font-size on 'a' globally — each section controls its own ────────────────────────────────────────────────────────────────────── */ h1, h2, h3, h4, h5, h6, .h0, .h1, .h2, .h3, .h4 { font-family: var(--g-f-d) !important; font-weight: 600 !important; color: var(--g-ink) !important; line-height: 1.1 !important; letter-spacing: .08em !important; text-transform: uppercase !important; } p, li, label, td, th { font-family: var(--g-f-u) !important; } a { font-family: var(--g-f-u) !important; color: var(--g-ink) !important; text-decoration: none !important; } a:hover { color: var(--g-gold) !important; } /* ── Textos de apoyo — Montserrat, legibles y visibles ── */ /* Clase Dawn para labels y captions pequeños */ .caption-with-letter-spacing, .caption-with-letter-spacing--small { font-family: var(--g-f-m) !important; font-size: .80rem !important; font-weight: 500 !important; letter-spacing: .10em !important; color: var(--g-ink-80) !important; text-transform: uppercase !important; } /* Modificador .light de Dawn (usado en vendor, filtros, etc.) */ .caption-with-letter-spacing.light, .caption-with-letter-spacing--small.light { font-weight: 500 !important; color: var(--g-ink-80) !important; } /* Labels de formularios, filtros, variantes */ .form__label, .select__select, .field__label { font-family: var(--g-f-m) !important; font-size: .80rem !important; font-weight: 500 !important; letter-spacing: .08em !important; color: var(--g-ink-80) !important; } /* Opciones de variante (talla, color) */ .product-option dt, .product-option dd { font-family: var(--g-f-m) !important; font-size: .80rem !important; font-weight: 500 !important; color: var(--g-ink-80) !important; letter-spacing: .05em !important; } /* ──────────────────────────────────────────────────────────────────── 4. SKIP BUTTON — hidden ────────────────────────────────────────────────────────────────────── */ .skip-to-content-link { display: none !important; } /* ──────────────────────────────────────────────────────────────────── 5. SCROLL PROGRESS BAR ────────────────────────────────────────────────────────────────────── */ #cpm-scroll-progress { position: fixed; top: 0; left: 0; height: 2px; background: linear-gradient(90deg, var(--g-gold), var(--g-gold-lt)); z-index: 10000; width: 0%; transition: width .1s linear; pointer-events: none; } /* ──────────────────────────────────────────────────────────────────── 6. CUSTOM CURSOR (pointer-only devices) ────────────────────────────────────────────────────────────────────── */ @media (pointer: fine) { /* native cursor kept — custom dot is additive overlay */ #cpm-cursor { position: fixed; width: 7px; height: 7px; background: var(--g-gold); border-radius: 50%; pointer-events: none; z-index: 9999; transform: translate(-50%, -50%); transition: transform .1s var(--g-ease), background .2s; } #cpm-cursor.is-hover { transform: translate(-50%,-50%) scale(2.4); background: var(--g-gold-lt); } #cpm-cursor.is-click { transform: translate(-50%,-50%) scale(.6); } #cpm-cursor-ring { position: fixed; width: 34px; height: 34px; border: 1px solid rgba(201,168,76,.35); border-radius: 50%; pointer-events: none; z-index: 9998; transform: translate(-50%, -50%); transition: width .3s var(--g-ease), height .3s var(--g-ease), border-color .3s, opacity .3s; } #cpm-cursor-ring.is-hover { width: 54px; height: 54px; border-color: var(--g-border-hv); } #cpm-cursor-ring.is-click { opacity: .4; } #cpm-ambient { position: fixed; width: 520px; height: 520px; background: radial-gradient(circle, rgba(201,168,76,.04) 0%, transparent 70%); border-radius: 50%; pointer-events: none; z-index: 0; transform: translate(-50%,-50%); mix-blend-mode: multiply; } } /* ──────────────────────────────────────────────────────────────────── 7. ANNOUNCEMENT BAR — marquee oro sólido (texto negro, auto-scroll ✦) ────────────────────────────────────────────────────────────────────── */ .announcement-bar-section, .announcement-bar-section .utility-bar, .utility-bar { background: var(--g-gold) !important; background-color: var(--g-gold) !important; border-bottom: none !important; position: relative !important; overflow: hidden !important; } /* Se pinta por encima del hero y del header (que es transparente sobre el hero), así la franja dorada se ve siempre arriba del todo. */ .announcement-bar-section { z-index: 201 !important; } /* El marquee ocupa todo el ancho (rompe el page-width) */ .announcement-bar-section .utility-bar__grid, .utility-bar__grid { display: block !important; max-width: none !important; padding-left: 0 !important; padding-right: 0 !important; margin: 0 !important; width: 100% !important; } .ab-marquee { overflow: hidden !important; width: 100% !important; padding: .85rem 0 !important; -webkit-mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent) !important; mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent) !important; } .ab-marquee__track { display: flex !important; align-items: center !important; width: max-content !important; will-change: transform !important; } .ab-marquee__track--animate { animation-name: ab-scroll !important; animation-duration: 30s !important; /* fallback; el JS lo ajusta al ancho real */ animation-timing-function: linear !important; animation-iteration-count: infinite !important; } .ab-marquee:hover .ab-marquee__track--animate { animation-play-state: paused !important; } @keyframes ab-scroll { to { transform: translateX(var(--ab-shift, -50%)); } } .ab-item { display: inline-flex !important; align-items: center !important; white-space: nowrap !important; font-family: var(--g-f-u) !important; font-size: 1.15rem !important; font-weight: 700 !important; letter-spacing: .16em !important; text-transform: uppercase !important; color: var(--g-ink) !important; } .ab-item::before { content: '\2726' !important; /* ✦ estrella */ margin: 0 2.6rem !important; font-size: .78em !important; color: var(--g-ink) !important; opacity: .5 !important; } .ab-item__link { color: var(--g-ink) !important; text-decoration: none !important; } .ab-item__link:hover { text-decoration: underline !important; } @media (prefers-reduced-motion: reduce) { .ab-marquee__track--animate { animation: none !important; } .ab-marquee { -webkit-mask-image: none !important; mask-image: none !important; } .ab-marquee__track { justify-content: center !important; width: 100% !important; flex-wrap: wrap !important; } } /* ──────────────────────────────────────────────────────────────────── 8. HEADER Lógica invertida: transparente por defecto, blanco al hacer scroll. Esto evita depender de que el JS haya corrido antes de pintar. ────────────────────────────────────────────────────────────────────── */ .header-wrapper { /* position:fixed — inmune al hide de Dawn (translateY / clases no afectan fixed) */ position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; z-index: 200 !important; background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border-bottom-color: transparent !important; box-shadow: none !important; transform: none !important; transition: background-color .4s var(--g-ease), box-shadow .4s, border-color .4s !important; } /* Al hacer scroll: fondo blanco SÓLIDO (sin glass, más legible) */ .header-wrapper.cpm-scrolled { background-color: #ffffff !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border-bottom: 1px solid var(--g-border) !important; box-shadow: 0 2px 20px rgba(28,26,23,.07) !important; } /* Refuerzo: el div wrapper (.section-header) también se vuelve blanco al hacer scroll */ body.cpm-has-hero.cpm-hero-scrolled .section-header, body.cpm-has-hero.cpm-hero-scrolled .shopify-section-group-header-group { background-color: #ffffff !important; border-color: var(--g-border) !important; } /* No-hero pages: header wrapper siempre blanco */ .header-wrapper:not(:has(~ *)) { background-color: #ffffff; } .header, .header__inner { background: transparent !important; } /* ── Neutralizar el hide/show nativo de Dawn ────────────────────────── Dawn's StickyHeader.hide() aplica .shopify-section-header-hidden + .shopify-section-header-sticky al .section-header, lo que mueve el section a top: calc(-1 * var(--header-height)). Como nuestro .header-wrapper es position:fixed, no se oculta, pero el desplazamiento del section puede alterar el hit-testing en algunos navegadores móviles. Lo anulamos fijando top: 0 en ambos estados. */ .shopify-section-header-sticky { top: 0 !important; } .shopify-section-header-hidden { top: 0 !important; } /* ── Búsqueda (details-modal): siempre encima del header ───────────── */ details-modal.header__search { z-index: 300 !important; } .search-modal, .header__search { z-index: 300 !important; } /* ── Iconos y nav: blanco sobre hero (estado transparente) */ .header__icon svg { stroke: #ffffff !important; } .header__icon:hover svg { stroke: var(--g-gold) !important; } .cart-count-bubble { background: rgba(255,255,255,.88) !important; color: var(--g-ink) !important; } /* Brand name — blanco sobre hero */ .header__heading a, .header__heading a:hover { color: #ffffff !important; text-decoration: none !important; } .header__heading span.h2, .header__heading .h2 { font-family: var(--g-f-d) !important; font-size: 1.4rem !important; font-weight: 700 !important; letter-spacing: .28em !important; text-transform: uppercase !important; color: #ffffff !important; } /* Logo texto en header — blanco sobre hero. Especificidad alta (0,4,0) para superar la regla base .cpm-logo-text__main (0,1,0) que viene después en el archivo */ body.cpm-has-hero:not(.cpm-hero-scrolled) .header-wrapper .cpm-logo-text__sub, body.cpm-has-hero:not(.cpm-hero-scrolled) .header-wrapper .cpm-logo-text__main { color: #ffffff !important; } /* Logo SVG (cpm-logo.liquid) — invertir a blanco cuando flota sobre el hero */ body.cpm-has-hero:not(.cpm-hero-scrolled) .header-wrapper .cpm-logo-svg { filter: brightness(0) invert(1) !important; transition: filter .4s var(--g-ease) !important; } /* Al hacer scroll → vuelve a dorado natural */ .header-wrapper.cpm-scrolled .cpm-logo-svg { filter: none !important; } /* ── Nav links — blanco sobre hero */ .header__menu-item, .header__menu-item a, .header__menu-item a:link, .header__menu-item a:visited, .header__menu-item a[aria-current], .header__menu-item a[aria-current="page"], .header__active-menu-item, header-menu a, header-menu .list-menu__item--link { font-family: var(--g-f-u) !important; font-size: 1.2rem !important; font-weight: 600 !important; letter-spacing: .13em !important; text-transform: uppercase !important; color: #ffffff !important; line-height: 1 !important; vertical-align: middle !important; } /* Iconos del header un poco más grandes para acompañar el logo */ .header__icons .header__icon .icon, .header__icons .header__icon .svg-wrapper svg, .header__icons .header__icon svg { width: 2.3rem !important; height: 2.3rem !important; } /* El glifo del carrito se dibuja más chico dentro de su viewBox: lo igualamos */ .header__icons .header__icon--cart .svg-wrapper svg, .header__icons .header__icon--cart svg { width: 2.7rem !important; height: 2.7rem !important; } .header__menu-item:hover a, .header__menu-item a:hover, header-menu a[aria-current="page"] { color: var(--g-gold) !important; } .header__active-menu-item { color: var(--g-gold) !important; } /* ── Al hacer scroll: todos los elementos vuelven a oscuro ── */ .header-wrapper.cpm-scrolled .header__icon svg { stroke: var(--g-ink) !important; } .header-wrapper.cpm-scrolled .header__icon:hover svg { stroke: var(--g-gold) !important; } .header-wrapper.cpm-scrolled .cart-count-bubble { background: var(--g-gold) !important; color: var(--g-bg) !important; } .header-wrapper.cpm-scrolled .header__heading a, .header-wrapper.cpm-scrolled .header__heading a:hover { color: var(--g-ink) !important; } .header-wrapper.cpm-scrolled .header__heading span.h2, .header-wrapper.cpm-scrolled .header__heading .h2 { color: var(--g-ink) !important; } /* Logo de texto (cpm-logo-h) → oscuro al hacer scroll Misma especificidad alta que la regla "blanco sobre hero" para ganar la cascada */ body.cpm-has-hero.cpm-hero-scrolled .header-wrapper .cpm-logo-text__sub, .header-wrapper.cpm-scrolled .cpm-logo-text__sub { color: var(--g-ink-65) !important; } body.cpm-has-hero.cpm-hero-scrolled .header-wrapper .cpm-logo-text__main, .header-wrapper.cpm-scrolled .cpm-logo-text__main { color: var(--g-ink) !important; } /* Logo SVG → vuelve a dorado natural al hacer scroll */ .header-wrapper.cpm-scrolled .cpm-logo-svg { filter: none !important; } .header-wrapper.cpm-scrolled .header__menu-item, .header-wrapper.cpm-scrolled .header__menu-item a, .header-wrapper.cpm-scrolled .header__menu-item a:link, .header-wrapper.cpm-scrolled .header__menu-item a:visited, .header-wrapper.cpm-scrolled header-menu a, .header-wrapper.cpm-scrolled header-menu .list-menu__item--link { color: var(--g-ink-80) !important; } .header-wrapper.cpm-scrolled .header__menu-item:hover a, .header-wrapper.cpm-scrolled .header__menu-item a:hover, .header-wrapper.cpm-scrolled header-menu a[aria-current="page"] { color: var(--g-gold) !important; } /* Transición suave del wrapper del header (bidireccional: héroe ↔ scroll) */ .section-header, .shopify-section-group-header-group { transition: background-color .4s var(--g-ease), border-color .4s !important; } /* ── Announcement bar / Utility bar: transparente sobre el hero ── El diagnóstico confirmó que la barra usa clase .utility-bar (no .announcement-bar) body.cpm-has-hero → hay hero en la página (puesto por JS) body.cpm-hero-scrolled → usuario scrolleó más allá del 60% del hero */ /* La barra de anuncios es oro sólido SIEMPRE (también sobre el hero): queda fuera de la lógica transparente. Solo el wrapper del header (logo/nav) se mantiene transparente sobre el hero. */ body.cpm-has-hero:not(.cpm-hero-scrolled) .section-header, body.cpm-has-hero:not(.cpm-hero-scrolled) .shopify-section-group-header-group { background: transparent !important; background-color: transparent !important; border-color: transparent !important; transition: background-color .4s var(--g-ease), border-color .4s !important; } /* ── Dropdown panel — fondo blanco, texto oscuro en AMBOS estados ── */ .header__submenu { background: rgba(255,255,255,.99) !important; border: 1px solid var(--g-border) !important; box-shadow: 0 8px 32px rgba(28,26,23,.12) !important; } /* Forzar texto oscuro siempre — el panel dropdown es blanco independientemente del estado del header. Necesita spec (0,2,1) para superar header-menu a (0,0,2) */ .header__submenu a, .header__submenu a:link, .header__submenu a:visited, .header-wrapper .header__submenu a, .header-wrapper .header__submenu a:link, .header-wrapper .header__submenu a:visited { font-family: var(--g-f-u) !important; font-size: .9rem !important; font-weight: 400 !important; letter-spacing: .13em !important; text-transform: uppercase !important; color: var(--g-ink-80) !important; display: block !important; padding: .7rem 1.2rem !important; } .header__submenu a:hover, .header-wrapper .header__submenu a:hover { color: var(--g-gold) !important; } /* ──────────────────────────────────────────────────────────────────── 9. CPM HERO ────────────────────────────────────────────────────────────────────── */ .cpm-hero { display: grid !important; grid-template-columns: 1fr !important; min-height: 100svh !important; background: var(--g-bg) !important; position: relative !important; overflow: hidden !important; } @media screen and (min-width: 900px) { .cpm-hero { grid-template-columns: 55fr 45fr !important; } } /* Left panel */ .cpm-hero__left { display: flex !important; flex-direction: column !important; justify-content: space-between !important; padding: 6rem 5vw 3rem !important; background: var(--g-bg) !important; order: 2 !important; position: relative !important; overflow: hidden !important; } @media screen and (min-width: 900px) { .cpm-hero__left { padding: 8rem 6vw 4rem !important; order: 1 !important; } } .cpm-hero__left-inner { flex: 1 !important; display: flex !important; flex-direction: column !important; justify-content: center !important; position: relative !important; z-index: 2 !important; } .cpm-hero__scroll-hint { position: relative !important; z-index: 2 !important; } /* ── Aurora orbs ── */ .cpm-hero__aurora { position: absolute !important; inset: 0 !important; z-index: 1 !important; pointer-events: none !important; overflow: hidden !important; } /* Orb 1 — gold warmth, upper-left */ .cpm-hero__aurora-orb--1 { position: absolute !important; width: 75% !important; height: 75% !important; top: -25% !important; left: -15% !important; border-radius: 50% !important; background: radial-gradient(ellipse at center, rgba(201,168,76,.16) 0%, rgba(201,168,76,.06) 45%, transparent 70%) !important; filter: blur(55px) !important; animation: cpm-orb1 24s ease-in-out infinite !important; } /* Orb 2 — deep gold, lower-right */ .cpm-hero__aurora-orb--2 { position: absolute !important; width: 65% !important; height: 65% !important; bottom: -20% !important; right: -10% !important; border-radius: 50% !important; background: radial-gradient(ellipse at center, rgba(222,180,80,.12) 0%, rgba(201,168,76,.04) 50%, transparent 70%) !important; filter: blur(75px) !important; animation: cpm-orb2 30s ease-in-out infinite !important; animation-delay: -11s !important; } /* Orb 3 — cream warmth, center-drift */ .cpm-hero__aurora-orb--3 { position: absolute !important; width: 55% !important; height: 55% !important; top: 20% !important; left: 22% !important; border-radius: 50% !important; background: radial-gradient(ellipse at center, rgba(201,168,76,.08) 0%, transparent 65%) !important; filter: blur(90px) !important; animation: cpm-orb3 36s ease-in-out infinite !important; animation-delay: -20s !important; } @keyframes cpm-orb1 { 0%, 100% { transform: translate(0, 0) scale(1); } 30% { transform: translate(7%, 11%) scale(1.13); } 65% { transform: translate(-5%, 17%) scale(.91); } } @keyframes cpm-orb2 { 0%, 100% { transform: translate(0, 0) scale(1); } 38% { transform: translate(-10%, -9%) scale(1.18); } 72% { transform: translate(7%, -14%) scale(.87); } } @keyframes cpm-orb3 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-9%, 9%) scale(1.12); } } /* Grain texture overlay — subtle luxury tactile feel */ .cpm-hero__left::after { content: '' !important; position: absolute !important; inset: 0 !important; z-index: 3 !important; pointer-events: none !important; opacity: .028 !important; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E") !important; background-repeat: repeat !important; background-size: 180px !important; } /* Eyebrow */ .cpm-hero__eyebrow { display: flex !important; align-items: center !important; gap: 1.2rem !important; font-family: var(--g-f-u) !important; font-size: .78rem !important; font-weight: 500 !important; letter-spacing: .26em !important; text-transform: uppercase !important; color: var(--g-gold) !important; margin: 0 0 2.4rem !important; opacity: 0; animation: cpm-up .5s var(--g-ease) .1s forwards; } .cpm-hero__eyebrow-dash { display: block !important; width: 3rem !important; height: 1px !important; background: var(--g-gold) !important; flex-shrink: 0 !important; } /* Title */ .cpm-hero__title { font-family: var(--g-f-d) !important; font-weight: 700 !important; line-height: .92 !important; letter-spacing: .05em !important; text-transform: uppercase !important; color: var(--g-ink) !important; margin: 0 0 2.8rem !important; display: flex !important; flex-direction: column !important; gap: .2em !important; } .cpm-hero__word { display: block !important; font-size: clamp(3.5rem, 8vw, 9rem) !important; opacity: 0; animation: cpm-reveal .8s var(--g-ease) forwards; } .cpm-hero__word[data-word="1"] { animation-delay: .25s; } .cpm-hero__word[data-word="2"] { animation-delay: .45s; } .cpm-hero__word[data-word="3"] { animation-delay: .65s; } .cpm-hero__word--italic { font-style: italic !important; color: var(--g-gold) !important; } .cpm-hero__word--thin { font-weight: 400 !important; color: rgba(255,255,255,.78) !important; } /* Description */ .cpm-hero__desc { font-family: var(--g-f-u) !important; font-size: 1.15rem !important; font-weight: 400 !important; color: var(--g-ink-65) !important; line-height: 1.85 !important; max-width: 42ch !important; margin: 0 0 3rem !important; opacity: 0; animation: cpm-up .6s var(--g-ease) .8s forwards; } /* CTAs */ .cpm-hero__ctas { display: flex !important; gap: 1.4rem !important; flex-wrap: wrap !important; opacity: 0; animation: cpm-up .6s var(--g-ease) .95s forwards; } .cpm-hero__btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: .8rem !important; font-family: var(--g-f-u) !important; font-size: .88rem !important; font-weight: 600 !important; letter-spacing: .18em !important; text-transform: uppercase !important; padding: 1.1rem 2.6rem !important; border: 1px solid !important; border-radius: 0 !important; transition: background var(--g-tf), color var(--g-tf), border-color var(--g-tf) !important; } .cpm-hero__btn--fill { background: var(--g-ink) !important; color: var(--g-bg) !important; border-color: var(--g-ink) !important; } .cpm-hero__btn--fill:hover { background: var(--g-gold) !important; border-color: var(--g-gold) !important; color: var(--g-bg) !important; } .cpm-hero__btn--line { background: transparent !important; color: var(--g-ink) !important; border-color: rgba(28,26,23,.40) !important; } .cpm-hero__btn--line:hover { border-color: var(--g-ink) !important; } /* Stats */ .cpm-hero__meta { display: flex !important; align-items: center !important; gap: 2.4rem !important; margin-top: 3.5rem !important; padding-top: 2.5rem !important; border-top: 1px solid var(--g-border) !important; opacity: 0; animation: cpm-up .6s var(--g-ease) 1.1s forwards; } .cpm-hero__stat { display: flex !important; flex-direction: column !important; gap: .4rem !important; } .cpm-hero__stat-num { font-family: var(--g-f-d) !important; font-size: 2.8rem !important; font-weight: 600 !important; color: var(--g-gold) !important; line-height: 1 !important; } /* FIX: stat labels were --g-cream-35 (.35 opacity) = invisible on white */ .cpm-hero__stat-lbl { font-family: var(--g-f-u) !important; font-size: .88rem !important; font-weight: 500 !important; letter-spacing: .13em !important; text-transform: uppercase !important; color: rgba(255,255,255,.72) !important; } .cpm-hero__stat-sep { width: 1px !important; height: 3.5rem !important; background: var(--g-border) !important; flex-shrink: 0 !important; } /* Scroll hint */ .cpm-hero__scroll-hint { display: none; align-items: center; gap: 1.4rem; opacity: 0; animation: cpm-up .6s var(--g-ease) 1.3s forwards; } @media screen and (min-width: 900px) { .cpm-hero__scroll-hint { display: flex; } } /* FIX: scroll txt was .65rem + .35 opacity = nearly invisible */ .cpm-hero__scroll-txt { font-family: var(--g-f-u) !important; font-size: .8rem !important; font-weight: 400 !important; letter-spacing: .22em !important; text-transform: uppercase !important; color: var(--g-ink-50) !important; } .cpm-hero__scroll-track { width: 1px; height: 4.5rem; background: rgba(28,26,23,.15); position: relative; overflow: hidden; } .cpm-hero__scroll-thumb { position: absolute; top: -50%; left: 0; width: 100%; height: 50%; background: var(--g-gold); animation: cpm-scroll-bar 2s var(--g-ease) infinite 1.4s; } @keyframes cpm-scroll-bar { 0% { top: -50%; } 100% { top: 150%; } } /* Right panel */ .cpm-hero__right { position: relative; order: 1; min-height: 55svh; background: var(--g-bg2); } @media screen and (min-width: 900px) { .cpm-hero__right { order: 2 !important; min-height: 100svh; } } .cpm-hero__frame { position: absolute; inset: 3rem 3rem 5rem 2rem; margin: 0 !important; } @media screen and (min-width: 900px) { .cpm-hero__frame { inset: 4.5rem 4.5rem 8rem 2.5rem; } } .cpm-hero__frame-border { position: absolute; width: 4rem; height: 4rem; z-index: 3; opacity: 0; animation: cpm-up .6s var(--g-ease) .8s forwards; } .cpm-hero__frame-border--tl { top: -8px; left: -8px; border-top: 1.5px solid var(--g-gold); border-left: 1.5px solid var(--g-gold); } .cpm-hero__frame-border--br { bottom: -8px; right: -8px; border-bottom: 1.5px solid var(--g-gold); border-right: 1.5px solid var(--g-gold); } .cpm-hero__img-wrap { position: absolute; inset: 0; overflow: hidden; border-radius: 6px; } .cpm-hero__img { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center top !important; transform: scale(1.04); animation: cpm-img-in 1.2s var(--g-ease) .3s forwards; } .cpm-hero__img-veil { position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 60%, rgba(245,243,239,.5)); z-index: 2; } /* Badge */ .cpm-hero__badge { position: absolute !important; bottom: 2.5rem !important; left: -1.5rem !important; z-index: 10 !important; display: flex !important; align-items: center !important; gap: .7rem !important; background: var(--g-bg) !important; border: 1px solid var(--g-border) !important; padding: .9rem 1.6rem !important; box-shadow: 0 4px 20px rgba(28,26,23,.10) !important; opacity: 0; animation: cpm-up .6s var(--g-ease) 1s forwards; } .cpm-hero__badge svg { color: var(--g-gold) !important; } .cpm-hero__badge span { font-family: var(--g-f-u) !important; font-size: .80rem !important; font-weight: 600 !important; letter-spacing: .16em !important; text-transform: uppercase !important; color: var(--g-ink) !important; } .cpm-hero__caption { position: absolute; bottom: 1.8rem; right: 3rem; font-family: var(--g-f-u) !important; font-size: .76rem !important; letter-spacing: .18em !important; text-transform: uppercase !important; color: rgba(255,255,255,.55) !important; writing-mode: vertical-rl; opacity: 0; animation: cpm-up .6s var(--g-ease) 1.2s forwards; } @keyframes cpm-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } @keyframes cpm-reveal{ from { opacity: 0; transform: translateY(40px) skewY(2deg); } to { opacity: 1; transform: none; } } @keyframes cpm-img-in{ to { transform: scale(1); } } /* ──────────────────────────────────────────────────────────────────── 9b. HERO — FULL-BLEED (efecto Swarovski) • Imagen cubre 100svh desde arriba del todo (detrás del header sticky) • Header transparente flota encima — el pull-up lo hace el liquid con margin-top: calc(-1 * var(--header-height, 72px)) • Contenido anclado abajo-izquierda, texto blanco, viñeta oscura doble ────────────────────────────────────────────────────────────────────── */ /* Hero: flex column, 100svh exacto, imagen como fondo absoluto */ .cpm-hero { display: flex !important; flex-direction: column !important; grid-template-columns: unset !important; height: 100svh !important; min-height: 560px !important; max-height: unset !important; background: #080808 !important; } /* Panel imagen: fondo absoluto — cubre todo el hero */ .cpm-hero__right { position: absolute !important; inset: 0 !important; z-index: 0 !important; min-height: unset !important; order: 0 !important; background: #080808 !important; } /* Frame e img-wrap sin bordes ni padding — full bleed */ .cpm-hero__frame { position: absolute !important; inset: 0 !important; margin: 0 !important; border-radius: 0 !important; } .cpm-hero__img-wrap { position: absolute !important; top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important; overflow: hidden !important; border-radius: 0 !important; } /* Imagen: leve oscurecimiento para que el texto lea bien */ .cpm-hero__img { opacity: 0.82 !important; animation: cpm-img-in 1.4s var(--g-ease) .2s forwards !important; } /* Veil — el div.cpm-hero__img-veil nunca genera caja (bug de Dawn/heredado), lo ocultamos y usamos ::after del img-wrap (que sí tiene 1350×945 confirmados) */ .cpm-hero__img-veil { display: none !important; } /* Overlay gradient vía pseudo-elemento — completamente bajo nuestro control */ .cpm-hero__img-wrap::after { content: '' !important; display: block !important; position: absolute !important; top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; z-index: 2 !important; pointer-events: none !important; /* Viñeta triple (móvil): menos oscuro para no tapar la foto */ background: linear-gradient(to bottom, rgba(6,6,8,.62) 0%, rgba(6,6,8,.28) 18%, transparent 40%), linear-gradient(to right, rgba(6,6,8,.45) 0%, rgba(6,6,8,.18) 38%, transparent 65%), linear-gradient(to top, rgba(6,6,8,.72) 0%, rgba(6,6,8,.38) 26%, transparent 52%) !important; } /* Panel de contenido: centrado horizontal, anclado abajo */ .cpm-hero__left { position: relative !important; z-index: 2 !important; background: transparent !important; order: 1 !important; flex: 1 !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: flex-end !important; padding: 0 1.75rem 3rem !important; width: 100% !important; text-align: center !important; } /* left-inner: contenido centrado */ .cpm-hero__left-inner { flex: 0 0 auto !important; display: flex !important; flex-direction: column !important; align-items: center !important; width: 100% !important; } /* Aurora y pseudo-elementos: desactivados */ .cpm-hero__aurora, .cpm-hero__left::before, .cpm-hero__left::after { display: none !important; } /* Ocultar: stats, elementos de frame decorativo, scroll hint */ .cpm-hero__meta, .cpm-hero__frame-border, .cpm-hero__badge, .cpm-hero__caption, .cpm-hero__scroll-hint { display: none !important; } /* ── Logo de texto en hero: usa cpm-logo-h (Artesanal / CP&M / Acero) ── */ .cpm-hero__logo { display: block !important; width: auto !important; margin: 0 0 2rem !important; opacity: 0; animation: cpm-up .6s var(--g-ease) 0s both !important; text-decoration: none !important; } /* Logo de texto en hero — centrado, mismo formato que header, más grande */ .cpm-hero__logo .cpm-logo-text { align-items: center !important; gap: 4px !important; } .cpm-hero__logo .cpm-logo-text__sub { font-size: 1rem !important; letter-spacing: .55em !important; color: rgba(255,255,255,.62) !important; transition: none !important; } .cpm-hero__logo .cpm-logo-text__main { font-size: clamp(3rem, 7vw, 5rem) !important; font-weight: 600 !important; letter-spacing: .22em !important; color: #ffffff !important; line-height: 1 !important; transition: none !important; } /* ── Eyebrow: centrado, blanco suave ── */ .cpm-hero__eyebrow { display: flex !important; justify-content: center !important; color: rgba(255,255,255,.70) !important; margin: 0 0 1.4rem !important; opacity: 0; animation: cpm-up .5s var(--g-ease) .1s both !important; } .cpm-hero__eyebrow-dash { background: var(--g-gold) !important; } /* ── Título: centrado, blanco, stacked ── */ .cpm-hero__title { display: flex !important; flex-direction: column !important; align-items: center !important; gap: .05em !important; margin: 0 0 1.2rem !important; line-height: .92 !important; } .cpm-hero__word { display: block !important; font-size: clamp(2.2rem, 7vw, 3.2rem) !important; color: #ffffff !important; opacity: 0; animation: cpm-reveal .75s var(--g-ease) forwards !important; } .cpm-hero__word[data-word="1"] { animation-delay: .18s !important; } .cpm-hero__word[data-word="2"] { animation-delay: .34s !important; } .cpm-hero__word[data-word="3"] { animation-delay: .50s !important; } .cpm-hero__word--italic { color: var(--g-gold) !important; } .cpm-hero__word--thin { color: rgba(255,255,255,.60) !important; font-weight: 400 !important; } /* ── Eslogan (h2): blanco, centrado, bold ── */ /* Titular grande del hero — "Artesanal & Acero", todo en blanco, fuente Cinzel (igual que el logo) */ .cpm-hero__headline { font-family: 'Cinzel', Georgia, 'Times New Roman', serif !important; font-size: clamp(2.6rem, 6vw, 4.6rem) !important; font-weight: 700 !important; letter-spacing: .05em !important; text-transform: uppercase !important; color: #ffffff !important; line-height: 1.02 !important; text-align: center !important; margin: 0 auto .9rem !important; opacity: 0; animation: cpm-up .6s var(--g-ease) .48s both !important; } .cpm-hero__desc { font-family: var(--g-f-u) !important; font-size: clamp(1.05rem, 2.2vw, 1.55rem) !important; font-weight: 700 !important; letter-spacing: .06em !important; color: rgba(255,255,255,.80) !important; line-height: 1.5 !important; text-align: center !important; max-width: 36ch !important; margin: 0 auto 2.4rem !important; opacity: 0; animation: cpm-up .6s var(--g-ease) .62s both !important; } /* ── CTAs: centrados ── */ .cpm-hero__ctas { display: flex !important; flex-direction: row !important; justify-content: center !important; gap: .75rem !important; flex-wrap: wrap !important; opacity: 0; animation: cpm-up .6s var(--g-ease) .78s both !important; } .cpm-hero__btn { padding: .82rem 1.55rem !important; font-size: .76rem !important; letter-spacing: .15em !important; } .cpm-hero__btn--fill { background: transparent !important; border-color: rgba(255,255,255,.85) !important; color: #ffffff !important; } .cpm-hero__btn--fill:hover { background: rgba(255,255,255,.14) !important; border-color: #ffffff !important; color: #ffffff !important; } .cpm-hero__btn--line { display: inline-flex !important; background: transparent !important; border-color: rgba(255,255,255,.60) !important; color: #ffffff !important; } .cpm-hero__btn--line:hover { border-color: rgba(255,255,255,.70) !important; color: #ffffff !important; } /* ── Scroll hint: eliminado completamente ── */ .cpm-hero__scroll-hint, .cpm-hero__scroll-txt, .cpm-hero__scroll-track, .cpm-hero__scroll-thumb { display: none !important; } /* ── Desktop (≥ 900px) ── */ @media screen and (min-width: 900px) { .cpm-hero__left { padding: 0 8vw 6rem !important; align-items: center !important; text-align: center !important; } /* Logo de texto en desktop: más grande, centrado */ .cpm-hero__logo { margin: 0 0 3rem !important; } .cpm-hero__logo .cpm-logo-text__main { font-size: clamp(4rem, 7vw, 7rem) !important; } .cpm-hero__logo .cpm-logo-text__sub { font-size: .82rem !important; letter-spacing: .58em !important; } /* Título en desktop — tamaño contenido */ .cpm-hero__word { font-size: clamp(3.2rem, 5vw, 5.4rem) !important; } .cpm-hero__btn { padding: 1rem 2.4rem !important; font-size: .82rem !important; } .cpm-hero__ctas { gap: 1.2rem !important; } /* Viñeta desktop: más sutil (imagen menos oscura) */ .cpm-hero__img-wrap::after { background: linear-gradient(to bottom, rgba(6,6,8,.55) 0%, rgba(6,6,8,.20) 16%, transparent 34%), linear-gradient(to right, rgba(6,6,8,.35) 0%, rgba(6,6,8,.12) 45%, transparent 72%), linear-gradient(to top, rgba(6,6,8,.65) 0%, rgba(6,6,8,.28) 32%, transparent 60%) !important; } } /* ──────────────────────────────────────────────────────────────────── 10. SECTIONS BASE ────────────────────────────────────────────────────────────────────── */ .shopify-section { background-color: var(--g-bg) !important; } /* Section subtitles — texto de cuerpo: negro completo, legible */ .collection-duo__description, .category-grid__subtitle, .image-with-text__text, .image-with-text__text p, .rich-text__text, .rich-text__text p { font-family: var(--g-f-u) !important; font-weight: 400 !important; font-size: 1.05rem !important; color: var(--g-ink) !important; line-height: 1.85 !important; } /* Section headings */ .collection-duo__title, .category-grid__title, .featured-collection__title, .rich-text__heading, .image-with-text__heading, .newsletter__heading { font-family: var(--g-f-d) !important; font-weight: 600 !important; color: var(--g-ink) !important; text-transform: uppercase !important; letter-spacing: .1em !important; font-size: clamp(2rem, 4vw, 4rem) !important; } /* ──────────────────────────────────────────────────────────────────── 11. TRUST BADGES ────────────────────────────────────────────────────────────────────── */ .trust-badges { background: var(--g-bg1) !important; border-top: 1px solid var(--g-border) !important; border-bottom: 1px solid var(--g-border) !important; } .trust-badges__grid { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 0 !important; } @media screen and (min-width: 750px) { .trust-badges__grid { grid-template-columns: repeat(4, 1fr) !important; } } .trust-badges__item { display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; padding: 2.8rem 1.8rem !important; gap: 1rem !important; border-right: 1px solid var(--g-border) !important; background: transparent !important; transition: background var(--g-tf) !important; } .trust-badges__item:last-child { border-right: none !important; } .trust-badges__item:hover { background: var(--g-gold-06) !important; } .trust-badges__icon svg path, .trust-badges__icon svg rect, .trust-badges__icon svg circle { stroke: var(--g-gold) !important; fill: none !important; } .trust-badges__title { font-family: var(--g-f-d) !important; font-size: 1rem !important; font-weight: 600 !important; color: var(--g-ink) !important; margin: 0 !important; letter-spacing: .06em !important; text-transform: uppercase !important; } .trust-badges__description { font-family: var(--g-f-u) !important; font-size: .95rem !important; font-weight: 400 !important; color: var(--g-ink-80) !important; line-height: 1.65 !important; margin: 0 !important; } /* ──────────────────────────────────────────────────────────────────── 12. COLLECTION DUO ────────────────────────────────────────────────────────────────────── */ .collection-duo { background: var(--g-bg) !important; } .collection-duo__header { text-align: center !important; margin-bottom: 4rem !important; } .collection-duo__grid { display: grid !important; grid-template-columns: 1fr !important; gap: 1.6rem !important; } @media screen and (min-width: 750px) { .collection-duo__grid { grid-template-columns: 1fr 1fr !important; } } .collection-duo__item { position: relative !important; overflow: hidden !important; border-radius: 14px !important; } @media screen and (min-width: 750px) { /* Ambas tarjetas del mismo tamaño */ .collection-duo__item:first-child .collection-duo__media, .collection-duo__item:last-child .collection-duo__media { aspect-ratio: 4/5 !important; } } /* ── MÓVIL: split de altura — ambas tarjetas visibles sin hacer scroll ── Cada tarjeta ocupa ~40% de la altura de pantalla; con el encabezado compacto, las dos entran en una sola vista. */ @media screen and (max-width: 749px) { .collection-duo { padding-top: 2rem !important; padding-bottom: 2rem !important; } .collection-duo__header { margin-bottom: 1.2rem !important; } /* La intro larga se oculta en móvil para que quepan ambas tarjetas */ .collection-duo__header .collection-duo__description { display: none !important; } .collection-duo__grid { gap: .8rem !important; } .collection-duo__media { aspect-ratio: auto !important; height: 40vh !important; height: 40svh !important; min-height: 200px !important; } } .collection-duo__image { width: 100% !important; height: 100% !important; object-fit: cover !important; transition: transform .8s var(--g-ease) !important; } .collection-duo__link:hover .collection-duo__image { transform: scale(1.04) !important; } .collection-duo__overlay { background: linear-gradient(to top, rgba(20,18,16,.88) 0%, rgba(20,18,16,.12) 55%, transparent 100%) !important; background-color: transparent !important; } .collection-duo__eyebrow { font-family: var(--g-f-u) !important; font-size: .76rem !important; letter-spacing: .22em !important; text-transform: uppercase !important; color: var(--g-gold) !important; display: block !important; margin-bottom: .7rem !important; } /* Overlay text always white — independent of page theme */ .collection-duo__collection-title { font-family: var(--g-f-d) !important; font-size: clamp(1.8rem, 3.2vw, 3.4rem) !important; font-weight: 600 !important; letter-spacing: .08em !important; text-transform: uppercase !important; color: #FFFFFF !important; line-height: 1.08 !important; margin: 0 0 .8rem !important; } .collection-duo__collection-description { font-size: 1.2rem !important; font-weight: 400 !important; color: #ffffff !important; line-height: 1.6 !important; margin-bottom: 1.8rem !important; } /* Botón sobre fondo oscuro de imagen — hereda cápsula/shimmer, colores dorado */ .collection-duo__cta.button { background: transparent !important; border: 1.5px solid var(--g-gold) !important; color: var(--g-gold) !important; } .collection-duo__link:hover .collection-duo__cta.button { background: var(--g-gold) !important; border-color: var(--g-gold) !important; color: var(--g-bg) !important; box-shadow: 0 4px 24px rgba(201,168,76,.35) !important; } /* ──────────────────────────────────────────────────────────────────── 13b. SLIDER DOTS — indicador de puntos (reemplaza flechas + "1/7") ────────────────────────────────────────────────────────────────────── */ /* Oculta el control nativo (flechas + contador "1/7") SOLO en los carruseles de producto (la colección destacada y "También te puede gustar"). El .slider-buttons es hermano del