/* ============================================= TIENDA MENTA — Design System Completo ============================================= */ /* ===== FUENTES ===== font-display: block → el navegador bloquea el render del texto hasta 3s mientras carga la fuente. Como nuestras fuentes son <120KB total y están preloaded en , cargan en <100ms y NUNCA se ve flash de fallback ni Comic Sans en primera carga. Antes era "optional" → causaba que en primera carga (cache fría) el navegador abandonara la fuente real y se quedara con fallback hasta refresh. */ @font-face { font-family: 'NewIconScript'; src: url('../assets/fonts/NewIconScript-Regular.woff2') format('woff2'); font-weight: normal; font-style: normal; font-display: block; } @font-face { font-family: 'NewIconSerif'; src: url('../assets/fonts/NewIconSerif-Regular.woff2') format('woff2'); font-weight: normal; font-style: normal; font-display: block; } @font-face { font-family: 'NewIconSerifCond'; src: url('../assets/fonts/NewIconSerif-Condensed.woff2') format('woff2'); font-weight: normal; font-style: normal; font-display: block; } @font-face { font-family: 'RobotoMono'; src: url('../assets/fonts/RobotoMono-Variable.woff2') format('woff2'); font-weight: 100 900; font-display: block; } /* Hide script-font text until fonts are loaded (avoids cursive→Comic Sans flash) */ html:not(.fonts-loaded) .script, html:not(.fonts-loaded) .logo-m, html:not(.fonts-loaded) [class*="-script"], html:not(.fonts-loaded) section.fundadora-section .fundadora-quote { visibility: hidden; } /* Script font NUNCA en uppercase — se pierde legibilidad y elegancia. Init Caps + lowercase es el único uso permitido. */ .script, .logo-m, [class*="-script"], .fundadora-quote, .cta-script-line, .cta-framed-content .cta-eyebrow { text-transform: none !important; /* Mockup-fiel: el script de la clienta es fino. Forzamos weight liviano + antialiasing para que no se vea engrosado en pantalla. */ font-weight: 300 !important; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* ===== TOKENS ===== */ :root { --terracota: #974315; --granada: #5B6743; --menta: #B1BC9B; --bespoke: #F4EEDF; --equilibrio:#778A90; --raiz: #442510; --cream: #F8F3EA; --dark: #18110A; --dark2: #251810; --white: #FFFFFF; --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1); --transition-slow: 0.55s cubic-bezier(0.4, 0, 0.2, 1); /* Font stacks: cursive se cae a serif (NUNCA cursive — Win/Linux la mapean a Comic Sans) */ --font-script: 'NewIconScript', 'Snell Roundhand', 'Apple Chancery', serif; --font-serif: 'NewIconSerif', 'Cormorant Garamond', 'Garamond', 'Hoefler Text', 'Georgia', serif; --font-serif-cond: 'NewIconSerifCond', 'Bodoni MT', 'Didot', 'Hoefler Text', 'Georgia', serif; --font-mono: 'RobotoMono', 'SFMono-Regular', 'Menlo', 'Consolas', 'Courier New', monospace; } /* ===== RESET ===== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; font-size: 16px; /* scrollbar normal a la derecha — sin franja izquierda */ } body { font-family: var(--font-mono); background: var(--bespoke); color: var(--raiz); overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img { display: block; max-width: 100%; height: auto; } a { text-decoration: none; color: inherit; } ul { list-style: none; } button { border: none; background: none; cursor: pointer; font-family: inherit; } input, textarea, select { font-family: inherit; } /* ===== LOGO WORDMARK ===== */ .logo-wordmark { display: inline-flex; align-items: baseline; } .logo-m { font-family: var(--font-script); } .logo-enta { font-family: var(--font-serif); letter-spacing: 0.06em; } /* ===== ANNOUNCEMENT BAR — altura fija 32px sincronizada con navbar translateY(32) ===== */ .announcement { background: var(--menta); color: var(--raiz); font-size: 10px; letter-spacing: 0.18em; text-align: center; padding: 0 20px; height: 32px; line-height: 32px; font-weight: 500; position: relative; z-index: 250; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .announcement a { color: var(--raiz); text-decoration: underline; } /* ===== NAVBAR — dos estados de color (decisión cliente 07/05) ===== 1) INICIAL (sin scroll, transparente sobre hero): - Logo en café oscuro (raíz) - Links en raíz - Página actual: terracota (cobrizo) - Bespoke: siempre menta 2) SCROLLED (con fondo dark): - Logo en menta - Links en bespoke crema - Página actual subrayado blanco - Bespoke: siempre menta */ .navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 200; display: grid; /* 3 columnas iguales para centrar perfectamente la del medio */ grid-template-columns: 1fr 1fr 1fr; align-items: center; height: 88px; padding: 32px 52px 0; gap: 20px; background: rgba(24,17,10,0); backdrop-filter: blur(0px); transition: background-color 0.35s ease, backdrop-filter 0.35s ease, box-shadow 0.35s ease, height 0.35s ease, padding 0.35s ease; } .navbar--scrolled { height: 56px; padding: 0 52px; background: rgba(24,17,10,0.92); backdrop-filter: blur(14px) saturate(115%); -webkit-backdrop-filter: blur(14px) saturate(115%); box-shadow: 0 2px 24px rgba(0,0,0,0.18); } /* Logo placa: SIN marco. Filtros diferentes según estado. */ .navbar-logo { justify-self: start; align-self: center; display: inline-flex; align-items: center; justify-content: center; background: transparent; padding: 0; height: 44px; transition: opacity var(--transition); } .navbar-logo-img { height: 32px; width: auto; display: block; object-fit: contain; /* INICIAL: filtro café oscuro (raíz #442510) */ filter: brightness(0) saturate(100%) invert(11%) sepia(78%) saturate(1800%) hue-rotate(2deg) brightness(60%) contrast(105%); transition: filter 0.35s ease, height 0.35s ease; } .navbar-logo:hover { opacity: 0.85; } /* SCROLLED: logo en menta */ .navbar--scrolled .navbar-logo { padding: 0; height: 36px; } .navbar--scrolled .navbar-logo-img { height: 26px; filter: brightness(0) saturate(100%) invert(81%) sepia(11%) saturate(491%) hue-rotate(38deg) brightness(96%) contrast(86%); } /* NAVBAR LINKS — centrado perfecto con grid 1fr 1fr 1fr + justify-self center. El item del medio queda en el centro exacto del navbar gracias a las 3 columnas iguales. */ .navbar-links { display: flex; gap: 30px; align-items: center; justify-self: center; align-self: center; white-space: nowrap; } .navbar-links a { font-family: var(--font-mono); /* Clienta 12/05: el menú se ve muy pequeño y no contrasta sobre algunos fondos. Subido de 10px → 12px + peso 500 + más contraste con text-shadow sutil en transparente. */ font-size: 12px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; position: relative; transition: color 0.3s ease, opacity 0.3s ease; color: var(--raiz); opacity: 0.95; /* Sombra sutil para diferenciarse del hero cuando no tiene fondo */ text-shadow: 0 1px 8px rgba(244, 238, 223, 0.6); } .navbar--scrolled .navbar-links a { text-shadow: none; } /* Bespoke Souls — SIEMPRE menta (decisión cliente) */ .navbar-links a.navbar-link--highlight { color: var(--menta); opacity: 1; } .navbar-link-ornament { display: inline-block; font-size: 10px; margin: 0 4px; color: var(--menta); vertical-align: 2px; } /* Subrayado de hover/active */ .navbar-links a::after { content: ''; position: absolute; bottom: -4px; left: 0; right: 0; height: 1px; background: var(--terracota); /* INICIAL: subrayado terracota */ transform: scaleX(0); transform-origin: center; transition: transform 0.3s ease, background 0.3s ease; } .navbar-links a:hover, .navbar-links a.active { opacity: 1; color: var(--terracota); /* INICIAL: página actual en cobrizo/terracota */ } .navbar-links a:hover::after, .navbar-links a.active::after { transform: scaleX(1); } /* SCROLLED — colores claros sobre fondo dark */ .navbar--scrolled .navbar-links a { color: var(--bespoke); opacity: 0.78; } .navbar--scrolled .navbar-links a.navbar-link--highlight { color: var(--menta); opacity: 1; } .navbar--scrolled .navbar-links a::after { background: #ffffff; /* SCROLLED: subrayado blanco */ } .navbar--scrolled .navbar-links a:hover, .navbar--scrolled .navbar-links a.active { color: var(--bespoke); opacity: 1; } .navbar-actions { display: flex; gap: 20px; align-items: center; justify-self: end; align-self: center; } .navbar-actions svg { width: 19px; height: 19px; /* INICIAL: stroke raíz (café oscuro) */ stroke: var(--raiz); fill: none; stroke-width: 1.5; opacity: 0.82; cursor: pointer; transition: stroke 0.3s ease, opacity 0.3s ease; } .navbar--scrolled .navbar-actions svg { stroke: var(--bespoke); opacity: 0.78; transition: opacity var(--transition); } .navbar-actions svg:hover { opacity: 1; } .cart-wrapper { position: relative; } .cart-badge { position: absolute; top: -8px; right: -8px; background: var(--terracota); color: #fff; width: 16px; height: 16px; border-radius: 50%; font-size: 9px; display: none; align-items: center; justify-content: center; font-weight: 700; } /* ===== HERO — 3 cuadrados centrados sobre fondo floral ===== */ /* ===== HERO — banner de video rotativo (estilo Johanna Ortiz) ===== */ .hero { position: relative; height: 92vh; min-height: 620px; overflow: hidden; background: var(--dark); display: flex; align-items: flex-end; justify-content: center; padding: 0; } .hero--video .hero-videos { position: absolute; inset: 0; z-index: 0; } .hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 0; transition: opacity 1.2s ease; } .hero-video.is-active { opacity: 1; } /* Toggle desktop vs mobile sources (clienta 12/05: versión optimizada para cada device). Por defecto se ven los desktop; en ≤768px se muestran los mobile y se ocultan los desktop. El JS rotator solo gestiona los videos visibles. */ .hero-video--mobile { display: none; } @media (max-width: 768px) { .hero-video--desktop { display: none; } .hero-video--mobile { display: block; } } .hero-overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(24,17,10,0.45) 0%, rgba(24,17,10,0.18) 28%, rgba(24,17,10,0.20) 55%, rgba(24,17,10,0.70) 100%), radial-gradient(ellipse 70% 55% at center 78%, rgba(24,17,10,0.55) 0%, rgba(24,17,10,0) 75%); pointer-events: none; } .hero-content { position: relative; z-index: 2; text-align: center; color: var(--bespoke); padding: 0 24px; max-width: 920px; margin-bottom: clamp(56px, 12vh, 140px); } .hero-eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.34em; text-transform: uppercase; color: var(--bespoke); opacity: 0.9; margin-bottom: 22px; display: block; } .hero-h1 { margin: 0 0 18px; line-height: 0.92; } .hero-h1 .serif { font-family: var(--font-serif); font-size: clamp(34px, 5vw, 68px); text-transform: uppercase; letter-spacing: 0.06em; color: var(--bespoke); display: block; font-weight: 400; text-shadow: 0 2px 18px rgba(24,17,10,0.55), 0 0 1px rgba(24,17,10,0.6); } .hero-h1 .script { font-family: var(--font-script); font-size: clamp(58px, 9vw, 124px); color: var(--bespoke); display: block; margin-top: -4px; line-height: 1; text-shadow: 0 2px 28px rgba(24,17,10,0.65), 0 0 2px rgba(24,17,10,0.5); } .hero-tagline { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.18em; color: var(--bespoke); opacity: 0.86; margin: 0 auto 30px; max-width: 520px; line-height: 1.7; } .hero-cta { display: inline-block; } .hero-dots { position: absolute; z-index: 3; bottom: 26px; left: 50%; transform: translateX(-50%); display: flex; gap: 12px; align-items: center; } .hero-dot { width: 28px; height: 2px; background: rgba(244,238,223,0.4); border: none; padding: 0; cursor: pointer; transition: background 0.3s ease, width 0.3s ease; } .hero-dot.is-active { background: var(--bespoke); width: 40px; } .hero-dot:hover { background: var(--bespoke); } @keyframes slowRotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* ===== TRUST BAR (variante inline para cuando va dentro del flujo, no debajo del hero) ===== Clienta 18/05: trust-bar full-width abarca el ancho de la pantalla sin centrarse, y el mismo background entre homepage (.trust-bar) y nosotros (.trust-bar--inline). */ .trust-bar--inline { border-top: 1px solid rgba(68,37,16,0.08); border-bottom: 1px solid rgba(68,37,16,0.08); background: var(--bespoke); margin: 0; width: 100%; max-width: none; } /* ===== SEPARADOR ORNAMENTAL (isologo flor reubicado desde el hero) ===== */ .ornament-divider { display: flex; justify-content: center; align-items: center; padding: 56px 20px; background: var(--cream); } .ornament-divider-flower { width: clamp(64px, 8vw, 110px); height: auto; opacity: 0.55; animation: slowRotate 90s linear infinite; filter: saturate(0.85); } /* ===== SECTION HEADER ===== */ .section-header { text-align: center; margin-bottom: 52px; line-height: 0.9; } /* Mockup-fiel: serif arriba (uppercase, espaciado), script debajo (lowercase, fluido). NUNCA en una sola línea (regla de marca). */ .section-header .serif { font-family: var(--font-serif); font-size: clamp(28px, 4vw, 50px); text-transform: uppercase; letter-spacing: 0.14em; display: block; color: var(--menta); font-weight: 400; line-height: 1.05; } .section-header .script { font-family: var(--font-script); font-size: clamp(48px, 7vw, 88px); display: block; color: var(--menta); margin-top: -10px; line-height: 1; } .section-header .mono { font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--raiz); opacity: 0.55; display: block; margin-top: 12px; } /* ===== FLOWER ORNAMENT ===== */ .flower-ornament { display: block; pointer-events: none; } /* ===== PRODUCT CARDS ===== */ .product-card { text-align: center; } .product-card-img { display: block; aspect-ratio: 3 / 4; overflow: hidden; background: var(--cream); position: relative; } .product-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s cubic-bezier(0.4,0,0.2,1); } .product-card:hover .product-card-img img { transform: scale(1.06); } .product-tag { position: absolute; top: 12px; left: 12px; background: var(--raiz); color: var(--bespoke); font-size: 8.5px; letter-spacing: 0.16em; text-transform: uppercase; padding: 4px 10px; z-index: 3; } .product-card-info { padding: 16px 6px 0; } .product-card-name { font-family: var(--font-serif); font-size: 16px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--raiz); margin-bottom: 6px; font-weight: 400; line-height: 1.25; } .product-card-price { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; color: var(--raiz); opacity: 0.78; margin-bottom: 10px; } /* ===== SWATCHES DE COLOR EN TARJETA DE PRODUCTO ===== Decisión cliente reunión 07/05: "cada producto muestre sus opciones de color". Dots circulares pequeños debajo del precio con tooltip al hover. */ .product-card-colors { display: flex; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; min-height: 14px; } .product-card-color { width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(68, 37, 16, 0.18); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35); cursor: default; position: relative; transition: transform 0.18s ease, border-color 0.18s ease; } .product-card-color:hover { transform: scale(1.18); border-color: rgba(68, 37, 16, 0.4); } /* Tooltip con el nombre del color */ .product-card-color::after { content: attr(data-label); position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%) translateY(2px); background: var(--raiz); color: var(--bespoke); font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 8px; border-radius: 2px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease; z-index: 10; } .product-card-color:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); } /* "+N" indicador cuando hay más colores que los visibles */ .product-card-color--more { display: inline-flex; align-items: center; justify-content: center; width: auto; min-width: 18px; padding: 0 4px; background: transparent; border: none; box-shadow: none; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.06em; color: var(--raiz); opacity: 0.6; } .product-card-color--more:hover { transform: none; opacity: 0.9; } /* ===== CAROUSEL ===== */ .carousel-outer { position: relative; overflow: visible; } .carousel-track-wrapper { overflow: hidden; } .carousel-track { display: grid; grid-template-columns: repeat(8, calc(33.333% - 22px)); gap: 30px; transition: transform 0.4s cubic-bezier(0.4,0,0.2,1); cursor: grab; } .carousel-track:active { cursor: grabbing; } .carousel-arrow { position: absolute; top: 38%; transform: translateY(-50%); width: 40px; height: 40px; border: 1px solid rgba(68,37,16,0.3); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--raiz); font-size: 22px; opacity: 0.5; transition: all var(--transition); z-index: 2; background: rgba(255,255,255,0.8); } .carousel-arrow:hover { opacity: 1; background: var(--raiz); color: var(--bespoke); border-color: var(--raiz); } .carousel-arrow.prev { left: -54px; } .carousel-arrow.next { right: -54px; } /* ===== EDITORIAL GRID (VER TODO) ===== */ .editorial-grid { display: grid; grid-template-columns: repeat(3, 1fr); } .editorial-item { position: relative; aspect-ratio: 2 / 3; overflow: hidden; } .editorial-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; } .editorial-item:hover img { transform: scale(1.06); } .editorial-overlay { position: absolute; inset: 0; background: linear-gradient( to top, rgba(12,6,2,0.75) 0%, rgba(12,6,2,0.3) 45%, rgba(12,6,2,0.05) 100% ); display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; padding: 28px 32px; transition: background var(--transition); } .editorial-item:hover .editorial-overlay { background: linear-gradient( to top, rgba(12,6,2,0.85) 0%, rgba(12,6,2,0.4) 50%, rgba(12,6,2,0.1) 100% ); } .editorial-label { font-family: var(--font-serif-cond); font-size: 22px; letter-spacing: 0.18em; text-transform: uppercase; color: #fff; margin-bottom: 6px; } .editorial-sub { font-size: 9.5px; letter-spacing: 0.14em; color: rgba(255,255,255,0.7); text-transform: uppercase; } /* ===== NATURE GRID ===== */ .nature-section { background: var(--bespoke); padding: 90px 80px; text-align: center; } .nature-section .section-header { margin-bottom: 22px; } .nature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 44px; } .nature-item { aspect-ratio: 3 / 4; overflow: hidden; } .nature-item img { width: 100%; height: 100%; object-fit: cover; object-position: center top; transition: transform 0.5s ease; } .nature-item:hover img { transform: scale(1.05); } .nature-copy { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.04em; line-height: 1.85; color: var(--terracota); opacity: 0.92; text-align: center; max-width: 640px; margin: 0 auto; } /* ===== CTA EDITORIAL ===== */ .cta-editorial { position: relative; height: 80vh; overflow: hidden; } .cta-editorial > img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; } .cta-editorial-overlay { position: absolute; inset: 0; background: linear-gradient( 105deg, rgba(20,10,4,0.65) 0%, rgba(20,10,4,0.3) 55%, transparent 100% ); display: flex; flex-direction: column; justify-content: center; padding: 0 88px; } .cta-eyebrow { font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--bespoke); opacity: 0.8; margin-bottom: 12px; } .cta-script-line { font-family: var(--font-script); font-size: clamp(48px, 7.5vw, 92px); color: var(--bespoke); line-height: 1.04; display: block; } /* ===== BUTTONS ===== */ .btn-primary { display: inline-block; background: var(--terracota); color: var(--bespoke); padding: 13px 32px; font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; font-family: 'RobotoMono', monospace; transition: background var(--transition), transform var(--transition); cursor: pointer; border: none; } .btn-primary:hover { background: #7d3610; transform: translateY(-1px); } .btn-primary-sm { display: inline-block; background: var(--terracota); color: var(--bespoke); padding: 8px 16px; font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; font-family: 'RobotoMono', monospace; transition: background var(--transition); cursor: pointer; border: none; } .btn-primary-sm:hover { background: #7d3610; } .btn-outline { display: inline-block; border: 1px solid var(--raiz); color: var(--raiz); padding: 12px 30px; font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; transition: all var(--transition); cursor: pointer; background: none; } .btn-outline:hover { background: var(--raiz); color: var(--bespoke); } .btn-outline-light { display: inline-block; border: 1px solid rgba(244,238,223,0.6); color: var(--bespoke); padding: 13px 32px; font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; transition: all var(--transition); cursor: pointer; background: none; font-family: 'RobotoMono', monospace; } .btn-outline-light:hover { background: var(--terracota); border-color: var(--terracota); } .btn-ghost { font-size: 10px; letter-spacing: 0.14em; color: var(--raiz); opacity: 0.6; text-transform: uppercase; cursor: pointer; background: none; border: none; transition: opacity var(--transition); } .btn-ghost:hover { opacity: 1; } /* ===== TRUST BAR ===== Full-width: el contenedor abarca el ancho completo del viewport en desktop. */ .trust-bar { background: var(--bespoke); display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid rgba(68,37,16,0.10); width: 100%; max-width: none; margin-left: 0; margin-right: 0; } .trust-item { display: flex; align-items: center; gap: 16px; padding: 28px 32px; border-right: 1px solid rgba(68,37,16,0.10); } .trust-item:last-child { border-right: none; } .trust-item svg { width: 28px; height: 28px; stroke: var(--terracota); fill: none; stroke-width: 1.4; flex-shrink: 0; } .trust-item-text { line-height: 1.4; } .trust-item-label { font-family: var(--font-serif); font-size: 14px; font-weight: 400; letter-spacing: 0.10em; text-transform: uppercase; color: var(--raiz); margin-bottom: 4px; line-height: 1.2; } .trust-item-sub { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--raiz); opacity: 0.78; } /* ===== FOOTER ===== */ .footer { background: var(--bespoke); padding: 68px 80px 44px; display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 52px; position: relative; } .footer-flower { position: absolute; right: 60px; top: 40px; width: 140px; opacity: 0.12; pointer-events: none; } .footer-brand-logo { display: inline-block; margin-bottom: 18px; } .footer-logo-img { height: 32px; width: auto; display: block; } .footer-tagline { font-size: 12px; letter-spacing: 0.06em; line-height: 1.9; color: var(--raiz); opacity: 0.78; max-width: 260px; } .footer-social { display: flex; gap: 14px; margin-top: 20px; } .footer-social a svg { width: 18px; height: 18px; stroke: var(--raiz); fill: none; stroke-width: 1.5; opacity: 0.55; transition: opacity var(--transition); } .footer-social a:hover svg { opacity: 1; } .footer-col-title { font-family: var(--font-serif); /* Clienta 12/05: textos "Tienda" e "Información" muy pequeños — subir tamaño */ font-size: 14px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--raiz); margin-bottom: 22px; font-weight: 500; } .footer-links li { font-size: 12px; letter-spacing: 0.06em; color: var(--raiz); opacity: 0.78; margin-bottom: 11px; cursor: pointer; transition: opacity var(--transition); line-height: 1.7; } .footer-links li:hover { opacity: 1; } .footer-links a { color: inherit; } .footer-bottom { background: var(--bespoke); border-top: 1px solid rgba(68,37,16,0.12); padding: 20px 80px; display: flex; align-items: center; justify-content: space-between; gap: 20px; } .footer-bottom-copy { font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--raiz); opacity: 0.55; } .footer-bottom-payment { display: flex; gap: 10px; align-items: center; } .payment-badge { font-size: 8px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--raiz); opacity: 0.4; border: 1px solid rgba(68,37,16,0.2); padding: 3px 7px; } /* ===== FLOATING BUTTONS ===== */ .floating-wa { position: fixed; bottom: 28px; right: 28px; width: 54px; height: 54px; border-radius: 50%; background: #25D366; color: #fff; display: flex; align-items: center; justify-content: center; z-index: 400; box-shadow: 0 4px 20px rgba(37,211,102,0.4); transition: transform var(--transition), box-shadow var(--transition); animation: waPulse 2.5s ease-in-out infinite; } .floating-wa svg { width: 28px; height: 28px; } .floating-wa:hover { transform: scale(1.1); box-shadow: 0 6px 28px rgba(37,211,102,0.55); animation: none; } @keyframes waPulse { 0%, 100% { box-shadow: 0 4px 20px rgba(37,211,102,0.4); } 50% { box-shadow: 0 4px 30px rgba(37,211,102,0.7), 0 0 0 8px rgba(37,211,102,0.1); } } .floating-top { position: fixed; /* Stack VERTICALLY above floating-wa (which is bottom:28 height:54 = top at bottom:82). +18px gap + scroll-top height 40 = scroll-top bottom 100px, NO overlap. */ bottom: 100px; right: 32px; width: 40px; height: 40px; background: var(--dark); color: var(--bespoke); border-radius: 2px; display: flex; align-items: center; justify-content: center; z-index: 400; opacity: 0; transform: translateY(10px); transition: all var(--transition); pointer-events: none; } .floating-top.visible { opacity: 1; transform: translateY(0); pointer-events: auto; } .floating-top:hover { background: var(--terracota); } /* ===== CART DRAWER ===== */ .cart-drawer { position: fixed; inset: 0; z-index: 500; pointer-events: none; } .cart-drawer.open { pointer-events: auto; } .cart-drawer-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0); transition: background 0.35s; cursor: pointer; } .cart-drawer.open .cart-drawer-overlay { background: rgba(0,0,0,0.45); } .cart-drawer-panel { position: absolute; right: 0; top: 0; bottom: 0; width: 420px; max-width: 100vw; /* Clienta 12/05: fondo blanco del carrito drawer rompe estética → bespoke */ background: var(--bespoke); display: flex; flex-direction: column; transform: translateX(100%); transition: transform 0.35s cubic-bezier(0.4,0,0.2,1); overflow: hidden; } .cart-drawer.open .cart-drawer-panel { transform: translateX(0); } .cart-drawer-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; border-bottom: 1px solid rgba(68,37,16,0.1); } .cart-drawer-title { font-family: var(--font-serif); font-size: 14px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--raiz); } .cart-drawer-close { color: var(--raiz); opacity: 0.6; transition: opacity var(--transition); } .cart-drawer-close:hover { opacity: 1; } .cart-free-shipping-bar { padding: 12px 24px; background: var(--cream); font-size: 10px; letter-spacing: 0.08em; color: var(--raiz); border-bottom: 1px solid rgba(68,37,16,0.08); } .cart-free-shipping-bar p { margin-bottom: 6px; } .shipping-progress { height: 3px; background: rgba(68,37,16,0.15); border-radius: 2px; } .shipping-fill { height: 100%; background: var(--granada); border-radius: 2px; transition: width 0.4s ease; } .shipping-ok { color: var(--granada); font-weight: 600; } .cart-drawer-items { flex: 1; overflow-y: auto; padding: 16px 24px; } .cart-empty { text-align: center; padding: 48px 20px; font-size: 11px; letter-spacing: 0.1em; color: var(--raiz); opacity: 0.7; } .cart-item { display: grid; grid-template-columns: 80px 1fr; gap: 14px; padding: 14px 0; border-bottom: 1px solid rgba(68,37,16,0.08); } .cart-item-img { aspect-ratio: 3/4; overflow: hidden; background: var(--cream); } .cart-item-img img { width: 100%; height: 100%; object-fit: cover; } .cart-item-name { font-family: var(--font-serif); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--raiz); margin-bottom: 4px; } .cart-item-meta { font-size: 9.5px; color: var(--raiz); opacity: 0.55; margin-bottom: 6px; } .cart-item-price { font-size: 11px; color: var(--raiz); margin-bottom: 8px; } .cart-item-controls { display: flex; align-items: center; gap: 8px; } .qty-btn { width: 26px; height: 26px; border: 1px solid rgba(68,37,16,0.2); font-size: 16px; display: flex; align-items: center; justify-content: center; color: var(--raiz); transition: all var(--transition); } .qty-btn:hover { border-color: var(--raiz); } .qty-val { font-size: 12px; min-width: 20px; text-align: center; } .remove-btn { font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--raiz); opacity: 0.4; margin-left: auto; transition: opacity var(--transition); } .remove-btn:hover { opacity: 1; } .cart-drawer-upsell { padding: 14px 24px; border-top: 1px solid rgba(68,37,16,0.08); background: var(--cream); } .cart-upsell-title { font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--raiz); margin-bottom: 12px; opacity: 0.7; } .cart-upsell-track { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 4px; } .cart-upsell-card { flex-shrink: 0; width: 100px; text-align: center; } .cart-upsell-card img { width: 100px; height: 130px; object-fit: cover; background: #e8e0d0; margin-bottom: 6px; } .cart-upsell-name { font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--raiz); margin-bottom: 3px; } .cart-upsell-price { font-size: 9px; color: var(--raiz); opacity: 0.6; margin-bottom: 6px; } .cart-drawer-footer { padding: 16px 24px 24px; border-top: 1px solid rgba(68,37,16,0.1); } .cart-subtotal { display: flex; justify-content: space-between; font-size: 11px; letter-spacing: 0.08em; color: var(--raiz); margin-bottom: 8px; } .cart-note { font-size: 9px; color: var(--raiz); opacity: 0.5; margin-bottom: 16px; letter-spacing: 0.06em; } /* ===== POPUPS ===== */ .popup-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0); z-index: 600; display: flex; align-items: center; justify-content: center; padding: 20px; transition: background 0.35s; opacity: 0; pointer-events: none; } .popup-overlay.open { background: rgba(0,0,0,0.55); opacity: 1; pointer-events: auto; } .popup { background: var(--bespoke); padding: 48px 44px; max-width: 460px; width: 100%; position: relative; text-align: center; transform: translateY(24px) scale(0.97); transition: transform 0.35s cubic-bezier(0.4,0,0.2,1); } .popup-overlay.open .popup { transform: translateY(0) scale(1); } .popup-close { position: absolute; top: 16px; right: 20px; font-size: 22px; color: var(--raiz); opacity: 0.4; transition: opacity var(--transition); } .popup-close:hover { opacity: 1; } .popup-flower { margin: 0 auto 16px; width: 56px; } .popup-flower img { width: 100%; } .popup-eyebrow { font-size: 9.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--raiz); opacity: 0.55; margin-bottom: 8px; } .popup-title-script { font-family: var(--font-script); font-size: 46px; color: var(--raiz); margin-bottom: 16px; line-height: 1; } .popup-title-serif { font-family: var(--font-serif-cond); font-size: 32px; text-transform: uppercase; color: var(--raiz); letter-spacing: 0.08em; margin-bottom: 8px; } .popup-body { font-size: 11px; letter-spacing: 0.08em; line-height: 1.9; color: var(--raiz); opacity: 0.75; margin-bottom: 24px; } .popup-form { display: flex; flex-direction: column; gap: 12px; } .popup-input { border: 1px solid rgba(68,37,16,0.3); background: #fff; padding: 13px 16px; font-size: 11px; letter-spacing: 0.06em; outline: none; width: 100%; transition: border-color var(--transition); } .popup-input:focus { border-color: var(--raiz); } .popup-skip { display: block; margin-top: 14px; font-size: 9px; letter-spacing: 0.12em; color: var(--raiz); opacity: 0.38; text-decoration: underline; transition: opacity var(--transition); } .popup-skip:hover { opacity: 0.7; } /* ===== TOAST ===== */ #toast-container { position: fixed; bottom: 100px; left: 50%; transform: translateX(-50%); z-index: 700; display: flex; flex-direction: column; gap: 10px; align-items: center; pointer-events: none; } .toast { background: var(--dark); color: var(--bespoke); padding: 12px 20px; font-size: 10.5px; letter-spacing: 0.1em; display: flex; align-items: center; gap: 12px; opacity: 0; transform: translateY(12px); transition: all 0.3s; pointer-events: auto; min-width: 260px; max-width: 360px; justify-content: space-between; } .toast.show { opacity: 1; transform: translateY(0); } .toast button { font-size: 16px; opacity: 0.5; color: var(--bespoke); } /* ===== SCROLL ANIMATIONS ===== Sólo aplican cuando html.anim-ready, así si el JS tarda o falla, el contenido se ve siempre. */ .anim-ready [data-anim] { opacity: 0; transition: opacity 0.65s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.65s cubic-bezier(0.22, 0.61, 0.36, 1); will-change: opacity, transform; } .anim-ready [data-anim="fade-up"] { transform: translateY(28px); } .anim-ready [data-anim="fade-down"] { transform: translateY(-28px); } .anim-ready [data-anim="fade-left"] { transform: translateX(-28px); } .anim-ready [data-anim="fade-right"] { transform: translateX(28px); } .anim-ready [data-anim="fade-in"] { transform: none; } .anim-ready [data-anim="scale"] { transform: scale(0.94); } .anim-ready [data-anim="reveal"] { transform: translateY(36px) scale(0.98); } .anim-ready [data-anim].animated { opacity: 1; transform: none; } /* Stagger delays — aplican via data-anim-delay attribute */ .anim-ready [data-anim-delay="100"] { transition-delay: 0.1s; } .anim-ready [data-anim-delay="200"] { transition-delay: 0.2s; } .anim-ready [data-anim-delay="300"] { transition-delay: 0.3s; } .anim-ready [data-anim-delay="400"] { transition-delay: 0.4s; } .anim-ready [data-anim-delay="500"] { transition-delay: 0.5s; } .anim-ready [data-anim-delay="600"] { transition-delay: 0.6s; } @media (prefers-reduced-motion: reduce) { .anim-ready [data-anim] { opacity: 1; transform: none; transition: none; } } /* ===== PAGE TRANSITION ===== body.page-loading inicia fade-out al hacer click . */ body { transition: opacity 0.3s ease; } body.page-loading { opacity: 0; } @media (prefers-reduced-motion: reduce) { body, body.page-loading { opacity: 1; transition: none; } } /* ===== COLLECTION PAGE ===== */ .page-collections { background: var(--cream); min-height: 100vh; } .collection-hero { background: var(--dark); height: 36vh; display: flex; align-items: flex-end; padding: 0 80px 40px; position: relative; overflow: hidden; } .collection-hero-bg { position: absolute; inset: 0; } .collection-hero-bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.25; } .collection-hero-title { position: relative; z-index: 1; font-family: var(--font-serif-cond); font-size: clamp(36px, 6vw, 72px); text-transform: uppercase; letter-spacing: 0.08em; color: var(--bespoke); line-height: 0.9; } .collection-hero-sub { position: relative; z-index: 1; font-family: var(--font-script); font-size: clamp(28px, 4vw, 52px); color: var(--bespoke); } .collection-filters { background: #fff; display: flex; align-items: center; gap: 4px; padding: 0 80px; border-bottom: 1px solid rgba(68,37,16,0.08); } .collection-filter-btn { font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--raiz); opacity: 0.55; padding: 16px 18px; border-bottom: 2px solid transparent; transition: all var(--transition); } .collection-filter-btn:hover { opacity: 1; } .collection-filter-btn.active { opacity: 1; border-bottom-color: var(--raiz); } .collection-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; padding: 52px 80px 80px; } /* ===== PRODUCT PAGE ===== */ .page-product { background: var(--bespoke); padding-top: 80px; } .product-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; padding: 60px 80px 80px; max-width: 1400px; margin: 0 auto; } .gallery-main { aspect-ratio: 3/4; overflow: hidden; background: var(--cream); position: relative; } .gallery-main img { width: 100%; height: 100%; object-fit: cover; } .gallery-thumbs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 8px; } .gallery-thumb { aspect-ratio: 3/4; overflow: hidden; cursor: pointer; border: 2px solid transparent; transition: border-color var(--transition); } .gallery-thumb.active { border-color: var(--raiz); } .gallery-thumb img { width: 100%; height: 100%; object-fit: cover; } .product-info { padding-top: 8px; } .product-breadcrumb { font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--raiz); opacity: 0.45; margin-bottom: 20px; } .product-breadcrumb a { color: inherit; } .product-tag-inline { display: inline-block; background: var(--raiz); color: var(--bespoke); font-size: 8.5px; letter-spacing: 0.16em; text-transform: uppercase; padding: 4px 10px; margin-bottom: 14px; } .product-name-heading { font-family: var(--font-serif); font-size: clamp(28px, 3.5vw, 44px); letter-spacing: 0.06em; text-transform: uppercase; color: var(--raiz); margin-bottom: 10px; line-height: 1.1; } .product-price-display { font-size: 14px; color: var(--raiz); letter-spacing: 0.08em; margin-bottom: 24px; } .product-divider { height: 1px; background: rgba(68,37,16,0.1); margin: 24px 0; } .variant-label { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--raiz); margin-bottom: 10px; opacity: 0.7; } #size-selector, #color-selector { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; } .variant-btn { border: 1px solid rgba(68,37,16,0.25); padding: 9px 18px; font-size: 10px; letter-spacing: 0.1em; color: var(--raiz); transition: all var(--transition); background: none; font-family: 'RobotoMono', monospace; } .variant-btn:hover, .variant-btn.active { border-color: var(--raiz); background: var(--raiz); color: var(--bespoke); } .color-btn { width: 28px; height: 28px; border-radius: 50%; border: 2px solid rgba(68,37,16,0.15); transition: all var(--transition); position: relative; } .color-btn.active, .color-btn:hover { border-color: var(--raiz); transform: scale(1.15); } .color-btn.active::after { content: ''; position: absolute; inset: -4px; border: 2px solid var(--raiz); border-radius: 50%; } .add-to-cart-section { display: flex; gap: 12px; margin-top: 8px; flex-wrap: wrap; } #add-to-cart-btn { flex: 1; min-width: 200px; } .product-desc-section { margin-top: 28px; } .product-desc-text { font-size: 11px; letter-spacing: 0.07em; line-height: 2; color: var(--raiz); opacity: 0.75; } .product-delivery-badge { display: inline-flex; align-items: center; gap: 8px; font-size: 9.5px; letter-spacing: 0.1em; color: var(--granada); margin-top: 16px; } .crosssell-section { padding: 0 80px 80px; } .crosssell-title { font-family: var(--font-serif-cond); font-size: 22px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--raiz); margin-bottom: 32px; text-align: center; } #crosssell-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } /* ===== CART PAGE ===== */ .page-cart { background: var(--bespoke); padding-top: 80px; } .cart-layout { display: grid; grid-template-columns: 1fr 340px; gap: 48px; padding: 60px 80px 80px; max-width: 1300px; margin: 0 auto; } .cart-page-heading { font-family: var(--font-serif-cond); font-size: 28px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--raiz); margin-bottom: 32px; padding-top: 108px; /* clearance del navbar fijo (88px) + 20px airy */ background: var(--cream); } .cart-page-item { display: grid; grid-template-columns: 100px 1fr auto auto; gap: 20px; align-items: center; padding: 20px 0; border-bottom: 1px solid rgba(68,37,16,0.08); } .cart-page-img { aspect-ratio: 3/4; overflow: hidden; background: var(--cream); } .cart-page-img img { width: 100%; height: 100%; object-fit: cover; } .cart-page-name { font-family: var(--font-serif); font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--raiz); margin-bottom: 4px; } .cart-page-meta { font-size: 9.5px; color: var(--raiz); opacity: 0.5; margin-bottom: 10px; } .cart-page-controls { display: flex; align-items: center; gap: 8px; } .cart-page-price { font-size: 14px; color: var(--raiz); } .cart-page-remove { font-size: 18px; color: var(--raiz); opacity: 0.35; transition: opacity var(--transition); } .cart-page-remove:hover { opacity: 1; } .cart-summary-box { background: var(--cream); padding: 32px; position: sticky; top: 120px; align-self: start; } .cart-summary-title { font-family: var(--font-serif); font-size: 14px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--raiz); margin-bottom: 24px; } .summary-row { display: flex; justify-content: space-between; font-size: 11px; letter-spacing: 0.06em; color: var(--raiz); margin-bottom: 10px; } .summary-row.total { font-size: 14px; font-weight: 600; padding-top: 12px; border-top: 1px solid rgba(68,37,16,0.12); margin-top: 6px; } .summary-hint { font-size: 9px; color: var(--granada); letter-spacing: 0.08em; margin-bottom: 8px; } .free-tag { color: var(--granada); font-size: 10px; } .payment-icons { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; justify-content: center; } .payment-icons span { font-size: 8.5px; letter-spacing: 0.1em; color: var(--raiz); opacity: 0.4; border: 1px solid rgba(68,37,16,0.2); padding: 4px 8px; } .cart-empty-page { text-align: center; padding: 80px 20px; } .cart-empty-page h3 { font-family: var(--font-serif); font-size: 18px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--raiz); margin-bottom: 8px; } .cart-empty-page p { font-size: 11px; color: var(--raiz); opacity: 0.6; } .upsell-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .upsell-heading { font-family: var(--font-serif-cond); font-size: 20px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--raiz); margin-bottom: 24px; text-align: center; } .upsell-card { text-align: center; } .upsell-card img { width: 100%; aspect-ratio: 3/4; object-fit: cover; background: var(--cream); margin-bottom: 8px; } .upsell-name { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--raiz); margin-bottom: 4px; font-family: var(--font-serif); } .upsell-price { font-size: 10px; color: var(--raiz); opacity: 0.6; margin-bottom: 8px; } #cart-upsell-section { margin-top: 48px; padding-top: 40px; border-top: 1px solid rgba(68,37,16,0.08); } /* ===== NOSOTROS PAGE ===== */ .nosotros-hero { height: 60vh; position: relative; overflow: hidden; background: var(--dark); } .nosotros-hero img { width: 100%; height: 100%; object-fit: cover; opacity: 0.45; } .nosotros-hero-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; } .page-section { padding: 80px; } .page-section.alt { background: var(--cream); } .prose { font-size: 11.5px; letter-spacing: 0.08em; line-height: 2.1; color: var(--raiz); opacity: 0.8; max-width: 680px; margin: 0 auto; } .values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 48px; text-align: center; } .value-item-title { font-family: var(--font-serif); font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--raiz); margin-bottom: 12px; } .value-item-desc { font-size: 10.5px; letter-spacing: 0.07em; line-height: 2; color: var(--raiz); opacity: 0.65; } /* ===== POLÍTICAS PAGE — versión
/ está más abajo ===== */ /* ===== BESPOKE PAGE ===== */ .bespoke-hero { min-height: 90vh; background: var(--dark); display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; } .bespoke-hero-left { display: flex; flex-direction: column; justify-content: center; padding: 80px 60px 80px 80px; position: relative; } .bespoke-hero-flower { position: absolute; left: -60px; bottom: -40px; width: 380px; opacity: 0.06; pointer-events: none; } .bespoke-hero-eyebrow { font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--menta); margin-bottom: 20px; } .bespoke-hero-heading { font-family: var(--font-serif-cond); font-size: clamp(52px, 7vw, 96px); text-transform: uppercase; letter-spacing: 0.06em; color: var(--bespoke); line-height: 0.9; margin-bottom: 24px; } .bespoke-hero-sub { font-size: 10.5px; letter-spacing: 0.1em; line-height: 2; color: var(--bespoke); opacity: 0.6; max-width: 340px; margin-bottom: 36px; } .bespoke-hero-right { overflow: hidden; } .bespoke-hero-right img { width: 100%; height: 100%; object-fit: cover; object-position: center top; } /* ===== PERSONALIZA ===== */ .personaliza-section { background: var(--cream); padding: 80px; } .personaliza-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 48px; } .personaliza-card { background: var(--bespoke); aspect-ratio: 4/5; position: relative; overflow: hidden; display: flex; align-items: flex-end; padding: 28px; border: 1px solid rgba(68, 37, 16, 0.08); } .personaliza-card-bg { position: absolute; inset: 0; opacity: 0.35; } .personaliza-card-bg img { width: 100%; height: 100%; object-fit: cover; } .personaliza-card-content { position: relative; z-index: 1; } .personaliza-card-title { font-family: var(--font-serif-cond); font-size: 20px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--raiz); margin-bottom: 10px; } .personaliza-card-desc { font-size: 10px; letter-spacing: 0.08em; line-height: 1.9; color: var(--raiz); opacity: 0.7; } .personaliza-cta { text-align: center; margin-top: 44px; } /* ===== ATENCION SECTION ===== */ .atencion-section { position: relative; height: 72vh; overflow: hidden; } .atencion-section > img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; } .atencion-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,6,3,0.65) 0%, rgba(10,6,3,0.2) 60%, transparent 100%); display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; padding: 0 80px 64px; } .atencion-heading { font-family: var(--font-serif-cond); font-size: clamp(44px, 7.5vw, 92px); text-transform: uppercase; letter-spacing: 0.08em; color: #fff; line-height: 0.88; } /* ===== TRUST ICONS SECTION ===== */ .trust-icons-section { background: var(--cream); padding: 80px; } .trust-icons-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; text-align: center; } .ti-icon { margin: 0 auto 20px; width: 44px; } .ti-icon svg { width: 100%; height: auto; stroke: var(--raiz); fill: none; stroke-width: 1.2; opacity: 0.7; } .ti-title { font-family: var(--font-serif); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--raiz); margin-bottom: 12px; } .ti-desc { font-size: 10px; letter-spacing: 0.07em; line-height: 1.9; color: var(--raiz); opacity: 0.65; max-width: 240px; margin: 0 auto 14px; } /* ===== MISC ===== */ .page-spacer { height: 80px; } .text-center { text-align: center; } .container { max-width: 1400px; margin: 0 auto; padding: 0 80px; } .bg-cream { background: var(--cream); } .bg-dark { background: var(--dark); } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); } /* ===== COLECCIONES — alias BEM utilizadas por colecciones.html ===== */ .collections-hero { position: relative; min-height: 44vh; display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--dark); padding: 130px 40px 70px; } .collections-hero__bg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0.35; filter: saturate(0.8); } .collections-hero__overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(24,17,10,0.55) 0%, rgba(24,17,10,0.25) 100%); } .collections-hero__content { position: relative; z-index: 2; text-align: center; color: var(--bespoke); } .collections-hero__flower { width: 64px; opacity: 0.7; margin: 0 auto 16px; } .collections-hero__eyebrow { font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--menta); margin-bottom: 10px; } .collections-hero__title { font-family: var(--font-script); font-size: clamp(72px, 11vw, 132px); color: var(--bespoke); line-height: 0.9; font-style: normal; } .collections-hero__title em { font-style: normal; } .collections-filters { background: var(--cream); padding: 36px 40px; } .filters-bar { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; } .filter-btn { font-family: var(--font-serif); font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--raiz); background: transparent; padding: 10px 22px; border: 1px solid rgba(68,37,16,0.2); cursor: pointer; transition: background var(--transition), color var(--transition), border-color var(--transition); opacity: 0.7; } .filter-btn:hover { opacity: 1; border-color: var(--raiz); } .filter-btn--active { background: var(--raiz); color: var(--bespoke); border-color: var(--raiz); opacity: 1; } .collections-section { background: var(--cream); padding: 30px 0 90px; } .collection-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 36px 24px; } @media (max-width: 1100px) { .collection-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 800px) { .collection-grid { grid-template-columns: repeat(2, 1fr); } } .trust-bar__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 36px; padding: 26px 60px; background: var(--bespoke); border-top: 1px solid rgba(68,37,16,0.08); border-bottom: 1px solid rgba(68,37,16,0.08); } .trust-bar__inner .trust-item { display: flex; flex-direction: row; align-items: center; gap: 12px; flex: 1 1 220px; min-width: 0; text-align: left; padding: 0; border: none; white-space: nowrap; } .trust-icon { width: 22px; height: 22px; stroke: var(--raiz); fill: none; stroke-width: 1.4; opacity: 0.7; flex-shrink: 0; margin: 0; } .trust-bar__inner .trust-label, .trust-bar__inner .trust-sub { display: inline; } .trust-label { font-family: var(--font-serif); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--raiz); } .trust-sub { font-size: 9px; letter-spacing: 0.1em; color: var(--raiz); opacity: 0.55; margin-left: 8px; } .trust-bar__inner .trust-label::after { content: ''; } @media (max-width: 980px) { .trust-bar__inner { padding: 22px 24px; gap: 16px; } .trust-bar__inner .trust-item { flex: 1 1 calc(50% - 16px); white-space: normal; } } /* ===== CART EMPTY EDITORIAL ===== */ .cart-empty-editorial { background: var(--cream); padding: 80px 60px 70px; display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; border: 1px solid rgba(68,37,16,0.08); position: relative; overflow: hidden; margin-bottom: 30px; } .cart-empty-editorial::before { content: ''; position: absolute; right: -80px; top: -60px; width: 280px; height: 280px; background: url('../assets/BRANDING/LOGO%20ai-13.png') center/contain no-repeat; opacity: 0.07; pointer-events: none; animation: slowRotate 80s linear infinite; } .cart-empty-eyebrow { font-size: 9.5px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--granada); margin-bottom: 16px; } .cart-empty-heading { font-family: var(--font-serif-cond); font-size: clamp(34px, 4.4vw, 56px); text-transform: uppercase; letter-spacing: 0.08em; color: var(--raiz); line-height: 0.95; margin-bottom: 14px; } .cart-empty-heading .script { font-family: var(--font-script); font-size: 1.4em; text-transform: none; letter-spacing: 0; color: var(--terracota); display: block; margin-top: -6px; } .cart-empty-text { font-size: 11.5px; letter-spacing: 0.06em; line-height: 2; color: var(--raiz); opacity: 0.78; max-width: 420px; margin-bottom: 28px; } .cart-empty-actions { display: flex; gap: 14px; flex-wrap: wrap; } .cart-empty-coupon { background: var(--menta); color: var(--raiz); padding: 18px 22px; display: flex; align-items: center; gap: 18px; margin-bottom: 28px; border: 1px dashed rgba(68,37,16,0.3); } .cart-empty-coupon-code { font-family: var(--font-serif-cond); font-size: 22px; letter-spacing: 0.14em; color: var(--raiz); } .cart-empty-coupon-text { font-size: 10px; letter-spacing: 0.1em; color: var(--raiz); line-height: 1.6; } .cart-empty-coupon-text strong { font-weight: 700; } .cart-empty-img { aspect-ratio: 4/5; overflow: hidden; } .cart-empty-img img { width: 100%; height: 100%; object-fit: cover; } .cart-suggest-section { background: var(--cream); padding: 30px 0 60px; } .cart-suggest-head { text-align: center; margin-bottom: 30px; } .cart-suggest-eyebrow { font-size: 9.5px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--granada); margin-bottom: 10px; } .cart-suggest-heading { font-family: var(--font-serif-cond); font-size: clamp(26px, 3.4vw, 40px); text-transform: uppercase; letter-spacing: 0.1em; color: var(--raiz); } .cart-suggest-heading .script { font-family: var(--font-script); text-transform: none; letter-spacing: 0; color: var(--terracota); font-size: 1.3em; } .cart-suggest-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } @media (max-width: 1100px) { .cart-suggest-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 800px) { .cart-suggest-grid { grid-template-columns: repeat(2, 1fr); } } .cart-bespoke-cta { background: var(--terracota); color: var(--cream); padding: 60px 50px; text-align: center; margin: 30px 0 60px; } .cart-bespoke-cta h3 { font-family: var(--font-serif-cond); font-size: clamp(28px, 3.6vw, 44px); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 14px; line-height: 1; } .cart-bespoke-cta h3 .script { font-family: var(--font-script); text-transform: none; letter-spacing: 0; color: var(--menta); font-size: 1.3em; } .cart-bespoke-cta p { font-size: 11px; letter-spacing: 0.1em; line-height: 1.9; opacity: 0.85; max-width: 540px; margin: 0 auto 24px; } @media (max-width: 980px) { .hero { padding: 110px 24px 60px; } .hero-cols { grid-template-columns: 1fr 1fr 1fr; gap: 10px; } .cart-empty-editorial { grid-template-columns: 1fr; padding: 50px 30px; } } /* ========================================================== SEARCH MODAL ========================================================== */ .search-modal { position: fixed; inset: 0; z-index: 800; background: rgba(24,17,10,0); pointer-events: none; transition: background 0.4s ease; display: flex; flex-direction: column; overflow: hidden; } .search-modal.open { background: rgba(24,17,10,0.78); pointer-events: auto; } .search-panel { background: var(--cream); width: 100%; max-height: 0; overflow: hidden; transition: max-height 0.5s cubic-bezier(0.4,0,0.2,1); box-shadow: 0 4px 30px rgba(0,0,0,0.2); } .search-modal.open .search-panel { max-height: 86vh; } .search-input-wrap { display: flex; align-items: center; gap: 16px; padding: 28px 56px; border-bottom: 1px solid rgba(68,37,16,0.1); } .search-input-wrap svg.search-icon { width: 18px; height: 18px; stroke: var(--raiz); fill: none; stroke-width: 1.5; opacity: 0.6; flex-shrink: 0; } .search-input { flex: 1; border: none; outline: none; background: transparent; font-family: var(--font-serif-cond); font-size: 26px; letter-spacing: 0.06em; color: var(--raiz); padding: 8px 0; } .search-input::placeholder { color: var(--raiz); opacity: 0.32; font-style: italic; } .search-close { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--raiz); opacity: 0.5; cursor: pointer; transition: opacity var(--transition); background: none; border: none; flex-shrink: 0; } .search-close:hover { opacity: 1; } .search-results { padding: 24px 56px 36px; overflow-y: auto; max-height: calc(86vh - 100px); } .search-results-head { font-size: 9.5px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--raiz); opacity: 0.5; margin-bottom: 18px; } .search-results-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; } .search-results-empty { text-align: center; padding: 60px 20px; color: var(--raiz); opacity: 0.6; } .search-results-empty .script { font-family: var(--font-script); font-size: 36px; color: var(--terracota); display: block; margin-bottom: 10px; } .search-suggestions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; } .search-suggestion { background: transparent; border: 1px solid rgba(68,37,16,0.2); font-size: 9.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--raiz); opacity: 0.78; padding: 8px 16px; cursor: pointer; transition: all var(--transition); } .search-suggestion:hover { background: var(--raiz); color: var(--bespoke); border-color: var(--raiz); opacity: 1; } @media (max-width: 800px) { .search-input-wrap, .search-results { padding-left: 24px; padding-right: 24px; } .search-results-grid { grid-template-columns: repeat(2, 1fr); } .search-input { font-size: 20px; } } /* ========================================================== BESPOKE — FAQ con fondo pleno + tarjeta WhatsApp editorial ========================================================== */ .bespoke-faq-wrap { background: var(--cream); padding: 100px 40px; } .bespoke-faq-inner { max-width: 980px; margin: 0 auto; } /* Reset overrides para clase legacy de bespoke.html */ .bespoke-faq { background: transparent !important; padding: 0 !important; max-width: 100% !important; } .bespoke-contact-card { background: var(--cream); padding: 90px 40px 110px; } .bespoke-contact-grid { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 1.05fr 1fr; gap: 0; background: #fff; overflow: hidden; box-shadow: 0 30px 80px -30px rgba(24,17,10,0.18); } .bespoke-contact-img { position: relative; overflow: hidden; min-height: 540px; } .bespoke-contact-img img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; } .bespoke-contact-img-overlay { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(151,67,21,0.0) 0%, rgba(151,67,21,0.65) 100%); } .bespoke-contact-img-text { position: absolute; bottom: 36px; left: 36px; color: var(--cream); z-index: 2; } .bespoke-contact-img-text-eyebrow { font-size: 9px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--menta); margin-bottom: 8px; } .bespoke-contact-img-text-name { font-family: var(--font-script); font-size: 36px; color: var(--cream); line-height: 1; } .bespoke-contact-body { padding: 64px 56px; display: flex; flex-direction: column; justify-content: center; } .bespoke-contact-eyebrow-2 { font-size: 9.5px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--granada); margin-bottom: 18px; } .bespoke-contact-heading-2 { font-family: var(--font-serif-cond); font-size: clamp(32px, 4.2vw, 52px); text-transform: uppercase; letter-spacing: 0.06em; color: var(--raiz); line-height: 0.95; margin-bottom: 14px; } .bespoke-contact-heading-2 .script { font-family: var(--font-script); font-size: 1.45em; text-transform: none; letter-spacing: 0; color: var(--terracota); display: block; margin-top: -2px; } .bespoke-contact-text { font-size: 11px; letter-spacing: 0.06em; line-height: 2; color: var(--raiz); opacity: 0.78; max-width: 420px; margin-bottom: 28px; } .bespoke-contact-features { list-style: none; padding: 0; margin: 0 0 30px; } .bespoke-contact-features li { display: flex; align-items: center; gap: 12px; padding: 8px 0; font-size: 10.5px; letter-spacing: 0.06em; color: var(--raiz); opacity: 0.78; } .bespoke-contact-features svg { width: 14px; height: 14px; stroke: var(--terracota); fill: none; stroke-width: 1.6; flex-shrink: 0; } .bespoke-contact-actions-2 { display: flex; gap: 14px; flex-wrap: wrap; } .bespoke-contact-actions-2 .btn-wa { background: #25D366; color: #fff; font-family: var(--font-serif); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; padding: 16px 28px; display: inline-flex; align-items: center; gap: 12px; transition: transform var(--transition), box-shadow var(--transition); } .bespoke-contact-actions-2 .btn-wa:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(37,211,102,0.35); } .bespoke-contact-actions-2 .btn-wa svg { width: 16px; height: 16px; fill: currentColor; } @media (max-width: 980px) { .bespoke-contact-grid { grid-template-columns: 1fr; } .bespoke-contact-img { min-height: 360px; } .bespoke-contact-body { padding: 50px 30px; } } /* Hide la sección antigua bespoke-contact si tiene la clase nueva en su lugar */ .bespoke-contact-replaced { display: none !important; } /* ========================================================== PRODUCTO — bloques avanzados (trust, by-author, reviews, sticky CTA) ========================================================== */ .product-by-author { display: flex; align-items: center; gap: 14px; padding: 14px 0; margin-bottom: 14px; border-bottom: 1px solid rgba(68,37,16,0.08); } .product-by-author-avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--menta); display: flex; align-items: center; justify-content: center; color: var(--raiz); font-family: var(--font-script); font-size: 22px; flex-shrink: 0; } .product-by-author-text { font-size: 10px; letter-spacing: 0.08em; color: var(--raiz); opacity: 0.72; line-height: 1.6; } .product-by-author-text strong { color: var(--raiz); font-weight: 700; opacity: 1; } .product-trust-mini { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 18px 0; padding: 18px 0; border-top: 1px solid rgba(68,37,16,0.08); border-bottom: 1px solid rgba(68,37,16,0.08); } .product-trust-mini-item { text-align: center; } .product-trust-mini-item svg { width: 18px; height: 18px; stroke: var(--granada); fill: none; stroke-width: 1.5; margin-bottom: 6px; } .product-trust-mini-label { font-family: var(--font-serif); font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--raiz); margin-bottom: 2px; } .product-trust-mini-sub { font-size: 8.5px; letter-spacing: 0.06em; color: var(--raiz); opacity: 0.6; } .product-rating { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; } .product-rating-stars { display: inline-flex; gap: 2px; } .product-rating-stars svg { width: 13px; height: 13px; fill: var(--terracota); } .product-rating-text { font-size: 10px; letter-spacing: 0.1em; color: var(--raiz); opacity: 0.65; } .product-bundle { background: var(--bespoke); padding: 22px 22px; margin: 22px 0; display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; } .product-bundle-icon { width: 36px; height: 36px; background: var(--terracota); color: var(--cream); display: flex; align-items: center; justify-content: center; font-family: var(--font-serif-cond); font-size: 18px; flex-shrink: 0; } .product-bundle-title { font-family: var(--font-serif); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--raiz); margin-bottom: 4px; } .product-bundle-text { font-size: 10px; letter-spacing: 0.05em; line-height: 1.7; color: var(--raiz); opacity: 0.72; } .product-bundle-text strong { color: var(--terracota); } /* Sticky CTA en mobile */ .product-sticky-cta { position: fixed; bottom: 0; left: 0; right: 0; background: #fff; border-top: 1px solid rgba(68,37,16,0.12); padding: 12px 18px; display: none; align-items: center; gap: 14px; z-index: 350; box-shadow: 0 -4px 20px rgba(0,0,0,0.05); } .product-sticky-cta-info { flex: 1; font-size: 10px; letter-spacing: 0.06em; color: var(--raiz); } .product-sticky-cta-info strong { display: block; font-family: var(--font-serif); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 2px; } .product-sticky-cta button { background: var(--raiz); color: var(--cream); font-family: var(--font-serif); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; padding: 12px 22px; } @media (max-width: 768px) { .product-sticky-cta { display: flex; } } /* Reviews */ .reviews-section { background: var(--cream); padding: 80px 0 90px; /* sin margin-top — eliminada franja blanca con product-page (bg:#fff) */ } /* Ornament-divider entre product-page (white) y reviews (cream): hace de transición visual */ .product-page + .ornament-divider { background: linear-gradient(to bottom, #fff 0%, var(--cream) 100%); padding: 36px 0; margin: 0; } .reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 36px; } .review-card { background: #fff; padding: 30px 26px; border: 1px solid rgba(68,37,16,0.06); position: relative; } .review-card::before { content: '"'; position: absolute; top: 6px; left: 18px; font-family: var(--font-serif-cond); font-size: 64px; color: var(--terracota); opacity: 0.18; line-height: 1; } .review-stars { display: inline-flex; gap: 2px; margin-bottom: 14px; } .review-stars svg { width: 12px; height: 12px; fill: var(--terracota); } .review-text { font-size: 11px; letter-spacing: 0.04em; line-height: 1.95; color: var(--raiz); opacity: 0.82; margin-bottom: 18px; font-style: italic; } .review-author { display: flex; flex-direction: column; gap: 2px; } .review-author-name { font-family: var(--font-serif); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--raiz); } .review-author-meta { font-size: 9px; letter-spacing: 0.08em; color: var(--raiz); opacity: 0.5; } @media (max-width: 800px) { .reviews-grid { grid-template-columns: 1fr; } } /* ========================================================== ORNAMENTOS DECORATIVOS REUTILIZABLES ========================================================== */ .ornament-divider { display: flex; align-items: center; justify-content: center; gap: 24px; padding: 26px 0; opacity: 0.6; } .ornament-divider::before, .ornament-divider::after { content: ''; height: 1px; flex: 1; background: linear-gradient(to right, transparent, rgba(68,37,16,0.25), transparent); max-width: 200px; } .ornament-divider svg { width: 28px; height: 28px; stroke: var(--terracota); fill: none; stroke-width: 1; } .ornament-divider img { width: 36px; height: 36px; opacity: 0.7; } .ornament-svg { display: inline-block; pointer-events: none; } /* Bordes ornamentales en CTA / quotes */ .ornament-frame { position: relative; } .ornament-frame::before, .ornament-frame::after { content: ''; position: absolute; width: 32px; height: 32px; border: 1px solid currentColor; opacity: 0.3; } .ornament-frame::before { top: 12px; left: 12px; border-right: 0; border-bottom: 0; } .ornament-frame::after { bottom: 12px; right: 12px; border-left: 0; border-top: 0; } /* ========================================================== PRODUCTO — estilos específicos (migrados de producto.html inline) ========================================================== */ .breadcrumb-bar { background: var(--cream); padding: 92px 0 18px; /* 70px navbar clearance + 22px content padding (en cream, sin franja blanca) */ border-bottom: 1px solid rgba(68,37,16,0.06); } .breadcrumb { font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--raiz); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .breadcrumb a { color: var(--raiz); opacity: 0.55; transition: opacity var(--transition); } .breadcrumb a:hover { opacity: 1; } .breadcrumb-sep { color: var(--raiz); opacity: 0.3; font-size: 9px; } .breadcrumb-current { color: var(--raiz); opacity: 1; font-weight: 500; } .product-page { background: #fff; padding: 36px 0 80px; } .product-layout { display: grid; grid-template-columns: 1.25fr 1fr; gap: 64px; align-items: start; } .product-gallery { position: sticky; top: 100px; } .gallery-main { aspect-ratio: 4 / 5; overflow: hidden; background: var(--cream); margin-bottom: 12px; } .gallery-main img { width: 100%; height: 100%; object-fit: cover; } .gallery-thumbs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; } .gallery-thumb { aspect-ratio: 1 / 1; overflow: hidden; background: var(--cream); cursor: pointer; border: 1px solid transparent; transition: border-color var(--transition), opacity var(--transition); opacity: 0.6; } .gallery-thumb img { width: 100%; height: 100%; object-fit: cover; } .gallery-thumb:hover { opacity: 0.9; } .gallery-thumb.active { border-color: var(--raiz); opacity: 1; } .product-info { padding-top: 8px; } .product-info .product-tag { display: inline-block; position: static; font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--terracota); background: transparent; padding: 0; margin-bottom: 14px; } .product-name { font-family: var(--font-serif-cond); font-size: clamp(30px, 3.4vw, 44px); text-transform: uppercase; letter-spacing: 0.08em; color: var(--raiz); line-height: 1.02; margin-bottom: 14px; } .product-price { font-family: var(--font-serif); font-size: 14px; letter-spacing: 0.1em; color: var(--raiz); margin-bottom: 4px; } .product-divider { border: 0; border-top: 1px solid rgba(68,37,16,0.1); margin: 22px 0; } .variant-group { margin-bottom: 20px; } .variant-label { display: block; font-size: 9.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--raiz); opacity: 0.65; margin-bottom: 10px; } .size-selector { display: flex; gap: 8px; flex-wrap: wrap; } .variant-btn { min-width: 56px; padding: 9px 14px; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--raiz); background: transparent; border: 1px solid rgba(68,37,16,0.22); cursor: pointer; transition: all var(--transition); } .variant-btn:hover { border-color: var(--raiz); } .variant-btn.active { background: var(--raiz); color: var(--bespoke); border-color: var(--raiz); } .color-selector { display: flex; gap: 10px; flex-wrap: wrap; } .color-btn { width: 24px; height: 24px; border-radius: 50%; border: 1px solid rgba(68,37,16,0.2); cursor: pointer; position: relative; transition: transform var(--transition); } .color-btn:hover { transform: scale(1.1); } .color-btn.active { box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--raiz); } .product-ctas { display: flex; gap: 10px; margin-top: 6px; margin-bottom: 18px; } .product-ctas .btn-primary { flex: 1; padding: 15px 22px; font-size: 11px; letter-spacing: 0.22em; } .btn-wishlist { width: 48px; height: 48px; border: 1px solid rgba(68,37,16,0.22); background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: border-color var(--transition), color var(--transition); color: var(--raiz); flex-shrink: 0; } .btn-wishlist:hover { border-color: var(--terracota); color: var(--terracota); } .btn-wishlist svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.5; } .product-shipping-note { display: flex; align-items: center; gap: 10px; font-size: 10px; letter-spacing: 0.1em; color: var(--raiz); opacity: 0.68; padding: 14px 0; border-top: 1px solid rgba(68,37,16,0.08); border-bottom: 1px solid rgba(68,37,16,0.08); margin-bottom: 22px; } .inline-icon { width: 16px; height: 16px; stroke: var(--granada); fill: none; stroke-width: 1.4; flex-shrink: 0; } .product-accordion { margin-top: 6px; } .product-accordion .accordion-item { border-bottom: 1px solid rgba(68,37,16,0.1); } .product-accordion .accordion-item:first-child { border-top: 1px solid rgba(68,37,16,0.1); } .accordion-trigger { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; padding: 16px 0; font-family: var(--font-serif); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--raiz); } .accordion-trigger::-webkit-details-marker { display: none; } .accordion-chevron { width: 14px; height: 14px; stroke: var(--raiz); fill: none; stroke-width: 1.5; transition: transform var(--transition); flex-shrink: 0; opacity: 0.6; } details[open] .accordion-chevron { transform: rotate(180deg); } .accordion-body { padding: 0 0 18px; font-size: 10.5px; letter-spacing: 0.05em; line-height: 2; color: var(--raiz); opacity: 0.78; } .accordion-body p { max-width: none; } .crosssell-section { background: var(--cream); padding: 70px 0 80px; /* sin margin-top — la franja blanca venía de aquí */ } /* Sutil divisor entre reviews y crosssell (ambas cream) — usa borde fino terracota */ .reviews-section + .crosssell-section::before { content: ''; display: block; width: 36px; height: 1px; background: var(--terracota); opacity: 0.4; margin: 0 auto 50px; } .section-title { font-family: var(--font-serif-cond); font-size: clamp(24px, 3vw, 38px); text-transform: uppercase; letter-spacing: 0.12em; color: var(--raiz); margin-bottom: 36px; line-height: 1; } .section-title em { font-family: 'NewIconScript', cursive; font-style: normal; font-size: 1.6em; letter-spacing: 0; text-transform: none; color: var(--terracota); display: inline-block; margin-left: 6px; vertical-align: -8px; } .section-title--center { text-align: center; } /* Heading 2-líneas (serif + script) — versión para producto.html alineada con el estilo del resto de la web (Tus Momentos, Esencia, Mapa). Reemplaza el patrón Italic antiguo por + . */ .section-title.reviews-heading { display: flex; flex-direction: column; align-items: center; gap: 4px; line-height: 1; margin-bottom: 40px; font-family: var(--font-serif); } .section-title.reviews-heading .serif { font-family: var(--font-serif); font-size: clamp(28px, 3.4vw, 44px); font-weight: 300; letter-spacing: 0.14em; text-transform: uppercase; color: var(--raiz); } .section-title.reviews-heading .script { font-family: var(--font-script); font-weight: 300; font-size: clamp(46px, 5.6vw, 76px); color: var(--terracota); line-height: 1; margin-top: -2px; letter-spacing: 0.01em; } .crosssell-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; } .navbar-actions svg { width: 18px; height: 18px; } @keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.55; transform: scale(0.85); } } @media (max-width: 980px) { .product-layout { grid-template-columns: 1fr; gap: 32px; } .product-gallery { position: static; } .crosssell-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; } .gallery-thumbs { grid-template-columns: repeat(5, 1fr); } } @media (max-width: 560px) { .crosssell-grid { grid-template-columns: 1fr 1fr; } } /* ========================================================== BESPOKE — estilos específicos (migrados de bespoke.html inline) ========================================================== */ .bespoke-manifesto { background: var(--cream); padding: 110px 80px; display: grid; grid-template-columns: 1fr 1.2fr; gap: 80px; align-items: center; position: relative; } .bespoke-manifesto-flower { position: absolute; right: -120px; top: 50%; transform: translateY(-50%); width: 360px; opacity: 0.07; pointer-events: none; } .bespoke-manifesto-eyebrow { font-size: 9.5px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--granada); margin-bottom: 22px; } .bespoke-manifesto-heading { line-height: 0.9; margin-bottom: 28px; } .bespoke-manifesto-heading .serif { font-family: var(--font-serif-cond); font-size: clamp(28px, 3.6vw, 46px); text-transform: uppercase; letter-spacing: 0.1em; display: block; color: var(--raiz); } .bespoke-manifesto-heading .script { font-family: var(--font-script); font-size: clamp(48px, 6.4vw, 80px); display: block; color: var(--terracota); margin-top: -4px; } .bespoke-manifesto-text { font-size: 11.5px; letter-spacing: 0.06em; line-height: 2.1; color: var(--raiz); opacity: 0.78; max-width: 480px; } .bespoke-manifesto-text + .bespoke-manifesto-text { margin-top: 18px; } .bespoke-manifesto-img { aspect-ratio: 4/5; overflow: hidden; border: 1px solid rgba(68, 37, 16, 0.08); } .bespoke-manifesto-img img { width: 100%; height: 100%; object-fit: cover; } /* PROCESO (Bespoke) — Cliente reunión 07/05: "cambiar fondos, NO usar colores oscuros". Fondo menta con texto raíz para mantener contraste y elegancia editorial. */ .proceso-section { background: var(--menta); padding: 110px 80px; color: var(--raiz); position: relative; overflow: hidden; } .proceso-section .proceso-eyebrow { color: var(--terracota); } .proceso-section .proceso-heading, .proceso-section .proceso-step-title { color: var(--raiz); } /* Fix crítico: el span.script "Proceso" heredaba color menta y quedaba ilegible sobre el fondo menta. Forzar color terracota para mantener jerarquía visual. */ .proceso-section .proceso-heading .script, .proceso-section .proceso-heading span.script { color: var(--terracota) !important; } .proceso-section .proceso-num { color: var(--terracota); opacity: 0.85; } .proceso-section .proceso-step-desc { color: var(--raiz); opacity: 0.82; } .proceso-flower { position: absolute; right: -80px; bottom: -100px; width: 460px; opacity: 0.05; pointer-events: none; } .proceso-head { text-align: center; margin-bottom: 64px; position: relative; z-index: 1; } .proceso-eyebrow { font-size: 10px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--menta); margin-bottom: 18px; } .proceso-heading { font-family: var(--font-serif-cond); font-size: clamp(36px, 4.6vw, 60px); text-transform: uppercase; letter-spacing: 0.08em; color: var(--bespoke); line-height: 0.95; } .proceso-heading .script { font-family: var(--font-script); text-transform: none; letter-spacing: 0; color: var(--menta); font-size: 1.1em; display: inline-block; margin-left: 8px; } .proceso-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 28px; max-width: 1240px; margin: 0 auto; position: relative; z-index: 1; } .proceso-step { text-align: center; padding: 0 6px; } .proceso-num { font-family: var(--font-serif-cond); font-size: 38px; color: var(--menta); letter-spacing: 0.04em; margin-bottom: 14px; opacity: 0.85; } .proceso-num::after { content: ''; display: block; width: 26px; height: 1px; background: var(--menta); margin: 8px auto 0; opacity: 0.5; } .proceso-step-title { font-family: var(--font-serif); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--bespoke); margin-bottom: 12px; } .proceso-step-desc { font-size: 10px; letter-spacing: 0.07em; line-height: 1.95; color: var(--bespoke); opacity: 0.6; } /* EXPECT / TIMELINE (Bespoke) */ .expect-section { background: var(--cream); padding: 100px 80px; display: grid; grid-template-columns: 1.1fr 1fr; gap: 80px; align-items: center; } .expect-img { aspect-ratio: 4/5; overflow: hidden; } .expect-img img { width: 100%; height: 100%; object-fit: cover; } .expect-eyebrow { font-size: 9.5px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--granada); margin-bottom: 22px; } .expect-heading { font-family: var(--font-serif-cond); font-size: clamp(28px, 3.6vw, 46px); text-transform: uppercase; letter-spacing: 0.1em; color: var(--raiz); line-height: 0.95; margin-bottom: 36px; } .expect-heading .script { font-family: var(--font-script); font-size: 1.4em; text-transform: none; letter-spacing: 0; color: var(--terracota); } .expect-list { list-style: none; padding: 0; margin: 0; } .expect-list li { display: grid; grid-template-columns: auto 1fr; gap: 22px; padding: 22px 0; border-bottom: 1px solid rgba(68, 37, 16, 0.1); } .expect-list li:last-child { border-bottom: none; } .expect-list li svg { width: 22px; height: 22px; stroke: var(--terracota); fill: none; stroke-width: 1.4; flex-shrink: 0; margin-top: 4px; } .expect-item-title { font-family: var(--font-serif); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--raiz); margin-bottom: 6px; } .expect-item-desc { font-size: 10.5px; letter-spacing: 0.06em; line-height: 1.85; color: var(--raiz); opacity: 0.7; } /* CONTACTO BESPOKE — versión legacy con clase .bespoke-contact (sin -card) */ .bespoke-contact { background: var(--terracota); padding: 110px 80px; text-align: center; color: var(--cream); position: relative; overflow: hidden; } .bespoke-contact-flower { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 720px; opacity: 0.06; pointer-events: none; } .bespoke-contact-eyebrow { font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--menta); margin-bottom: 22px; position: relative; z-index: 1; } .bespoke-contact-heading { font-family: var(--font-serif-cond); font-size: clamp(40px, 5.5vw, 76px); text-transform: uppercase; letter-spacing: 0.06em; color: var(--cream); line-height: 0.92; margin-bottom: 18px; position: relative; z-index: 1; } .bespoke-contact-heading .script { font-family: var(--font-script); text-transform: none; letter-spacing: 0; color: var(--menta); font-size: 1.05em; display: inline-block; } .bespoke-contact-sub { font-size: 11.5px; letter-spacing: 0.08em; line-height: 2; color: var(--cream); opacity: 0.86; max-width: 540px; margin: 0 auto 44px; position: relative; z-index: 1; } .bespoke-contact-actions { display: inline-flex; gap: 16px; flex-wrap: wrap; justify-content: center; position: relative; z-index: 1; } /* WhatsApp button — usado en bespoke y politicas */ .btn-wa { display: inline-flex; align-items: center; gap: 12px; background: #25D366; color: #fff; padding: 16px 32px; font-family: var(--font-serif); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; border: 0; cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.25s; } .btn-wa:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(0,0,0,0.18); background: #1cb95b; } .btn-wa svg { width: 18px; height: 18px; fill: #fff; } .btn-cream { display: inline-flex; align-items: center; background: transparent; color: var(--cream); padding: 16px 32px; border: 1px solid rgba(244, 238, 223, 0.5); font-family: var(--font-serif); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; cursor: pointer; transition: background 0.25s ease, color 0.25s ease; } .btn-cream:hover { background: var(--cream); color: var(--terracota); } /* FAQ Bespoke */ .bespoke-faq { background: var(--cream); padding: 100px 80px; max-width: 980px; margin: 0 auto; } .bespoke-faq-head { text-align: center; margin-bottom: 60px; } .bespoke-faq-eyebrow { font-size: 9.5px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--granada); margin-bottom: 18px; } .bespoke-faq-heading { font-family: var(--font-serif-cond); font-size: clamp(32px, 4vw, 50px); text-transform: uppercase; letter-spacing: 0.1em; color: var(--raiz); line-height: 0.95; } .bespoke-faq-heading .script { font-family: var(--font-script); text-transform: none; letter-spacing: 0; color: var(--terracota); font-size: 1.4em; } .bespoke-faq details { border-bottom: 1px solid rgba(68, 37, 16, 0.12); padding: 22px 0; } .bespoke-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; font-family: var(--font-serif); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--raiz); } .bespoke-faq summary::-webkit-details-marker { display: none; } .bespoke-faq summary::after { content: '+'; font-size: 22px; font-weight: 200; color: var(--terracota); transition: transform 0.25s ease; } .bespoke-faq details[open] summary::after { content: '−'; } .bespoke-faq-answer { margin-top: 16px; font-size: 11px; letter-spacing: 0.06em; line-height: 2; color: var(--raiz); opacity: 0.75; max-width: 720px; } @media (max-width: 980px) { .bespoke-hero { grid-template-columns: 1fr; } .bespoke-manifesto, .expect-section { grid-template-columns: 1fr; gap: 50px; padding: 70px 30px; } .personaliza-section, .proceso-section, .bespoke-contact, .bespoke-faq { padding: 70px 30px; } .personaliza-grid { grid-template-columns: 1fr; } .proceso-grid { grid-template-columns: repeat(2, 1fr); gap: 36px; } } /* ========================================================== NOSOTROS — versión completa (migrada de nosotros.html inline) Override la versión simple definida arriba. ========================================================== */ .nosotros-hero { position: relative; height: 80vh; overflow: hidden; } .nosotros-hero > img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; opacity: 1; } .nosotros-hero-overlay { position: absolute; inset: 0; background: rgba(24, 17, 10, 0.52); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; } .nosotros-hero-title { line-height: 0.88; } .nosotros-hero-title .serif { font-family: var(--font-serif-cond); font-size: clamp(32px, 5vw, 58px); text-transform: uppercase; letter-spacing: 0.22em; color: var(--bespoke); display: block; opacity: 0.78; } .nosotros-hero-title .script { font-family: var(--font-script); font-size: clamp(72px, 12vw, 148px); color: var(--bespoke); display: block; text-shadow: 0 4px 40px rgba(0,0,0,0.35); margin-top: -8px; } /* Curated with Purpose */ .curated-section { background: var(--cream); display: grid; grid-template-columns: 1fr 1fr; min-height: 580px; } .curated-text { padding: 88px 72px 88px 80px; display: flex; flex-direction: column; justify-content: center; } .curated-eyebrow { font-size: 9.5px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--granada); margin-bottom: 22px; } .curated-heading { line-height: 0.9; margin-bottom: 32px; } .curated-heading .serif { font-family: var(--font-serif-cond); font-size: clamp(28px, 3.5vw, 44px); text-transform: uppercase; letter-spacing: 0.1em; display: block; color: var(--raiz); } .curated-heading .script { font-family: var(--font-script); font-size: clamp(46px, 6vw, 76px); display: block; color: var(--raiz); margin-top: -4px; } .curated-body { font-size: 10.5px; letter-spacing: 0.07em; line-height: 2.1; color: var(--raiz); opacity: 0.75; max-width: 420px; } .curated-img { overflow: hidden; min-height: 580px; } .curated-img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; transition: transform 0.7s ease; } .curated-img:hover img { transform: scale(1.04); } /* Nuestros Valores */ .valores-section { background: #fff; padding: 88px 80px 96px; } .valores-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; margin-top: 56px; } .valor-item { text-align: center; padding: 0 16px; } .valor-ornament { font-family: var(--font-serif-cond); font-size: 28px; letter-spacing: 0.06em; color: var(--terracota); line-height: 1; margin-bottom: 14px; display: inline-block; padding-bottom: 8px; border-bottom: 1px solid rgba(151, 67, 21, 0.4); } .valor-title { font-family: var(--font-serif-cond); font-size: 16px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--raiz); margin-bottom: 16px; } .valor-body { font-size: 10px; letter-spacing: 0.07em; line-height: 2; color: var(--raiz); opacity: 0.65; } .valor-divider { width: 30px; height: 1px; background: var(--menta); margin: 18px auto; } /* Fundadora / Quote */ .fundadora-section { background: var(--terracota); color: var(--cream); padding: 120px 80px; text-align: center; position: relative; overflow: hidden; } .fundadora-flower { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 560px; opacity: 0.07; pointer-events: none; } .fundadora-mark { font-family: var(--font-serif-cond); font-size: 90px; line-height: 0.8; opacity: 0.4; margin-bottom: 10px; position: relative; z-index: 1; } .fundadora-quote { font-family: var(--font-script); font-size: clamp(34px, 5vw, 62px); line-height: 1.1; max-width: 820px; margin: 0 auto 28px; color: var(--cream); position: relative; z-index: 1; } .fundadora-name { font-family: var(--font-serif); font-size: 12px; letter-spacing: 0.28em; text-transform: uppercase; opacity: 0.9; position: relative; z-index: 1; } .fundadora-role { font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.5; margin-top: 6px; position: relative; z-index: 1; } /* Atelier Split */ .atelier-section { background: var(--cream); display: grid; grid-template-columns: 1fr 1.05fr; min-height: 560px; } .atelier-img { overflow: hidden; } .atelier-img img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; } .atelier-text { padding: 88px 72px; display: flex; flex-direction: column; justify-content: center; } .atelier-eyebrow { font-size: 9.5px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--granada); margin-bottom: 22px; } .atelier-heading { line-height: 0.9; margin-bottom: 28px; } .atelier-heading .serif { font-family: var(--font-serif-cond); font-size: clamp(28px, 3.6vw, 46px); text-transform: uppercase; letter-spacing: 0.1em; display: block; color: var(--raiz); } .atelier-heading .script { font-family: var(--font-script); font-size: clamp(48px, 6.4vw, 80px); display: block; color: var(--terracota); margin-top: -4px; } .atelier-body { font-size: 11px; letter-spacing: 0.07em; line-height: 2.1; color: var(--raiz); opacity: 0.78; max-width: 460px; margin-bottom: 14px; } .atelier-details { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px 28px; margin-top: 36px; } .atelier-details > div { background: rgba(244, 238, 223, 0.55); border-radius: 4px; padding: 18px 20px; border: 1px solid rgba(68, 37, 16, 0.06); } .atelier-detail-label { font-family: var(--font-serif); font-size: 12px; letter-spacing: 0.20em; text-transform: uppercase; color: var(--terracota); margin-bottom: 10px; font-weight: 500; } .atelier-detail-value { font-size: 14px; letter-spacing: 0.04em; line-height: 1.65; color: var(--raiz); opacity: 0.92; } .atelier-detail-value a { color: var(--raiz); text-decoration: none; border-bottom: 1px solid rgba(68, 37, 16, 0.3); } .atelier-detail-value a:hover { border-bottom-color: var(--terracota); color: var(--terracota); } @media (max-width: 640px) { .atelier-details { grid-template-columns: 1fr; gap: 14px; margin-top: 28px; } .atelier-details > div { padding: 14px 16px; } .atelier-detail-value { font-size: 13px; } } /* Editorial Fotos 2x2 */ .editorial-fotos { display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 440px); } .editorial-fotos-item { overflow: hidden; position: relative; } .editorial-fotos-item img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; transition: transform 0.6s ease; } .editorial-fotos-item:hover img { transform: scale(1.05); } /* Trust Bar (override para nosotros) */ .nosotros-trust-bar { background: var(--cream); display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid rgba(68,37,16,0.08); } .nosotros-trust-bar .trust-item { display: flex; align-items: center; gap: 14px; padding: 22px 28px; border-right: 1px solid rgba(68,37,16,0.08); } .nosotros-trust-bar .trust-item:last-child { border-right: none; } .nosotros-trust-bar .trust-item svg { width: 22px; height: 22px; stroke: var(--granada); fill: none; stroke-width: 1.4; flex-shrink: 0; } .nosotros-trust-bar .trust-item-label { font-family: var(--font-serif); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--raiz); margin-bottom: 2px; } .nosotros-trust-bar .trust-item-sub { font-size: 9px; letter-spacing: 0.06em; color: var(--raiz); opacity: 0.6; } /* Timeline */ .timeline-section { background: #fff; padding: 100px 80px 120px; } .timeline-head { text-align: center; margin-bottom: 72px; line-height: 0.9; } .timeline-head .mono { font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--granada); margin-bottom: 16px; } .timeline-head .serif { font-family: var(--font-serif-cond); font-size: clamp(30px, 4vw, 50px); text-transform: uppercase; letter-spacing: 0.1em; color: var(--raiz); display: block; } .timeline-head .script { font-family: var(--font-script); font-size: clamp(54px, 8vw, 92px); display: block; color: var(--terracota); margin-top: -6px; } .timeline-rail { position: relative; max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 36px; } .timeline-rail::before { content: ''; position: absolute; top: 14px; left: 6%; right: 6%; height: 1px; background: rgba(68,37,16,0.15); } .timeline-point { text-align: center; position: relative; } .timeline-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--terracota); margin: 0 auto 24px; position: relative; z-index: 1; box-shadow: 0 0 0 5px var(--cream); } .timeline-year { font-family: var(--font-serif-cond); font-size: 28px; letter-spacing: 0.1em; color: var(--raiz); margin-bottom: 10px; } .timeline-title { font-family: var(--font-serif); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--raiz); margin-bottom: 10px; } .timeline-text { font-size: 10px; letter-spacing: 0.07em; line-height: 1.9; color: var(--raiz); opacity: 0.68; padding: 0 10px; } /* CTA Final Nosotros */ .nosotros-cta { position: relative; min-height: 62vh; overflow: hidden; display: flex; align-items: center; justify-content: center; } .nosotros-cta-bg { position: absolute; inset: 0; z-index: 0; } .nosotros-cta-bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.6; filter: brightness(0.5); } .nosotros-cta-content { position: relative; z-index: 1; text-align: center; padding: 80px 40px; color: var(--cream); } .nosotros-cta-eyebrow { font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--menta); margin-bottom: 18px; } .nosotros-cta-heading { /* Clienta 20/05 PM: "Descubre tu" se veía MÁS GRUESO que otros headings. NewIconSerif Regular renderea con weight equivalente a ~500 visual. Solución: NewIconSerifCond (condensada delgada) para que sea fina como los demás. */ font-family: var(--font-serif-cond); font-weight: 300; font-size: clamp(36px, 5vw, 68px); text-transform: uppercase; letter-spacing: 0.08em; color: var(--cream); line-height: 0.95; margin-bottom: 16px; } .nosotros-cta-heading .script { font-family: var(--font-script); text-transform: none; letter-spacing: 0; color: var(--menta); font-size: 1.1em; display: inline-block; font-weight: 400; } .nosotros-cta-text { font-size: 11.5px; letter-spacing: 0.08em; line-height: 2; color: var(--cream); opacity: 0.85; max-width: 540px; margin: 0 auto 32px; } .nosotros-cta-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; } @media (max-width: 980px) { .atelier-section { grid-template-columns: 1fr; } .atelier-text { padding: 50px 30px; } .timeline-rail { grid-template-columns: 1fr 1fr; gap: 40px; } .timeline-rail::before { display: none; } .fundadora-section, .timeline-section { padding: 70px 30px; } } /* ========================================================== POLÍTICAS — accordion
/ (migrado de inline) ========================================================== */ .politicas-hero { background: var(--cream); padding: 160px 80px 72px; text-align: center; } .politicas-hero-title { line-height: 0.88; } .politicas-hero-title .serif { font-family: var(--font-serif-cond); font-size: clamp(28px, 4vw, 52px); text-transform: uppercase; letter-spacing: 0.2em; color: var(--raiz); opacity: 0.55; display: block; } .politicas-hero-title .script { font-family: var(--font-script); font-size: clamp(60px, 10vw, 120px); color: var(--raiz); display: block; margin-top: -4px; } .politicas-hero-sub { font-size: 10px; letter-spacing: 0.14em; color: var(--raiz); opacity: 0.55; margin-top: 18px; text-transform: uppercase; } .politicas-nav { background: #fff; border-bottom: 1px solid rgba(68,37,16,0.1); position: sticky; top: 0; z-index: 100; display: flex; justify-content: center; gap: 0; } .politicas-nav a { font-size: 9.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--raiz); opacity: 0.5; padding: 18px 36px; border-bottom: 2px solid transparent; transition: opacity 0.2s, border-color 0.2s; font-family: 'RobotoMono', monospace; } .politicas-nav a:hover { opacity: 1; border-bottom-color: var(--menta); } .politica-section { max-width: 860px; margin: 0 auto; padding: 72px 40px 80px; } .politica-section + .politica-section { border-top: 1px solid rgba(68,37,16,0.08); } .politica-section-header { margin-bottom: 40px; } .politica-section-eyebrow { font-size: 9px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--granada); margin-bottom: 10px; } .politica-section-title { line-height: 0.9; } .politica-section-title .serif { font-family: var(--font-serif-cond); font-size: clamp(20px, 2.5vw, 32px); text-transform: uppercase; letter-spacing: 0.14em; color: var(--raiz); display: block; opacity: 0.55; } .politica-section-title .script { font-family: var(--font-script); font-size: clamp(38px, 5.5vw, 64px); color: var(--raiz); display: block; margin-top: -2px; } /* Accordion
/ nativos */ .accordion-list { display: flex; flex-direction: column; gap: 0; } .accordion-item { border-bottom: 1px solid rgba(68,37,16,0.1); } .accordion-list > .accordion-item:first-child { border-top: 1px solid rgba(68,37,16,0.1); } .accordion-header { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 20px 0; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--raiz); cursor: pointer; list-style: none; font-family: 'RobotoMono', monospace; transition: color 0.2s; } .accordion-header::-webkit-details-marker { display: none; } .accordion-header:hover { color: var(--terracota); } .accordion-icon { width: 18px; height: 18px; flex-shrink: 0; stroke: currentColor; fill: none; stroke-width: 1.5; transition: transform 0.3s ease; font-size: inherit; opacity: 1; } .accordion-item[open] .accordion-icon { transform: rotate(45deg); } .accordion-body { overflow: hidden; animation: acc-fade 0.35s ease; max-height: none; padding: 0; } @keyframes acc-fade { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } .accordion-body-inner { padding: 0 0 22px 0; font-size: 10.5px; letter-spacing: 0.07em; line-height: 2; color: var(--raiz); opacity: 0.7; } .accordion-body-inner strong { color: var(--raiz); opacity: 1; font-weight: 600; } /* CTA Bottom Politicas */ .politicas-cta { background: var(--cream); text-align: center; padding: 72px 40px 80px; border-top: 1px solid rgba(68,37,16,0.08); } .politicas-cta-heading { line-height: 0.9; margin-bottom: 28px; } .politicas-cta-heading .serif { font-family: var(--font-serif-cond); font-size: clamp(18px, 2vw, 26px); text-transform: uppercase; letter-spacing: 0.18em; color: var(--raiz); opacity: 0.55; display: block; } .politicas-cta-heading .script { font-family: var(--font-script); font-size: clamp(36px, 5vw, 58px); color: var(--raiz); display: block; margin-top: -2px; } .politicas-cta-sub { font-size: 10px; letter-spacing: 0.1em; color: var(--raiz); opacity: 0.6; margin-bottom: 28px; } /* ========================================================== PRODUCTO — Sección Proceso Artesanal (Fase 4) ========================================================== */ .product-process-section { background: var(--cream); padding: 80px 0 90px; border-top: 1px solid rgba(68,37,16,0.08); } .product-process-head { text-align: center; max-width: 720px; margin: 0 auto 56px; } .product-process-eyebrow { font-size: 9.5px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--granada); margin-bottom: 14px; } .product-process-sub { font-size: 11px; letter-spacing: 0.06em; line-height: 2; color: var(--raiz); opacity: 0.72; max-width: 520px; margin: 18px auto 0; } .product-process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; max-width: 1100px; margin: 0 auto; } .product-process-step { text-align: center; padding: 0 12px; position: relative; } .product-process-step:not(:last-child)::after { content: ''; position: absolute; top: 18px; right: -18px; width: 36px; height: 1px; background: rgba(151, 67, 21, 0.3); } .product-process-num { font-family: var(--font-serif-cond); color: var(--terracota); line-height: 1; margin-bottom: 22px; /* Clienta 13/05: el círculo del número estaba muy chico y el num lo sobrepasaba. Aumentar círculo a 64px y mantener el num legíble adentro. */ width: 64px; height: 64px; border: 1.5px solid var(--terracota); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-left: auto; margin-right: auto; font-size: 22px; letter-spacing: 0.04em; background: var(--cream); position: relative; z-index: 1; } .product-process-title { font-family: var(--font-serif); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--raiz); margin-bottom: 12px; } .product-process-desc { font-size: 10px; letter-spacing: 0.06em; line-height: 1.95; color: var(--raiz); opacity: 0.68; } @media (max-width: 768px) { .product-process-grid { grid-template-columns: repeat(2, 1fr); gap: 32px 20px; } .product-process-step::after { display: none !important; } } /* ========================================================== COLECCIONES — Shop by Collection (editorial blocks) ========================================================== */ .collections-editorial { display: flex !important; flex-direction: column; gap: 100px; max-width: none !important; } .collection-block { display: grid; grid-template-columns: 1.05fr 1fr; gap: 64px; align-items: center; max-width: 1240px; margin: 0 auto; padding: 0 40px; } .collection-block--reverse { grid-template-columns: 1fr 1.05fr; } .collection-block--reverse .collection-block-img { order: 2; } .collection-block--reverse .collection-block-content { order: 1; padding-right: 32px; padding-left: 0; } .collection-block-img { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--cream); display: block; } .collection-block-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1); } .collection-block-img:hover img { transform: scale(1.04); } .collection-block-img .product-tag { position: absolute; top: 18px; left: 18px; background: var(--cream); color: var(--terracota); font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase; padding: 6px 14px; font-family: var(--font-serif); } .collection-block-content { padding-left: 32px; } .collection-block-eyebrow { font-size: 9.5px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--granada); margin-bottom: 18px; } .collection-block-title { line-height: 0.88; margin-bottom: 24px; } .collection-block-title .serif { font-family: var(--font-serif-cond); font-size: clamp(20px, 2.3vw, 30px); text-transform: uppercase; letter-spacing: 0.18em; color: var(--raiz); opacity: 0.55; display: block; margin-bottom: 4px; } .collection-block-title .script { font-family: var(--font-script); font-size: clamp(56px, 7vw, 96px); color: var(--raiz); display: block; } .collection-block-divider { width: 36px; height: 1px; background: var(--terracota); opacity: 0.5; margin: 0 0 24px; } .collection-block-desc { font-size: 12px; letter-spacing: 0.06em; line-height: 2; color: var(--raiz); opacity: 0.75; max-width: 440px; margin-bottom: 22px; } .collection-block-price { font-family: var(--font-serif); font-size: 13px; letter-spacing: 0.12em; color: var(--raiz); margin-bottom: 28px; } .collection-block-actions { display: flex; gap: 14px; flex-wrap: wrap; } @media (max-width: 900px) { .collection-block, .collection-block--reverse { grid-template-columns: 1fr; gap: 32px; padding: 0 24px; } .collection-block--reverse .collection-block-img { order: 0; } .collection-block--reverse .collection-block-content { order: 0; padding-left: 0; padding-right: 0; } .collection-block-content { padding-left: 0; } .collections-editorial { gap: 70px; } } .collections-empty { text-align: center; padding: 80px 20px; color: var(--raiz); opacity: 0.7; } .collections-empty .script { font-family: var(--font-script); font-size: 48px; color: var(--terracota); margin-bottom: 14px; } .collections-empty p:last-child { font-size: 11px; letter-spacing: 0.12em; opacity: 0.7; } /* ========================================================== FILTROS EXPANDIDOS — colecciones.html (línea + talla + color) Estilo editorial inspirado en Catbird/Loreta/Mejuri ========================================================== */ .collections-hero__subtitle { font-family: 'RobotoMono', monospace; font-size: 11px; letter-spacing: 0.16em; color: var(--bespoke); opacity: 0.78; margin-top: 16px; max-width: 540px; margin-left: auto; margin-right: auto; text-align: center; } .collections-filters { background: var(--cream); padding: 56px 40px 32px; position: relative; } .collections-filters::before { content: ''; position: absolute; top: 36px; left: 50%; transform: translateX(-50%); width: 36px; height: 1px; background: var(--terracota); opacity: 0.5; } .filters-section { display: flex; align-items: center; justify-content: center; gap: 32px; padding: 16px 0; flex-wrap: wrap; max-width: 1100px; margin: 0 auto; } .filters-section + .filters-section { border-top: 1px solid rgba(68,37,16,0.06); } .filters-label { font-family: var(--font-serif); font-size: 9px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--granada); opacity: 0.85; min-width: 60px; text-align: right; } .filters-bar { display: flex; gap: 0; flex-wrap: wrap; align-items: center; } /* Filter buttons — estilo underline editorial (no pills) */ .filter-btn { font-family: var(--font-serif); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--raiz); background: transparent; border: none; border-bottom: 1px solid transparent; padding: 10px 18px; cursor: pointer; opacity: 0.55; transition: opacity 0.25s ease, border-color 0.25s ease, color 0.25s ease; position: relative; } .filter-btn:hover { opacity: 0.95; } .filter-btn.filter-btn--active { opacity: 1; color: var(--terracota); border-bottom-color: var(--terracota); background: transparent; } /* Color swatches — círculos elegantes con tooltip hover */ .filters-bar--swatches { gap: 10px; } .filter-swatch { width: 26px; height: 26px; border-radius: 50%; border: 1px solid rgba(68,37,16,0.15); cursor: pointer; position: relative; transition: transform 0.25s ease, box-shadow 0.25s ease; padding: 0; display: inline-flex; align-items: center; justify-content: center; } .filter-swatch:hover { transform: scale(1.18); box-shadow: 0 4px 12px rgba(0,0,0,0.1); } .filter-swatch::after { content: attr(title); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); white-space: nowrap; font-family: 'RobotoMono', monospace; font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; background: var(--raiz); color: var(--cream); padding: 5px 10px; opacity: 0; pointer-events: none; transition: opacity 0.2s; z-index: 5; } .filter-swatch:hover::after { opacity: 1; } .filter-swatch.filter-btn--active { box-shadow: 0 0 0 2px var(--cream), 0 0 0 3px var(--terracota); transform: scale(1.1); } .filter-swatch--all { background: transparent; color: var(--raiz); border-style: dashed; } .filter-swatch--all svg { stroke: var(--raiz); fill: none; } .filters-summary { display: flex; justify-content: center; align-items: center; gap: 28px; margin-top: 24px; padding-top: 20px; border-top: 1px solid rgba(68,37,16,0.06); max-width: 1100px; margin-left: auto; margin-right: auto; } .filters-count { font-family: var(--font-serif); font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--raiz); opacity: 0.6; font-style: italic; } .filters-reset { display: none; align-items: center; gap: 6px; background: transparent; border: none; border-bottom: 1px solid var(--terracota); font-family: var(--font-serif); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--terracota); padding: 4px 2px; cursor: pointer; transition: opacity 0.2s; } .filters-reset:hover { opacity: 0.7; } /* ========================================================== RESPONSIVE — mobile/tablet (hamburger menu + grids) ========================================================== */ /* Mobile menu toggle button (hidden by default, visible <900px) */ .navbar-mobile-toggle { display: none; background: transparent; border: none; cursor: pointer; padding: 8px; /* INICIAL: café oscuro (igual que el resto de elementos del navbar transparente) */ color: var(--raiz); z-index: 201; transition: color 0.3s ease; } .navbar--scrolled .navbar-mobile-toggle { /* SCROLLED: crema (sobre fondo dark del navbar) */ color: var(--bespoke); } .navbar-mobile-toggle svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.5; } @media (max-width: 900px) { .navbar { grid-template-columns: auto 1fr auto; padding: 0 24px; } .navbar-links { position: fixed; top: 0; right: -100%; width: 80vw; max-width: 320px; height: 100vh; background: rgba(24,17,10,0.97); backdrop-filter: blur(20px); flex-direction: column; align-items: flex-start; gap: 0; padding: 96px 32px 32px; transition: right 0.35s cubic-bezier(0.4, 0, 0.2, 1); z-index: 199; } .navbar-links.is-open { right: 0; } .navbar-links li { width: 100%; border-bottom: 1px solid rgba(244, 238, 223, 0.08); } .navbar-links a { display: block; padding: 18px 0; font-size: 11px; letter-spacing: 0.2em; } .navbar-mobile-toggle { display: inline-flex; align-items: center; justify-content: center; } .navbar-actions { gap: 12px; } .navbar-actions svg { width: 20px; height: 20px; } /* Hero responsive */ .hero { padding: 110px 20px 60px; min-height: 90vh; } .hero-cols { grid-template-columns: 1fr 1fr 1fr; gap: 8px; max-width: 100%; } .hero-text-overlay { padding: 0 20px; } /* Filtros stack vertical en mobile */ .filters-section { grid-template-columns: 1fr; gap: 10px; padding: 14px 0; } .filters-label { font-size: 9px; } .filter-swatch { width: 32px; height: 32px; } /* Section paddings */ .new-in, .editorial-grid, .nature-section, .cta-editorial, section[style*="padding:80px 80px"], section[style*="padding:72px 80px"] { padding: 60px 24px !important; } .editorial-grid { grid-template-columns: 1fr !important; } .nature-grid { grid-template-columns: 1fr 1fr !important; } /* Cart layout */ .cart-layout { grid-template-columns: 1fr; gap: 32px; padding: 40px 24px 60px; } /* Footer */ .footer { grid-template-columns: 1fr 1fr; padding: 60px 24px 40px; gap: 32px; } .footer > div:first-of-type { grid-column: 1 / -1; } /* Producto layout responsive ya cubierto en .product-layout @media 980 */ /* Trust bar mobile */ .trust-bar { grid-template-columns: 1fr 1fr; } /* Section title sizes mobile */ .section-header .serif { font-size: 28px !important; } .section-header .script { font-size: 38px !important; } } @media (max-width: 540px) { .hero-cols { grid-template-columns: 1fr; gap: 14px; } .nature-grid, .footer, .trust-bar { grid-template-columns: 1fr !important; } .footer { text-align: center; } .footer-col-title, .footer-tagline { text-align: left; } .editorial-fotos { grid-template-rows: repeat(4, 280px) !important; grid-template-columns: 1fr !important; } .timeline-rail { grid-template-columns: 1fr !important; gap: 32px !important; } .product-process-grid { grid-template-columns: 1fr 1fr !important; } .collection-block-actions { flex-direction: column; align-items: stretch; } .collection-block-actions .btn-primary, .collection-block-actions .btn-outline { width: 100%; text-align: center; } } /* ========================================================== ORNAMENTOS DE LA CLIENTA — marco encaje + franja seamless ========================================================== */ /* Franja seamless encaje — blanco puro por default, sin gaps entre repeticiones. Se usa el SVG dentro de un wrapper con overflow:hidden + flexbox para garantizar que las repeticiones queden conectadas. Aspect viewBox: 871.91/287.81 = 3.029 */ .ornament-strip { display: flex; /* FULLWIDTH GUARANTEED: usa 100vw + negative margin trick para extender fuera de cualquier container padre (Bootstrap col, page wrapper, etc.) */ width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; height: 80px; overflow: hidden; pointer-events: none; z-index: 5; background-color: transparent; background-image: url('../assets/ornamentos/franja-encaje.svg'); background-repeat: repeat-x; background-position: left center; /* background-size con altura fija + width calculado MANTENIENDO el aspect ratio exacto del viewBox */ background-size: 242.3px 80px; /* anti-gap: forzamos pixel-perfect rendering */ image-rendering: -webkit-optimize-contrast; image-rendering: crisp-edges; } .ornament-strip--terracota { background-image: url('../assets/ornamentos/franja-encaje-terracota.svg'); } .ornament-strip--granada { background-image: url('../assets/ornamentos/franja-encaje-granada.svg'); } .ornament-strip--raiz { background-image: url('../assets/ornamentos/franja-encaje-raiz.svg'); } .ornament-strip--white { background-image: url('../assets/ornamentos/franja-encaje.svg'); } .ornament-strip--lg { height: 110px; background-size: 333.2px 110px; /* 110 × 3.029 */ } .ornament-strip--sm { height: 56px; background-size: 169.6px 56px; /* 56 × 3.029 */ } .ornament-strip--overlap { margin-top: -40px; margin-bottom: -40px; position: relative; } .ornament-strip--lg.ornament-strip--overlap { margin-top: -55px; margin-bottom: -55px; } .ornament-strip--tilt { /* Inclinación leve. Scale 1.15 cubre las esquinas cuando rota -1.8deg y combina con el width:100vw + negative margin para sangrado lateral correcto. */ transform: rotate(-1.8deg) scale(1.15); transform-origin: center; } /* Marco encaje — wrapping decorativo en CTAs editoriales */ .ornament-frame-block { position: relative; padding: 90px 80px; margin: 80px auto; max-width: 1100px; text-align: center; background: var(--cream); } .ornament-frame-block::before { content: ''; position: absolute; inset: 0; background-image: url('../assets/ornamentos/marco-encaje.svg'); background-repeat: no-repeat; background-position: center; background-size: 100% 100%; pointer-events: none; z-index: 0; } .ornament-frame-block > * { position: relative; z-index: 1; } @media (max-width: 768px) { .ornament-frame-block { padding: 60px 32px; margin: 50px 20px; } .ornament-strip { height: 40px; background-size: auto 40px; } .ornament-strip--lg { height: 56px; background-size: auto 56px; } } /* CTA Framed Section — foto editorial con marco encaje + texto al lado (replica mockup) */ /* Franja seamless lace blanca, inclinada, decorativa antes de la sección (mockup-fiel) */ .cta-lace-strip { position: relative; background: var(--bespoke); height: 110px; overflow: hidden; margin-top: -1px; } .cta-lace-strip img { position: absolute; width: 130%; left: -15%; top: 50%; transform: translateY(-50%) rotate(-1.6deg); pointer-events: none; filter: brightness(2.1) saturate(0); opacity: 0.92; } .cta-framed-section { background: var(--bespoke); padding: 80px 80px 110px; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; max-width: 1380px; margin: 0 auto; position: relative; } .cta-framed-photo { position: relative; /* Clienta 12/05 (3ª iteración): foto CUADRADA para que el marco encaje (SVG es 1:1). Con object-fit cover + object-position se mantienen las caras visibles. */ aspect-ratio: 1 / 1; max-width: 580px; width: 100%; margin: 0 auto; } .cta-framed-photo-img { object-position: center 25%; } .cta-framed-photo-img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; /* Mockup: la modelo mira HACIA EL TEXTO (derecha). Espejo horizontal. */ transform: scaleX(-1); z-index: 1; } .cta-framed-marco { position: absolute; /* Foto cuadrada 1:1 + marco SVG cuadrado 1:1. inset -3% extiende el marco 3% más allá del edge → la línea del marco queda EN el borde de la foto (parte cubre foto, parte cubre fondo). */ inset: -3%; width: 106%; height: 106%; pointer-events: none; z-index: 2; } .cta-framed-content { padding-right: 32px; } .cta-framed-eyebrow { font-family: var(--font-serif); font-weight: 400; font-size: clamp(20px, 2.4vw, 30px); color: var(--menta); text-transform: uppercase; letter-spacing: 0.10em; display: block; margin-bottom: 4px; line-height: 1.1; } .cta-framed-content .cta-eyebrow { font-family: var(--font-script); font-size: 32px; color: var(--terracota); display: block; margin-bottom: 8px; line-height: 1; } .cta-framed-heading { line-height: 0.92; margin-bottom: 24px; } .cta-framed-heading .serif { /* Mockup: serif uppercase verde menta */ font-family: var(--font-serif); font-size: clamp(28px, 3.6vw, 48px); text-transform: uppercase; letter-spacing: 0.1em; color: var(--menta); display: block; opacity: 1; } .cta-framed-heading .script { /* Mockup: script GIGANTE color terracota */ font-family: var(--font-script); font-size: clamp(58px, 9vw, 130px); color: var(--terracota); display: block; margin-top: -8px; line-height: 1; } /* ===== HEADING BALANCEADO (Tus Momentos) ===== Clienta 12/05: las 3 líneas deben tener el MISMO LARGO visual, la MISMA fuente (sin gruesa+delgada) y "Más Memorables" en UNA línea. Solución: - Las 2 líneas serif tienen el mismo tamaño exacto y peso 300 - La línea script "Más Memorables" tiene tamaño ajustado para coincidir en ancho - white-space nowrap evita salto de línea */ .cta-framed-heading.cta-framed-heading--balanced { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; line-height: 1; margin-bottom: 28px; } /* Clienta 13/05 (4ª corrección): el texto serif de "Tus Blooms en Tus Momentos" debe ir en color MENTA (no raíz/café). */ .cta-framed-heading--balanced .serif { font-family: var(--font-serif); font-size: clamp(44px, 5.2vw, 72px); font-weight: 300; text-transform: uppercase; letter-spacing: 0.16em; color: var(--menta); white-space: nowrap; line-height: 1.02; } .cta-framed-heading--balanced .script { font-family: var(--font-script); font-size: clamp(48px, 5vw, 72px); font-weight: 300; color: var(--terracota); white-space: nowrap; line-height: 1; letter-spacing: 0.01em; margin-top: 0; } @media (max-width: 900px) { .cta-framed-heading--balanced .serif { font-size: clamp(28px, 6.5vw, 36px); letter-spacing: 0.12em; } .cta-framed-heading--balanced .script { font-size: clamp(40px, 10vw, 52px); } } .cta-framed-text { font-size: 12px; letter-spacing: 0.06em; line-height: 2; color: var(--raiz); opacity: 0.78; max-width: 460px; margin-bottom: 32px; } @media (max-width: 900px) { .cta-framed-section { grid-template-columns: 1fr; padding: 70px 24px; gap: 48px; } .cta-framed-content { padding-right: 0; text-align: center; } .cta-framed-text { margin-left: auto; margin-right: auto; } .cta-framed-marco { inset: -4%; width: 108%; height: 108%; } } /* =========================================================== BESPOKE V2 — secciones rediseñadas fieles al mockup =========================================================== */ /* HERO BESPOKE — foto sepia + serif gigante terracota + sub + botón */ .bespoke-hero--mockup { position: relative; display: block; height: 88vh; min-height: 580px; padding: 0; overflow: hidden; background: var(--bespoke); } .bespoke-hero--mockup .bespoke-hero-bg { position: absolute; inset: 0; z-index: 0; } .bespoke-hero--mockup .bespoke-hero-bg img, .bespoke-hero--mockup .bespoke-hero-bg video { width: 100%; height: 100%; object-fit: cover; object-position: 30% center; /* Ken-burns suave (solo en img poster — video usa su propio movimiento) */ filter: sepia(0.20) saturate(0.85) brightness(1.05) contrast(0.96); } .bespoke-hero--mockup .bespoke-hero-bg img { animation: bespokeHeroPan 28s ease-in-out infinite alternate; } .bespoke-hero--mockup::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(244,238,223,0.30) 0%, rgba(244,238,223,0.0) 45%, rgba(244,238,223,0.18) 100%), linear-gradient(180deg, rgba(151,67,21,0.06) 0%, rgba(151,67,21,0.0) 50%, rgba(244,238,223,0.40) 100%); pointer-events: none; } .bespoke-hero--mockup .bespoke-hero-content { position: absolute; z-index: 2; right: clamp(24px, 6vw, 100px); top: 50%; transform: translateY(-50%); text-align: right; max-width: 720px; } .bespoke-hero-h1 { font-family: var(--font-serif); font-size: clamp(56px, 9vw, 138px); text-transform: uppercase; letter-spacing: 0.02em; line-height: 0.96; color: var(--terracota); margin: 0 0 18px; font-weight: 400; text-shadow: 0 2px 18px rgba(244,238,223,0.55); } .bespoke-hero-tagline { font-family: var(--font-mono); font-size: clamp(13px, 1.2vw, 16px); letter-spacing: 0.12em; color: var(--terracota); margin: 0 0 28px; opacity: 0.92; } @keyframes bespokeHeroPan { from { transform: scale(1.02) translateX(0); } to { transform: scale(1.10) translateX(-1.5%); } } @media (max-width: 768px) { .bespoke-hero--mockup .bespoke-hero-content { right: 24px; left: 24px; text-align: center; transform: translateY(-40%); top: 50%; } } /* SECCIÓN PLATOS PERSONALIZA — 3 platos vintage editables (mockup-fiel V2) */ .bespoke-platos-section { background: var(--bespoke); padding: clamp(48px, 7vw, 96px) clamp(20px, 5vw, 80px) clamp(60px, 8vw, 110px); text-align: center; } .bespoke-platos-title { font-family: var(--font-serif); font-size: clamp(28px, 4.6vw, 60px); text-transform: uppercase; letter-spacing: 0.16em; color: var(--menta); font-weight: 400; margin: 0 0 18px; line-height: 1.1; } .bespoke-platos-sub { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em; line-height: 1.8; color: var(--raiz); opacity: 0.7; max-width: 580px; margin: 0 auto 64px; } /* PERSONALIZA AQUÍ TUS BLOOMS — Concepto RESTAURADO clienta 12/05: Plato PNG (base) + Bloom PNG cutout flotando encima + nombre debajo del plato. Grid 4 platos, sin caja negra, sin "Earrings" falso. */ .bespoke-platos-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 3vw, 48px); max-width: 1320px; margin: 0 auto; align-items: end; padding: 0 clamp(0px, 2vw, 40px); } .bespoke-plato { position: relative; width: 100%; aspect-ratio: 1 / 1; display: flex; flex-direction: column; align-items: center; } /* Plato SVG como base — toma todo el cuadrado */ .bespoke-plato-platter { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 16px 22px rgba(68,37,16,0.16)); } /* Bloom cutout PNG flotando sobre el centro del plato */ .bespoke-plato-product { position: absolute; z-index: 2; top: 50%; left: 50%; transform: translate(-50%, -50%); /* Clienta 20/05 PM: blooms deben verse MÁS GRANDES sobre el plato (subir de 70% a 88%). object-fit contain preserva proporción independiente de la orientación del bloom original. */ width: 88%; height: 88%; object-fit: contain; object-position: center; filter: drop-shadow(0 6px 10px rgba(24,17,10,0.20)); } /* Nombre debajo del plato — serif terracota mayúscula, una línea */ .bespoke-plato-label { position: absolute; bottom: -32px; left: 0; right: 0; text-align: center; font-family: var(--font-serif); font-weight: 400; font-size: clamp(11px, 1.1vw, 14px); letter-spacing: 0.22em; text-transform: uppercase; color: var(--terracota); line-height: 1; pointer-events: none; } @media (max-width: 900px) { .bespoke-platos-grid { grid-template-columns: repeat(2, 1fr); gap: 56px 24px; } } @media (max-width: 480px) { .bespoke-platos-grid { grid-template-columns: 1fr; gap: 48px; max-width: 320px; } } .bespoke-platos-note { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; color: var(--raiz); opacity: 0.5; margin: 64px auto 0; max-width: 720px; } .bespoke-platos-note code { background: rgba(151,67,21,0.08); padding: 2px 8px; border-radius: 2px; color: var(--terracota); font-size: 0.95em; } .bespoke-platos-cta { margin-top: 36px; } @media (max-width: 800px) { .bespoke-platos-grid { grid-template-columns: 1fr; gap: 80px; max-width: 380px; } .bespoke-plato-label { right: 2%; transform: rotate(-2deg); } } /* ATENCIÓN PERSONALIZADA — hero overlay tipo mockup */ .atencion-hero { position: relative; width: 100%; height: clamp(420px, 60vh, 640px); overflow: hidden; } .atencion-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; filter: brightness(0.96); } .atencion-hero-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: flex-end; padding: 0 clamp(28px, 8vw, 120px); background: linear-gradient(90deg, rgba(24,17,10,0.0) 0%, rgba(24,17,10,0.0) 35%, rgba(24,17,10,0.18) 100%); } .atencion-hero-heading { font-family: var(--font-serif); font-size: clamp(44px, 6vw, 96px); text-transform: uppercase; letter-spacing: 0.05em; line-height: 1; color: var(--bespoke); margin: 0; font-weight: 400; text-align: right; text-shadow: 0 3px 18px rgba(24,17,10,0.55); } /* SERVICIOS BESPOKE — 3 columnas (mockup-fiel: serif raíz + sub italic gris + botón gris) */ .servicios-bespoke { background: var(--bespoke); padding: clamp(60px, 8vw, 110px) clamp(20px, 6vw, 100px) clamp(80px, 10vw, 130px); } .servicios-bespoke-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 6vw, 90px); max-width: 1240px; margin: 0 auto; } .servicio-card { text-align: center; display: flex; flex-direction: column; align-items: center; } .servicio-icon { color: var(--raiz); margin-bottom: 28px; width: 76px; height: 76px; opacity: 0.72; } .servicio-icon svg { width: 100%; height: 100%; } .servicio-title { font-family: var(--font-serif); font-size: clamp(20px, 1.9vw, 28px); text-transform: uppercase; letter-spacing: 0.07em; color: var(--raiz); font-weight: 400; line-height: 1.16; margin: 0 0 16px; } .servicio-sub { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: 14px; color: var(--raiz); opacity: 0.65; margin: 0 0 30px; letter-spacing: 0.01em; } .servicio-btn { font-family: var(--font-serif); font-style: italic; font-size: 14px; color: var(--raiz); background: rgba(68,37,16,0.07); padding: 11px 30px; border: none; cursor: pointer; letter-spacing: 0.02em; transition: background var(--transition); } .servicio-btn:hover { background: rgba(68,37,16,0.12); } @media (max-width: 800px) { .servicios-bespoke-grid { grid-template-columns: 1fr; gap: 44px; } } /* =========================================================== COLECCIONES V2 — limpio, minimalista (estilo Johanna Ortiz) =========================================================== */ /* Título sutil de página (reemplaza el banner gigante eliminado) */ .collections-pagehead { padding: clamp(120px, 14vh, 160px) 24px 18px; text-align: center; background: var(--white); } .collections-pagehead-title { font-family: var(--font-serif); font-weight: 400; font-size: clamp(22px, 2.2vw, 30px); text-transform: none; letter-spacing: 0.02em; color: var(--raiz); margin: 0; } /* Toolbar minimalista: Filtros ▾ Ordenar por ▾ */ .collections-toolbar { display: flex; gap: 36px; padding: 18px 60px 14px; background: var(--white); border-bottom: 1px solid rgba(68,37,16,0.08); } .toolbar-trigger { background: none; border: none; padding: 6px 0; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--raiz); display: inline-flex; align-items: center; gap: 8px; cursor: pointer; opacity: 0.85; transition: opacity var(--transition); } .toolbar-trigger:hover { opacity: 1; } .toolbar-trigger svg { width: 10px; height: 7px; transition: transform var(--transition); } .toolbar-trigger[aria-expanded="true"] svg { transform: rotate(180deg); } .toolbar-trigger-value { font-family: var(--font-mono); text-transform: none; letter-spacing: 0.04em; margin-left: 4px; opacity: 0.7; } /* Paneles colapsables (filtros y ordenar) — el atributo `hidden` debe ganar */ .collections-filters-panel[hidden], .collections-sort-panel[hidden] { display: none !important; } .collections-filters-panel, .collections-sort-panel { background: var(--white); padding: 28px 60px 32px; border-bottom: 1px solid rgba(68,37,16,0.08); animation: panelDown 0.28s ease; } @keyframes panelDown { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } .collections-sort-panel { display: flex; flex-wrap: wrap; gap: 10px; padding: 18px 60px 22px; } .sort-option { background: none; border: 1px solid rgba(68,37,16,0.18); padding: 8px 18px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; color: var(--raiz); cursor: pointer; transition: all var(--transition); } .sort-option:hover { border-color: var(--raiz); } .sort-option--active { background: var(--raiz); color: var(--bespoke); border-color: var(--raiz); } /* Override del .collections-filters viejo cuando va dentro del panel — más liviano */ .collections-filters-panel .filters-section { display: flex; align-items: center; gap: 18px; margin-bottom: 14px; flex-wrap: wrap; } .collections-filters-panel .filters-section:last-of-type { margin-bottom: 16px; } .collections-filters-panel .filters-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--raiz); opacity: 0.6; min-width: 60px; } .collections-filters-panel .filters-bar { display: flex; flex-wrap: wrap; gap: 6px; } .collections-filters-panel .filter-btn { background: none; border: 1px solid rgba(68,37,16,0.16); padding: 6px 14px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--raiz); cursor: pointer; transition: all var(--transition); } .collections-filters-panel .filter-btn:hover { border-color: var(--raiz); } .collections-filters-panel .filter-btn--active { background: var(--raiz); color: var(--bespoke); border-color: var(--raiz); } .collections-filters-panel .filter-swatch { width: 22px; height: 22px; border-radius: 50%; border: 1px solid rgba(68,37,16,0.2); cursor: pointer; padding: 0; display: inline-flex; align-items: center; justify-content: center; transition: transform 0.2s ease, border-color var(--transition); } .collections-filters-panel .filter-swatch:hover { transform: scale(1.12); } .collections-filters-panel .filter-swatch.filter-btn--active { border-color: var(--raiz); box-shadow: 0 0 0 2px var(--white), 0 0 0 3px var(--raiz); } .collections-filters-panel .filter-swatch--all { background: var(--white) !important; color: var(--raiz); } .collections-filters-panel .filters-summary { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; padding-top: 12px; border-top: 1px dashed rgba(68,37,16,0.12); } .collections-filters-panel .filters-count { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--raiz); opacity: 0.7; } .collections-filters-panel .filters-reset { background: none; border: none; cursor: pointer; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--terracota); text-decoration: underline; text-underline-offset: 3px; } /* Grid limpio (sin ruido visual) */ .collections-section--clean { background: var(--white); padding: 56px 0 100px; } .collections-section--clean .container { max-width: 1380px; margin: 0 auto; padding: 0 60px; } @media (max-width: 700px) { .collections-toolbar, .collections-filters-panel, .collections-sort-panel, .collections-section--clean .container { padding-left: 24px; padding-right: 24px; } } /* =========================================================== NOSOTROS V2 — Sección "Taller y Escuela" estilo Johanna Ortiz =========================================================== */ .te-section { background: var(--white); padding: clamp(60px, 9vw, 120px) clamp(20px, 6vw, 100px); } .te-feature { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(40px, 6vw, 80px); align-items: center; max-width: 1380px; margin: 0 auto 96px; } .te-feature-img { width: 100%; height: clamp(360px, 56vh, 580px); object-fit: cover; /* Clienta 12/05: encuadres mal cortando cabezas/personas. Mantener foco en el área superior-central (donde están manos/cara/sujeto) sin cortarlas. */ object-position: center 25%; display: block; } .te-feature-caption { padding-right: 24px; } .te-eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--terracota); margin-bottom: 16px; } .te-feature-title { font-family: var(--font-serif); font-weight: 400; font-size: clamp(36px, 4.6vw, 64px); text-transform: none; letter-spacing: 0.01em; color: var(--raiz); line-height: 1.05; margin: 0 0 22px; } .te-feature-body { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.04em; line-height: 1.85; color: var(--raiz); opacity: 0.82; max-width: 460px; margin: 0; } /* Grid de 4 sub-bloques */ .te-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 5vw, 72px); max-width: 1240px; margin: 0 auto; } .te-block { display: grid; grid-template-columns: 1fr 1.2fr; gap: 24px; align-items: start; } .te-block-img { aspect-ratio: 4 / 5; overflow: hidden; background: var(--cream); } .te-block-img img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; display: block; transition: transform 0.8s ease; } .te-block:hover .te-block-img img { transform: scale(1.04); } .te-block-text { padding-top: 6px; } .te-block-title { font-family: var(--font-serif); font-weight: 400; font-size: clamp(18px, 1.6vw, 24px); text-transform: none; letter-spacing: 0.01em; color: var(--raiz); line-height: 1.2; margin: 0 0 14px; } .te-block-body { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; line-height: 1.85; color: var(--raiz); opacity: 0.78; margin: 0; } @media (max-width: 900px) { .te-feature { grid-template-columns: 1fr; gap: 32px; margin-bottom: 64px; } .te-feature-caption { padding-right: 0; } .te-grid { grid-template-columns: 1fr; gap: 48px; } .te-block { grid-template-columns: 1fr; gap: 18px; } .te-block-img { aspect-ratio: 16 / 10; } } /* =========================================================== OVERRIDES FINALES (mockup-fiel V3) — Anderson feedback round 2 Patrón clave: todos los títulos de sección en DOS LÍNEAS (serif uppercase arriba, script abajo). Nunca en una sola línea. =========================================================== */ /* Serif uppercase + script debajo, en bloque (override de versiones inline) */ .bespoke-manifesto-heading .serif, .proceso-heading > span.serif, .proceso-heading > .script, .expect-heading > span.serif, .expect-heading > .script, .bespoke-contact-heading-2 > span.serif, .bespoke-contact-heading-2 > .script, .bespoke-faq-heading > span.serif, .bespoke-faq-heading > .script { display: block !important; margin-left: 0 !important; } /* Heading proceso "Nuestro / Proceso" */ .proceso-heading { font-family: var(--font-serif) !important; font-size: clamp(30px, 4vw, 50px) !important; text-transform: uppercase; letter-spacing: 0.14em; color: var(--bespoke); line-height: 1.05; font-weight: 400; } .proceso-heading .script { font-family: var(--font-script) !important; font-size: clamp(56px, 7.5vw, 96px) !important; text-transform: none !important; letter-spacing: 0 !important; color: var(--menta) !important; display: block !important; margin-top: -8px !important; margin-left: 0 !important; line-height: 1 !important; font-weight: 300 !important; } /* Heading expect "Cuidado / de Principio a Fin" */ .expect-heading { font-family: var(--font-serif) !important; font-size: clamp(28px, 3.8vw, 48px) !important; text-transform: uppercase; letter-spacing: 0.14em; color: var(--menta); line-height: 1.05; margin-bottom: 36px; font-weight: 400; } .expect-heading .script { font-family: var(--font-script) !important; font-size: clamp(54px, 7vw, 92px) !important; text-transform: none !important; letter-spacing: 0 !important; color: var(--terracota) !important; display: block !important; margin-top: -10px !important; line-height: 1 !important; font-weight: 300 !important; } /* ===== MAPA CONTACTO — Granada, Antioquia ===== Clienta 12/05: dirección RESALTADA · estética con paleta de la marca (sepia + hue-rotate sobre el iframe para integrar con bespoke/terracota) · "Encuéntranos" font-weight 300 (delgada) · script "En Granada" Inicial Mayúscula */ .contacto-map { background: var(--bespoke); padding: 80px 80px 100px; border-top: 1px solid rgba(68, 37, 16, 0.08); } .contacto-map-head { text-align: center; margin-bottom: 40px; } .contacto-map-head .contacto-eyebrow { display: block; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--terracota); margin-bottom: 14px; } .contacto-map-heading { display: flex; flex-direction: column; align-items: center; gap: 4px; line-height: 0.98; margin-bottom: 28px; } .contacto-map-heading .serif { font-family: var(--font-serif); font-size: clamp(28px, 3.4vw, 44px); font-weight: 300; letter-spacing: 0.14em; text-transform: uppercase; color: var(--raiz); display: block; } .contacto-map-heading .script { font-family: var(--font-script); font-weight: 300; font-size: clamp(48px, 6vw, 80px); font-style: normal; display: block; color: var(--terracota); line-height: 1; margin-top: -4px; } /* Tarjeta de dirección destacada (centrada arriba del mapa) */ .contacto-address-card { display: flex; align-items: center; gap: 18px; max-width: 540px; margin: 0 auto 28px; background: var(--cream); border: 1px solid rgba(151, 67, 21, 0.18); border-left: 4px solid var(--terracota); border-radius: 2px; padding: 22px 26px; box-shadow: 0 6px 28px -14px rgba(68, 37, 16, 0.25); } .contacto-address-pin { width: 28px; height: 28px; flex: 0 0 28px; fill: none; stroke: var(--terracota); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } .contacto-address-body { flex: 1; } .contacto-address-label { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--terracota); margin-bottom: 6px; } .contacto-address-line { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; line-height: 1.7; color: var(--raiz); } .contacto-address-line strong { font-weight: 600; color: var(--raiz); } .contacto-address-hours { margin-top: 10px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--menta); filter: brightness(0.7); } /* Frame del mapa con bordes redondeados sutiles (clienta 12/05: que tenga bordes redondeados un poquito) */ .contacto-map-frame { position: relative; max-width: 1100px; margin: 0 auto; border-radius: 14px; overflow: hidden; box-shadow: 0 24px 60px -22px rgba(24, 17, 10, 0.35); background: var(--cream); border: 1px solid rgba(151, 67, 21, 0.18); } /* ===== CART ITEM VARIANT SELECTORS — Clienta 20/05 ===== Permitir editar size+color de cada item directamente desde el drawer + carrito.html sin tener que volver a la PDP. Selects nativos compactos para UX confiable. */ .cart-item-variant-row, .cart-page-meta.cart-item-variant-row { display: flex !important; gap: 8px; margin: 6px 0 4px; flex-wrap: wrap; } .cart-item-size, .cart-item-color { font-family: var(--font-mono); font-size: 11px; padding: 5px 26px 5px 10px; border: 1px solid rgba(68, 37, 16, 0.18); background: var(--cream); color: var(--raiz); border-radius: 4px; cursor: pointer; outline: none; transition: border-color 0.15s ease, background 0.15s ease; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 8px center; background-size: 9px 6px; letter-spacing: 0.04em; text-transform: capitalize; } .cart-item-size:focus, .cart-item-color:focus, .cart-item-size:hover, .cart-item-color:hover { border-color: var(--terracota); background-color: #FFF; } /* ===== CONTACTO VIDEO — Menta Cafe Boutique (vertical) ==== Clienta 20/05: video del espacio entre el form y el mapa. Vertical, 3 viewports. */ /* Sección video atelier — layout 2 columnas (textos izquierda, video derecha) Tipografía igual al hero (.contacto-heading) — .serif/.script en bloque vertical, weight 400 sin condensar. */ .contacto-video { max-width: 1100px; margin: 90px auto 70px; padding: 0 24px; display: grid; grid-template-columns: 1.1fr 0.9fr; align-items: center; gap: 60px; } .contacto-video-head { text-align: left; } .contacto-video-heading { font-family: var(--font-serif); font-weight: 400; font-size: clamp(28px, 3.6vw, 44px); line-height: 1; color: var(--raiz); margin: 10px 0 18px; } .contacto-video-heading .serif { display: block; font-family: var(--font-serif); font-weight: 400; letter-spacing: 0.02em; } .contacto-video-heading .script { display: block; font-family: var(--font-script); font-weight: 400; color: var(--terracota); font-size: 1.35em; margin-top: 4px; line-height: 1; } .contacto-video-desc { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.07em; line-height: 1.85; color: var(--raiz); opacity: 0.78; max-width: 380px; margin: 0; } .contacto-video-frame { border-radius: 14px; overflow: hidden; box-shadow: 0 24px 60px -22px rgba(24, 17, 10, 0.35); background: var(--cream); width: 100%; max-width: 260px; /* Clienta 20/05: video MÁS PEQUEÑO, no enorme */ aspect-ratio: 9 / 16; justify-self: center; } .contacto-video-el { width: 100%; height: 100%; object-fit: cover; display: block; } @media (max-width: 768px) { .contacto-video { grid-template-columns: 1fr; gap: 24px; margin: 60px auto 40px; padding: 0 20px; text-align: center; } .contacto-video-head { text-align: center; } .contacto-video-desc { margin: 0 auto; } .contacto-video-frame { max-width: 220px; } } /* ===== LEAFLET MAP — Atelier Menta Granada ===== Container, tiles tinted to brand, custom marker terracota + popup branded */ #atelier-map { width: 100%; height: 440px; min-height: 280px; /* Clienta 20/05: mapa desaparecía en mobile por height colapsado */ background: var(--cream); display: block; /* Tile layer sutilmente tintado hacia paleta marca via filter */ filter: sepia(0.18) hue-rotate(-8deg) saturate(0.95) contrast(0.96); transition: filter 0.4s ease; } @media (max-width: 768px) { #atelier-map { height: 320px !important; min-height: 320px !important; } .contacto-map-frame { max-width: 100%; } } .contacto-map-frame:hover #atelier-map { filter: sepia(0.08) hue-rotate(-4deg) saturate(1) contrast(1); } /* Controles Leaflet — restyling para que respete la paleta */ .leaflet-control-zoom a { background: var(--cream) !important; color: var(--raiz) !important; border: 1px solid rgba(151, 67, 21, 0.22) !important; font-family: var(--font-serif) !important; font-weight: 300 !important; border-radius: 2px !important; transition: background 0.2s ease, color 0.2s ease; } .leaflet-control-zoom a:hover { background: var(--terracota) !important; color: var(--bespoke) !important; } .leaflet-control-attribution { background: rgba(244, 238, 223, 0.85) !important; font-family: var(--font-mono) !important; font-size: 9px !important; color: var(--raiz) !important; letter-spacing: 0.04em; } .leaflet-control-attribution a { color: var(--terracota) !important; } /* Marker custom con pulse */ .menta-marker { position: relative; display: flex; align-items: flex-end; justify-content: center; } .menta-marker svg { position: relative; z-index: 2; filter: drop-shadow(0 4px 8px rgba(68, 37, 16, 0.4)); } .menta-marker-pulse { position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%); width: 36px; height: 36px; border-radius: 50%; background: rgba(151, 67, 21, 0.35); z-index: 1; animation: mentaMarkerPulse 2.4s ease-out infinite; } @keyframes mentaMarkerPulse { 0% { transform: translateX(-50%) scale(0.5); opacity: 0.7; } 100% { transform: translateX(-50%) scale(2.6); opacity: 0; } } /* Popup branded */ .menta-popup-wrap .leaflet-popup-content-wrapper { background: var(--cream); border: 1px solid rgba(151, 67, 21, 0.22); border-left: 3px solid var(--terracota); border-radius: 2px; box-shadow: 0 8px 28px -8px rgba(68, 37, 16, 0.35); } .menta-popup-wrap .leaflet-popup-tip { background: var(--cream); border-left: 1px solid rgba(151, 67, 21, 0.22); } .menta-popup-wrap .leaflet-popup-content { margin: 16px 20px; font-family: var(--font-mono); } .menta-popup { font-family: var(--font-mono); } .menta-popup-label { font-family: var(--font-serif); font-size: 18px; letter-spacing: 0.06em; color: var(--raiz); margin-bottom: 6px; line-height: 1.2; } .menta-popup-line { font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--raiz); line-height: 1.65; opacity: 0.82; } .menta-popup-line strong { color: var(--terracota); font-weight: 600; } .menta-popup-hours { margin-top: 10px; font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--menta); filter: brightness(0.65); } .menta-popup-wrap a.leaflet-popup-close-button { color: var(--raiz) !important; opacity: 0.5; padding: 6px 8px 0 0 !important; } .menta-popup-wrap a.leaflet-popup-close-button:hover { opacity: 1; color: var(--terracota) !important; } .contacto-map-frame iframe { /* Aplicar sepia + hue-rotate suave para que el verde/azul de Google Maps se integre con la paleta terracota/menta de la marca. */ filter: sepia(0.32) hue-rotate(-12deg) saturate(1.05) contrast(0.94) brightness(1.02); transition: filter 0.5s ease; } .contacto-map-frame:hover iframe { filter: sepia(0.15) hue-rotate(-6deg) saturate(1.0) contrast(0.98) brightness(1.02); } .contacto-map-cta { display: inline-flex; align-items: center; gap: 8px; position: absolute; bottom: 16px; right: 16px; background: var(--terracota); color: var(--bespoke); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; padding: 11px 18px; border-radius: 2px; transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease; z-index: 2; box-shadow: 0 4px 14px -4px rgba(68, 37, 16, 0.4); } .contacto-map-cta svg { stroke: var(--bespoke); } .contacto-map-cta:hover { background: var(--raiz); transform: translateY(-1px); box-shadow: 0 6px 20px -4px rgba(68, 37, 16, 0.55); } @media (max-width: 768px) { .contacto-map { padding: 60px 24px 80px; } .contacto-map-frame iframe { height: 320px; } .contacto-map-cta { bottom: 12px; right: 12px; font-size: 9px; padding: 9px 14px; } .contacto-address-card { padding: 18px 20px; gap: 14px; } } /* Heading contacto "Cuéntanos tu / Historia" */ .bespoke-contact-heading-2 { font-family: var(--font-serif) !important; font-size: clamp(28px, 3.8vw, 48px) !important; text-transform: uppercase; letter-spacing: 0.14em; color: var(--menta); line-height: 1.05; font-weight: 400; margin-bottom: 14px; } .bespoke-contact-heading-2 .script { font-family: var(--font-script) !important; font-size: clamp(56px, 7.5vw, 96px) !important; text-transform: none !important; letter-spacing: 0 !important; color: var(--terracota) !important; display: block !important; margin-top: -10px !important; line-height: 1 !important; font-weight: 300 !important; } /* Heading FAQ "Antes de / Empezar" + centrado completo */ .bespoke-faq-wrap, .bespoke-faq, .bespoke-faq-inner { background: var(--bespoke) !important; } .bespoke-faq-heading { font-family: var(--font-serif) !important; font-size: clamp(28px, 3.8vw, 48px) !important; text-transform: uppercase; letter-spacing: 0.14em; color: var(--menta); line-height: 1.05; font-weight: 400; text-align: center; } .bespoke-faq-heading .script { font-family: var(--font-script) !important; font-size: clamp(56px, 7.5vw, 96px) !important; text-transform: none !important; letter-spacing: 0 !important; color: var(--terracota) !important; display: block !important; margin-top: -10px !important; line-height: 1 !important; font-weight: 300 !important; } /* FAQ summaries centradas (no flex izquierda con + a la derecha) */ .bespoke-faq details { text-align: center; border-bottom: 1px solid rgba(68,37,16,0.14); padding: 26px 16px; } .bespoke-faq summary { display: inline-flex !important; justify-content: center !important; align-items: center; gap: 14px; font-family: var(--font-serif) !important; font-size: 15px !important; letter-spacing: 0.10em !important; text-transform: uppercase; color: var(--raiz); width: 100%; line-height: 1.4; } .bespoke-faq summary::after { content: '+'; font-size: 22px; font-weight: 200; color: var(--terracota); margin-left: 12px; } .bespoke-faq-answer { font-size: 13px !important; line-height: 2 !important; color: var(--raiz); opacity: 0.78; max-width: 720px; margin: 16px auto 0; text-align: center; } /* Subtítulos pequeños del Bespoke — legibilidad mockup-fiel */ .proceso-step-title { font-family: var(--font-serif) !important; font-size: 16px !important; letter-spacing: 0.16em !important; text-transform: uppercase; color: var(--bespoke); margin-bottom: 14px; font-weight: 400; } .proceso-step-desc { font-size: 12px !important; line-height: 1.85 !important; letter-spacing: 0.04em; color: var(--bespoke); opacity: 0.78; } .expect-item-title { font-family: var(--font-serif) !important; font-size: 16px !important; letter-spacing: 0.10em !important; text-transform: uppercase; color: var(--raiz); margin-bottom: 8px; font-weight: 400; } .expect-item-desc { font-size: 13px !important; line-height: 1.8 !important; letter-spacing: 0.04em; } .bespoke-contact-features li { font-size: 13px !important; line-height: 1.6 !important; padding: 10px 0; letter-spacing: 0.04em; color: var(--raiz); } /* Heading Manifesto Bespoke "Diseñamos / Contigo" — script más liviana, sin viuda */ .bespoke-manifesto-heading { line-height: 1; margin-bottom: 28px; } .bespoke-manifesto-heading .serif { font-family: var(--font-serif) !important; font-size: clamp(28px, 3.8vw, 48px) !important; text-transform: uppercase; letter-spacing: 0.14em; display: block !important; color: var(--menta) !important; font-weight: 400; line-height: 1.05; } .bespoke-manifesto-heading .script { font-family: var(--font-script) !important; font-size: clamp(60px, 8vw, 110px) !important; display: block !important; color: var(--terracota) !important; margin-top: -10px !important; line-height: 1 !important; font-weight: 300 !important; } /* Heading Platos "Personaliza Aquí Tus Blooms" — letter-spacing normal (no roto) */ .bespoke-platos-title { font-family: var(--font-serif) !important; font-size: clamp(30px, 4.2vw, 54px) !important; text-transform: uppercase; letter-spacing: 0.10em !important; /* Sin separación exagerada */ color: var(--menta); font-weight: 400; line-height: 1.1; margin: 0 0 18px; } /* Eliminar caja negra detrás del plato (clienta: no tiene sentido) */ .bespoke-plato-blackcard { display: none !important; } /* Aretes con halo cream sutil para integrarse con el plato (no halo negro) */ .bespoke-plato-product { filter: drop-shadow(0 8px 16px rgba(68,37,16,0.20)) !important; background: transparent !important; } /* Globales de fondo — beige por default en todas las secciones que aún tenían blanco */ .servicios-bespoke, .collections-pagehead, .collections-toolbar, .collections-filters-panel, .collections-sort-panel, .collections-section--clean, .te-section, .bespoke-contact-card { background: var(--bespoke) !important; } /* Trust bar al final: agregar también borde inferior (entre trust y footer) */ .trust-bar { border-bottom: 1px solid rgba(68,37,16,0.10); } /* Separador ornament-divider — clienta 12/05: MUCHO más pequeño, no ocupar tanto espacio vertical. Reducido de 100px padding y 240px flower a 44px padding y 90px flower. */ .ornament-divider { background: var(--bespoke) !important; padding: 40px 20px !important; display: flex; align-items: center; justify-content: center; gap: 26px; position: relative; } .ornament-divider::before, .ornament-divider::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(151,67,21,0.28) 50%, transparent 100%); max-width: 280px; } .ornament-divider-flower { width: clamp(64px, 6.5vw, 90px) !important; aspect-ratio: 1 / 1; height: auto !important; object-fit: contain; opacity: 0.75 !important; filter: saturate(0.85); flex-shrink: 0; flex-grow: 0; } /* NEW IN strip background a beige */ .new-in { background: var(--bespoke) !important; } section.new-in { background: var(--bespoke) !important; } /* Heading collections-pagehead: split serif+script si existe */ .collections-pagehead-title { color: var(--raiz); } /* =========================================================== INSTAGRAM FEED — Homepage (sincronizable con @tiendamenta.co en producción) =========================================================== */ .instagram-feed-section { background: var(--bespoke); padding: 90px 80px 100px; text-align: center; } .instagram-feed-handle { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.18em; color: var(--terracota); margin: 12px 0 38px; } .instagram-feed-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; margin-bottom: 32px; } .instagram-feed-item { aspect-ratio: 1 / 1; overflow: hidden; display: block; position: relative; } .instagram-feed-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; } .instagram-feed-item:hover img { transform: scale(1.06); } .instagram-feed-item::after { content: ''; position: absolute; inset: 0; background: rgba(151,67,21,0); transition: background 0.3s ease; pointer-events: none; } .instagram-feed-item:hover::after { background: rgba(151,67,21,0.16); } .instagram-feed-cta { display: inline-block; margin-top: 16px; } @media (max-width: 800px) { .instagram-feed-grid { grid-template-columns: repeat(3, 1fr); } .instagram-feed-section { padding: 60px 24px 70px; } } /* =========================================================== CONTACTO — página dedicada (clienta: faltaba página real) =========================================================== */ .contacto-hero { background: var(--bespoke); padding: clamp(140px, 16vh, 200px) 24px 60px; text-align: center; } .contacto-hero-inner { max-width: 720px; margin: 0 auto; } .contacto-eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.32em; color: var(--terracota); text-transform: uppercase; margin-bottom: 18px; display: block; } .contacto-heading { margin: 0 0 24px; line-height: 1; } .contacto-heading .serif { font-family: var(--font-serif); font-size: clamp(36px, 5vw, 64px); text-transform: uppercase; letter-spacing: 0.14em; color: var(--menta); display: block; font-weight: 400; line-height: 1.05; } .contacto-heading .script { font-family: var(--font-script); font-size: clamp(60px, 9vw, 120px); color: var(--terracota); display: block; margin-top: -14px; line-height: 1; font-weight: 300; } .contacto-intro { font-family: var(--font-mono); font-size: 13px; line-height: 1.85; color: var(--raiz); opacity: 0.78; letter-spacing: 0.04em; max-width: 560px; margin: 0 auto; } .contacto-grid { background: var(--bespoke); display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(40px, 6vw, 90px); max-width: 1180px; margin: 0 auto; padding: 60px clamp(20px, 5vw, 60px) 120px; } .contacto-info-block { margin-bottom: 34px; } /* Clienta 12/05: INVERTIR las fuentes label/value. Antes el label era el chico mono y el value era el serif grande. Ahora el LABEL ("Visítanos", "Horario"...) es el grande prominente serif, y el VALUE (datos) es el mono pequeño debajo. */ .contacto-info-label { font-family: var(--font-serif); font-size: 22px; letter-spacing: 0.06em; text-transform: none; color: var(--raiz); margin-bottom: 8px; font-weight: 400; line-height: 1.1; } .contacto-info-value { font-family: var(--font-mono); font-size: 10.5px; line-height: 1.85; letter-spacing: 0.16em; text-transform: uppercase; color: var(--raiz); opacity: 0.78; } .contacto-info-value a { color: var(--raiz); border-bottom: 1px solid rgba(68,37,16,0.25); transition: border-color var(--transition); } .contacto-info-value a:hover { border-color: var(--terracota); } .contacto-social { display: flex; flex-direction: column; gap: 10px; } .contacto-social a { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--raiz); opacity: 0.85; border-bottom: none !important; } /* Clienta 20/05: en mobile las redes deben estar centradas, no alineadas a izq */ @media (max-width: 768px) { .contacto-social { align-items: center; } .contacto-social a { justify-content: center; } .contacto-info-block { text-align: center; } .contacto-info-label, .contacto-info-value { text-align: center; } } .contacto-social a:hover { color: var(--terracota); opacity: 1; } .contacto-form { background: var(--cream); padding: 44px; display: flex; flex-direction: column; gap: 22px; } .contacto-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; } /* Clienta 12/05: invertir labels/values en formulario también. Label ("Nombre", "Asunto"...) ahora es serif prominente. Inputs/values usan mono uppercase pequeño. */ .contacto-form label { display: flex; flex-direction: column; gap: 6px; font-family: var(--font-serif); font-size: 16px; letter-spacing: 0.04em; text-transform: none; color: var(--raiz); opacity: 1; font-weight: 400; } .contacto-form input, .contacto-form select, .contacto-form textarea { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--raiz); background: transparent; border: none; border-bottom: 1px solid rgba(68,37,16,0.28); padding: 10px 2px; outline: none; transition: border-color var(--transition); width: 100%; } .contacto-form textarea { text-transform: none; letter-spacing: 0.04em; } .contacto-form option { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.12em; font-size: 12px; } .contacto-form input:focus, .contacto-form select:focus, .contacto-form textarea:focus { border-bottom-color: var(--terracota); } .contacto-form textarea { resize: vertical; min-height: 100px; } .contacto-form button { align-self: flex-start; margin-top: 8px; } .contacto-form-note { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--raiz); opacity: 0.65; text-align: center; } .contacto-form-note a { color: var(--terracota); border-bottom: 1px solid rgba(151,67,21,0.4); } @media (max-width: 800px) { .contacto-grid { grid-template-columns: 1fr; padding: 40px 24px 80px; } .contacto-form { padding: 30px 24px; } .contacto-form-row { grid-template-columns: 1fr; } } /* Marco encerrando foto cuadrada (Tus Momentos): asegurar aspect 1:1 + marco al borde */ .cta-framed-photo { aspect-ratio: 1 / 1 !important; max-width: 540px !important; } .cta-framed-marco { inset: 0 !important; width: 100% !important; height: 100% !important; } /* =========================================================== CARRITO — fix layout (clienta: estaba arrinconado, icono triangular gigante) =========================================================== */ .cart-page-heading { background: var(--bespoke) !important; padding: 130px clamp(20px, 6vw, 80px) 32px !important; border-bottom: 1px solid rgba(68,37,16,0.08); margin-bottom: 0; font-size: inherit !important; color: inherit !important; letter-spacing: 0 !important; text-transform: none !important; } .cart-page-heading .container { max-width: 1240px; margin: 0 auto; display: flex; align-items: baseline; justify-content: space-between; gap: 24px; flex-wrap: wrap; } .cart-page-title { font-family: var(--font-serif) !important; font-size: clamp(28px, 3.4vw, 44px) !important; letter-spacing: 0.06em !important; text-transform: none !important; color: var(--raiz) !important; margin: 0 !important; font-weight: 400 !important; line-height: 1.1; } .cart-page-title em, .cart-page-title .script { font-family: var(--font-script) !important; font-style: normal !important; text-transform: none !important; color: var(--terracota) !important; font-weight: 300 !important; } .cart-page-count { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; color: var(--raiz); opacity: 0.55; margin-left: 10px; } .cart-continue-link { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--raiz); opacity: 0.78; transition: opacity var(--transition); } .cart-continue-link:hover { opacity: 1; } .cart-continue-link svg { width: 16px !important; height: 16px !important; stroke: currentColor; fill: none; stroke-width: 1.6; flex-shrink: 0; } .cart-page { background: var(--bespoke) !important; padding: 48px clamp(20px, 6vw, 80px) 80px !important; padding-top: 48px !important; } .cart-page .container { max-width: 1240px; margin: 0 auto; } .cart-layout { display: grid; grid-template-columns: 1.6fr 0.9fr; gap: clamp(40px, 5vw, 80px); align-items: start; } .cart-empty-editorial { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 80px); align-items: center; padding: 40px 0; } .cart-empty-editorial::before { display: none !important; } .cart-empty-eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--terracota); margin-bottom: 14px; } .cart-empty-heading { font-family: var(--font-serif) !important; font-size: clamp(28px, 3.6vw, 48px) !important; text-transform: uppercase; letter-spacing: 0.12em; color: var(--menta) !important; font-weight: 400; line-height: 1.05; margin: 0 0 20px; display: block; } .cart-empty-heading .script { font-family: var(--font-script) !important; font-size: clamp(60px, 7.5vw, 100px) !important; text-transform: none; letter-spacing: 0; color: var(--terracota) !important; display: block !important; margin-top: -8px; line-height: 1; font-weight: 300; } .cart-empty-text { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.04em; line-height: 1.85; color: var(--raiz); opacity: 0.78; margin-bottom: 22px; max-width: 460px; } .cart-empty-coupon { display: flex; align-items: center; gap: 16px; background: var(--cream); padding: 16px 20px; margin-bottom: 28px; border-left: 3px solid var(--terracota); } .cart-empty-coupon-code { font-family: var(--font-mono); font-size: 16px; letter-spacing: 0.18em; color: var(--terracota); background: rgba(151,67,21,0.08); padding: 6px 12px; flex-shrink: 0; } .cart-empty-coupon-text { font-family: var(--font-mono); font-size: 11px; line-height: 1.6; letter-spacing: 0.04em; color: var(--raiz); } .cart-empty-coupon-text strong { color: var(--terracota); letter-spacing: 0.08em; } .cart-empty-actions { display: flex; gap: 12px; flex-wrap: wrap; } .cart-empty-img { aspect-ratio: 4/5; overflow: hidden; background: var(--cream); } .cart-empty-img img { width: 100%; height: 100%; object-fit: cover; } .cart-suggest-section { margin-top: 80px; padding-top: 60px; border-top: 1px solid rgba(68,37,16,0.10); } .cart-suggest-eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--terracota); text-align: center; margin-bottom: 12px; } .cart-suggest-heading { font-family: var(--font-serif); font-size: clamp(22px, 2.8vw, 36px); text-transform: uppercase; letter-spacing: 0.12em; color: var(--menta); text-align: center; margin: 0 0 40px; font-weight: 400; } .cart-suggest-heading .script { font-family: var(--font-script); font-size: 1.5em; text-transform: none; letter-spacing: 0; color: var(--terracota); display: block; margin-top: -8px; line-height: 1; font-weight: 300; } .cart-suggest-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; } .cart-bespoke-cta { margin-top: 60px; background: var(--cream); padding: 50px 40px; text-align: center; } .cart-bespoke-cta h3 { font-family: var(--font-serif); font-size: clamp(22px, 2.6vw, 32px); text-transform: uppercase; letter-spacing: 0.12em; color: var(--raiz); margin: 0 0 14px; font-weight: 400; } .cart-bespoke-cta h3 .script { font-family: var(--font-script); font-size: 1.4em; text-transform: none; letter-spacing: 0; color: var(--terracota); font-weight: 300; } .cart-bespoke-cta p { font-family: var(--font-mono); font-size: 12px; line-height: 1.85; letter-spacing: 0.04em; color: var(--raiz); opacity: 0.78; max-width: 540px; margin: 0 auto 22px; } @media (max-width: 800px) { .cart-layout { grid-template-columns: 1fr; } .cart-empty-editorial { grid-template-columns: 1fr; } .cart-suggest-grid { grid-template-columns: repeat(2, 1fr); } .cart-page-heading .container { flex-direction: column; align-items: flex-start; } } /* ===== FLORECITA ANIMADA EN PÁGINA DE PRODUCTO ===== Cliente reunión 07/05: "la florecita pues como su isologo animado". Loop sutil de respiración + rotación lenta. Posicionada bottom-right del gallery para no chocar con el navbar fixed. */ .product-gallery { position: relative; } .product-flower-anim { position: absolute; bottom: 12px; right: -18px; width: 96px; height: auto; z-index: 5; pointer-events: none; opacity: 0.92; transform-origin: 50% 50%; animation: flowerBreath 6s ease-in-out infinite; filter: drop-shadow(0 8px 22px rgba(151, 67, 21, 0.28)); } @keyframes flowerBreath { 0%, 100% { transform: rotate(-4deg) scale(1); opacity: 0.92; } 50% { transform: rotate(4deg) scale(1.06); opacity: 1; } } @media (max-width: 900px) { .product-flower-anim { width: 66px; bottom: 8px; right: 8px; } } @media (prefers-reduced-motion: reduce) { .product-flower-anim { animation: none; } } /* ===== BESPOKE — REFERENCIAS REALES ===== Clienta 12/05: quitar platos vectoriales/caja negra/textos falsos. Grid 6 referencias reales del catálogo, layout limpio editorial. */ .bespoke-platos-head { text-align: center; margin-bottom: 56px; max-width: 720px; margin-left: auto; margin-right: auto; } .bespoke-platos-eyebrow { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--terracota); margin-bottom: 14px; display: block; } .bespoke-platos-title { display: flex; flex-direction: column; align-items: center; gap: 6px; line-height: 1; margin-bottom: 22px; } .bespoke-platos-title .serif { font-family: var(--font-serif); font-size: clamp(34px, 4.2vw, 58px); font-weight: 300; text-transform: uppercase; letter-spacing: 0.14em; color: var(--raiz); display: block; } .bespoke-platos-title .script { font-family: var(--font-script); font-size: clamp(50px, 6vw, 84px); font-weight: 300; color: var(--terracota); display: block; line-height: 1; } .bespoke-platos-sub { font-family: var(--font-mono); font-size: 12px; line-height: 2; letter-spacing: 0.05em; color: var(--raiz); opacity: 0.78; max-width: 540px; margin: 0 auto; } .bespoke-refs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px 28px; max-width: 1100px; margin: 0 auto 56px; } .bespoke-ref { text-align: center; } .bespoke-ref-photo { background: var(--cream); aspect-ratio: 4 / 5; overflow: hidden; margin-bottom: 16px; position: relative; transition: transform 0.35s ease, box-shadow 0.35s ease; } .bespoke-ref-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1); } .bespoke-ref:hover .bespoke-ref-photo { box-shadow: 0 14px 40px -16px rgba(68, 37, 16, 0.35); } .bespoke-ref:hover .bespoke-ref-photo img { transform: scale(1.04); } .bespoke-ref-name { font-family: var(--font-serif); font-size: 14px; font-weight: 400; letter-spacing: 0.18em; text-transform: uppercase; color: var(--raiz); margin: 0; } @media (max-width: 800px) { .bespoke-refs-grid { grid-template-columns: repeat(2, 1fr); gap: 26px 18px; } } /* (Eliminado override de display:none — los platos ahora son el concepto principal otra vez, restaurando el diseño original con plato SVG + bloom PNG encima. Solo .bespoke-plato-blackcard sigue oculto porque la clienta vetó la caja negra.) */ .bespoke-plato-blackcard { display: none !important; } .bespoke-refs-grid, .bespoke-ref { display: none !important; } /* ===== NOSOTROS — SECCIÓN ESENCIA (foto Dei + mamá) ===== Decisión clienta 12/05: la foto de Dei + mamá va aquí, no en Tus Momentos del home. Layout 2 columnas estilo editorial con marco encaje mitad/mitad. */ .esencia-section { background: var(--bespoke); padding: 100px 80px; display: grid; grid-template-columns: 1fr 1fr; gap: 90px; align-items: center; max-width: 1380px; margin: 0 auto; } .esencia-photo { position: relative; /* Foto cuadrada 1:1 (era 4:5) para que el marco SVG cuadrado encaje perfecto */ aspect-ratio: 1 / 1; max-width: 520px; width: 100%; margin: 0 auto; } .esencia-photo-img { width: 100%; height: 100%; object-fit: cover; /* object-position: center top para conservar las caras de Dei + mamá en lugar de cortarlas (cliente: "solo se ve cuello y mentón"). */ object-position: center 22%; position: absolute; inset: 0; z-index: 1; } .esencia-marco { position: absolute; /* Marco 3% afuera por cada lado: línea del marco coincide con el edge de la foto */ inset: -3%; width: 106%; height: 106%; pointer-events: none; z-index: 2; } .esencia-content { padding-left: 24px; } .esencia-eyebrow { display: block; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--terracota); margin-bottom: 18px; } .esencia-heading { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; line-height: 1; margin-bottom: 24px; } .esencia-heading .serif { font-family: var(--font-serif); font-size: clamp(34px, 4vw, 54px); font-weight: 300; text-transform: uppercase; letter-spacing: 0.14em; color: var(--raiz); display: block; } .esencia-heading .script { font-family: var(--font-script); font-size: clamp(58px, 7vw, 96px); font-weight: 300; color: var(--terracota); display: block; line-height: 1; margin-top: 2px; } .esencia-text { font-family: var(--font-mono); font-size: 12px; line-height: 2; letter-spacing: 0.04em; color: var(--raiz); opacity: 0.82; max-width: 460px; margin-bottom: 18px; } @media (max-width: 900px) { .esencia-section { grid-template-columns: 1fr; gap: 56px; padding: 70px 24px; } .esencia-content { padding-left: 0; text-align: center; } .esencia-heading { align-items: center; } .esencia-text { margin-left: auto; margin-right: auto; } .esencia-marco { inset: -8%; width: 116%; height: 116%; } } /* =========================================================== RONDA 8 — Microinteracciones + responsive fixes (clienta 12/05) =========================================================== */ /* --- Best Sellers strip grid (4 cols desktop, 2 tablet, scroll-h mobile) --- */ .best-sellers-strip-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } @media (max-width: 800px) { .best-sellers-strip-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { /* Mobile: horizontal scroll natural con scroll-snap (mejor UX que apilar 4 en columna) */ .best-sellers-strip-grid { display: flex; grid-template-columns: none; overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; scrollbar-width: none; gap: 16px; padding: 0 20px 8px; margin: 0 -20px; } .best-sellers-strip-grid::-webkit-scrollbar { display: none; } .best-sellers-strip-grid > .product-card { flex: 0 0 72vw; max-width: 320px; scroll-snap-align: start; } } /* --- Microinteracciones: hover states pulidos en todo lo interactivo --- */ .product-card { transition: transform 0.35s ease; } .product-card:hover { transform: translateY(-3px); } .product-card-img { overflow: hidden; display: block; position: relative; } .product-card-img img { transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1), filter 0.5s ease; } .product-card:hover .product-card-img img { transform: scale(1.05); } .editorial-item { transition: transform 0.35s ease; cursor: pointer; } .editorial-item:hover { transform: translateY(-2px); } .editorial-item img { transition: transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1); } .editorial-item:hover img { transform: scale(1.04); } .btn-primary, .btn-outline, .btn-outline-light, .btn-primary-sm { transition: background 0.25s ease, color 0.25s ease, transform 0.18s ease, box-shadow 0.25s ease; } .btn-primary:hover, .btn-outline:hover, .btn-outline-light:hover, .btn-primary-sm:hover { transform: translateY(-1px); box-shadow: 0 6px 18px -8px rgba(151, 67, 21, 0.45); } .btn-primary:active, .btn-outline:active, .btn-primary-sm:active { transform: translateY(0); } /* Hover: el plato se acerca al usuario (scale + lift + soft shadow boost), el bloom escala más rápido y sube ligeramente — sensación de "viene hacia ti". */ .bespoke-plato { transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1), filter 0.55s ease; cursor: pointer; will-change: transform; } .bespoke-plato:hover, .bespoke-plato:focus-within { transform: translateY(-10px) scale(1.06); z-index: 3; } .bespoke-plato-platter { transition: filter 0.55s ease, transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1); } .bespoke-plato:hover .bespoke-plato-platter, .bespoke-plato:focus-within .bespoke-plato-platter { filter: drop-shadow(0 24px 32px rgba(68, 37, 16, 0.26)) drop-shadow(0 48px 56px rgba(68, 37, 16, 0.18)); } .bespoke-plato-product { transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1), filter 0.55s ease; } .bespoke-plato:hover .bespoke-plato-product, .bespoke-plato:focus-within .bespoke-plato-product { transform: translate(-50%, -58%) scale(1.14); filter: drop-shadow(0 14px 22px rgba(24, 17, 10, 0.34)); } @media (prefers-reduced-motion: reduce) { .product-card, .editorial-item, .bespoke-plato, .product-card-img img, .editorial-item img, .bespoke-plato-product { transition: none !important; } .product-card:hover, .editorial-item:hover, .bespoke-plato:hover { transform: none !important; } } /* --- Responsive: navbar con 8 ítems necesita más espacio + colapso elegante en tablet --- */ @media (max-width: 1100px) { .navbar-links { gap: 18px; } .navbar-links a { font-size: 10.5px; letter-spacing: 0.12em; } } @media (max-width: 880px) { /* Tablet/mobile: los .navbar-links quedan como drawer desde DEBAJO del navbar. El navbar (logo + lupa + cart + burger) sigue visible mientras el panel se desliza. */ .navbar { grid-template-columns: 1fr auto; } .navbar-logo { justify-self: start; } .navbar-actions { justify-self: end; } .navbar-actions { gap: 16px !important; } .navbar-actions > * { flex-shrink: 0; } /* DRAWER PANEL desde debajo del navbar (top: 120px = 32 announcement + 88 navbar) */ .navbar-links { display: flex !important; position: fixed !important; top: 120px !important; right: -100vw !important; width: 85vw !important; max-width: 360px !important; height: calc(100vh - 120px) !important; background: rgba(24,17,10,0.97) !important; -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); flex-direction: column !important; align-items: flex-start !important; gap: 0 !important; padding: 32px 32px 48px !important; transition: right 0.35s cubic-bezier(0.4, 0, 0.2, 1), top 0.3s ease, height 0.3s ease !important; z-index: 198 !important; overflow-y: auto; box-shadow: -8px 0 32px rgba(0,0,0,0.18); } /* Cuando navbar está scrolled (56px en lugar de 88), ajustar el top del drawer */ .navbar--scrolled ~ .navbar-links, body:has(.navbar--scrolled) .navbar-links { top: 88px !important; height: calc(100vh - 88px) !important; } .navbar-links.is-open { right: 0 !important; } .navbar-links li { width: 100% !important; border-bottom: 1px solid rgba(244, 238, 223, 0.08); } .navbar-links a { display: block !important; padding: 18px 0 !important; font-size: 12px !important; color: var(--bespoke) !important; letter-spacing: 0.2em !important; } } /* --- Tablet 768px: cards 2 cols, hero h1 reducido --- */ @media (max-width: 768px) { .hero-h1 { font-size: clamp(48px, 12vw, 80px); } .hero-tagline { font-size: 11px; max-width: 86%; } .editorial-grid { grid-template-columns: 1fr; } .bespoke-refs-grid, .nature-grid { grid-template-columns: repeat(2, 1fr); } .product-trust-mini { grid-template-columns: 1fr; gap: 12px; } /* Sections padding más compacto */ section { padding-left: clamp(16px, 4vw, 40px) !important; padding-right: clamp(16px, 4vw, 40px) !important; } /* Trust bar: 2 columnas en tablet */ .trust-bar { grid-template-columns: repeat(2, 1fr) !important; gap: 20px !important; } } /* --- Mobile 480px: 1 columna en todo --- */ @media (max-width: 480px) { .bespoke-refs-grid, .nature-grid { grid-template-columns: 1fr; } .trust-bar { grid-template-columns: 1fr !important; } .product-layout { grid-template-columns: 1fr !important; gap: 32px; } .product-info { padding-top: 0; } .footer { grid-template-columns: 1fr !important; gap: 32px; text-align: left; } .nosotros-cta-actions, .product-ctas { flex-direction: column; } .nosotros-cta-actions a, .product-ctas button { width: 100%; } } /* =========================================================== RONDA 9 — Announcement rotativa + sombra plato + fuentes producto =========================================================== */ /* --- Announcement rotativa (cliente 13/05: mensajes uno a la vez, no todos) --- */ .announcement--rotating { position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; } .announcement-track { position: relative; width: 100%; height: 32px; text-align: center; } .announcement-msg { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%) translateY(6px); opacity: 0; font-size: 10px; letter-spacing: 0.18em; color: var(--raiz); font-weight: 500; white-space: nowrap; /* Saliente: fade-out rápido SIN delay (sale primero). */ transition: opacity 0.3s ease, transform 0.3s ease; pointer-events: none; } .announcement-msg.is-active { opacity: 1; transform: translateY(-50%) translateY(0); /* Entrante: espera 0.3s a que el saliente termine antes de aparecer. Esto elimina el overlap visual de dos mensajes al mismo tiempo ("entrecortado"). */ transition: opacity 0.3s ease 0.3s, transform 0.3s ease 0.3s; } /* --- Plato Bespoke: sombra circular natural + tamaño consistente --- */ .bespoke-plato-platter { filter: drop-shadow(0 10px 18px rgba(68, 37, 16, 0.18)) drop-shadow(0 30px 36px rgba(68, 37, 16, 0.12)); } /* --- Producto detail: fondos blancos residuales → bespoke + fuentes legibles --- */ .product-page, .breadcrumb-bar, .product-info, .reviews-section, .product-process-section, .crosssell-section { background: var(--bespoke) !important; } /* Precios y CTAs más grandes (clienta 13/05: textos muy pequeños) */ .product-price { font-size: clamp(22px, 2.4vw, 30px) !important; letter-spacing: 0.04em !important; font-weight: 400 !important; margin: 14px 0 !important; } .product-by-author-text { font-size: 13px !important; line-height: 1.7 !important; } .product-by-author-text strong { font-size: 14px; } .variant-label { font-size: 13px !important; letter-spacing: 0.14em !important; } /* Bundle / set discount — agrandar */ .product-bundle { padding: 18px 22px !important; } .product-bundle-title { font-size: 14px !important; letter-spacing: 0.1em !important; margin-bottom: 6px !important; } .product-bundle-text { font-size: 12.5px !important; line-height: 1.7 !important; } /* Trust mini bar — labels más grandes */ .product-trust-mini-item { padding: 12px 8px !important; } .product-trust-mini-label { font-size: 12px !important; letter-spacing: 0.1em !important; margin: 8px 0 4px !important; } .product-trust-mini-sub { font-size: 10.5px !important; } /* Acordeón (Descripción/Cuidados/Envío) — más grande */ .product-accordion .accordion-trigger, .product-accordion summary { font-size: 14px !important; letter-spacing: 0.1em !important; padding: 18px 0 !important; } .product-accordion .accordion-body p, .product-accordion .accordion-body { font-size: 13px !important; line-height: 1.85 !important; } /* Proceso Artesanal de producto — círculo encierra el número correctamente */ .product-process-num { font-size: clamp(22px, 2.4vw, 28px) !important; letter-spacing: 0.04em !important; width: clamp(58px, 6vw, 78px) !important; height: clamp(58px, 6vw, 78px) !important; border-width: 1.5px !important; } .product-process-title { font-size: 15px !important; letter-spacing: 0.14em !important; margin: 8px 0 10px !important; } .product-process-desc { font-size: 12px !important; line-height: 1.75 !important; } /* Florecita separador del producto — igual al del home */ .product-page + .ornament-divider { background: var(--bespoke) !important; padding: 40px 20px !important; } .product-page + .ornament-divider .ornament-divider-flower, section.product-process-section + .ornament-divider .ornament-divider-flower { width: clamp(64px, 8vw, 90px) !important; aspect-ratio: 1 / 1 !important; height: auto !important; object-fit: contain; opacity: 0.7 !important; } /* =========================================================== RONDA 10 — Fixes UX/UI críticos del audit (subagente 13/05) TOP 5: iOS form zoom · tap targets · carousel arrows · tipo mobile · breakpoints =========================================================== */ /* (1) iOS zoom-on-focus de inputs: requiere font-size ≥ 16px en mobile */ @media (max-width: 768px) { .contacto-form input, .contacto-form select, .contacto-form textarea { font-size: 16px !important; /* evita auto-zoom en iOS Safari */ letter-spacing: 0.08em !important; } /* Inputs en general */ input[type="text"], input[type="email"], input[type="tel"], input[type="search"], textarea, select { font-size: 16px; } } /* (2) Tap targets mínimo 44×44px en mobile (Apple HIG) NOTA: `.product-card-color` EXCLUIDO — son swatches DISPLAY ONLY en cards (no tap target). Tap targets reales solo en PDP color-btn + filter-swatch. */ @media (max-width: 768px) { .color-btn, .qty-btn, .filter-swatch { min-width: 32px !important; min-height: 32px !important; } .variant-btn, .btn-primary, .btn-outline, .btn-primary-sm { min-height: 44px !important; padding-top: 12px !important; padding-bottom: 12px !important; } .navbar-actions svg { width: 26px !important; height: 26px !important; } } /* (3) Carousel mobile: scroll horizontal nativo con swipe + scroll-snap */ @media (max-width: 980px) { .carousel-arrow { display: none !important; } .carousel-outer { overflow-x: auto; overflow-y: visible; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; scrollbar-width: none; /* Firefox */ padding-bottom: 8px; } .carousel-outer::-webkit-scrollbar { display: none; } /* WebKit */ .carousel-track-wrapper { overflow: visible; } /* Cards ocupan 72vw en mobile · 38vw en tablet → scroll natural con peek de la siguiente card */ .carousel-track { display: flex !important; gap: 16px !important; grid-template-columns: none !important; transform: none !important; /* anular cualquier translate aplicado por JS */ padding: 0 20px; } .carousel-track > .product-card { scroll-snap-align: start; flex: 0 0 72vw; max-width: 320px; } } @media (min-width: 600px) and (max-width: 980px) { /* Tablet: cards más pequeñas para ver 2.5 en pantalla */ .carousel-track > .product-card { flex: 0 0 38vw; max-width: 300px; } } /* (4) Tipografía mobile: piso global de 12px en cualquier dato visible */ @media (max-width: 768px) { .product-tag-inline, .product-trust-mini-sub, .breadcrumb-sep, .cart-upsell-name, .cart-upsell-price, .review-author-meta, .payment-badge, .leaflet-control-attribution, .menta-popup-hours, .timeline-text, .proceso-step-desc, .valor-body, .bespoke-platos-note, .footer-tagline, .footer-links li, .footer-bottom-copy { font-size: 12px !important; letter-spacing: 0.06em !important; line-height: 1.65 !important; } /* Announcement bar legible en mobile pequeño */ .announcement, .announcement-msg { font-size: 10px !important; letter-spacing: 0.1em !important; } } @media (max-width: 375px) { .announcement-msg { font-size: 9.5px !important; letter-spacing: 0.08em !important; } } /* (5) Breakpoints consolidados: solucionar zonas-zombi (navbar regla doble 880/900) */ @media (max-width: 880px) { .navbar { grid-template-columns: 1fr auto !important; padding: 16px 20px !important; } .navbar-logo { justify-self: start; } .navbar-actions { justify-self: end; } } /* Fix bug: form contacto en colecciones/products */ @media (max-width: 540px) { .collection-grid { grid-template-columns: repeat(2, 1fr) !important; padding: 40px 16px 60px !important; gap: 16px !important; } .editorial-fotos { grid-template-rows: repeat(4, 200px) !important; gap: 14px !important; } .editorial-fotos-item img { object-position: center 30% !important; } } /* (6) Sticky-cta producto: NO solapar con floating-wa */ @media (max-width: 768px) { .product-sticky-cta { flex-direction: column-reverse !important; gap: 10px !important; } .product-sticky-cta button { width: 100% !important; padding: 14px !important; font-size: 13px !important; } /* Si sticky activado en la página de producto (que es visible), subir floats. Restringir el selector a body.page-producto para no afectar otras páginas en SPA. */ body.page-producto:has(.product-sticky-cta:not([hidden])) .floating-wa { bottom: 84px !important; } body.page-producto:has(.product-sticky-cta:not([hidden])) .floating-top { bottom: 156px !important; } body.page-producto:has(.product-sticky-cta:not([hidden])) { padding-bottom: 72px; } } /* (7) Políticas nav overflow horizontal */ @media (max-width: 768px) { .politicas-nav { overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 0; justify-content: flex-start; } .politicas-nav a { padding: 14px 16px !important; flex-shrink: 0; font-size: 11px !important; } } /* (8) Timeline rail mobile con linea vertical conectora */ @media (max-width: 980px) { .timeline-rail { grid-template-columns: 1fr !important; gap: 28px !important; position: relative; padding-left: 32px; } .timeline-rail::before { content: ''; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 1px; background: rgba(151, 67, 21, 0.3); } .timeline-dot { position: absolute; left: -28px; top: 4px; width: 14px; height: 14px; border-radius: 50%; background: var(--terracota); } .timeline-point { position: relative; } } /* ===== LIGHTBOX para fotos de producto ===== */ .lightbox { position: fixed; inset: 0; background: rgba(24, 17, 10, 0.92); z-index: 9999; display: none; align-items: center; justify-content: center; padding: 40px 20px; opacity: 0; transition: opacity 0.3s ease; } .lightbox.open { display: flex; opacity: 1; } .lightbox-img { max-width: 100%; max-height: 100%; object-fit: contain; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.6); transition: transform 0.3s ease; } .lightbox-close { position: absolute; top: 20px; right: 24px; width: 44px; height: 44px; background: rgba(244, 238, 223, 0.15); border: 1px solid rgba(244, 238, 223, 0.3); color: var(--bespoke); font-size: 24px; cursor: pointer; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: background 0.2s ease; } .lightbox-close:hover { background: rgba(244, 238, 223, 0.3); } .lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; background: rgba(244, 238, 223, 0.15); border: 1px solid rgba(244, 238, 223, 0.3); color: var(--bespoke); font-size: 24px; cursor: pointer; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: background 0.2s ease; } .lightbox-nav:hover { background: rgba(244, 238, 223, 0.3); } .lightbox-prev { left: 20px; } .lightbox-next { right: 20px; } .lightbox-counter { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); color: var(--bespoke); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.7; } .gallery-main { cursor: zoom-in; } .gallery-main img { cursor: zoom-in; } @media (max-width: 768px) { .lightbox-close { top: 14px; right: 14px; } .lightbox-prev { left: 8px; } .lightbox-next { right: 8px; } .lightbox-nav { width: 44px; height: 44px; font-size: 20px; } } /* =========================================================== RONDA 12 — video El Taller, editorial encuadres, variants disabled =========================================================== */ /* te-feature soporta