/* ========================================================= MOR SHOP · Portada ========================================================= */ /* Fuentes autoalojadas (Bodoni Moda y Manrope, licencia SIL OFL), subconjunto latino */ @font-face { font-family: "Bodoni Moda"; font-style: normal; font-weight: 400 900; font-display: swap; src: url(../fonts/BodoniModa-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Bodoni Moda"; font-style: italic; font-weight: 400 900; font-display: swap; src: url(../fonts/BodoniModa-italic.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Manrope"; font-style: normal; font-weight: 400 800; font-display: swap; src: url(../fonts/Manrope-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { /* Color — origen: variables CSS de morshopp.com y logotipo oficial (og.jpg), revisados el 26-10-2026 */ --mor-black: #080706; /* --ink y theme-color de morshopp.com */ --mor-logo-bg: #010101; /* fondo del logotipo (muestreado en og.jpg) */ --mor-anthracite: #12100c; /* --ink-2 de morshopp.com */ --mor-anthracite-2: #1b1812; /* --ink-3 de morshopp.com */ --mor-gold: #d9b35f; /* --gold de morshopp.com = botón de og.jpg (#d9b360); 10,1:1 sobre negro */ --mor-gold-deep: #a8843a; /* --gold-deep de morshopp.com; solo líneas y bordes */ --mor-cream: #f4eee1; /* --text de morshopp.com; 17,6:1 sobre negro */ --mor-white: #f6f3ec; /* letras «MOR» del logotipo (muestreado en og.jpg) */ --mor-muted: #9d9483; /* --muted de morshopp.com; 6,7:1 sobre negro, 6,3:1 sobre antracita */ --line: rgba(217, 179, 95, .18); --line-strong: rgba(217, 179, 95, .5); --surface: #15130f; --wa-green: #25d366; --font-display: "Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif; --font-body: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-ios: -apple-system, "SF Pro Text", "SF Pro Display", system-ui, "Segoe UI", Roboto, sans-serif; --header-h: 68px; --bar-h: 0px; /* alto de la barra inferior móvil */ --gutter: clamp(16px, 4vw, 56px); --maxw: 1240px; --radius: 6px; --ease-out: cubic-bezier(.22, 1, .36, 1); --ease-io: cubic-bezier(.65, 0, .35, 1); --ease-spring: cubic-bezier(.2, 1.3, .35, 1); --dur-fast: 160ms; --dur: 300ms; color-scheme: dark; } @media (max-width: 767px) { :root { --header-h: 56px; --bar-h: calc(68px + env(safe-area-inset-bottom)); } } /* ---------- Base ---------- */ *, *::before, *::after { box-sizing: border-box; } [hidden] { display: none !important; } html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--header-h); } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } body { margin: 0; padding-top: var(--header-h); padding-bottom: var(--bar-h); background: var(--mor-black); color: var(--mor-cream); font: 400 16px/1.6 var(--font-body); -webkit-font-smoothing: antialiased; overflow-x: clip; } img, video { display: block; max-width: 100%; height: auto; } a { color: inherit; } h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; } ul[role="list"], ol[role="list"] { list-style: none; padding: 0; } button { font: inherit; color: inherit; } :focus-visible { outline: 2px solid var(--mor-gold); outline-offset: 3px; } ::selection { background: var(--mor-gold); color: var(--mor-black); } .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter); } .skip { position: fixed; top: 8px; left: 8px; z-index: 100; padding: 10px 16px; background: var(--mor-gold); color: var(--mor-black); font-weight: 700; text-decoration: none; border-radius: 4px; transform: translateY(-160%); } .skip:focus { transform: none; } /* ---------- Tipografía ---------- */ .eyebrow { display: inline-flex; align-items: center; gap: 12px; font-size: 12px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--mor-gold); } .eyebrow::before { content: ""; width: 28px; height: 1px; background: currentColor; } .title { font-family: var(--font-display); font-weight: 500; font-size: clamp(2.3rem, 1.4rem + 3.4vw, 4.4rem); line-height: 1.02; letter-spacing: -.015em; color: var(--mor-white); } .title em { font-style: italic; color: var(--mor-gold); font-weight: 400; } .title--sm { font-size: clamp(1.9rem, 1.3rem + 2vw, 2.9rem); } .lead { max-width: 54ch; color: var(--mor-muted); font-size: clamp(16px, 15px + .3vw, 18px); } .split .line { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; } .split .line > span { display: inline-block; } .split .line:nth-child(2) { --k: 1; } .split .line:nth-child(3) { --k: 2; } /* ---------- Botones y enlaces ---------- */ .btn { --h: 52px; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: var(--h); padding: 0 26px; border-radius: 999px; overflow: hidden; isolation: isolate; cursor: pointer; font: 700 15px/1 var(--font-body); letter-spacing: .02em; text-decoration: none; white-space: nowrap; border: 1px solid var(--mor-gold); transition: color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), transform var(--dur-fast) var(--ease-out), box-shadow var(--dur) var(--ease-out), translate 450ms var(--ease-spring); -webkit-tap-highlight-color: transparent; } /* Onda al pulsar: nace donde toca el dedo (el JS escribe --rx / --ry) */ .btn::after { content: ""; position: absolute; left: var(--rx, 50%); top: var(--ry, 50%); z-index: -1; width: 24px; height: 24px; margin: -12px 0 0 -12px; border-radius: 50%; background: rgba(255, 255, 255, .42); opacity: 0; transform: scale(0); pointer-events: none; } .btn.is-ripple::after { animation: ripple 650ms var(--ease-out); } @keyframes ripple { from { opacity: .55; transform: scale(0); } to { opacity: 0; transform: scale(16); } } .btn::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; transform: scaleX(0); transform-origin: right; transition: transform 450ms var(--ease-out); } .btn:hover::before { transform: scaleX(1); transform-origin: left; } .btn:active { transform: translateY(1px); } .btn--gold { background: var(--mor-gold); color: var(--mor-black); } .btn--gold::before { background: #ecd08e; } .btn--gold:hover { box-shadow: 0 10px 30px -12px rgba(217, 179, 95, .6); } .btn--ghost { background: transparent; color: var(--mor-cream); } .btn--ghost::before { background: var(--mor-gold); } .btn--ghost:hover { color: var(--mor-black); } .btn--sm { --h: 42px; padding: 0 18px; font-size: 14px; } .ico { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; } .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; } .actions--center { justify-content: center; } .link { color: var(--mor-cream); font-weight: 600; text-decoration: none; background: linear-gradient(var(--mor-gold), var(--mor-gold)) 0 100% / 100% 1px no-repeat; padding-bottom: 3px; transition: background-size var(--dur) var(--ease-out), color var(--dur) var(--ease-out); } .link::after { content: "→"; display: inline-block; margin-left: .4em; color: var(--mor-gold); transition: transform var(--dur) var(--ease-out); } .link:hover { color: var(--mor-gold); background-size: 0 1px; background-position: 100% 100%; } .link:hover::after { transform: translateX(4px); } .link--sm { font-size: 14px; } .stars { color: var(--mor-gold); letter-spacing: .12em; font-family: var(--font-ios); } /* ---------- Cabecera ---------- */ .top { position: fixed; inset: 0 0 auto; z-index: 50; height: var(--header-h); display: flex; align-items: center; gap: 28px; padding-inline: var(--gutter); background: var(--mor-black); border-bottom: 1px solid var(--line); /* opaca: la cinta tipográfica no debe transparentarse al pasar por debajo */ } /* Progreso de lectura: una línea dorada que crece con el scroll */ .top__progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; pointer-events: none; background: linear-gradient(90deg, var(--mor-gold-deep), var(--mor-gold) 70%, #f2e2b3); transform: scaleX(0); transform-origin: 0 50%; } html:not(.cws-motion) .top__progress { display: none; } .top__nav a.is-current { background-size: 100% 1px; color: var(--mor-gold); } /* El logotipo circular no es legible a la altura de la cabecera («shop» < 10 px): aquí va el nombre en texto. */ .top__brand { font: 800 18px/1 var(--font-body); letter-spacing: .3em; color: var(--mor-white); text-decoration: none; padding-left: 14px; border-left: 2px solid var(--mor-gold); } .top__brand span { color: var(--mor-gold); font-weight: 600; } .top__nav { display: flex; gap: 24px; margin-left: auto; } .top__nav a { font-size: 14px; font-weight: 600; letter-spacing: .03em; text-decoration: none; color: var(--mor-cream); padding: 8px 0; background: linear-gradient(var(--mor-gold), var(--mor-gold)) 0 100% / 0 1px no-repeat; transition: background-size var(--dur) var(--ease-out), color var(--dur); } .top__nav a:hover { background-size: 100% 1px; color: var(--mor-gold); } .top__wa { flex: none; } @media (max-width: 1179px) { .top__nav { display: none; } .top__wa { margin-left: auto; } } @media (max-width: 767px) { .top__wa { display: none; } .top { justify-content: center; } } /* ---------- Barra inferior móvil ---------- */ .mbar { display: none; } @media (max-width: 767px) { .mbar { position: fixed; inset: auto 0 0; z-index: 50; display: grid; grid-template-columns: 1fr 1.6fr; gap: 10px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: var(--mor-black); border-top: 1px solid var(--line); } .mbar .btn { --h: 48px; padding: 0 12px; font-size: 14px; } } /* ========================================================= Escena: puertas → iPhone → comunidad ========================================================= */ .doors { position: relative; background: var(--mor-black); --H: calc(100svh - var(--header-h) - var(--bar-h)); } .anchor { position: absolute; left: 0; top: calc((100% - var(--H)) * .84); width: 1px; height: 1px; } .doors__stage { position: relative; overflow: hidden; isolation: isolate; } html.cws-motion .doors { height: calc(var(--H) + 460svh); } html.cws-motion .doors__stage { position: sticky; top: var(--header-h); height: var(--H); } @media (max-width: 1099px) { html.cws-motion .doors { height: calc(var(--H) + 400svh); } } .scene { position: relative; z-index: 0; background: linear-gradient(180deg, var(--mor-anthracite-2), var(--mor-anthracite) 55%, var(--mor-black)); transform-origin: 50% 45%; } html.cws-motion .scene { position: absolute; inset: 0; } .scene__light { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(45% 55% at 50% 0%, rgba(246, 236, 210, .07), transparent 75%); } .doors__glow { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(22% 60% at 50% 45%, rgba(242, 214, 150, .28), rgba(217, 179, 95, .06) 55%, transparent 75%); } /* Halo dorado que «empuja» al iPhone desde el fondo */ .scene__aura { position: absolute; left: 50%; top: 50%; width: min(120vmin, 1100px); aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(217, 179, 95, .30) 0%, rgba(217, 179, 95, .10) 28%, transparent 62%); } html:not(.cws-motion) .doors__glow { display: none; } html:not(.cws-motion) .scene__aura { opacity: .55; } .scene__inner { position: relative; height: 100%; max-width: 1440px; margin: 0 auto; padding: clamp(20px, 3svh, 40px) var(--gutter); display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: clamp(32px, 4.5vw, 80px); } /* ---------- Pasos ---------- */ .howto { justify-self: end; display: grid; gap: 4px; width: min(100%, 330px); } .howto__item { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; padding: 14px 0 14px 18px; border-left: 2px solid var(--line); transition: border-color 400ms var(--ease-out), opacity 400ms var(--ease-out); } .howto__n { font: italic 500 1.5rem/1 var(--font-display); color: var(--mor-muted); transition: color 400ms; } .howto__item b { display: block; font-size: 17px; color: var(--mor-white); } .howto__item small { display: block; margin-top: 2px; font-size: 14px; color: var(--mor-muted); } html.cws-motion .howto__item { opacity: .38; } html.cws-motion .howto__item.is-done { opacity: .7; } html.cws-motion .howto__item.is-active { opacity: 1; border-left-color: var(--mor-gold); } .howto__item.is-active .howto__n, .howto__item.is-done .howto__n { color: var(--mor-gold); } /* ---------- Comunidad ---------- */ .comm { justify-self: start; display: grid; gap: 16px; justify-items: start; max-width: 400px; } .comm__title { font-size: clamp(2rem, 1.2rem + 1.8vw, 3.1rem); } .comm__list { display: grid; gap: 8px; } .comm__list li { display: flex; align-items: center; gap: 12px; color: var(--mor-cream); font-weight: 600; font-size: 15px; } .comm__list li::before { content: ""; width: 18px; height: 18px; flex: none; border-radius: 50%; border: 1px solid var(--mor-gold); background: radial-gradient(circle, var(--mor-gold) 0 3px, transparent 3.5px); } .comm__first { padding: 12px 16px; border-left: 2px solid var(--mor-gold); background: rgba(217, 179, 95, .07); color: var(--mor-cream); font-size: 15px; } .comm__first strong, .comm__first b { color: var(--mor-gold); } .comm__note { font-size: 13px; color: var(--mor-muted); } .promo { padding: 10px 14px; border: 1px dashed var(--line-strong); border-radius: 4px; font-size: 14px; color: var(--mor-cream); } .promo strong { color: var(--mor-gold); } /* ---------- Disposición apilada (tablet y móvil) ---------- */ @media (max-width: 1099px) { .scene__inner { grid-template-columns: 1fr; justify-items: center; align-content: start; gap: 20px; text-align: center; } .howto, .comm { justify-self: center; justify-items: center; } .howto__item { border-left: 0; padding: 0; grid-template-columns: 1fr; justify-items: center; gap: 4px; } .comm .eyebrow::before { display: none; } .comm { max-width: 520px; } html.cws-motion .scene__inner { padding-top: 3svh; } /* Con movimiento: un solo paso visible bajo el iPhone; la comunidad aparece al final en su lugar */ html.cws-motion .howto { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 4svh; width: auto; } html.cws-motion .howto__item { display: none; } html.cws-motion .howto__item.is-active { display: grid; } html.cws-motion .comm { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 2svh; margin: 0 auto; gap: 10px; } html.cws-motion .comm__list, html.cws-motion .comm__note, html.cws-motion .promo { display: none; } .comm__title { font-size: clamp(1.6rem, 1rem + 3vw, 2.4rem); } .comm .actions { justify-content: center; } } @media (max-width: 767px) { .comm__first { font-size: 14px; padding: 8px 12px; } .howto__item b { font-size: 16px; } } /* Pantallas bajas (un móvil con las barras del navegador a la vista): la comunidad ocupa menos para dejar sitio al teléfono, que además se encoge lo justo (ver doorsScene en mor.js). La clase la pone el JS: alto < 520 px. */ @media (max-width: 1099px) { html.cws-motion .doors__stage.is-short .comm { gap: 8px; bottom: 1.2svh; } html.cws-motion .doors__stage.is-short .comm__title { font-size: clamp(1.4rem, .9rem + 2.6vw, 2rem); } html.cws-motion .doors__stage.is-short .comm__first { padding: 6px 10px; font-size: 13px; } html.cws-motion .doors__stage.is-short .comm .actions { gap: 8px 22px; } html.cws-motion .doors__stage.is-short .comm .btn { --h: 46px; } } /* ========================================================= iPhone ========================================================= */ .phone-wrap { position: relative; will-change: transform; } .iphone { --ph-h: min(calc(var(--H) * .84), 720px); position: relative; height: var(--ph-h); aspect-ratio: 71.6 / 146.6; padding: 1.2%; border-radius: 17% / 8.3%; /* Marco de titanio */ background: linear-gradient(90deg, rgba(255, 255, 255, .18), transparent 6%, transparent 94%, rgba(255, 255, 255, .14)), linear-gradient(160deg, #57524a, #1f1d1a 32%, #3d3a35 58%, #151412 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16), inset 0 0 0 2px rgba(0, 0, 0, .6), 0 60px 120px -40px rgba(0, 0, 0, .95), 0 30px 60px -30px rgba(0, 0, 0, .8); } @media (max-width: 1099px) { .iphone { --ph-h: min(calc(var(--H) * .66), 640px); } } html:not(.cws-motion) .iphone { --ph-h: min(78svh, 680px); } @media (max-width: 767px) { html:not(.cws-motion) .iphone { --ph-h: 64svh; } } .iphone__btn { position: absolute; width: 1.3%; border-radius: 2px; background: linear-gradient(90deg, #2a2824, #5a554c, #2a2824); } .iphone__btn--action { left: -1%; top: 17%; height: 4.4%; } .iphone__btn--up { left: -1%; top: 25%; height: 7.6%; } .iphone__btn--down { left: -1%; top: 34.5%; height: 7.6%; } .iphone__btn--power { right: -1%; top: 27%; height: 11.5%; } .iphone__bezel { height: 100%; padding: 2.4%; border-radius: 16% / 7.8%; background: #000; } .iphone__screen { position: relative; height: 100%; overflow: hidden; border-radius: 13.6% / 6.5%; background: #000; container-type: inline-size; font-family: var(--font-ios); color: #fff; letter-spacing: -.01em; } .iphone__glare { position: absolute; inset: 0; z-index: 20; pointer-events: none; border-radius: inherit; background: linear-gradient(118deg, rgba(255, 255, 255, .13) 0%, rgba(255, 255, 255, .04) 26%, transparent 38%); } .iphone__off { position: absolute; inset: 0; z-index: 19; background: #000; opacity: 0; pointer-events: none; } /* Barra de estado y Dynamic Island */ .ios-status { position: absolute; inset: 0 0 auto; z-index: 8; height: 12.8cqw; padding: 1cqw 7.5cqw 0 10cqw; display: flex; align-items: center; justify-content: space-between; font-size: 4.3cqw; font-weight: 600; } .ios-icons { display: flex; align-items: center; gap: 1.6cqw; } .ios-icons svg { height: 3.1cqw; width: auto; fill: currentColor; } .ios-icons svg:last-child { height: 3.4cqw; } .ios-island { position: absolute; z-index: 9; left: 50%; top: 2.9cqw; width: 30.5cqw; height: 8.8cqw; translate: -50% 0; border-radius: 99px; background: #000; } .ios-island i { position: absolute; right: 3cqw; top: 50%; width: 3.2cqw; height: 3.2cqw; translate: 0 -50%; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #2c3e57, #0a0f18 60%); } .ios-home { position: absolute; z-index: 8; left: 50%; bottom: 2cqw; width: 34cqw; height: 1.25cqw; translate: -50% 0; border-radius: 99px; background: #fff; opacity: .9; } /* Pantallas */ .scr { position: absolute; inset: 0; padding-top: 13cqw; opacity: 0; visibility: hidden; transform: scale(.94); transition: opacity 380ms var(--ease-out), transform 620ms var(--ease-out), visibility 0s linear 620ms; } .iphone:is([data-step="0"], [data-step="1"], [data-step="7"], [data-step="8"]) .scr-home, .iphone:is([data-step="2"], [data-step="3"]) .scr-chats, .iphone:is([data-step="4"], [data-step="5"]) .scr-invite, .iphone[data-step="6"] .scr-chat { opacity: 1; visibility: visible; transform: none; transition: opacity 380ms var(--ease-out), transform 620ms var(--ease-out), visibility 0s; } /* La app se abre desde su icono y se cierra hacia él (el JS mide la posición del icono) */ .scr-chats, .scr-chat { transform-origin: var(--wa-x, 16%) var(--wa-y, 46%); transform: scale(.1); border-radius: 13cqw; } .iphone:is([data-step="2"], [data-step="3"]) .scr-chats, .iphone[data-step="6"] .scr-chat { border-radius: 0; } .scr-invite { transform: translateX(100%); opacity: 1; } .scr-home { transform: scale(1.12); } /* Pantalla de inicio */ .scr-home { padding-top: 15cqw; background: radial-gradient(110% 60% at 15% 0%, #c38b3c 0%, transparent 58%), radial-gradient(80% 55% at 105% 45%, #6b4519 0%, transparent 62%), radial-gradient(130% 80% at 50% 115%, #24180b, #070504 70%); } .ios-widgets { display: grid; grid-template-columns: 1fr 1fr; gap: 5cqw; padding: 0 6cqw; } .ios-w { aspect-ratio: 1; padding: 4cqw; border-radius: 6.5cqw; display: grid; align-content: start; box-shadow: 0 1cqw 3cqw rgba(0, 0, 0, .25); } .ios-w--cal { background: #fff; color: #000; } .ios-w--cal small { font-size: 3.1cqw; font-weight: 700; color: #f2453d; } .ios-w--cal strong { font-size: 14cqw; font-weight: 400; line-height: 1; letter-spacing: -.03em; } .ios-w--cal span { margin-top: auto; padding-top: 3cqw; font-size: 2.9cqw; color: #8e8e93; } .ios-w--wx { background: linear-gradient(180deg, #3d84dc, #2559a9); } .ios-w--wx small { font-size: 3.4cqw; font-weight: 600; } .ios-w--wx strong { font-size: 11.5cqw; font-weight: 300; line-height: 1.05; } .ios-w--wx span { font-size: 3cqw; font-weight: 600; margin-top: 2cqw; } .ios-w--wx em { font-style: normal; font-size: 2.8cqw; opacity: .85; } .ios-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5.4cqw 3cqw; padding: 6.5cqw 6cqw 0; } .app { position: relative; display: grid; justify-items: center; gap: 1.4cqw; } .app i { display: grid; place-items: center; width: 14.6cqw; aspect-ratio: 1; border-radius: 3.4cqw; background: var(--bg); box-shadow: 0 .6cqw 1.6cqw rgba(0, 0, 0, .3); transition: transform 240ms var(--ease-out), filter 240ms; } .app i svg { width: 74%; height: 74%; } .app em { font-style: normal; font-size: 2.7cqw; font-weight: 500; color: #fff; text-shadow: 0 .3cqw 1cqw rgba(0, 0, 0, .5); } .iphone[data-step="1"] .app--wa i { transform: scale(.86); filter: brightness(.82); } .ios-search { position: absolute; left: 50%; bottom: 27cqw; translate: -50% 0; display: flex; align-items: center; gap: 1.3cqw; padding: 1.6cqw 3.8cqw; border-radius: 99px; background: rgba(70, 52, 30, .55); font-size: 3.2cqw; font-weight: 600; } .ios-search svg { width: 3.2cqw; height: 3.2cqw; } .ios-dock { position: absolute; left: 3.8cqw; right: 3.8cqw; bottom: 4.4cqw; padding: 3.6cqw 4cqw; display: flex; justify-content: space-between; border-radius: 9.5cqw; background: rgba(80, 64, 44, .42); } .ios-dock .app i { width: 14.6cqw; } /* Al llegar la notificación, el fondo pasa a segundo plano */ .scr-home > * { transition: opacity 600ms var(--ease-out), filter 600ms var(--ease-out); } .iphone[data-step="8"] .scr-home > * { opacity: .45; filter: blur(1.2px); } /* WhatsApp (modo oscuro iOS) */ .scr-chats, .scr-invite, .scr-chat { background: #000; } .wa-nav { display: flex; align-items: center; justify-content: space-between; padding: 1cqw 5cqw 0; height: 9cqw; } .wa-dots { display: grid; place-items: center; width: 7.5cqw; height: 7.5cqw; border-radius: 50%; background: #1c1c1e; font-size: 4cqw; line-height: 0; color: #fff; } .wa-nav__r { display: flex; gap: 2.4cqw; } .wa-nav__r i { display: grid; place-items: center; width: 7.5cqw; height: 7.5cqw; border-radius: 50%; background: #1c1c1e; font-style: normal; font-size: 5cqw; color: #fff; } .wa-cam::before { content: ""; width: 3.6cqw; height: 2.6cqw; border: .45cqw solid #fff; border-radius: .7cqw; } .wa-plus { background: var(--wa-green) !important; color: #000 !important; font-weight: 700; } .wa-title { display: block; padding: 1.4cqw 5cqw 0; font-size: 8.4cqw; font-weight: 800; letter-spacing: -.02em; } .wa-search { display: flex; align-items: center; gap: 1.6cqw; margin: 2.4cqw 5cqw 0; padding: 2.2cqw 3cqw; border-radius: 3cqw; background: #1c1c1e; color: #8e8e93; font-size: 3.3cqw; } .wa-search svg { width: 3.6cqw; height: 3.6cqw; flex: none; } .wa-chips { display: flex; gap: 1.8cqw; padding: 2.8cqw 5cqw 1.4cqw; } .wa-chips span { padding: 1.3cqw 3cqw; border-radius: 99px; background: #1c1c1e; color: #c7c7cc; font-size: 3cqw; font-weight: 600; white-space: nowrap; } .wa-chips .is-on { background: #103d29; color: #31d974; } .wa-list { list-style: none; margin: 0; padding: 0; } .wa-row { position: relative; display: grid; grid-template-columns: 13cqw 1fr auto; align-items: center; gap: 3.2cqw; padding: 2.5cqw 5cqw; transition: background-color 200ms; } .wa-row::after { content: ""; position: absolute; left: 21cqw; right: 0; bottom: 0; height: 1px; background: #1f1f22; } .wa-row > div { display: grid; min-width: 0; } .wa-row b { font-size: 3.9cqw; font-weight: 700; } .wa-row small { font-size: 3.3cqw; color: #8e8e93; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wa-row time { align-self: start; padding-top: .8cqw; font-size: 2.9cqw; color: #8e8e93; } .wa-row--mor time { color: var(--wa-green); } .wa-av { width: 13cqw; height: 13cqw; border-radius: 50%; object-fit: cover; display: grid; place-items: center; background: var(--a, #000); font-size: 5cqw; font-weight: 700; } .wa-row--mor .wa-av { border-radius: 3.6cqw; } /* las comunidades tienen el avatar cuadrado */ .wa-badge { position: absolute; right: 5cqw; bottom: 3cqw; min-width: 4.8cqw; height: 4.8cqw; padding: 0 1.2cqw; display: grid; place-items: center; border-radius: 99px; background: var(--wa-green); color: #000; font-size: 2.9cqw; font-weight: 800; } .iphone[data-step="3"] .wa-row--mor { background: #1c1c1e; } .wa-tabs { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-around; padding: 2.4cqw 2cqw 7cqw; background: #0d0d0d; border-top: 1px solid #1f1f22; } .wa-tabs span { display: grid; justify-items: center; gap: 1cqw; font-size: 2.3cqw; font-weight: 600; color: #8e8e93; } .wa-tabs span::before { content: ""; width: 5.4cqw; height: 5.4cqw; border-radius: 1.6cqw; border: .45cqw solid currentColor; } .wa-tabs .is-on { color: #fff; } .wa-tabs .is-on::before { background: currentColor; border-radius: 50% 50% 50% 10%; } .wa-bar { display: flex; align-items: center; gap: 3cqw; padding: 1.4cqw 4cqw 3cqw; border-bottom: 1px solid #1f1f22; } .wa-bar > div { display: grid; text-align: left; } .wa-bar b { font-size: 3.9cqw; } .wa-bar small { font-size: 2.9cqw; color: #8e8e93; } .wa-back { width: 3.2cqw; height: 3.2cqw; margin-left: 1.5cqw; border-left: .65cqw solid var(--wa-green); border-bottom: .65cqw solid var(--wa-green); rotate: 45deg; } .wa-av--sm { width: 9cqw; height: 9cqw; border-radius: 2.6cqw; } .scr-invite { display: flex; flex-direction: column; align-items: center; text-align: center; } .scr-invite .wa-bar { align-self: stretch; border: 0; } .inv-av { width: 32cqw; height: 32cqw; border-radius: 8cqw; margin-top: 7cqw; box-shadow: 0 0 0 1.2cqw rgba(217, 179, 95, .14); } .inv-name { margin-top: 5cqw; font-size: 5.8cqw; font-weight: 800; } .inv-sub { margin-top: 1cqw; font-size: 3.3cqw; color: #8e8e93; } .inv-txt { margin: 5cqw 9cqw 0; font-size: 3.7cqw; color: #d1d1d6; line-height: 1.4; } .inv-btn { position: relative; display: grid; place-items: center; width: calc(100% - 12cqw); height: 12cqw; margin-top: auto; margin-bottom: 15cqw; border-radius: 99px; background: var(--wa-green); color: #000; font-size: 4cqw; font-weight: 800; transition: background-color 300ms, transform 200ms var(--ease-out); } .inv-btn > span:not(.tap) { grid-area: 1 / 1; transition: opacity 250ms, transform 350ms var(--ease-out); } .inv-btn__b { opacity: 0; transform: translateY(40%); } .inv-btn__b::before { content: "✓ "; } .iphone[data-step="5"] .inv-btn { background: #1d9e51; transform: scale(.97); } .iphone[data-step="5"] .inv-btn__a { opacity: 0; transform: translateY(-40%); transition-delay: 200ms; } .iphone[data-step="5"] .inv-btn__b { opacity: 1; transform: none; transition-delay: 200ms; } .scr-chat { background: radial-gradient(120% 80% at 50% 0%, #0f1a20, #070b0d); } .chat-body { display: flex; flex-direction: column; gap: 3.4cqw; padding: 5cqw 4.5cqw; } .chat-sys { align-self: center; padding: 1.4cqw 3.4cqw; border-radius: 2.4cqw; background: #1c1c1e; color: #8e8e93; font-size: 3cqw; } .chat-bubble { align-self: flex-start; max-width: 86%; padding: 2.8cqw 3.8cqw 2.2cqw; border-radius: 1cqw 4cqw 4cqw 4cqw; background: #202c33; color: #e9edef; font-size: 3.7cqw; line-height: 1.4; opacity: 0; transform: translateY(14%) scale(.96); transform-origin: 0 0; transition: opacity 400ms var(--ease-out) 250ms, transform 500ms var(--ease-spring) 250ms; } .chat-bubble b { color: var(--wa-green); } .chat-bubble time { display: block; text-align: right; font-size: 2.6cqw; color: #8696a0; margin-top: .8cqw; } .iphone[data-step="6"] .chat-bubble { opacity: 1; transform: none; } /* Notificación: brota de la Dynamic Island */ .ios-notif { position: absolute; z-index: 10; top: 3cqw; left: 3cqw; right: 3cqw; display: grid; grid-template-columns: 10.5cqw 1fr; gap: 3cqw; align-items: center; padding: 3.4cqw 3.8cqw; border-radius: 6.5cqw; background: rgba(38, 36, 33, .96); border: 1px solid rgba(217, 179, 95, .4); box-shadow: 0 2cqw 8cqw rgba(0, 0, 0, .55); opacity: 0; transform: translateY(-2cqw) scale(.34, .22); transform-origin: 50% 0; transition: opacity 250ms, transform 800ms var(--ease-spring), top 800ms var(--ease-spring); } .ios-notif img { width: 10.5cqw; height: 10.5cqw; border-radius: 2.6cqw; } .ios-notif > div { display: grid; gap: .3cqw; min-width: 0; } .ios-notif__top { display: flex; justify-content: space-between; align-items: baseline; } .ios-notif__top b { font-size: 3.3cqw; } .ios-notif__top small { font-size: 2.8cqw; color: #a39d92; } .ios-notif strong { font-size: 3.9cqw; color: var(--mor-gold); } .ios-notif > div > span:last-child { font-size: 3.1cqw; color: #d6d0c4; line-height: 1.3; } .iphone[data-step="8"] .ios-notif { top: 14cqw; opacity: 1; transform: none; animation: notif-glow 1.8s var(--ease-out) .6s both; } @keyframes notif-glow { 0% { box-shadow: 0 2cqw 8cqw rgba(0, 0, 0, .55), 0 0 0 0 rgba(217, 179, 95, .6); } 100% { box-shadow: 0 2cqw 8cqw rgba(0, 0, 0, .55), 0 0 0 5cqw rgba(217, 179, 95, 0); } } /* Toque del dedo */ .tap { position: absolute; left: 50%; top: 50%; width: 12cqw; height: 12cqw; margin: -6cqw 0 0 -6cqw; border-radius: 50%; background: rgba(255, 255, 255, .32); border: 1px solid rgba(255, 255, 255, .7); pointer-events: none; opacity: 0; } .app--wa .tap { top: 7.3cqw; } .wa-row .tap { left: 40%; } .iphone[data-step="1"] .app--wa .tap, .iphone[data-step="3"] .wa-row--mor .tap, .iphone[data-step="5"] .inv-btn .tap { animation: tap 700ms var(--ease-out) both; } @keyframes tap { 0% { opacity: 0; transform: scale(.4); } 35% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.6); } } /* ---------- Hojas ---------- */ .doors__leaves { position: absolute; inset: 0; z-index: 2; display: none; pointer-events: none; perspective: 1400px; perspective-origin: 50% 45%; transform-origin: 50% 45%; --logo: clamp(190px, 34svh, 300px); --logo-top: 37%; } html.cws-motion .doors__leaves { display: block; } /* Móvil: el logotipo y los tiradores se reparten el hueco que queda por encima del texto, sea cual sea el alto de la pantalla. Con medidas fijas, en pantallas bajas (barras del navegador a la vista) pisaban el texto. --txt: dónde empieza el texto (pie de 108–124 px + titular + línea superior) · --room: hueco para logotipo y tirador. */ @media (max-width: 767px) { .doors__leaves { --txt: calc(var(--H) - clamp(108px, 14svh, 124px) - 88px); --room: calc(var(--txt) - 66px); --hh: clamp(26px, calc(var(--room) * .15), 48px); --logo: clamp(120px, min(calc(var(--room) - var(--hh)), calc(var(--H) * .34)), 230px); --logo-top: calc(26px + max(0px, calc(var(--room) - var(--logo) - var(--hh))) / 2 + var(--logo) / 2); } } .leaf { position: absolute; top: 0; bottom: 0; width: 50%; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; background: linear-gradient(90deg, rgba(255, 255, 255, .025), transparent 30%, transparent 70%, rgba(255, 255, 255, .02)), linear-gradient(180deg, #0d0c0a, var(--mor-black) 55%, #050404); will-change: transform; } /* La junta es una sombra interior (se pinta por debajo del logotipo, que así no queda cortado) */ .leaf--left { left: 0; transform-origin: 0 50%; box-shadow: inset -1px 0 0 var(--line-strong), inset 1px 0 0 var(--line); } .leaf--right { right: 0; transform-origin: 100% 50%; box-shadow: inset 1px 0 0 var(--line-strong), inset -1px 0 0 var(--line); } .leaf__panel { position: absolute; left: 12%; right: 12%; border: 1px solid var(--line-strong); border-radius: 2px; box-shadow: inset 0 0 0 6px rgba(0, 0, 0, .35), inset 0 0 0 7px var(--line); } .leaf__panel--top { top: 6%; height: 40%; } .leaf__panel--bottom { top: 52%; bottom: 6%; } .leaf__handle { position: absolute; top: calc(var(--logo-top) + var(--logo) / 2 + 28px); width: 6px; height: clamp(70px, 12svh, 120px); border-radius: 3px; background: linear-gradient(90deg, #8a6a2a, var(--mor-gold) 45%, #f2e2b3 60%, var(--mor-gold-deep)); box-shadow: 0 0 0 1px rgba(0, 0, 0, .5), 0 8px 18px rgba(0, 0, 0, .6); } .leaf--left .leaf__handle { right: 6%; } .leaf--right .leaf__handle { left: 6%; } @media (max-width: 767px) { .leaf__handle { height: var(--hh, 48px); top: calc(var(--logo-top) + var(--logo) / 2 + 26px); } } /* Cada hoja lleva el logotipo completo, recortado a su mitad: cerradas, se lee entero */ .leaf__logo { position: absolute; top: var(--logo-top); width: var(--logo); height: var(--logo); translate: 0 -50%; border-radius: 50%; background: var(--mor-logo-bg); box-shadow: 0 0 0 10px var(--mor-black); } .leaf--left .leaf__logo { right: calc(var(--logo) / -2); } .leaf--right .leaf__logo { left: calc(var(--logo) / -2); } .leaf__logo img { width: 100%; height: 100%; border-radius: 50%; } .leaf__logo { z-index: 1; } .leaf__shade { position: absolute; inset: 0; z-index: 2; opacity: 0; pointer-events: none; } .leaf--left .leaf__shade { background: linear-gradient(90deg, rgba(0, 0, 0, .2), rgba(0, 0, 0, .95)); } .leaf--right .leaf__shade { background: linear-gradient(270deg, rgba(0, 0, 0, .2), rgba(0, 0, 0, .95)); } /* ---------- Texto delante de las puertas ---------- */ .doors__copy { position: relative; z-index: 3; width: 100%; max-width: 760px; margin: 0 auto; padding: clamp(40px, 7svh, 72px) var(--gutter) 8px; text-align: center; display: grid; justify-items: center; gap: 14px; } .doors__copy .eyebrow::before { display: none; } .doors__static-logo { width: 136px; border-radius: 50%; margin-bottom: 6px; } /* «shop» ≈ 10,5 px: mínimo legible */ .doors__title { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: clamp(2.2rem, 1.5rem + 3vw, 4rem); line-height: 1; color: var(--mor-white); } .doors__copy .actions { justify-content: center; margin-top: 8px; } html.cws-motion .doors__copy { position: absolute; left: 50%; bottom: 0; translate: -50% 0; padding-top: 0; padding-bottom: clamp(108px, 14svh, 124px); } html.cws-motion .doors__copy::before { content: ""; position: absolute; inset: -40% -30% 0; z-index: -1; pointer-events: none; background: radial-gradient(60% 70% at 50% 85%, rgba(8, 7, 6, .92), rgba(8, 7, 6, .6) 60%, transparent 100%); } html.cws-motion .doors__static-logo { display: none; } .doors__hint { display: none; } html.cws-motion .doors__hint { display: flex; flex-direction: column; align-items: center; gap: 10px; white-space: nowrap; position: absolute; z-index: 3; left: 50%; bottom: 18px; translate: -50% 0; font-size: 12px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--mor-muted); } .doors__hint i { width: 1px; height: 28px; background: linear-gradient(var(--mor-gold), transparent); animation: hint 2.4s var(--ease-io) 1.5s infinite backwards; transform-origin: top; } @keyframes hint { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } } @media (max-width: 767px) { /* En móvil «Catálogo» y «Pedir por WhatsApp» viven en la barra inferior fija, visibles desde el 0 % */ .doors__copy .actions { display: none; } } /* Sin movimiento: logotipo y titular arriba, comunidad debajo */ html:not(.cws-motion) .doors__stage { display: flex; flex-direction: column; } html:not(.cws-motion) .doors__copy { order: -1; } html:not(.cws-motion) .scene__inner { padding-block: 32px 80px; } /* ========================================================= Presentación ========================================================= */ .intro { position: relative; padding-block: clamp(64px, 8vw, 110px); background: radial-gradient(50% 70% at 10% 0%, rgba(217, 179, 95, .09), transparent 70%), var(--mor-black); } .intro__inner { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; } .intro__head { display: grid; gap: 20px; justify-items: start; } .intro__head .title { font-size: clamp(2.3rem, 1.4rem + 2.8vw, 3.9rem); } .proof { display: flex; flex-wrap: wrap; gap: 10px 32px; } .proof li { display: grid; gap: 2px; } .proof b { font: 500 1.7rem/1 var(--font-display); color: var(--mor-gold); } .proof li > span { font-size: 13px; color: var(--mor-muted); } .trust { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .trust__item { display: flex; align-items: center; gap: 14px; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); } .trust__item b { display: block; font-size: 15px; color: var(--mor-white); line-height: 1.3; } .trust__item small { display: block; font-size: 13px; color: var(--mor-muted); } .trust__ico { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line-strong); color: var(--mor-gold); } .trust__ico svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; } @media (max-width: 899px) { .intro__inner { grid-template-columns: 1fr; } } @media (max-width: 479px) { .trust__item { flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px; } } /* ---------- Sobre nosotros (ventana) ---------- */ .about { width: min(760px, calc(100% - 32px)); max-height: calc(100svh - 48px); padding: 0; overflow: auto; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--mor-anthracite); color: var(--mor-cream); box-shadow: 0 40px 120px -20px rgba(0, 0, 0, .9); } .about::backdrop { background: rgba(4, 3, 2, .78); } .about[open] { animation: about-in 520ms var(--ease-out); } .about[open]::backdrop { animation: fade-in 400ms var(--ease-out); } @keyframes about-in { from { opacity: 0; transform: translateY(24px) scale(.97); } } @keyframes fade-in { from { opacity: 0; } } .about__inner { position: relative; display: grid; gap: 18px; padding: clamp(28px, 5vw, 52px); } .about__close { position: absolute; top: 14px; right: 14px; width: 44px; height: 44px; display: grid; place-items: center; cursor: pointer; background: transparent; border: 1px solid var(--line-strong); border-radius: 50%; color: var(--mor-cream); transition: background-color var(--dur), color var(--dur); } .about__close:hover { background: var(--mor-gold); color: var(--mor-black); } .about__logo { width: 136px; border-radius: 50%; } .about__lead { color: var(--mor-cream); max-width: 60ch; } .about__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; } .about__list li { display: grid; gap: 4px; padding: 16px 0; border-top: 1px solid var(--line); } .about__list b { color: var(--mor-white); font-size: 15px; } .about__list span { color: var(--mor-muted); font-size: 14px; } .about__links { display: flex; flex-wrap: wrap; gap: 10px 26px; } @media (max-width: 599px) { .about__list { grid-template-columns: 1fr; } } /* ========================================================= Secciones comunes ========================================================= */ .section { position: relative; padding-block: clamp(80px, 10vw, 140px); } .section--anth { background: var(--mor-anthracite); } .section__head { display: grid; gap: 18px; margin-bottom: clamp(36px, 5vw, 60px); } .section__head--row { grid-template-columns: 1fr auto; align-items: end; gap: 24px 40px; } .section__head--row > div { display: grid; gap: 18px; } @media (max-width: 699px) { .section__head--row { grid-template-columns: 1fr; } } .frame { position: relative; display: block; overflow: hidden; background: var(--mor-anthracite-2); border-radius: var(--radius); } .frame img, .frame .reveal__mask { width: 100%; height: 100%; } .frame img { object-fit: cover; } .frame--43 { aspect-ratio: 4 / 3; } .frame--11 { aspect-ratio: 1 / 1; } /* ropa: las fotos son cuadradas */ .frame img.is-tall { object-position: 50% 60%; } /* foto vertical (prenda en percha): se recorta más por arriba */ .reveal__mask { display: block; } /* ---------- Catálogo con iconos ---------- */ .seg { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; padding: 4px; border: 1px solid var(--line-strong); border-radius: 99px; } .seg [role="tab"] { position: relative; z-index: 1; min-width: 108px; min-height: 42px; padding: 0 20px; cursor: pointer; background: none; border: 0; border-radius: 99px; font-size: 14px; font-weight: 700; letter-spacing: .04em; color: var(--mor-cream); transition: color var(--dur) var(--ease-out); } .seg [aria-selected="true"] { color: var(--mor-black); } .seg__thumb { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 99px; background: var(--mor-gold); transition: transform 500ms var(--ease-out); } .seg[data-active="1"] .seg__thumb { transform: translateX(100%); } .cats-panel + .cats-panel { margin-top: 48px; } .cats-panel__title { margin-bottom: 18px; font-size: 13px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--mor-muted); } .has-tabs .cats-panel + .cats-panel { margin-top: 0; } .has-tabs .cats-panel__title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .cats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 1.6vw, 20px); } .cats__wide { grid-column: 1 / -1; } .cat { position: relative; display: flex; flex-direction: column; align-items: flex-start; height: 100%; min-height: 200px; padding: 26px 24px 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); overflow: hidden; isolation: isolate; text-decoration: none; transition: border-color var(--dur) var(--ease-out), transform 500ms var(--ease-out); } /* Luz que sigue al cursor */ .cat::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity var(--dur); background: radial-gradient(300px circle at var(--mx, 50%) var(--my, 0%), rgba(217, 179, 95, .16), transparent 65%); } .cat:hover, .cat:focus-visible { border-color: var(--line-strong); transform: translateY(-4px); } .cat:hover::before, .cat:focus-visible::before { opacity: 1; } .cat__n { position: absolute; top: 20px; right: 22px; font: italic 500 16px/1 var(--font-display); color: var(--mor-muted); } .cat__ico { flex: none; width: 66px; height: 66px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line-strong); color: var(--mor-gold); transition: background-color 400ms var(--ease-out), color 400ms var(--ease-out), transform 500ms var(--ease-out); } .cat__ico svg { width: 31px; height: 31px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; } .cat:hover .cat__ico, .cat:focus-visible .cat__ico { background: var(--mor-gold); color: var(--mor-black); transform: rotate(-6deg) scale(1.04); } .cat__name { display: block; margin-top: auto; padding-top: 26px; font-size: 18px; font-weight: 700; color: var(--mor-white); line-height: 1.25; } .cat__go { display: block; margin-top: 4px; font-size: 13px; color: var(--mor-muted); } .cat__go::after { content: "→"; display: inline-block; margin-left: .4em; color: var(--mor-gold); transition: transform var(--dur) var(--ease-out); } .cat:hover .cat__go::after { transform: translateX(5px); } /* Outfits: fila completa */ .cat--wide { flex-direction: row; align-items: center; gap: clamp(18px, 3vw, 40px); min-height: 0; padding: clamp(22px, 3vw, 34px) clamp(20px, 3.4vw, 44px); border-color: var(--line-strong); background: linear-gradient(105deg, rgba(217, 179, 95, .13), rgba(217, 179, 95, .02) 55%, transparent), var(--surface); } .cat--wide .cat__ico { width: 88px; height: 88px; } .cat--wide .cat__ico svg { width: 40px; height: 40px; } .cat__txt { display: grid; gap: 4px; } .cat__kicker { font-size: 12px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--mor-gold); } .cat--wide .cat__name { margin: 0; padding: 0; font: 500 clamp(1.9rem, 1.3rem + 1.6vw, 2.8rem)/1.05 var(--font-display); } .cat__desc { color: var(--mor-muted); font-size: 15px; max-width: 52ch; } .cat--wide .cat__go { margin: 0 0 0 auto; padding: 12px 20px; border: 1px solid var(--line-strong); border-radius: 99px; color: var(--mor-cream); font-weight: 700; white-space: nowrap; transition: background-color var(--dur), color var(--dur); } .cat--wide:hover .cat__go { background: var(--mor-gold); color: var(--mor-black); } .cat--wide:hover .cat__go::after { color: var(--mor-black); } @media (max-width: 699px) { .cat { min-height: 128px; padding: 16px 8px 14px; align-items: center; text-align: center; } .cat__n { top: 8px; right: 10px; font-size: 12px; } .cat__ico { width: 48px; height: 48px; } .cat__ico svg { width: 24px; height: 24px; } .cat__name { padding-top: 12px; font-size: 13.5px; } .cat__go { display: none; } .cat--wide { flex-direction: row; text-align: left; align-items: center; gap: 16px; padding: 18px; } .cat--wide .cat__ico { width: 60px; height: 60px; } .cat--wide .cat__ico svg { width: 28px; height: 28px; } .cat--wide .cat__name { font-size: 1.6rem; } .cat__desc { font-size: 13px; } .cat--wide .cat__go { display: none; } } /* ---------- Novedades — galería ---------- */ .gallery { position: relative; background: var(--mor-black); padding-block: clamp(80px, 10vw, 130px); } .gallery__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px 40px; margin-bottom: clamp(28px, 4vw, 48px); } .gallery__head > div { display: grid; gap: 18px; } .gallery__viewport { overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: var(--mor-gold-deep) transparent; padding-bottom: 12px; } .gallery__track { display: flex; gap: clamp(14px, 2vw, 28px); width: max-content; padding-inline: max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter))); } .card { width: clamp(260px, 72vw, 340px); scroll-snap-align: center; display: grid; align-content: start; gap: 14px; padding: 10px 10px 18px; background: var(--mor-anthracite); border: 1px solid var(--line); border-radius: 8px; transition: border-color var(--dur) var(--ease-out); } .card:hover { border-color: var(--line-strong); } .card__media img { transition: transform 900ms var(--ease-out); } .card:hover .card__media img { transform: scale(1.04); } .card__body { display: grid; gap: 4px; padding-inline: 8px; } .card__brand { font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--mor-muted); } /* Todas las tarjetas miden lo mismo aunque el nombre sea largo: el nombre ocupa siempre dos líneas (y no más) y los datos, una. Así los botones quedan alineados de una tarjeta a otra. */ .card__title { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.3rem, 1.1rem + .5vw, 1.5rem); line-height: 1.1; color: var(--mor-white); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; min-height: 2.2em; } .card__meta { font-size: 14px; color: var(--mor-cream); } .card__price { font-size: 13px; color: var(--mor-muted); } .card__meta, .card__price { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .card__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; margin-top: 10px; } .gallery.is-pinned { padding-block: 0; } .gallery.is-pinned .gallery__sticky { position: sticky; top: var(--header-h); height: calc(100svh - var(--header-h) - var(--bar-h)); display: flex; flex-direction: column; justify-content: center; overflow: hidden; } .gallery.is-pinned .gallery__viewport { overflow: visible; scroll-snap-type: none; padding-bottom: 0; } .gallery.is-pinned .gallery__track { will-change: transform; } .gallery.is-pinned .card { will-change: transform, opacity; } /* Fijada (ordenador): el ancho de la tarjeta sale del alto disponible, para que quepa entera con la foto cuadrada */ .gallery.is-pinned .card { width: clamp(256px, calc(100svh - var(--header-h) - 380px), 340px); } /* Ventanas de ordenador bajas: botones algo más compactos (la tarjeta es más estrecha) y, si es muy baja, sin la línea del precio */ @media (max-height: 760px) { .gallery.is-pinned .card__actions { gap: 8px 10px; } .gallery.is-pinned .card__actions .btn { padding: 0 14px; } .gallery.is-pinned .card__title { font-size: 1.2rem; } } @media (max-height: 700px) { .gallery.is-pinned .card__price { display: none; } } .gallery.is-pinned .gallery__head { margin-bottom: clamp(18px, 4svh, 48px); } /* ---------- Pedidos enviados (vídeos) ---------- */ .orders__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2.4vw, 36px); max-width: 1000px; margin: 0 auto; } .order { position: relative; aspect-ratio: 432 / 774; border-radius: 22px; overflow: hidden; background: #000; border: 1px solid var(--line); box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .9); } .order:nth-child(2) { translate: 0 48px; } .order .reveal__mask { width: 100%; height: 100%; } .order__video { width: 100%; height: 100%; object-fit: cover; } @media (max-width: 699px) { .orders__grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 66vw; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); padding-bottom: 8px; } .order { scroll-snap-align: center; } .order:nth-child(2) { translate: none; } } /* ---------- Opiniones ---------- */ .reviews { background: var(--mor-black); overflow: hidden; } .rv-score { display: grid; justify-items: end; gap: 4px; text-align: right; } .rv-score strong { font: 500 3.6rem/1 var(--font-display); color: var(--mor-gold); } .rv-score .stars { font-size: 18px; } .rv-score small { color: var(--mor-muted); font-size: 14px; } @media (max-width: 699px) { .rv-score { justify-items: start; text-align: left; } } .rv-rails { display: grid; gap: 18px; } .rv-rail { display: flex; gap: 18px; width: max-content; will-change: transform; } .rv-track { display: flex; gap: 18px; } .rv { flex: none; width: 340px; display: flex; flex-direction: column; gap: 14px; padding: 22px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); transition: border-color var(--dur); } .rv:hover { border-color: var(--line-strong); } .rv__top { display: flex; align-items: center; justify-content: space-between; } .rv__top time { font-size: 12px; color: var(--mor-muted); } .rv__text { font-size: 15px; line-height: 1.55; color: var(--mor-cream); } .rv__text::before { content: "“"; display: block; height: .45em; font: italic 500 2.6rem/1 var(--font-display); color: var(--mor-gold); } .rv__who { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 6px; } .rv__ph { width: 58px; height: 58px; flex: none; object-fit: cover; border-radius: 8px; } .rv__ini { width: 46px; height: 46px; flex: none; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line-strong); font: italic 500 1.3rem/1 var(--font-display); color: var(--mor-gold); } .rv__who b { display: block; font-size: 14px; color: var(--mor-white); } .rv__who small { display: block; font-size: 12.5px; color: var(--mor-muted); } @media (max-width: 599px) { .rv { width: 280px; } } html.cws-motion .rv-rails { -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); } /* Sin movimiento: filas desplazables a mano y sin copias */ html:not(.cws-motion) .rv-rail { width: auto; overflow-x: auto; padding-inline: var(--gutter); scroll-snap-type: x mandatory; } html:not(.cws-motion) .rv { scroll-snap-align: start; } html:not(.cws-motion) .rv-track--dup { display: none; } /* ========================================================= Cómo pedir: conversación de WhatsApp ========================================================= */ .chat-sec { position: relative; background: var(--mor-anthracite); --H: calc(100svh - var(--header-h) - var(--bar-h)); } .chat-sec__stage { position: relative; padding-block: clamp(64px, 8vw, 110px); } html.cws-motion .chat-sec { height: calc(var(--H) + 240svh); } html.cws-motion .chat-sec__stage { position: sticky; top: var(--header-h); height: var(--H); padding-block: 0; display: grid; align-items: center; overflow: hidden; } .chat-sec__inner { display: grid; grid-template-columns: minmax(0, 1fr) 420px; align-items: center; gap: clamp(32px, 6vw, 96px); } .chat-sec__side { display: grid; gap: 20px; justify-items: start; } .chat-sec__side .title { font-size: clamp(2.2rem, 1.3rem + 2.6vw, 3.6rem); } .chat-steps { display: grid; gap: 2px; width: 100%; max-width: 420px; } .chat-steps li { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; padding: 12px 0 12px 18px; border-left: 2px solid var(--line); transition: border-color 400ms var(--ease-out), opacity 400ms var(--ease-out); } .chat-steps li > span { font: italic 500 1.4rem/1 var(--font-display); color: var(--mor-muted); transition: color 400ms; } .chat-steps b { display: block; font-size: 16px; color: var(--mor-white); } .chat-steps small { display: block; margin-top: 2px; font-size: 14px; color: var(--mor-muted); } html.cws-motion .chat-steps li { opacity: .38; } html.cws-motion .chat-steps li.is-done { opacity: .7; } html.cws-motion .chat-steps li.is-active { opacity: 1; border-left-color: var(--mor-gold); } .chat-steps li.is-active > span, .chat-steps li.is-done > span { color: var(--mor-gold); } /* Ventana de chat */ .chat { position: relative; width: 100%; min-width: 0; display: grid; grid-template-rows: auto 1fr auto; border-radius: 28px; overflow: hidden; background: #0b141a; border: 1px solid rgba(255, 255, 255, .08); box-shadow: 0 0 0 1px rgba(217, 179, 95, .25), 0 60px 120px -40px rgba(0, 0, 0, .95), 0 0 120px -30px rgba(217, 179, 95, .22); font-family: var(--font-ios); color: #e9edef; letter-spacing: -.005em; } html.cws-motion .chat { height: min(calc(var(--H) - 40px), 700px); } .chat__head { display: flex; align-items: center; gap: 12px; padding: 14px 16px 12px; background: #1f2c34; border-bottom: 1px solid rgba(255, 255, 255, .06); } .chat__back { width: 11px; height: 11px; margin-right: 2px; border-left: 2.2px solid var(--wa-green); border-bottom: 2.2px solid var(--wa-green); rotate: 45deg; flex: none; } .chat__av { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: none; } .chat__head > div { display: grid; min-width: 0; } .chat__head b { font-size: 16px; font-weight: 600; color: #fff; } .chat__head small { font-size: 12.5px; color: #8696a0; } .chat__head-ic { margin-left: auto; display: flex; gap: 18px; } .chat__head-ic i { width: 20px; height: 20px; border-radius: 5px; border: 2px solid #aebac1; } .chat__head-ic i:first-child { border-radius: 50%; } .chat__body { position: relative; overflow: hidden; padding: 0 12px; background: radial-gradient(60% 40% at 80% 10%, rgba(217, 179, 95, .06), transparent 70%), repeating-linear-gradient(45deg, rgba(255, 255, 255, .012) 0 6px, transparent 6px 14px), #0b141a; } .chat__list { display: flex; flex-direction: column; gap: 8px; padding: 16px 0 14px; will-change: transform; } html:not(.cws-motion) .chat__body { overflow: visible; } .chat__day { align-self: center; margin-bottom: 4px; padding: 5px 12px; border-radius: 8px; background: #182229; color: #8696a0; font-size: 12.5px; } .msg { position: relative; max-width: 84%; padding: 8px 10px 20px 12px; border-radius: 12px; font-size: 15px; line-height: 1.4; color: #e9edef; box-shadow: 0 1px 1px rgba(0, 0, 0, .3); transform-origin: 0 100%; } .msg--mor { align-self: flex-start; background: #202c33; border-top-left-radius: 2px; } .msg--me { align-self: flex-end; background: #005c4b; border-top-right-radius: 2px; transform-origin: 100% 100%; } .msg--promo { border: 1px solid rgba(217, 179, 95, .45); background: linear-gradient(160deg, #2a3137, #202c33); } .msg b { color: #fff; font-weight: 700; } .msg--promo b { color: var(--mor-gold); } .msg time { position: absolute; right: 9px; bottom: 4px; display: inline-flex; align-items: center; gap: 3px; font-size: 11px; color: rgba(255, 255, 255, .55); } .ticks { width: 15px; height: 8px; display: inline-block; background: linear-gradient(135deg, transparent 50%, #53bdeb 50%) no-repeat 0 0 / 0 0; position: relative; } .ticks::before, .ticks::after { content: ""; position: absolute; top: 0; width: 7px; height: 4px; border-left: 1.6px solid #53bdeb; border-bottom: 1.6px solid #53bdeb; rotate: -45deg; } .ticks::before { left: 0; } .ticks::after { left: 5px; } .chat__typing { position: absolute; left: 12px; bottom: 14px; display: inline-flex; gap: 4px; padding: 12px 14px; border-radius: 12px; border-top-left-radius: 2px; background: #202c33; opacity: 0; transform: translateY(8px) scale(.9); transform-origin: 0 100%; transition: opacity 250ms var(--ease-out), transform 350ms var(--ease-out); } .chat__typing.is-on { opacity: 1; transform: none; } .chat__typing i { width: 7px; height: 7px; border-radius: 50%; background: #8696a0; animation: typing 1.2s ease-in-out infinite; } .chat__typing i:nth-child(2) { animation-delay: .2s; } .chat__typing i:nth-child(3) { animation-delay: .4s; } @keyframes typing { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } } .chat__foot { display: flex; align-items: center; gap: 10px; padding: 10px 12px 12px; background: #1f2c34; } .chat__plus { width: 30px; text-align: center; font-size: 26px; line-height: 1; color: #8696a0; } .chat__input { flex: 1; padding: 10px 14px; border-radius: 99px; background: #2a3942; color: #8696a0; font-size: 14.5px; } .chat__mic { width: 30px; height: 30px; border-radius: 50%; background: var(--wa-green); position: relative; } .chat__mic::before { content: ""; position: absolute; left: 50%; top: 50%; width: 6px; height: 11px; translate: -50% -60%; border-radius: 3px; background: #0b141a; } .chat__cta { position: absolute; left: 50%; bottom: 68px; translate: -50% 0; width: calc(100% - 32px); --h: 48px; } html:not(.cws-motion) .chat__cta { position: static; translate: none; width: auto; margin: 14px 16px 16px; } html.cws-motion .chat__cta { opacity: 0; transform: translateY(16px); visibility: hidden; transition: opacity 400ms var(--ease-out), transform 500ms var(--ease-out), visibility 0s linear 500ms; } html.cws-motion .chat__cta.is-on { opacity: 1; transform: none; visibility: visible; transition: opacity 400ms var(--ease-out), transform 500ms var(--ease-out), visibility 0s; } @media (max-width: 899px) { .chat-sec__inner { grid-template-columns: 1fr; justify-items: center; gap: 24px; text-align: center; } .chat { width: min(100%, 420px); } .chat-sec__side { justify-items: center; gap: 12px; } .chat-sec__side .eyebrow::before { display: none; } .chat-sec__side .lead, .chat-steps { display: none; } html.cws-motion .chat-sec__side .actions { display: none; } html.cws-motion .chat-sec { height: calc(var(--H) + 170svh); } html.cws-motion .chat { height: min(calc(var(--H) - 150px), 620px); } html:not(.cws-motion) .chat-sec__side .lead { display: block; } .msg { font-size: 14.5px; } } /* ---------- Cierre y pie ---------- */ .closing { position: relative; overflow: hidden; padding-block: clamp(90px, 12vw, 170px); background: var(--mor-black); } /* Luz de showroom: con movimiento crece al llegar */ .closing__light { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(50% 60% at 50% 30%, rgba(217, 179, 95, .11), transparent 70%); transform-origin: 50% 30%; } .closing__inner { position: relative; display: grid; justify-items: center; gap: 28px; text-align: center; } .closing__logo { width: clamp(180px, 22vw, 240px); border-radius: 50%; } .closing__title { font-size: clamp(2.6rem, 1.6rem + 3.6vw, 5rem); } .closing__social { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 28px; } .foot { border-top: 1px solid var(--line); padding-block: 40px; background: var(--mor-black); } .foot .wrap { display: grid; gap: 20px; } .foot nav { display: flex; flex-wrap: wrap; gap: 10px 26px; } .foot a { font-size: 14px; color: var(--mor-cream); text-decoration: none; } .foot a:hover { color: var(--mor-gold); text-decoration: underline; text-underline-offset: 4px; } .foot__legal a { color: var(--mor-muted); } .foot__copy { font-size: 13px; color: var(--mor-muted); } /* ========================================================= Movimiento ligado al scroll (solo con html.cws-motion) El JS escribe en cada [data-sd] su progreso: --p (lineal) y --pe (suavizado), de 0 a 1. Los hijos de .sd-stagger derivan el suyo (--pi) con un desfase por --i (su índice). ========================================================= */ html.cws-motion [data-sd] { --p: 0; --pe: 0; } html.cws-motion .sd-rise { opacity: var(--pe); transform: translate3d(0, calc((1 - var(--pe)) * 44px), 0); } html.cws-motion .sd-stagger > * { --pi: clamp(0, calc((var(--pe) - var(--i, 0) * var(--sd-step, .1)) / var(--sd-win, .6)), 1); opacity: var(--pi); transform: translate3d(0, calc((1 - var(--pi)) * 36px), 0); } /* Los titulares por líneas no se desvanecen: cada línea sube desde su máscara */ html.cws-motion .sd-stagger > .split { opacity: 1; transform: none; } html.cws-motion .sd-stagger .split .line > span { transform: translate3d(0, calc((1 - var(--pl)) * 112%), 0) rotate(calc((1 - var(--pl)) * 2deg)); transform-origin: 0 100%; } html.cws-motion .sd-stagger .split .line { --pl: clamp(0, calc((var(--pe) - var(--i, 0) * var(--sd-step, .1) - var(--k, 0) * .09) / .5), 1); } /* Iconos que se dibujan (pathLength="1" lo pone el JS) */ html.cws-motion .draw svg > * { stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--pi, var(--pe))); } /* Revelado de vídeos y fotos: el recorte va en el hijo */ html.cws-motion .reveal .reveal__mask { clip-path: inset(calc((1 - var(--pi, var(--pe))) * 100%) 0 0 0); } html.cws-motion .reveal .reveal__mask > * { transform: scale(calc(1 + (1 - var(--pi, var(--pe))) * .12)); } html.cws-motion .orders__grid > .order { transform: translate3d(0, calc((1 - var(--pi)) * 60px), 0); } /* Profundidad: cada columna de vídeos se mueve a un ritmo distinto (el JS escribe --par) */ @media (min-width: 700px) { html.cws-motion .orders__grid > .order { translate: 0 var(--par, 0px); } html.cws-motion .orders__grid > .order:nth-child(2) { translate: 0 calc(48px + var(--par, 0px)); } } /* Catálogo: cambio de pestaña con cascada propia (el progreso de scroll ya está al máximo) */ html.cws-motion .cats-panel.is-switching .cats > li { animation: cat-in 700ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 60ms); } @keyframes cat-in { from { opacity: 0; transform: translate3d(0, 22px, 0) scale(.98); } } /* ========================================================= Movimiento · segunda capa Entrada al cargar, cabecera, cinta tipográfica, manifiesto, líneas, profundidad, galería y transición entre páginas. Todo vive bajo html.cws-motion (o no-preference): sin movimiento la página queda quieta y completa. ========================================================= */ /* La transición entre páginas (@view-transition) va en línea en el : ver