/* ------------------------------------------------------------------ */ /* BISEBERZA — REDISEÑO EDITORIAL (15/07/2026) */ /* Identidad oficial de Lupe intacta (paleta de 9 swatches + Didot / */ /* Helvetica Neue). Lo que cambia es el SISTEMA: antes Didot itálica */ /* aparecía en cada título y cada nombre de pieza (el "tell" de */ /* plantilla). Ahora el sitio es sans-led como las marcas reales del */ /* nicho (Bless, House of CB, Retrofête): Helvetica Neue en mayúsculas */ /* trackeadas para toda la UI y los títulos, y Didot reservada para */ /* DOS lugares con jerarquía real: el wordmark (logo) y la frase del */ /* Capítulo (el único gesto serif grande de la página). */ /* ------------------------------------------------------------------ */ :root { --font-display: 'Didot', 'Bodoni Moda', 'Bodoni MT', serif; --font-body: 'Helvetica Neue', Helvetica, Arial, sans-serif; --bg: #F3EDE3; /* Ivory */ --bg2: #EAD9D2; /* Ivory + velo de Blush */ --stone: #E9D8C9; /* Piedra cálida: el "peso tonal" de las zonas que antes eran oscuras. 17/07/2026: se corrió del greige tostado (#E7DCCB, hue 36) hacia un arena con subtono rosa (hue 28) para que la costura con el blush (--bg2, hue 17) se lea como una progresión y no un choque tostado vs. rosado (feedback JF/María Andrea). La portada camina Ivory (37) > Stone (28) > Blush (17): misma familia, cada banda un paso más cálida. */ --ink: #16130F; /* Black cálido */ --ink-m: rgba(22,19,15,.55); /* Texto narrativo (frases de copy, no etiquetas de UI): --ink-m al 55% lavaba el copy a un gris genérico de plantilla (feedback JF, 18/07/2026, confirmado con ChatGPT: peso 300 + gris 55% es el default de un sitio hecho con IA). --ink-soft se queda cerca del negro real, el peso tipográfico es el que baja la jerarquía, no la opacidad. */ --ink-soft: rgba(22,19,15,.82); --accent: #4A1420; /* Wine — accent principal */ --accent-deep: #34101A; /* Wine profundo */ --cardinal: #9A1F2B; /* Cardinal Red — solo badge de descuento */ --champagne: #C7A46C; /* Champagne — detalle metálico puntual */ --emerald: #123C2E; /* Emerald — reservado */ --silver: #C9C4BB; /* Silver — líneas/bordes */ --navy-deep: #16223F; /* Royal Blue del moodboard — SIN uso como fondo de sección (JF 15/07: "odia el azul de fondo"). Queda en el sistema por si Lupe lo pide puntual. */ --paper: #F3EDE3; --line: rgba(22,19,15,.14); --line-dark: rgba(243,237,227,.16); /* Fase 2 del rediseño (18/07/2026): las cápsulas dejan de separarse por bloque de color de fondo (--stone salía de aquí) y pasan a un marco fino en champagne sobre el mismo Ivory de toda la portada. La separación la da el marco + el aire, no el color. */ --champagne-line: rgba(199,164,108,.4); } * { margin: 0; padding: 0; box-sizing: border-box; } /* NUNCA scroll-behavior: smooth aquí — entra en conflicto directo con Lenis. Y todo HTML de este proyecto empieza con : sin eso el navegador entra en quirks mode y Lenis mueve el elemento equivocado. */ /* overflow-x: clip (no hidden) en ambos: los drawers viven fuera del canvas con translateX(100%) y sin esto el viewport móvil se infla para incluirlos (la página entera se ve encogida en el celular). clip recorta el layout sin crear un contenedor de scroll, hidden no alcanza. */ html { overflow-x: clip; } body { background: var(--bg); color: var(--ink); font-family: var(--font-body); font-weight: 300; line-height: 1.55; overflow-x: clip; } /* Los títulos YA NO heredan serif itálica: jerarquía por tamaño, peso y tracking en Helvetica Neue. La serif vive solo en .wordmark (18/07/2026: el Capítulo, el otro lugar donde vivía Didot, se quitó de la página). */ h1, h2, h3 { font-weight: 400; line-height: 1.1; } a { color: inherit; text-decoration: none; } img { display: block; max-width: 100%; } button { font-family: inherit; border: none; background: none; cursor: pointer; color: inherit; } ::selection { background: var(--accent); color: var(--paper); } :focus-visible { outline: 1px solid var(--champagne); outline-offset: 3px; } .eyebrow { font-size: 0.66rem; text-transform: uppercase; /* Fase 1 del rediseño editorial (18/07/2026): 0.32em era tracking extremo repetido en cada sección sin variación — uno de los puntos que el brief señaló como "la línea/etiqueta hace el trabajo que debería hacer la dirección de arte". Bajado a algo con presencia real pero sin sentirse a plantilla. */ letter-spacing: 0.22em; color: var(--accent); font-weight: 500; margin-bottom: 1.1rem; } /* Grain overlay */ .grain { position: fixed; inset: 0; pointer-events: none; z-index: 9999; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); opacity: .03; mix-blend-mode: multiply; } /* Custom cursor */ .cursor { width: 9px; height: 9px; background: var(--accent); border-radius: 50%; position: fixed; top: 0; left: 0; pointer-events: none; z-index: 10000; transform: translate(-50%, -50%); } @media (hover: hover) { body { cursor: none; } } @media (hover: none) { .cursor { display: none; } } /* ------------------------------------------------------------------ */ /* HEADER — tres zonas: menú (izquierda), wordmark (centro), tus cosas (derecha). El hamburguesa ahora vive en TODOS los tamaños: es la puerta de entrada al catálogo, patrón Zara/Bless. */ /* ------------------------------------------------------------------ */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 500; display: flex; align-items: center; justify-content: space-between; padding: 1.25rem 4vw; background: var(--bg); border-bottom: 1px solid var(--line); transition: padding 0.35s ease; } .site-header.is-compact { padding: 0.7rem 4vw; } .header-zone--left { display: flex; align-items: center; min-width: 90px; } .header-actions { display: flex; align-items: center; gap: 0.2rem; justify-content: flex-end; min-width: 90px; } .wordmark { position: absolute; left: 50%; transform: translateX(-50%); font-family: var(--font-display); font-style: normal; font-weight: 500; font-size: 1.06rem; letter-spacing: 0.34em; margin-right: -0.34em; text-transform: uppercase; color: var(--ink); transition: font-size 0.35s ease; white-space: nowrap; } .site-header.is-compact .wordmark { font-size: 0.92rem; } @media (max-width: 560px) { .wordmark { font-size: 0.9rem; letter-spacing: 0.24em; margin-right: -0.24em; } .header-zone--left, .header-actions { min-width: 0; } .site-header { padding: 1.1rem 4vw; } } /* Hamburguesa de dos líneas + etiqueta */ .btn-menu { display: flex; align-items: center; gap: 0.65rem; padding: 0.5rem 0.2rem; } .btn-menu-lines { display: flex; flex-direction: column; gap: 6px; width: 24px; } .btn-menu-lines span { display: block; height: 1px; background: var(--ink); transition: width 0.3s ease, background 0.3s ease; } .btn-menu-lines span:nth-child(1) { width: 24px; } .btn-menu-lines span:nth-child(2) { width: 15px; } .btn-menu:hover .btn-menu-lines span:nth-child(1) { width: 15px; background: var(--accent); } .btn-menu:hover .btn-menu-lines span:nth-child(2) { width: 24px; background: var(--accent); } .btn-menu-label { font-size: 0.64rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--ink-m); transition: color 0.3s ease; } .btn-menu:hover .btn-menu-label { color: var(--accent); } @media (max-width: 560px) { .btn-menu-label { display: none; } } .btn-cart { position: relative; color: var(--ink); padding: 0.5rem; display: flex; align-items: center; justify-content: center; } .btn-cart:hover { color: var(--accent); } .cart-count { position: absolute; top: -2px; right: -2px; background: var(--accent); color: var(--paper); font-size: 0.6rem; font-weight: 600; width: 15px; height: 15px; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .cart-count[hidden] { display: none; } /* ------------------------------------------------------------------ */ /* HERO — díptico de dos looks distintos (Paulina en negro, de frente · Vera en blanco, de espalda). El wordmark real en Didot cruza la costura en mix-blend-mode: difference (blanco sobre el lado oscuro, tinta sobre el claro). Es hermano de .hero-panes, nunca hijo de un elemento con transform propio, para que el blend componga contra ambas fotos. */ /* ------------------------------------------------------------------ */ .hero { position: relative; height: 100vh; min-height: 620px; overflow: hidden; } .hero-panes { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; } @media (max-width: 700px) { /* Apilado vertical. El header es una barra opaca ivory: si los panes arrancan en y=0, la cabeza de la primera foto queda escondida DETRÁS de la barra (la vieja queja de "cabeza cortada", en versión mobile). Los panes arrancan justo debajo del header; el hueco hereda el mismo ivory del body, la costura es invisible. */ .hero-panes { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; top: 3.6rem; } /* Vera (pane 2) en panes bajitos: recorte más arriba para conservar el aire sobre la cabeza (los pies se sacrifican, mide media pierna). */ .hero-pane:last-child img { object-position: center 18%; } } .hero-pane { position: relative; overflow: hidden; } .hero-pane img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.92) contrast(1.04); will-change: transform; } /* Posición de recorte POR FOTO (17/07/2026): el pane recorta en vertical (object-fit: cover) y la regla de oro es que la cabeza nunca quede cortada ni pegada al borde. Paulina (izq.) tiene la cabeza al 6% del archivo: recorte casi todo por abajo (8%). Vera (der.) tiene más aire arriba (8%) y los pies valen la pena: recorte repartido (30%). Aplica igual en desktop (panes lado a lado) y mobile (apilados). */ .hero-pane:first-child img { object-position: center 8%; } .hero-pane:last-child img { object-position: center 30%; } .hero-word { /* Centrado sobre el torso/tela (zona sólida negro/marfil), no sobre cara/pelo/piel — ahí el mix-blend-mode:difference calcula tonos raros (verdes/azules) contra tonos de piel y cabello, en vez del blanco/negro limpio que da contra tela sólida. */ position: absolute; left: 0; right: 0; top: 64%; z-index: 5; transform: translateY(-50%); display: flex; justify-content: center; mix-blend-mode: difference; color: #fff; pointer-events: none; user-select: none; } /* En mobile los paneles se apilan (cada uno hair-a-torso en su 50% de alto) — el centro exacto (50%) cae justo en la costura, que empieza en el pelo de la 2ª foto. Subirlo lo deja sobre la tela del torso de la 1ª foto, evitando pelo/piel de ambas fotos. */ @media (max-width: 700px) { .hero-word { top: 40%; } } .hero-word-inner { font-family: var(--font-display); font-weight: 500; font-size: clamp(2.5rem, 8.6vw, 8rem); letter-spacing: 0.2em; margin-right: -0.2em; white-space: nowrap; display: inline-block; } .hero-word-inner span { display: inline-block; } .hero-meta { position: absolute; bottom: 2rem; z-index: 6; font-size: 0.62rem; letter-spacing: 0.3em; text-transform: uppercase; color: #fff; mix-blend-mode: difference; } .hero-meta--left { left: 4vw; } .hero-meta--right { right: 4vw; } @media (max-width: 700px) { .hero-meta--right { display: none; } .hero-meta--left { bottom: 1.6rem; } } .scroll-cue { position: absolute; bottom: 1.8rem; left: 50%; transform: translateX(-50%); z-index: 6; display: flex; flex-direction: column; align-items: center; gap: 0.6rem; color: #fff; mix-blend-mode: difference; font-size: 0.6rem; letter-spacing: 0.3em; text-transform: uppercase; } .scroll-cue i { display: block; width: 1px; height: 34px; background: currentColor; opacity: .7; transform-origin: top; animation: cue 2.2s ease-in-out infinite; } @keyframes cue { 0% { transform: scaleY(0); transform-origin: top; } 45% { transform: scaleY(1); transform-origin: top; } 55% { transform: scaleY(1); transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } } /* ------------------------------------------------------------------ */ /* MARQUEE — cinta editorial entre hairlines, caps trackeadas, un solo acento champagne. Puro CSS, cero JS. */ /* ------------------------------------------------------------------ */ .marquee { overflow: hidden; border-bottom: 1px solid var(--line); padding: 0.9rem 0; background: var(--bg); } .marquee-track { display: flex; width: max-content; animation: marquee 30s linear infinite; } .marquee-set { display: flex; align-items: center; gap: 3rem; padding-right: 3rem; } .marquee-set span { font-size: 0.62rem; letter-spacing: 0.32em; text-transform: uppercase; color: var(--ink-m); white-space: nowrap; } .marquee-set i { font-style: normal; font-size: 0.45rem; color: var(--champagne); } @keyframes marquee { to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } } /* ------------------------------------------------------------------ */ /* CÁPSULAS — tres capítulos, tres escenas. 01 dúo de sesión sobre ivory · 02 banda de piedra cálida con galería de tres fotos escalonadas (el color lo ponen las PRENDAS, no el fondo) · 03 banda blush con cards cargadas del color real de cada prenda. El número índice en trazo champagne (straddle del borde superior) es el hilo común entre 01 y 02, y los fondos caminan la misma familia: ivory > stone > blush, cada banda un paso más cálida. */ /* ------------------------------------------------------------------ */ .capsulas { padding: 8rem 0 0; background: var(--bg); } .capsula { position: relative; display: grid; grid-template-columns: repeat(12, 1fr); gap: 2.4rem 2rem; align-items: end; margin-bottom: 10rem; padding: 0 4vw; } .capsula-media { position: relative; overflow: hidden; background: var(--bg2); } .capsula-media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.9) contrast(1.05) brightness(.99); transition: transform 0.6s cubic-bezier(.3,.6,.2,1); } /* 30/07/2026: hover-zoom parejo en toda foto de cápsula (antes solo lo tenía la 02/Chaquetas) — un gesto de vida barato, sin agregar texto. */ .capsula-media:hover img { transform: scale(1.045); } .capsula-media--big { aspect-ratio: 4/5; } .capsula-media--big img { will-change: transform; } /* Marco fino en las cápsulas (Fase 2, 18/07/2026): cada una es su propio bloque contenido, con aire generoso adentro y afuera, en vez de un bloque de color. Ver --champagne-line en :root. 30/07/2026: la Cápsula 01 (Bodysuits, dúo de sesión) se quitó de index.html a pedido de María Andrea — con ella salieron las reglas .capsula--01 / .capsula-duo / .duo-frame / .c01-right / .c01-datos. */ /* --- Cápsula 02: banda de piedra cálida, upgrade 17/07/2026 ---------- Feedback JF: la 02 era la zona más floja (numeral tímido, solo dos fotos, poco texto). Ahora: numeral con el MISMO tratamiento que el 01 (straddle del borde superior, trazo champagne sobre la costura ivory/stone), galería de tres fotos escalonadas (lámina de encaje arriba a la izquierda, vino grande con parallax a la derecha, dorada flotante con passe-partout cruzando la costura entre ambas) y una regla de datos reales del catálogo bajo el copy. El drama lo pone la composición y las prendas, nunca el fondo: --stone es un neutro de la misma familia del ivory y el blush (ver token). */ /* Fase 1 (18/07/2026): la 02 había perdido el marco completo a propósito (solo border-top), para que el collage no compitiera con una caja. JF probó el sitio en su celular real (20/07/2026) y pidió revertir esto: se veía inconsistente frente a la 01 y la 03 (que sí cierran los 4 lados) — se prioriza la consistencia del sistema de marcos sobre esa sutileza. Vuelve a cerrar los 4 lados, igual que las otras dos. */ .capsula--02 { background: var(--bg); padding: 7.5rem 4vw 8.5rem; /* Con la Cápsula 03 (Chaquetas) insertada el 30/07/2026, la pausa larga (8rem) se movió a la 03→04: acá queda un paso intermedio del ritmo no uniforme (5rem la 01→02, 6rem la 02→03, 8rem la 03→04). */ margin: 0 3vw 6rem; border: 1px solid var(--champagne-line); border-radius: 2px; align-items: center; } .c02-stage { position: relative; } .c02-main { width: 58%; margin-left: auto; aspect-ratio: 3/4; box-shadow: 0 26px 60px rgba(22,19,15,.18); } /* Lámina alta de encaje: tercera foto de la galería, arranca más arriba que la principal (escalón editorial, como las columnas del dúo de 01 pero en collage superpuesto, no en grid). */ .c02-tall { position: absolute; left: 0; top: -2.6rem; width: 36%; aspect-ratio: 2/3; z-index: 1; box-shadow: 0 20px 48px rgba(22,19,15,.18); } .c02-tall img { object-position: center top; } .c02-float { position: absolute; left: 22%; bottom: -3.2rem; width: 32%; aspect-ratio: 3/4; z-index: 2; /* Sin passe-partout: el marco blanco se veía "profesional"/genérico (feedback JF, 18/07/2026). La foto flota directo, la separación de la costura la da solo la sombra. */ box-shadow: 0 20px 48px rgba(22,19,15,.22); } /* 30/07/2026: .c02-datos ("Referencias · Colores · Tallas") se quitó a pedido de María Andrea ("quitemos tanto texto, tipo cuántas unidades hay por talla"). */ /* --- Cápsula 03: Chaquetas, mosaico 2×2 (agregada 30/07/2026, corregida el mismo día) --- Con la categoría Chaqueta sumada al catálogo, esta cápsula se inserta entre Faldas y Color. Layout propio: cabecera a lo ancho completo (título+copy a la izquierda, datos reales a la derecha) y debajo un mosaico de 4 fotos reales (shearling, leopardo, tweed, suede) mostrando la variedad de material — sin mecanismo de cambio de color como la 02, la variedad real ya hace el trabajo de "wow". Primer intento (mismo día): 1 foto vertical dominante + 3 apiladas en celdas cortas y anchas — JF reportó con captura real que esas 3 se veían mal, solo tela/botones de cerca, la prenda completa no se apreciaba. Causa real: las fotos son retrato ~3:4 (dos de ellas exactamente 900×1200) y las celdas cortas las aplastaban con un object-fit:cover agresivo. Fix: mosaico 2×2 con las 4 celdas EN LA MISMA proporción 3:4 real de las fotos — casi cero recorte en 3 de las 4 (nativas 3:4), la cuarta (leopardo, más angosta/alta) recorta apenas arriba/abajo con un object-position ajustado a mano. Pausa larga (8rem) antes de la 03 (Color), el momento más memorable de la portada. 30/07/2026: .c03-datos se quitó, mismo pedido que en Faldas. */ .capsula--03 { display: block; background: var(--bg); margin: 0 3vw 8rem; padding: 5.5rem 4vw 4.5rem; border: 1px solid var(--champagne-line); border-radius: 2px; } .c03-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 2.4rem; flex-wrap: wrap; margin-bottom: 3rem; } .c03-head .capsula-desc { margin-bottom: 0; max-width: 46ch; } .c03-mosaico { display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); gap: 1.2rem; max-width: 52rem; margin: 0 auto 2.6rem; } /* Las 4 celdas comparten la MISMA proporción 3:4 de las fotos reales (ver nota arriba) — object-fit:cover casi no recorta en 3 de las 4. */ .c03-media { aspect-ratio: 3/4; } .c03-media img { object-position: center 14%; } /* Foto de Leona (denim leopardo): 720×1280, más angosta/alta que el 3:4 de la celda — sesgo hacia arriba para conservar rostro + chaqueta y recortar de sobra por abajo (jean/mano), no al revés. */ .c03-a img { object-position: center 8%; } .c03-cta { display: inline-flex; } /* --- Cápsula 04 (antes 03): galería cromática de scroll (Fase 2, 18/07/2026) ----- En desktop la cápsula entera se PINEA (GSAP ScrollTrigger) y el scroll vertical se traduce en el desplazamiento horizontal de .croma-track dentro de .croma-viewport (overflow hidden: la página nunca gana scroll horizontal, html ya tiene overflow-x clip a propósito). Las cards comparten una línea base común (align-items flex-end) con alturas distintas por card (--h inline): ritmo editorial, no carrusel. El espectro es el indicador real del recorrido (se llena + un punto viaja con el progreso) y el fondo ivory recibe un velo del 7% del color activo (JS), nunca un bloque saturado. El padding vertical es más corto que en las otras cápsulas a propósito: pineada, TODO el bloque tiene que caber en un viewport. Mobile y prefers-reduced-motion: sin pin, cinta nativa con scroll-snap (media query al final del bloque). */ /* El margen horizontal vive en el wrapper (.capsula-color-wrap), nunca en el elemento pineado — GSAP ScrollTrigger mide mal el ancho de un elemento con margin propio al pinearlo (confirmado con CDP: el elemento pineado quedaba ~6vw más ancho que su propio pin-spacer, desbordando por la derecha y recortado por overflow-x:clip en vez de dejar un margen simétrico). */ .capsula-color-wrap { margin: 0 3vw 6rem; } .capsula--color { display: block; background: var(--bg); padding: 5.5rem 4vw 3rem; border: 1px solid var(--champagne-line); border-radius: 2px; } .capsula-color-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; flex-wrap: wrap; margin-bottom: 2.2rem; } /* Mismo tamaño que el título de la 01 y la 02 (JF: las tres cápsulas no pueden sentirse distintas en escala tipográfica). El "power up" de esta cápsula queda solo en el espectro de color, no en el tamaño de letra. */ /* Fase 1 (18/07/2026): la 03 es "el momento visual más memorable" de la portada (seguirá con una galería cromática de scroll en la Fase 2) — se le da voz propia desde ya: Didot itálica en vez de Helvetica mayúscula, la misma familia que el wordmark, reservada para un solo momento grande más en toda la página. Nada de tracking ancho ni mayúsculas aquí, Didot itálica se lee mejor en su caso natural. */ /* 20/07/2026: mismo tratamiento que el wordmark (Didot recto, mayúsculas, tracking amplio) en vez de la itálica — JF pidió que compartan la misma tipografía. Tracking algo más contenido que el wordmark (0.34em) porque a este tamaño y en dos líneas, 0.34em se sentía forzado/rompía el ancho — 0.12em ya lee como la misma familia sin ese problema. */ .capsula-color-head .capsula-title { margin-bottom: 0; font-family: var(--font-display); font-style: normal; font-weight: 500; text-transform: uppercase; letter-spacing: 0.12em; font-size: clamp(1.6rem, 3.4vw, 2.5rem); } /* Espectro: los 8 tonos reales de las cards, en el mismo orden del recorrido (mismos hex que --c en cada card). Base atenuada con un velo ivory (::before); .spectrum-fill es el mismo gradiente a plena intensidad, recortado por clip-path según el progreso (JS), y .spectrum-dot es el punto que viaja. Sigue siendo un trazo fino, nunca un bloque de color. */ .capsula-spectrum { position: relative; height: 3px; margin: 0 0 2.6rem; border-radius: 999px; background: linear-gradient(90deg, #C2185B, #D6127D, #7A2331, #B98354, #C6B08A, #4C6B4F, #2A9D8F, #2B4C8C, #B695C0, #8C8C88, #8A7457); } .capsula-spectrum::before { content: ''; position: absolute; inset: 0; background: var(--bg); opacity: .7; border-radius: inherit; } .spectrum-fill { position: absolute; inset: 0; background: inherit; border-radius: inherit; clip-path: inset(0 100% 0 0); } .spectrum-dot { position: absolute; top: 50%; left: 0; width: 11px; height: 11px; border-radius: 50%; background: var(--bg); border: 1px solid var(--champagne); box-shadow: 0 1px 6px rgba(22,19,15,.3); transform: translate(-50%, -50%); } /* Carril horizontal: el viewport recorta (overflow hidden en desktop, scroll nativo en el fallback), el track es una fila a lo ancho que haga falta. flex-end = la línea base común que pidió el brief. */ .croma-viewport { overflow: hidden; } .croma-track { display: flex; align-items: flex-end; gap: 2.2rem; width: max-content; will-change: transform; } .croma-track .color-card { flex: none; } .color-card { position: relative; cursor: pointer; } .color-card-frame { position: relative; overflow: hidden; background: var(--bg2); /* Altura por card (--h inline en el HTML), acotada para viewports extremos; el ancho sale solo del aspect-ratio: dimensiones deterministas, no dependen de que la foto haya cargado. */ height: clamp(180px, var(--h, 40vh), 430px); aspect-ratio: 3/4; } .color-card img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(.96) contrast(1.04); transition: transform 0.7s cubic-bezier(.3,.6,.2,1); } /* Remate del carril: cierra el recorrido con el CTA (el del head sigue siempre visible y accesible, este es el eco al final del viaje). */ .croma-final { flex: none; align-self: center; max-width: 240px; padding: 0 2.5rem 0 1rem; } .croma-final p { font-size: 0.88rem; color: var(--ink-soft); font-weight: 400; line-height: 1.6; margin-bottom: 1.3rem; } /* Fallback sin pin: mobile (el scroll-jacking es frágil en touch) y cualquier persona con prefers-reduced-motion. Cinta nativa con snap suave; el espectro se sigue actualizando desde el scroll del carril. */ @media (max-width: 860px), (prefers-reduced-motion: reduce) { .croma-viewport { overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .croma-viewport::-webkit-scrollbar { display: none; } .croma-track .color-card { scroll-snap-align: center; } } .color-card:hover img, .color-card:focus-visible img { transform: scale(1.06); } /* Al hover, una barra del color REAL de la prenda sube desde el borde inferior con el CTA — cada card responde en su propio tono (--c). */ .color-card-veil { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; align-items: center; justify-content: center; padding: 0.85rem 0.6rem; background: var(--c); color: #fff; font-size: 0.6rem; letter-spacing: 0.3em; text-transform: uppercase; transform: translateY(101%); transition: transform 0.5s cubic-bezier(.7,0,.3,1); } .color-card:hover .color-card-veil, .color-card:focus-visible .color-card-veil { transform: translateY(0); } .color-card figcaption { margin-top: 0.9rem; font-size: 0.62rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--ink); } .color-card figcaption::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--c, var(--champagne)); box-shadow: 0 0 0 1px var(--silver); margin-right: 0.6rem; vertical-align: 0; } /* Las reglas de colocación en grid viven solo en desktop: si quedan sueltas pisan (por especificidad) el layout apilado de mobile. */ @media (min-width: 861px) { .capsula--02 .capsula-copy { grid-column: 1 / 5; grid-row: 1; } .capsula--02 .c02-stage { grid-column: 5 / 13; grid-row: 1; } } @media (max-width: 860px) { .capsula { display: flex; flex-direction: column; gap: 0; align-items: stretch; margin-bottom: 7rem; padding: 0 4vw; } /* El marco fino de la Fase 2 se mantiene en mobile, con menos margen e inset (pantalla angosta) que en desktop. */ .capsula-copy { padding-top: 2.4rem; } .capsula--02 { padding: 5.5rem 4vw 6.5rem; margin: 0 3vw 5rem; border: 1px solid var(--champagne-line); border-radius: 2px; } .capsula--02 .capsula-copy { order: 2; padding-top: 5.4rem; } .capsula--02 .c02-stage { order: 1; } /* En mobile la galería vuelve a dos fotos: principal + flotante. Tres fotos superpuestas en 390px serían ruido. */ .c02-tall { display: none; } .c02-main { width: 88%; } .c02-float { left: 0; width: 48%; bottom: -2.4rem; } .capsula--03 { margin: 0 3vw 5rem; padding: 3rem 5vw 3rem; border: 1px solid var(--champagne-line); border-radius: 2px; } .c03-head { flex-direction: column; align-items: flex-start; gap: 1.6rem; } /* Mismo criterio que desktop: 2×2, no 1 sola columna — con 4 fotos en una sola columna la cápsula se volvía kilométrica en mobile. Cada celda conserva el 3:4 real de las fotos (ver nota arriba). */ .c03-mosaico { max-width: none; gap: 0.7rem; } .capsula-color-wrap { margin: 0 3vw 4rem; } .capsula--color { padding: 4.5rem 4vw 3.5rem; border: 1px solid var(--champagne-line); border-radius: 2px; } .capsula-spectrum { margin-bottom: 2rem; } .croma-track { gap: 1.2rem; } .croma-final { padding: 0 1.5rem 0 0.5rem; } .comprar { margin: 3.5rem 3vw 4rem; padding: 4rem 6vw 4.5rem; } } .capsula-title { font-size: clamp(1.45rem, 3vw, 2.3rem); font-weight: 400; letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 1.2rem; max-width: 16ch; } .capsula-desc { color: var(--ink-soft); font-weight: 400; line-height: 1.6; font-size: 0.92rem; max-width: 40ch; margin-bottom: 2rem; } /* CTA de línea: caps + subrayado que se redibuja al hover */ .btn-linea { display: inline-flex; flex-direction: column; gap: 0.5rem; font-size: 0.68rem; letter-spacing: 0.28em; text-transform: uppercase; font-weight: 500; color: var(--ink); position: relative; padding-bottom: 0.1rem; transition: color 0.3s ease; } .btn-linea::after { content: ''; display: block; height: 1px; width: 100%; background: var(--ink); transform-origin: right; transition: transform 0.45s cubic-bezier(.7,0,.3,1), background 0.3s ease; } .btn-linea:hover { color: var(--accent); } .btn-linea:hover::after { background: var(--accent); animation: linea-redraw 0.6s cubic-bezier(.7,0,.3,1); } @keyframes linea-redraw { 0% { transform: scaleX(1); transform-origin: right; } 50% { transform: scaleX(0); transform-origin: right; } 51% { transform: scaleX(0); transform-origin: left; } 100% { transform: scaleX(1); transform-origin: left; } } /* Foto secundaria con cambio de color al hover (dos variantes reales de la misma referencia, crossfade) — generalizado a [data-swap] para que sirva igual en el thumb de 01 y en la foto flotante de 02. */ [data-swap] .swap-b { position: absolute; inset: 0; opacity: 0; transition: opacity 0.55s ease; } [data-swap]:hover .swap-b, [data-swap].is-swapped .swap-b { opacity: 1; } /* ------------------------------------------------------------------ */ /* COLECCIÓN — catálogo dinámico (motor intacto, vestido nuevo) */ /* ------------------------------------------------------------------ */ .coleccion { background: var(--bg); padding: 7rem 4vw; border-top: 1px solid var(--line); } .coleccion-head { margin-bottom: 3rem; } .coleccion-title { font-size: clamp(1.45rem, 3vw, 2.3rem); font-weight: 400; letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 1rem; } .coleccion-nota { color: var(--ink-m); font-size: 0.9rem; max-width: 52ch; } .filtros { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; margin-bottom: 3.2rem; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 1.1rem 0; } .dropdown { position: relative; } .dropdown-btn { font-size: 0.68rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink); display: flex; align-items: center; gap: 0.55rem; padding: 0.4rem 0; transition: color 0.2s; } .dropdown-btn span { color: var(--accent); font-weight: 500; } .dropdown-btn i { font-style: normal; font-size: 0.6rem; color: var(--ink-m); transition: transform 0.25s ease; } .dropdown.is-open .dropdown-btn i { transform: rotate(180deg); } .dropdown-btn:hover { color: var(--accent); } .dropdown-panel { position: absolute; top: calc(100% + 0.7rem); left: 0; background: var(--bg); border: 1px solid var(--line); min-width: 170px; z-index: 50; display: none; flex-direction: column; box-shadow: 0 16px 32px rgba(22,19,15,.14); } .dropdown.is-open .dropdown-panel { display: flex; } .dropdown-panel button { text-align: left; padding: 0.65rem 1rem; font-size: 0.74rem; letter-spacing: 0.06em; color: var(--ink-m); transition: background 0.15s, color 0.15s; } .dropdown-panel button:hover { background: var(--bg2); color: var(--ink); } .dropdown-panel button.is-active { color: var(--accent); } .filtros-count { font-size: 0.68rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-m); margin-left: auto; } .filtros-reset { font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-m); text-decoration: underline; text-underline-offset: 4px; transition: color 0.15s; } .filtros-reset:hover { color: var(--accent); } .dropdown-panel[data-panel="color"] { max-height: 280px; overflow-y: auto; } .dropdown-panel[data-panel="color"] button { display: flex; align-items: center; gap: 0.6rem; } .color-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; border: 1px solid rgba(22,19,15,.15); } .catalogo-vacio { color: var(--ink-m); font-size: 0.95rem; padding: 2rem 0; } /* Cuando una página de categoría (bodysuits/faldas/chaquetas) se queda sin piezas "Normal" porque todo el lote actual quedó en Outlet: en vez del mensaje de error genérico, un bloque editorial que redirige a vender, con el % de descuento real como protagonista (nunca inventado: se calcula en JS a partir del inventario real, ver renderCatalogo()). */ .catalogo-redirect { max-width: 36rem; margin: 3rem auto; padding: 3.6rem 2.8rem; text-align: center; border: 1px solid var(--champagne-line); border-radius: 2px; background: var(--bg2); position: relative; } .catalogo-redirect::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 3rem; height: 2px; background: var(--cardinal); } .catalogo-redirect-eyebrow { font-size: 0.72rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--champagne); margin-bottom: 1.2rem; font-weight: 500; } .catalogo-redirect-pct { font-family: var(--font-display); font-weight: 500; font-style: normal; font-size: clamp(3.2rem, 9vw, 4.6rem); line-height: 1; color: var(--cardinal); margin-bottom: 0.6rem; letter-spacing: -0.01em; } .catalogo-redirect-pct span { font-size: 0.34em; letter-spacing: 0.1em; vertical-align: middle; } .catalogo-redirect h3 { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: 1.6rem; line-height: 1.3; color: var(--ink); margin-bottom: 0.7rem; } .catalogo-redirect-sub { font-size: 0.95rem; color: var(--ink-soft); margin-bottom: 2rem; } .catalogo-redirect .btn-add { display: inline-flex; width: auto; padding: 1.05rem 2.6rem; background: var(--accent); color: var(--paper); border-color: var(--accent); font-size: 0.68rem; } .catalogo-redirect .btn-add:hover { background: var(--accent-deep); border-color: var(--accent-deep); } .grupo-categoria { margin-bottom: 4.5rem; } .grupo-categoria:last-child { margin-bottom: 0; } .grupo-categoria-titulo { display: flex; align-items: baseline; gap: 1.2rem; margin-bottom: 2rem; } .grupo-categoria-titulo h3 { font-size: 0.95rem; font-weight: 500; letter-spacing: 0.26em; text-transform: uppercase; } .grupo-categoria-titulo span { font-size: 0.7rem; letter-spacing: 0.1em; color: var(--ink-m); } .grid-productos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 3rem 1.4rem; } @media (min-width: 700px) { .grid-productos { grid-template-columns: repeat(3, 1fr); gap: 3.4rem 2rem; } } @media (min-width: 1100px) { .grid-productos { grid-template-columns: repeat(4, 1fr); } } .ver-mas-wrap { display: flex; justify-content: center; margin-top: 3rem; } .btn-ver-mas { font-size: 0.66rem; letter-spacing: 0.26em; text-transform: uppercase; font-weight: 500; color: var(--ink); border: 1px solid var(--ink); padding: 0.95rem 2.6rem; transition: background 0.25s, color 0.25s, border-color 0.25s; } .btn-ver-mas:hover { background: var(--ink); color: var(--paper); } /* Card de producto: foto limpia, nombre sans en caps, swatches de la misma referencia visibles desde la card (patrón Bless), talla y un CTA silencioso. */ .producto-card { position: relative; } .producto-img { position: relative; overflow: hidden; aspect-ratio: 3/4; margin-bottom: 1rem; background: var(--bg2); cursor: pointer; } .producto-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s cubic-bezier(.3,.6,.2,1); filter: saturate(.85) contrast(1.06) brightness(.98) sepia(.05); } .producto-card:hover .producto-img img { transform: scale(1.05); } .badge-descuento { position: absolute; top: 0; left: 0; background: var(--cardinal); color: var(--paper); font-size: 0.6rem; font-weight: 600; letter-spacing: 0.12em; padding: 0.35rem 0.7rem; z-index: 2; } .btn-quickadd { position: absolute; top: 3.3rem; right: 0.6rem; z-index: 2; width: 34px; height: 34px; border-radius: 50%; background: rgba(22,19,15,.55); border: 1px solid var(--line-dark); color: var(--paper); display: flex; align-items: center; justify-content: center; opacity: 0; transform: translateY(-4px); transition: opacity 0.2s, transform 0.2s, background 0.2s; } @media (hover: hover) { .producto-card:hover .btn-quickadd { opacity: 1; transform: none; } } @media (hover: none) { .btn-quickadd { opacity: 1; transform: none; } } .btn-quickadd:hover { background: var(--accent); } .btn-quickadd.is-added { background: var(--accent); } .btn-favorito { position: absolute; top: 0.6rem; right: 0.6rem; z-index: 3; width: 34px; height: 34px; border-radius: 50%; background: rgba(22,19,15,.55); border: 1px solid var(--line-dark); color: var(--paper); display: flex; align-items: center; justify-content: center; transition: background 0.2s, transform 0.15s, color 0.2s; } .btn-favorito:hover { transform: scale(1.08); } .btn-favorito.is-favorito { color: var(--champagne); background: rgba(22,19,15,.7); } .btn-favorito.is-favorito svg { fill: currentColor; } .btn-favorito.is-added { transform: scale(1.2); } .producto-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.2rem 0.8rem; flex-wrap: wrap; margin-bottom: 0.15rem; } /* En pantallas angostas (2 columnas) el precio con rebaja no cabe al lado del nombre: baja a su propia línea, alineado a la izquierda. */ @media (max-width: 700px) { .producto-head { display: block; } .producto-info .precio { text-align: left; margin-top: 0.2rem; } } .producto-info h3 { font-size: 0.72rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; } .producto-color { font-size: 0.7rem; color: var(--ink-m); margin-bottom: 0.6rem; } .producto-swatches { display: flex; align-items: center; gap: 0.45rem; margin-bottom: 0.7rem; min-height: 14px; } .card-swatch { width: 13px; height: 13px; border-radius: 50%; flex: none; background: var(--sw, #ccc); border: 2px solid var(--bg); box-shadow: 0 0 0 1px var(--silver); transition: box-shadow 0.2s, transform 0.15s; } .card-swatch:hover { transform: scale(1.18); } .card-swatch.is-active { box-shadow: 0 0 0 1px var(--champagne), 0 0 0 2px var(--champagne); } .card-swatch-mas { font-size: 0.62rem; color: var(--ink-m); letter-spacing: 0.06em; } .producto-tallas { display: flex; gap: 0.4rem; margin-bottom: 0.8rem; } .talla-chip { font-size: 0.66rem; letter-spacing: 0.06em; min-width: 28px; text-align: center; padding: 0.32rem 0; color: var(--ink-m); border: 1px solid var(--line); transition: background 0.2s, color 0.2s, border-color 0.2s; } .talla-chip:hover { border-color: var(--ink); color: var(--ink); } .talla-chip.is-selected { background: var(--accent); color: var(--paper); border-color: var(--accent); } .precio { font-size: 0.85rem; letter-spacing: 0.04em; } .producto-info .precio { text-align: right; flex: none; } .precio-antes { text-decoration: line-through; color: var(--ink-m); margin-right: 0.4rem; font-size: 0.85em; } .precio-ahora { color: var(--accent); font-weight: 500; } .btn-add { display: block; width: 100%; font-size: 0.62rem; letter-spacing: 0.26em; text-transform: uppercase; font-weight: 500; padding: 0.72rem 0; text-align: center; background: transparent; border: 1px solid var(--line); color: var(--ink); transition: background 0.25s, border-color 0.25s, color 0.25s; } .btn-add:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); } .btn-add.is-added { background: var(--accent); border-color: var(--accent); color: var(--paper); } /* display:block de arriba le gana al [hidden] nativo del navegador (mismo bug que ya pasó con .cart-count) — sin esto, un pd-add oculto por JS sigue viéndose al lado del botón de WhatsApp en piezas sin precio. */ .btn-add[hidden] { display: none; } /* Piezas sin precio confirmado (llegan así del Excel a veces): mismo molde de botón que .btn-add pero como link real a WhatsApp, nunca cableado al carrito. precio-proximamente en vez del monto, cursiva discreta. */ .btn-consultar { display: block; width: 100%; font-size: 0.62rem; letter-spacing: 0.26em; text-transform: uppercase; font-weight: 500; padding: 0.72rem 0; text-align: center; background: transparent; border: 1px solid var(--accent); color: var(--accent); transition: background 0.25s, color 0.25s; } .btn-consultar:hover { background: var(--accent); color: var(--paper); } .precio-proximamente { color: var(--ink-m); font-style: italic; font-size: 0.9em; } /* ------------------------------------------------------------------ */ /* 18/07/2026: la sección Capítulo (frase pineada en Didot, "No es solo ropa...") se quitó de la página completa (feedback JF: "muy cool pero no aporta nada en este momento") — con ella sus estilos (.capitulo, .capitulo-pin, .capitulo-quote, .capitulo-bg, .quote-fill). El gesto Didot grande queda libre para un uso futuro si hace falta. */ /* ------------------------------------------------------------------ */ /* 30/07/2026: sección "Con quién hemos trabajado" (.musas) quitada de index.html a pedido de María Andrea — con ella salió todo su CSS. */ /* ------------------------------------------------------------------ */ /* CÓMO COMPRAR + AGENDA UNA VISITA — Rediseño 15/07/2026 (feedback JF: negro + dorado "se ve muy IA, muy típico… juega más con el blanco o con colores muy similares que sean elegantes"). La banda vuelve a ivory con hairlines; la card de la cita se diferencia con un blush apenas más profundo que --bg2 y una sombra suave, como papelería fina — nada de gradiente carbón, glow ni borde metálico. Wine es el único acento (números, foco de inputs, CTA), como en el resto. */ /* ------------------------------------------------------------------ */ /* Fase 3 (18/07/2026): "Cómo comprar" pasa de Ivory + una card flotante con sombra a UNA sola composición sobre --stone (el mismo neutro cálido ya usado en el resto del sitio, nunca el Royal Blue que el brief de ChatGPT sugería — JF ya había rechazado el azul de fondo el 15/07, ver --navy-deep en :root). El tono más profundo hace de "capítulo", sin invocar un bloque oscuro inventado ni el cliché negro+dorado. */ /* Marco propio para "Cómo comprar" + "Agenda una visita" (JF, 20/07/2026, probado en su celular real): antes solo tenía un border-top plano, quedaba "flotando" sin bordes a los lados y abajo. Pidió un marco completo, un poco más especial que el de las cápsulas (esta es la sección de cierre/conversión, no una más del scroll) pero sin blur real: --stone es un fondo sólido, un backdrop-filter encima no revelaría nada detrás y sería costo de GPU gratis. El efecto "vidrio" se logra sin blur: un borde champagne sólido (no el --champagne-line tenue de las cápsulas), una sombra ambiental suave que separa el bloque del fondo, y un filo de luz superior (inset) que imita el brillo de un canto de vidrio. */ .comprar { background: var(--stone); position: relative; overflow: hidden; margin: 5rem 3vw 6rem; padding: 6rem 5vw 6.5rem; border: 1px solid var(--champagne); border-radius: 3px; box-shadow: 0 50px 90px -40px rgba(22,19,15,.24), inset 0 1px 0 rgba(255,255,255,.4); } .comprar-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr; gap: 4rem; } @media (min-width: 900px) { .comprar-grid { grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; } /* Línea fina entre columnas: la separación de "una sola composición" la da un hairline interno, no dos módulos con su propio marco. */ .comprar-col--cita { border-left: 1px solid var(--champagne-line); padding-left: 5rem; } } .comprar-title { color: var(--ink); font-size: clamp(1.3rem, 2.6vw, 2rem); font-weight: 400; letter-spacing: 0.18em; text-transform: uppercase; max-width: 22ch; } .pasos { display: flex; flex-direction: column; gap: 2.4rem; margin-top: 2.8rem; position: relative; } .pasos-line { position: absolute; left: 15px; top: 8px; bottom: 8px; width: 1px; background: rgba(22,19,15,.16); transform: scaleY(0); transform-origin: top; } .paso { position: relative; padding-left: 3.4rem; } .paso-num { position: absolute; left: 0; top: -3px; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.68rem; letter-spacing: 0.08em; /* Numerales en champagne (brief): el wine se queda para precios/CTA. */ background: var(--stone); border: 1px solid var(--champagne); color: var(--champagne); } .paso h3 { font-size: 0.82rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 0.5rem; color: var(--ink); } .paso p { font-size: 0.9rem; color: var(--ink-soft); font-weight: 400; line-height: 1.6; } /* Fase 3 (18/07/2026): ya no es una card flotante con sombra sobre la sección — ahora la sección ENTERA es --stone, así que el formulario vive directo en ese mismo fondo. Sin card, sin marco desplazado, sin sombra: la separación de "Cómo comprar" la da el hairline de columna (ver .comprar-col--cita arriba), no un recuadro aparte. */ .comprar-col--cita { position: relative; } .cita-card { position: relative; } .cita-title { font-size: clamp(1.1rem, 2.2vw, 1.5rem); font-weight: 400; letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 0.7rem; color: var(--ink); } .cita-sub { color: var(--ink-soft); font-size: 0.9rem; font-weight: 400; line-height: 1.6; margin-bottom: 2.2rem; max-width: 38ch; } .cita-form { display: grid; grid-template-columns: 1fr; gap: 1.3rem; } .cita-field--full { grid-column: 1 / -1; } .cita-field label { display: block; font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-m); margin-bottom: 0.5rem; } .cita-field input, .cita-field textarea { width: 100%; font-family: var(--font-body); font-size: 0.92rem; color: var(--ink); background: none; border: none; border-bottom: 1px solid rgba(22,19,15,.28); padding: 0.5rem 0.1rem; transition: border-color 0.2s; } .cita-field textarea { resize: vertical; min-height: 3.4rem; } .cita-field input:focus, .cita-field textarea:focus { outline: none; border-color: var(--accent); } .cita-field input::placeholder, .cita-field textarea::placeholder { color: rgba(22,19,15,.38); } .cita-submit { grid-column: 1 / -1; justify-self: start; margin-top: 0.6rem; background: var(--accent); color: var(--paper); border: none; padding: 0.95rem 2.4rem; font-size: 0.68rem; letter-spacing: 0.24em; text-transform: uppercase; font-weight: 500; cursor: pointer; transition: background 0.25s, color 0.25s, transform 0.15s; } .cita-submit:hover { background: var(--accent-deep); transform: translateY(-2px); } /* ------------------------------------------------------------------ */ /* INSTAGRAM — galería infinita decorativa (aprobada, intacta) */ /* ------------------------------------------------------------------ */ .instagram { background: var(--bg2); text-align: center; padding: 6.5rem 4vw; } .ig-content { position: relative; z-index: 2; } .ig-title { font-size: clamp(1.2rem, 2.6vw, 1.9rem); font-weight: 400; letter-spacing: 0.2em; text-transform: uppercase; margin: 0 auto 0.8rem; } .instagram-sub { color: var(--ink-m); margin-bottom: 2rem; font-size: 0.86rem; } .ig-strip-wrap { position: relative; margin: 3.4rem -4vw 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent 0, black 6vw, black calc(100% - 6vw), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, black 6vw, black calc(100% - 6vw), transparent 100%); } .ig-strip { display: flex; gap: 1.1rem; width: max-content; padding: 0 6vw; } .ig-frame { flex: none; width: 200px; aspect-ratio: 3/4; overflow: hidden; box-shadow: 0 14px 30px rgba(22,19,15,.16); } .ig-frame img { width: 100%; height: 100%; object-fit: cover; filter: saturate(1.02) contrast(1.03); pointer-events: none; -webkit-user-drag: none; user-select: none; } /* ------------------------------------------------------------------ */ /* FOOTER */ /* ------------------------------------------------------------------ */ .site-footer { background: var(--bg); color: var(--ink); text-align: center; padding: 5rem 6vw 2.6rem; border-top: 1px solid var(--line); } .wordmark--footer { position: static; transform: none; display: block; font-size: clamp(1.6rem, 4.5vw, 2.6rem); letter-spacing: 0.4em; margin-right: 0; margin-bottom: 0.9rem; } .footer-tagline { font-size: 0.6rem; letter-spacing: 0.32em; text-transform: uppercase; color: var(--champagne); font-weight: 500; margin-bottom: 2.6rem; } .footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.8rem; font-size: 0.78rem; letter-spacing: 0.06em; margin-bottom: 1.2rem; color: var(--ink-m); } .footer-links a:hover { color: var(--accent); } .footer-envios { font-size: 0.72rem; letter-spacing: 0.1em; color: var(--ink-m); margin-bottom: 1.6rem; } .footer-copy { font-size: 0.66rem; letter-spacing: 0.1em; color: rgba(22,19,15,.4); } /* ---------------------------------------------------------------- */ /* CARRITO + FAVORITOS — drawers ivory, cabecera sans */ /* ---------------------------------------------------------------- */ .cart-backdrop { position: fixed; inset: 0; background: rgba(22,19,15,.45); z-index: 800; opacity: 0; pointer-events: none; transition: opacity 0.3s; } .cart-backdrop.is-open { opacity: 1; pointer-events: auto; } .cart-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 100vw); background: var(--bg); color: var(--ink); border-left: 1px solid var(--line); z-index: 900; display: flex; flex-direction: column; transform: translateX(100%); transition: transform 0.4s cubic-bezier(.16,1,.3,1); } .cart-drawer.is-open { transform: translateX(0); } .cart-head { display: flex; align-items: center; justify-content: space-between; padding: 1.8rem 1.8rem 1.2rem; border-bottom: 1px solid var(--line); } .cart-head h2 { font-size: 0.78rem; font-weight: 500; letter-spacing: 0.26em; text-transform: uppercase; } .cart-close { font-size: 1.6rem; color: var(--ink-m); line-height: 1; padding: 0.2rem 0.5rem; } .cart-close:hover { color: var(--ink); } /* Scroll propio de los drawers (menú/carrito/favoritos), sin fuga al fondo (29/07/2026, feedback JF): sin overscroll-behavior, al llegar al final del scroll del drawer el gesto seguía y de paso movía la página de atrás — mismo tipo de bug que ya documentamos con los paneles de filtro y Lenis (data-lenis-prevent en el HTML lo resuelve del lado de Lenis; contain acá lo resuelve también para el scroll nativo del navegador, cinturón y tirantes). La barra nativa (gruesa, gris, gritona) se reemplaza por un hilo fino en el mismo champagne del resto del sistema — visible solo mientras se hace scroll de verdad, no un elemento decorativo aparte. */ .menu-links, .cart-items { overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--champagne-line) transparent; } .menu-links::-webkit-scrollbar, .cart-items::-webkit-scrollbar { width: 5px; } .menu-links::-webkit-scrollbar-track, .cart-items::-webkit-scrollbar-track { background: transparent; } .menu-links::-webkit-scrollbar-thumb, .cart-items::-webkit-scrollbar-thumb { background: var(--champagne-line); border-radius: 3px; } .menu-links::-webkit-scrollbar-thumb:hover, .cart-items::-webkit-scrollbar-thumb:hover { background: var(--champagne); } .cart-items { flex: 1; overflow-y: auto; padding: 1rem 1.8rem; } .cart-empty { text-align: center; color: var(--ink-m); font-size: 0.88rem; padding: 2rem 1.8rem; } .cart-item { display: flex; gap: 0.9rem; padding: 1.1rem 0; border-bottom: 1px solid var(--line); } .cart-item-img { width: 64px; height: 84px; overflow: hidden; flex-shrink: 0; background: var(--bg2); } .cart-item-img img { width: 100%; height: 100%; object-fit: cover; } .cart-item-info { flex: 1; min-width: 0; } .cart-item-info h4 { font-size: 0.7rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 0.25rem; } .cart-item-meta { font-size: 0.74rem; color: var(--ink-m); margin-bottom: 0.5rem; } .cart-item-row { display: flex; align-items: center; justify-content: space-between; } .qty-control { display: flex; align-items: center; gap: 0.6rem; border: 1px solid var(--line); padding: 0.2rem 0.6rem; } .qty-control button { color: var(--ink-m); font-size: 0.9rem; } .qty-control button:hover { color: var(--accent); } .qty-control span { font-size: 0.82rem; min-width: 1rem; text-align: center; } .cart-item-precio { font-size: 0.85rem; color: var(--accent); font-weight: 500; } .cart-item-remove { font-size: 0.68rem; letter-spacing: 0.08em; color: var(--ink-m); text-decoration: underline; text-underline-offset: 3px; margin-top: 0.4rem; display: inline-block; cursor: pointer; } .cart-item-remove:hover { color: var(--accent); } .cart-footer { padding: 1.4rem 1.8rem 1.8rem; border-top: 1px solid var(--line); } .cart-subtotal { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.9rem; font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; } .cart-subtotal strong { font-size: 1.05rem; letter-spacing: 0.06em; color: var(--accent); font-weight: 600; } .cart-nota { font-size: 0.72rem; color: var(--ink-m); line-height: 1.5; margin-bottom: 1.1rem; } .btn-cart-checkout { display: block; width: 100%; background: var(--accent); color: var(--paper); padding: 1rem; font-size: 0.68rem; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 500; transition: background 0.2s; } .btn-cart-checkout:hover { background: var(--accent-deep); } .btn-cart-checkout:disabled { opacity: .45; cursor: default; } /* Pago en línea con Wompi (04/08/2026): botón primario relleno, WhatsApp pasa a secundario (outline) — sin quitarle función, solo jerarquía visual, ya que el pago en línea reduce fricción real cuando esté activo. #wompi-nota reemplaza el mensaje de "sistema en prueba". */ .btn-cart-checkout--wompi { margin-bottom: 0.7rem; } .btn-cart-checkout--whatsapp { background: transparent; color: var(--ink); border: 1px solid var(--line); } .btn-cart-checkout--whatsapp:hover { background: var(--ink); color: var(--paper); } /* Modal del checkout de Wompi: overlay centrado, nunca redirección de página completa (estándar del negocio). El contenido real (botón/ iframe de Wompi) lo inyecta widget.js dentro de #wompi-widget-mount; este bloque solo da el marco visual. */ .wompi-backdrop { position: fixed; inset: 0; z-index: 1000; background: rgba(22,19,15,.55); display: flex; align-items: center; justify-content: center; padding: 1.5rem; } /* display:flex de arriba le gana en especificidad al [hidden] nativo del navegador — mismo bug ya documentado con .cart-count y .btn-add en este mismo proyecto. Sin esto, el modal (vacío) se ve desde que carga la página, antes de tocar "Pagar en línea". */ .wompi-backdrop[hidden] { display: none; } .wompi-modal { position: relative; background: var(--bg); max-width: 26rem; width: 100%; padding: 2.6rem 1.8rem 1.8rem; border-radius: 2px; text-align: center; max-height: 85vh; overflow-y: auto; } .wompi-modal .cart-close { position: absolute; top: 0.6rem; right: 0.9rem; } .wompi-modal-msg { font-size: 0.85rem; color: var(--ink-soft); line-height: 1.6; } .wompi-modal-msg strong { display: block; margin-bottom: 0.5rem; color: var(--ink); } .fav-item { display: flex; gap: 0.9rem; padding: 1.1rem 0; border-bottom: 1px solid var(--line); } .fav-item-img { width: 64px; height: 84px; overflow: hidden; flex-shrink: 0; background: var(--bg2); } .fav-item-img img { width: 100%; height: 100%; object-fit: cover; } .fav-item-info { flex: 1; min-width: 0; } .fav-item-info h4 { font-size: 0.7rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 0.3rem; } .fav-item-precio { font-size: 0.85rem; color: var(--accent); font-weight: 500; margin-bottom: 0.6rem; } .fav-item-actions { display: flex; align-items: center; gap: 1rem; } .fav-item-add { font-size: 0.64rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); border: 1px solid var(--line); padding: 0.45rem 0.8rem; transition: background 0.2s, border-color 0.2s, color 0.2s; } .fav-item-add:hover { background: var(--accent); border-color: var(--accent); color: var(--paper); } .fav-item-remove { font-size: 0.68rem; letter-spacing: 0.08em; color: var(--ink-m); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } .fav-item-remove:hover { color: var(--accent); } /* ------------------------------------------------------------------ */ /* MENÚ — la navegación principal del sitio en cualquier pantalla. Drawer desde la izquierda (convención: navegación a la izquierda, tus cosas a la derecha), links grandes en caps. */ /* ------------------------------------------------------------------ */ .menu-drawer { position: fixed; top: 0; left: 0; bottom: 0; width: min(460px, 100vw); background: var(--bg); color: var(--ink); border-right: 1px solid var(--line); z-index: 900; display: flex; flex-direction: column; transform: translateX(-100%); transition: transform 0.45s cubic-bezier(.16,1,.3,1); } .menu-drawer.is-open { transform: translateX(0); } .wordmark--menu { position: static; transform: none; font-size: 0.95rem; } .menu-links { flex: 1; overflow-y: auto; padding: 2rem 2.2rem; display: flex; flex-direction: column; } .menu-links-label { font-size: 0.6rem; letter-spacing: 0.32em; text-transform: uppercase; color: var(--champagne); font-weight: 500; margin: 2.2rem 0 0.9rem; } .menu-links-label:first-child { margin-top: 0; } .menu-links a { font-size: 1.28rem; font-weight: 300; letter-spacing: 0.16em; text-transform: uppercase; padding: 0.8rem 0; border-bottom: 1px solid var(--line); transition: color 0.25s ease, padding-left 0.3s ease; } .menu-links a:hover { color: var(--accent); padding-left: 0.7rem; } .menu-foot { padding: 1.4rem 2.2rem 2rem; border-top: 1px solid var(--line); } .menu-foot a { font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-m); transition: color 0.2s; } .menu-foot a:hover { color: var(--accent); } /* ------------------------------------------------------------------ */ /* SELECTOR DE COLOR + CORAZÓN GRANDE — nacieron en el Quick View modal (hoy eliminado); los usa producto.html con la misma lógica de swatches por referencia. */ /* ------------------------------------------------------------------ */ .qv-colores { margin-bottom: 1.5rem; } .qv-colores-label { display: block; font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-m); margin-bottom: 0.7rem; } .qv-colores-label strong { color: var(--ink); font-weight: 500; } .qv-swatches { display: flex; flex-wrap: wrap; gap: 0.6rem; } .qv-swatch { width: 28px; height: 28px; border-radius: 50%; flex: none; border: 2px solid var(--bg); box-shadow: 0 0 0 1px var(--silver); transition: box-shadow 0.2s, transform 0.15s; } .qv-swatch:hover { transform: scale(1.1); } .qv-swatch.is-active { box-shadow: 0 0 0 2px var(--champagne); } .qv-fav { position: static; width: 46px; height: 46px; background: none; border: 1px solid var(--line); color: var(--ink); flex: none; } .qv-fav:hover { border-color: var(--accent); color: var(--accent); } .qv-fav.is-favorito { color: var(--accent); border-color: var(--accent); background: none; } .qv-fav.is-favorito svg { fill: currentColor; } /* ------------------------------------------------------------------ */ /* BOTÓN VOLVER — discreto, arriba a la izquierda, compartido por producto.html/bodysuits.html/faldas.html (19/07/2026). Prefiere history.back() real (JS en main.js); el href es solo el respaldo cuando no hay historial del sitio (link compartido, pestaña nueva). */ /* ------------------------------------------------------------------ */ .btn-volver { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-m); margin-bottom: 1.6rem; transition: color 0.2s; } .btn-volver span { transition: transform 0.2s ease; display: inline-block; } .btn-volver:hover { color: var(--accent); } .btn-volver:hover span { transform: translateX(-3px); } /* ------------------------------------------------------------------ */ /* MIGA DE PAN — ruta compartida por las páginas de categoría y producto */ /* ------------------------------------------------------------------ */ .miga { display: flex; align-items: baseline; gap: 0.7rem; font-size: 0.62rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-m); } .miga a { transition: color 0.2s; } .miga a:hover { color: var(--accent); } .miga span { opacity: .5; } .miga strong { color: var(--ink); font-weight: 500; } /* ------------------------------------------------------------------ */ /* PÁGINA DE CATEGORÍA (bodysuits.html / faldas.html) — mini-hero tipográfico silencioso + el mismo motor de catálogo de siempre, ya fijado en una sola categoría (por eso se oculta el título de grupo, sería redundante con el H1 de la página). */ /* ------------------------------------------------------------------ */ .cat-hero { background: var(--bg); padding: 9.5rem 4vw 0.5rem; } .cat-hero .miga { margin-bottom: 2.6rem; } .cat-title { font-size: clamp(2.2rem, 6vw, 4.4rem); font-weight: 400; letter-spacing: 0.22em; text-transform: uppercase; margin-bottom: 1.1rem; } .cat-sub { color: var(--ink-m); font-size: 0.92rem; max-width: 52ch; margin-bottom: 1.9rem; } .coleccion--pagina { border-top: none; padding-top: 2.6rem; } .coleccion--pagina .grupo-categoria-titulo { display: none; } /* Outlet / Última unidad (coleccion--mixta): a diferencia de las páginas de una sola categoría de arriba, aquí SÍ mezclan varias (Faldas, Chaquetas, Bodysuits...) y el título de cada grupo es la única forma de distinguirlas — nunca ocultarlo acá. */ .coleccion--mixta { border-top: none; padding-top: 0.5rem; } /* Pestañas de categoría dentro de Outlet/Última unidad — 100% dinámicas (se arman en JS leyendo qué categorías tienen stock real ahí, nunca hardcodeadas), para saltar directo a una división sin bajar por todo el listado. "Todas" reutiliza el mismo agrupamiento por categoría que ya existe en renderCatalogo(). */ .tipo-tabs { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.4rem; } .tipo-tab { font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-m); padding: 0.55rem 1.15rem; border: 1px solid var(--line); border-radius: 999px; display: inline-flex; align-items: center; gap: 0.45rem; transition: color 0.2s, border-color 0.2s, background 0.2s; } .tipo-tab:hover { color: var(--ink); border-color: var(--champagne-line); } .tipo-tab.is-active { color: var(--paper); background: var(--accent); border-color: var(--accent); } .tipo-tab-count { opacity: 0.7; font-size: 0.62rem; } /* ------------------------------------------------------------------ */ /* PÁGINA DE PRODUCTO (producto.html) — el detalle que antes vivía en el Quick View, ahora a pantalla completa con URL propia. Foto sticky en desktop para que acompañe mientras se baja hacia "Combina con". */ /* ------------------------------------------------------------------ */ .pd { background: var(--bg); padding: 8.5rem 4vw 6.5rem; min-height: 80vh; } .pd .miga { margin-bottom: 2.4rem; } .pd-layout { display: grid; grid-template-columns: 1fr; gap: 2.6rem; } @media (min-width: 800px) { .pd-layout { grid-template-columns: 1.05fr 1fr; gap: 4.5rem; align-items: start; } } @media (min-width: 800px) { .pd-photo-col { position: sticky; top: 96px; } } .pd-photo { position: relative; overflow: hidden; aspect-ratio: 3/4; background: var(--bg2); } .pd-photo img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.85) contrast(1.06) brightness(.98) sepia(.05); } .pd-photo .badge-descuento { top: 0; left: 0; } /* Galería de fotos por color (29/07/2026): tira de miniaturas debajo de la foto principal, oculta por completo si esa referencia+color solo tiene una foto (fotosDeColor() en main.js decide, ver producto.js). */ .pd-thumbs { display: flex; gap: 0.6rem; margin-top: 0.8rem; overflow-x: auto; padding-bottom: 0.2rem; } .pd-thumb { flex: none; width: 64px; aspect-ratio: 3/4; overflow: hidden; border-radius: 2px; border: 1px solid transparent; padding: 0; cursor: pointer; opacity: .6; transition: opacity .2s, border-color .2s; } .pd-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .pd-thumb:hover { opacity: .85; } .pd-thumb.is-active { opacity: 1; border-color: var(--champagne); } .pd-info .eyebrow { margin-bottom: 0.8rem; } .pd-nombre { font-size: clamp(1.15rem, 2.6vw, 1.7rem); font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; margin-bottom: 1rem; } .pd-desc { color: var(--ink-m); font-size: 0.92rem; line-height: 1.65; max-width: 48ch; margin-bottom: 1.2rem; } .pd-precio { font-size: 1.1rem; margin-bottom: 1.8rem; } .pd-tallas-bloque { margin-bottom: 2rem; } .pd-tallas-bloque .producto-tallas { margin-bottom: 0; } .pd-actions { display: flex; align-items: center; gap: 0.9rem; margin-bottom: 1.4rem; } .pd-actions .btn-add { flex: 1; border-color: var(--ink); padding: 0.95rem 0; } .pd-actions .btn-consultar { flex: 1; padding: 0.95rem 0; } .pd-envios { font-size: 0.72rem; letter-spacing: 0.08em; color: var(--ink-m); } /* Notas de estilista (corte + ocasión): discretas a propósito, ocupan el espacio vacío bajo el CTA sin competir con él. Dos líneas cortas, sin ícono ni marco, solo un hairline arriba para separarlas del bloque de compra. */ .pd-estilo { margin-top: 2.4rem; padding-top: 1.9rem; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 1.5rem; max-width: 46ch; } .pd-estilo-item .eyebrow { margin-bottom: 0.5rem; font-size: 0.62rem; } .pd-estilo-texto { color: var(--ink-m); font-size: 0.86rem; line-height: 1.7; } .pd-notfound { padding: 12rem 4vw 8rem; text-align: center; color: var(--ink-m); font-size: 0.95rem; } .pd-notfound a { color: var(--accent); text-decoration: underline; text-underline-offset: 4px; } .pd-notfound a:hover { color: var(--accent-deep); } /* Combina con — nunca más de 6 cards (fatiga de decisión) */ .combina { margin-top: 5.5rem; padding-top: 4rem; border-top: 1px solid var(--line); } .combina .eyebrow { margin-bottom: 0.8rem; } .combina-title { font-size: clamp(1.2rem, 2.6vw, 1.9rem); font-weight: 400; letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 2.6rem; } /* pago-confirmado.html (04/08/2026): pantalla mínima, propia, a donde Wompi redirige después del widget. Mismo lenguaje visual del resto del sitio (Ivory, Wine, Didot en el título) pero sin header/footer completos — es una pantalla de tránsito, no una página de catálogo. */ .pago-confirmado { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3rem; padding: 3rem 5vw; background: var(--bg); text-align: center; } .pago-confirmado-card { max-width: 30rem; } .pago-confirmado-title { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(1.7rem, 4vw, 2.4rem); line-height: 1.25; color: var(--ink); margin-bottom: 1.1rem; } .pago-confirmado-sub { color: var(--ink-soft); font-size: 0.95rem; line-height: 1.7; margin-bottom: 1.4rem; } .pago-confirmado-ref { font-size: 0.72rem; letter-spacing: 0.08em; color: var(--ink-m); margin-bottom: 1.8rem; } .pago-confirmado-volver { display: block; margin-top: 1.4rem; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-m); text-decoration: underline; text-underline-offset: 4px; } .pago-confirmado-volver:hover { color: var(--ink); }