/* ─── TOKENS ─── */ :root { --cream: #FFFFFF; --cream-dark: #F7F5F2; --ink: #1A1208; --ink-light: #5C4A35; --copper: #8C6A4F; --copper-light: #B29B84; --gold: #C9A96E; --gold-light: #E8D5B0; --white: #FFFFFF; --border: rgba(0,0,0,0.06); --radius: 4px; --font-serif: 'Cormorant Garamond', Georgia, serif; --font-sans: 'Inter', system-ui, sans-serif; --transition: 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Mobile Responsive Tokens */ --space-section: clamp(3rem, 8vw, 8rem); --space-card: clamp(1rem, 4vw, 2rem); --font-size-hero: clamp(3rem, 11vw, 11rem); /* Alturas del recuadro blanco de cada tipo de card (ajustables desde el panel admin → Layout). Los valores fallback son los originales. */ --sillon-hero-h: 400px; --sillon-hero-h-mobile: 260px; --poltrona-img-h: 500px; --poltrona-img-h-mobile: 230px; --silla-zoom-h: 560px; } /* ─── RESET ─── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* ─── ROOT / SCROLL CONTAINER ────────────────────────────────── CRÍTICO: NO poner overflow-x: hidden en . En iOS Safari eso crea un contexto de scroll en el root que rompe: 1) El momentum scroll (inertia al soltar el dedo) 2) position: sticky (queda "trabado" en frames intermedios) Solo dejamos overflow-x: hidden en que es más seguro. Para defensa máxima usamos también overflow-x: clip si está soportado (Safari 16+, no crea contexto de scroll). */ html { scroll-behavior: smooth; font-size: clamp(15px, 4vw, 16px); scroll-padding-top: 80px; /* SIN overflow-x: el root debe scrollear libre para el momentum nativo. */ } /* CRÍTICO iOS: scroll-behavior: smooth en desactiva el momentum nativo (inertia al soltar el dedo). En mobile solo usamos el comportamiento por defecto del browser — los smooth-scrolls programáticos se hacen manualmente vía JS (rAF + easing), no vía CSS. */ @media (max-width: 768px) { html { scroll-behavior: auto; } } body { background: var(--cream); color: var(--ink); font-family: var(--font-sans); font-weight: 300; /* clip > hidden cuando está soportado (no crea contexto de scroll). */ overflow-x: hidden; overflow-x: clip; /* Asegurar que iOS habilite el momentum scroll vertical. */ -webkit-overflow-scrolling: touch; } img { display: block; max-width: 100%; } a { text-decoration: none; color: inherit; touch-action: manipulation; } button { touch-action: manipulation; } ul { list-style: none; } /* ─── SCROLLBAR ─── */ ::-webkit-scrollbar { width: 5px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 10px; } /* ─── NAV ─── */ #navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 100; transition: background var(--transition), backdrop-filter var(--transition); border-bottom: 1px solid transparent; /* GPU layer promotion to prevent iOS Webview jittering */ transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); will-change: transform; } #navbar.scrolled { background: rgba(250, 245, 238, 0.98); border-bottom-color: rgba(201, 169, 110, 0.2); } @media (min-width: 769px) { #navbar.scrolled { background: rgba(250, 245, 238, 0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } } .nav-inner { width: 100%; max-width: 100%; margin: 0; padding: 0 80px 0 24px; height: 72px; display: flex; align-items: center; justify-content: space-between; opacity: 0; animation: fadeDown 0.7s 0.85s ease forwards; } .logo { font-size: 1.6rem; display: inline-flex; align-items: baseline; gap: 0.3em; letter-spacing: 0.04em; transition: color var(--transition); color: var(--ink); } .logo-skin { font-family: var(--font-serif); font-weight: 400; color: inherit; } .logo-leather { font-family: var(--font-serif); font-weight: 400; font-style: italic; color: var(--gold); } #navbar.scrolled .logo-skin { color: var(--ink); } /* ─── RIGHT SIDE OF NAV (fixed links + hamburger) ─── */ .nav-right { display: flex; align-items: center; gap: 1.8rem; } .nav-fixed-links { display: flex; align-items: center; gap: 2rem; } .nav-fixed-links a { font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; transition: color var(--transition); position: relative; } .nav-fixed-links a::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 1px; background: var(--gold); transition: var(--transition); } .nav-fixed-links a:hover::after { width: 100%; } #navbar.scrolled .nav-fixed-links a { color: var(--ink-light); } .nav-fixed-links a:hover { color: var(--gold); } .nav-cta { border: 1px solid var(--gold); padding: 0.5rem 1.4rem; border-radius: 100px; color: var(--gold) !important; transition: all var(--transition) !important; } .nav-cta:hover { background: var(--gold); color: var(--ink) !important; } .nav-cta::after { display: none !important; } /* ─── BUBBLE MENU (hamburger dropdown) ─── */ .nav-links { position: fixed; top: 12px; right: 16px; width: clamp(180px, 56vw, 220px); /* compacto en mobile */ padding: 1.5rem 1.25rem 1.25rem; border-radius: 16px; background: rgba(26, 18, 8, 0.88); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border: 1px solid rgba(201, 169, 110, 0.15); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.04) inset; display: flex; flex-direction: column; align-items: flex-start; gap: 0; z-index: 300; /* Bubble expand from top-right */ clip-path: circle(0% at calc(100% - 32px) 32px); visibility: hidden; opacity: 0; transition: clip-path 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s ease, visibility 0.5s; } .nav-mobile-actions { display: flex; align-items: center; gap: 18px; } /* Eyebrow móvil (SILLAS · N° 01 + dims): oculto por defecto, solo visible en mobile */ .silla-mobile-eyebrow { display: none; } .menu-search-toggle { background: transparent; border: none; color: var(--ink); cursor: pointer; padding: 0.5rem; display: flex; align-items: center; justify-content: center; transition: color var(--transition); } /* Botón de búsqueda (lupa) — oculto en TODAS las pantallas por ahora */ .menu-search-toggle { display: none !important; } .capsule-title { font-family: var(--font-sans); font-size: 10px; font-weight: 400; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold); margin-bottom: 0; } .section-header-mobile-override { display: flex; flex-direction: column; padding: 32px 20px 20px; background: transparent; } .section-header-mobile-override h2 { font-family: var(--font-serif); font-size: 38px; font-weight: 300; line-height: 1.05; letter-spacing: -0.01em; margin: 12px 0 0 0; color: var(--ink); } .section-header-mobile-override h2 em { font-family: var(--font-serif); font-weight: 300; font-style: italic; color: var(--ink-light); } .mobile-only { display: none !important; } .nav-links.open { clip-path: circle(150% at calc(100% - 32px) 32px); visibility: visible; opacity: 1; } /* Menu overlay (click outside to close) */ .menu-overlay { position: fixed; inset: 0; z-index: 299; background: transparent; display: none; } .menu-overlay.active { display: block; } /* Links inside bubble */ .nav-links li { width: 100%; } .nav-links a { display: block; padding: 0.55rem 0.4rem; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.65); transition: color 0.3s ease, padding-left 0.3s ease, background 0.3s ease; border-radius: 6px; } .nav-links a:hover { color: var(--gold); padding-left: 1rem; background: rgba(255, 255, 255, 0.04); } .nav-links a.active { color: var(--gold); } /* Heading "CATEGORÍAS" — más compacto (el style inline en index.html lo hacía gigante, lo reducimos con selector más específico) */ .nav-links li.nav-menu-title { font-size: 0.92rem !important; padding-bottom: 0.35rem !important; margin-bottom: 0.55rem !important; letter-spacing: 0.08em !important; } /* Botón "Consultar" dentro del menú — más chico para acompañar */ .nav-links a.nav-cta { font-size: 0.7rem !important; padding: 0.55rem 1.1rem !important; letter-spacing: 0.16em !important; } /* Items de top (Nosotros + Consultar) con menos respiro */ .nav-links > li:nth-child(1) { margin-bottom: 0.25rem !important; } .nav-links > li:nth-child(2) { margin-bottom: 1.1rem !important; } /* ─── Hamburger menu en PC: +30% que la versión mobile ────────── En desktop hay aire de sobra, así que el panel respira más. */ @media (min-width: 769px) { .nav-links { width: clamp(250px, 22vw, 300px); padding: 2rem 1.6rem 1.65rem; border-radius: 20px; top: 14px; right: 18px; } .nav-links a { padding: 0.72rem 0.55rem; font-size: 0.93rem; letter-spacing: 0.16em; border-radius: 8px; } .nav-links li.nav-menu-title { font-size: 1.2rem !important; padding-bottom: 0.45rem !important; margin-bottom: 0.7rem !important; letter-spacing: 0.1em !important; } .nav-links a.nav-cta { font-size: 0.9rem !important; padding: 0.7rem 1.4rem !important; letter-spacing: 0.18em !important; } .nav-links > li:nth-child(2) { margin-bottom: 1.4rem !important; } /* La burbuja al abrirse también sale del mismo punto, ajustamos el anchor */ .nav-links.open { clip-path: circle(180% at calc(100% - 38px) 38px); } } /* Staggered animation for items */ .nav-links li { opacity: 0; transform: translateY(8px); transition: opacity 0.3s ease, transform 0.3s ease; } .nav-links.open li { opacity: 1; transform: translateY(0); } .nav-links.open li:nth-child(1) { transition-delay: 0.08s; } .nav-links.open li:nth-child(2) { transition-delay: 0.13s; } .nav-links.open li:nth-child(3) { transition-delay: 0.18s; } .nav-links.open li:nth-child(4) { transition-delay: 0.23s; } .nav-links.open li:nth-child(5) { transition-delay: 0.28s; } .nav-links.open li:nth-child(6) { transition-delay: 0.33s; } .nav-links.open li:nth-child(7) { transition-delay: 0.38s; } /* ─── HERO ─── */ /* ─── HERO (con animación scroll-hijack del sillón) ──────────── #hero ocupa exactamente 100vh. Mientras el usuario está en él, el wheel / touch / teclado avanzan la animación SIN mover la página (preventDefault sobre los eventos). Solo cuando el despiece termina se libera el hijack y el scroll normal de la página retoma. Implementación: ver hero-scroll.js. */ /* ─── HERO: scroll-driven animation (sticky, no hijack) ─────────── #hero es una "zona de scroll" de 200vh. Dentro va .hero-sticky que es position:sticky;top:0;height:100vh — queda pinned al tope del viewport mientras el usuario scrollea por los 100vh extra. Durante ese rango, hero-scroll.js calcula el progress 0→1 desde scrollY. Después de los 100vh, el sticky se despega y aparece #beneficios. Ventaja vs el viejo hijack: el momentum nativo del browser (inertia iOS, fling en trackpads) funciona naturalmente. */ #hero { position: relative; height: 200vh; height: 200dvh; background: #FFFFFF; isolation: isolate; /* Override de la regla genérica `section { padding: ... }`: el hero necesita ocupar el viewport entero sin padding extra arriba/abajo que rompa el cálculo de altura del .hero-sticky. */ padding: 0 !important; } .hero-sticky { position: sticky; top: 0; width: 100%; height: 100vh; height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; overflow: hidden; background: #FFFFFF; /* Hardware acceleration to prevent sticky jitter in iOS Webviews */ transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); will-change: transform; } .hero-bg { display: none; /* Fondo dorado/marrón antiguo eliminado — ahora blanco puro */ } .hero-content { position: relative; z-index: 2; padding: 0 5rem; max-width: 640px; justify-self: center; width: 100%; display: flex; flex-direction: column; align-items: center; text-align: center; } .hero-scroll-stage { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; opacity: 0; animation: heroScaleIn 1.4s 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; } #hero-scroll-canvas { width: 100%; height: 100%; display: block; /* Multiply: cualquier off-white residual del video se aplasta contra el fondo blanco puro del hero. Defensa secundaria al color-correct hecho en ffmpeg. */ mix-blend-mode: multiply; } /* Flecha minimalista dorada bottom-center que indica que el sitio se puede explorar scrolleando. Se desvanece apenas el usuario empieza a interactuar (clase .fade añadida por el JS). */ /* (Las reglas viejas de .hero-scroll-arrow se reemplazaron por .hero-scroll-hint más abajo. Ver bloque "Hero scroll hint".) */ @media (max-width: 768px) { .hero-sticky { /* Flex vertical: texto ocupa el espacio superior, canvas toma el resto */ display: flex; flex-direction: column; padding: 0; /* overflow:hidden aquí es seguro porque el sticky ya está inside del hero que scrollea libremente — no afecta el momentum del documento. */ overflow: hidden; } .hero-content { /* flex:0 + auto para que el bloque de texto solo tome lo que necesita y ceda el espacio restante al canvas. Evita que en pantallas bajas el texto "robe" espacio y comprima el sillón hasta desaparecer. */ flex: 0 0 auto; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 5.5rem 1.5rem 1.25rem; max-width: none; text-align: center; } .hero-content .hero-sub { margin-bottom: 1rem; } /* Canvas: ocupa todo el espacio restante del sticky después del texto. min-height garantiza que aunque la pantalla sea muy baja, el sillón siempre tenga al menos 200px de espacio para respirar antes de que el sticky se despegue y aparezca #beneficios. */ .hero-scroll-stage { flex: 1 1 0; width: 100%; min-height: 200px; /* Quitamos aspect-ratio fijo: el stage crece para llenar el espacio disponible, sin contraer el texto. */ aspect-ratio: unset; padding-top: 0; } #hero-scroll-canvas { width: 100%; height: 100%; display: block; } .hero-scroll-arrow { width: 26px; height: 26px; bottom: 16px; } } .hero-eyebrow { font-size: 0.72rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold); margin-bottom: 1.5rem; opacity: 0; animation: fadeDown 1s 0.4s ease forwards; } /* Stage del título — contiene el canvas que reproduce el video del "Skin Leather" wireframe sincronizado con el despiece del sillón. El ancho se escala con el viewport como antes hacía el font-size del H1. aspect-ratio mantiene la proporción del video (1024/676 ≈ 1.515:1). */ .hero-title-stage { position: relative; width: 100%; max-width: clamp(280px, 38vw, 560px); aspect-ratio: 1024 / 676; margin-bottom: 2rem; opacity: 0; animation: heroFadeRight 1.2s 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; isolation: isolate; } #hero-title-canvas { width: 100%; height: 100%; display: block; mix-blend-mode: multiply; } /* H1 oculto visualmente pero presente para SEO y screen readers. */ .hero-title-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .hero-sub { font-size: 1rem; line-height: 1.8; color: var(--ink-light); max-width: 380px; margin-bottom: 3rem; opacity: 0; animation: fadeUp 1s 0.65s ease forwards; } /* ─── Hero scroll hint ─── */ /* Reemplaza la vieja flechita dorada al bottom-center del hero. Texto "Deslizá para ver el catálogo" + flecha bouncing. Posicionado absolute bottom-center del .hero-sticky para que no se pegue al borde inferior sino que quede visible y elegante. Se desvanece cuando el usuario empieza a deslizar (progress > 0.02) via JS .fade. */ .hero-scroll-hint { grid-column: 1 / -1; position: absolute; bottom: 38px; left: 50%; /* Centrado en el medio de la pantalla (eje vertical de simetría) */ transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 0.55rem; text-align: center; pointer-events: none; z-index: 5; opacity: 0; animation: fadeUpHint 1s 0.85s ease forwards; transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1); } .hero-scroll-hint.fade { opacity: 0; } .hero-scroll-hint-text { font-family: var(--font-sans); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-light); opacity: 0.72; white-space: nowrap; } .hero-scroll-hint-arrow { display: inline-flex; width: 22px; height: 22px; color: var(--gold); animation: heroHintBob 2s ease-in-out infinite; } .hero-scroll-hint-arrow svg { width: 100%; height: 100%; display: block; } @keyframes heroHintBob { 0%, 100% { transform: translateY(0); opacity: 0.85; } 50% { transform: translateY(7px); opacity: 1; } } /* Mobile: hint más compacto, un poco más arriba para no chocar con el sillón animado que en mobile está en la parte inferior del canvas. */ @media (max-width: 768px) { .hero-scroll-hint { left: 50%; /* Centrado en toda la pantalla en mobile */ bottom: 16px; /* Bajado para no chocar con las patas del sillón animado */ gap: 0.4rem; } .hero-scroll-hint-text { font-size: 0.62rem; letter-spacing: 0.2em; } .hero-scroll-hint-arrow { width: 18px; height: 18px; } } @media (prefers-reduced-motion: reduce) { .hero-scroll-hint-arrow { animation: none; } } /* ─── SECTIONS ─── */ section { padding: 8rem 2rem; } .section-header { text-align: center; margin-bottom: 5rem; } .section-label { font-size: 0.7rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold); margin-bottom: 1rem; display: block; } h2 { font-family: var(--font-serif); font-size: clamp(2.5rem, 6vw, 4.5rem); font-weight: 300; line-height: 1.1; color: var(--ink); } h2 em { font-style: italic; color: var(--ink-light); } /* ─── VARIANT BUTTONS ROW (static, outside fade zone) ─── */ .variants-static-row { padding: 0 5rem; margin-bottom: 1rem; } /* ─── PRODUCTS GRID & CATEGORIES ─── */ .category-title { font-family: var(--font-serif); font-size: 3rem; font-weight: 300; text-transform: uppercase; letter-spacing: 0.15em; color: var(--ink-light); text-align: center; margin: 6rem 0 3rem 0; width: 100%; } .products-grid { max-width: 1280px; margin: 0 auto; display: flex; flex-direction: column; gap: 4rem; } .product-card { background-color: #FFFFFF; padding: 1rem 2rem; margin-bottom: 2rem; border-radius: 24px; box-shadow: 0 8px 32px rgba(26,18,8,0.07); position: relative; border: 1px solid rgba(26,18,8,0.05); overflow: hidden; /* Estado inicial — el card "respira" desde un poco más abajo, escalado levemente y con un blur sutil para sensación cinematográfica al hacer scroll. La transición se define en la regla compartida arriba. */ opacity: 0; transform: translateY(48px) scale(0.96); filter: blur(4px); } .product-card.visible { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); } .product-fade-zone { display: grid; grid-template-columns: 1.1fr 1fr 220px; gap: 0.5rem 2rem; align-items: center; transition: opacity 0.5s ease; } .product-fade-zone.fade-out { opacity: 0; pointer-events: none; } /* POLTRONA EXCLUSIVE LAYOUT */ .product-card-poltrona { display: flex; flex-direction: column; background-color: #FFFFFF; padding: 4rem 5rem; margin-bottom: 2rem; border-radius: 40px; position: relative; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.06); overflow: hidden; /* Entrada cinematográfica (ver regla compartida con transition) */ opacity: 0; transform: translateY(48px) scale(0.96); filter: blur(4px); } .product-card-poltrona.visible { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); } .poltrona-fade-zone { display: grid; grid-template-columns: 1.2fr 1fr; gap: 3rem; align-items: center; min-height: 550px; overflow: visible; transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1); } .poltrona-fade-zone.inverted { grid-template-columns: 1fr 1.2fr; } .poltrona-fade-zone.fade-out { opacity: 0; pointer-events: none; } .poltrona-img-col { height: var(--poltrona-img-h, 500px); min-height: var(--poltrona-img-h, 500px); overflow: visible; /* Reverted to visible to prevent clipping the legs of scaled images */ display: flex; align-items: center; justify-content: center; padding: 1rem 2rem 2rem; } .poltrona-img-col img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; transition: filter 0.5s ease; } .poltrona-info-col { display: flex; flex-direction: column; justify-content: center; min-height: 400px; position: relative; z-index: 10; } /* Centrar horizontalmente los swatches cuando están en el cuadrante derecho */ .poltrona-fade-zone:not(.inverted) .poltrona-info-col { align-items: center; } .poltrona-info-col .swatches-container { margin-bottom: 0; } /* TOP ROW: title left + medidas right */ .poltrona-top-row { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1.5rem; gap: 2rem; } .poltrona-header { border-left: 3px solid var(--ink-light); padding-left: 2rem; flex-shrink: 0; position: relative; z-index: 10; /* Text strictly above images */ } .poltrona-header h1 { font-family: var(--font-serif); font-size: 4.5rem; font-weight: 300; color: var(--ink); line-height: 1; margin: 0; } .poltrona-medidas-top { display: flex; align-items: flex-start; justify-content: flex-end; flex-shrink: 0; } .medidas-img { max-width: 220px; width: 100%; height: auto; display: block; mix-blend-mode: multiply; } .poltrona-dims { display: flex; gap: 2rem; margin-bottom: 3rem; font-family: var(--font-sans); color: var(--ink-light); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.1em; } .poltrona-dims b { color: var(--ink-dark); font-weight: 600; } /* MEDIDAS SILHOUETTE */ .medidas-box { margin-bottom: 2rem; max-width: 240px; } .medidas-img { width: 100%; height: auto; display: block; mix-blend-mode: multiply; } /* Col 1: ZOOM IMAGE */ .dynamic-img { opacity: 1; transition: opacity 0.5s ease, filter 0.5s ease !important; } .dynamic-img.fade-out { opacity: 0; } .product-zoom { height: var(--silla-zoom-h, 560px); border-radius: 12px 12px 12px 120px; overflow: visible; /* Prevent chopping scaled images */ background-color: transparent; } .product-zoom img { width: 100%; height: 100%; object-fit: contain; padding: 1rem; mix-blend-mode: multiply; transition: filter 0.5s ease; } /* Col 2: INFO & SWATCHES */ .product-details { display: flex; flex-direction: column; justify-content: center; min-height: 400px; position: relative; z-index: 10; /* Ensure swatches and prices are above images */ } .silla-static-header { margin-bottom: 2rem; position: relative; z-index: 10; } /* Desktop: nombre arriba izquierda, categoría arriba derecha */ .silla-card-top { display: flex; justify-content: space-between; align-items: baseline; padding: 0.25rem 0 0.25rem; width: 100%; position: relative; z-index: 5; } .silla-top-name { font-family: var(--font-serif); font-size: 4.5rem; font-weight: 500; color: #8C6A4F; letter-spacing: 0.12em; text-transform: uppercase; line-height: 1; margin: 0; } .silla-top-cat { font-family: var(--font-serif); font-size: 2.5rem; font-style: italic; font-weight: 400; color: #B29B84; line-height: 1; } .product-details h1 { font-family: var(--font-serif); font-size: 5rem; font-weight: 500; color: #8C6A4F; /* Cobre oscuro elegante */ letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: -1.2rem; } .product-details h2 { font-family: var(--font-serif); font-size: 3.5rem; font-weight: 400; font-style: italic; color: #B29B84; margin-bottom: 4rem; } .swatches-container { display: flex; gap: 3rem; margin-bottom: 3rem; } .swatch-col { display: flex; flex-direction: column; gap: 1.5rem; min-width: 200px; } .swatch-col h3 { font-family: var(--font-sans); font-size: 0.85rem; font-weight: 600; color: #4A4A4A; margin-bottom: 1rem; line-height: 1.4; letter-spacing: 0.05em; } .swatch-col h3 b { color: #1a1208; font-weight: 700; } /* Swatch Items (Circle + Text) */ .swatch-item { display: flex; align-items: center; gap: 1rem; cursor: pointer; position: relative; } .swatch-circle { width: 44px; height: 44px; border-radius: 50%; border: none; box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 2px 6px rgba(0, 0, 0, 0.05); transition: transform 0.3s cubic-bezier(0.25, 1.2, 0.5, 1), box-shadow 0.3s ease; position: relative; overflow: hidden; } /* Texture Overlays (Cuero, Madera, Metal) */ .swatch-item[data-type="leather"] .swatch-circle::after { content: ''; position: absolute; inset: 0; border-radius: 50%; pointer-events: none; mix-blend-mode: overlay; opacity: 1; background-image: url('data:image/svg+xml;utf8,'); } .swatch-item[data-type="wood"] .swatch-circle::after { content: ''; position: absolute; inset: 0; border-radius: 50%; pointer-events: none; mix-blend-mode: overlay; opacity: 1; background-image: url('data:image/svg+xml;utf8,'); } .swatch-item[data-type="metal"] .swatch-circle::after { content: ''; position: absolute; inset: 0; border-radius: 50%; pointer-events: none; mix-blend-mode: normal; background: linear-gradient(135deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 40%, rgba(0, 0, 0, 0.1) 60%, rgba(0, 0, 0, 0.4) 100%); } /* Hover and Active states without borders */ .swatch-item:hover .swatch-circle { transform: scale(1.1); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1), 0 5px 12px rgba(0, 0, 0, 0.1); } .swatch-item.active .swatch-circle { transform: scale(1.15); box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.2), 0 8px 15px rgba(0, 0, 0, 0.15); } /* Estrella estática reemplazada por el .swatch-pointer flotante (más abajo) */ .swatch-item.active::before { display: none; } /* Puntero ✦ que se desliza fluido entre swatches (uno por columna). La posición Y se setea por JS (updateSwatchPointer); el CSS aporta el easing con un leve "spring" para que se sienta orgánico. */ .swatch-col { position: relative; } .swatch-pointer { position: absolute; left: -22px; top: 0; font-size: 16px; line-height: 1; color: var(--gold); pointer-events: none; opacity: 0; transform: translate3d(0, 0, 0); margin-top: -8px; /* compensa el centro vertical del glyph */ transition: transform 0.55s cubic-bezier(0.34, 1.4, 0.64, 1), opacity 0.35s ease; will-change: transform, opacity; text-shadow: 0 0 12px rgba(201, 169, 110, 0.45); } /* Durante el cambio de variante (fade-out del container), el puntero también desaparece para que el nuevo se reposicione limpio. */ .swatches-container.fade-out .swatch-pointer { opacity: 0 !important; } .swatch-name { font-family: var(--font-sans); font-size: 0.95rem; color: rgba(26, 18, 8, 0.6); transition: color 0.3s ease, transform 0.3s ease; } .swatch-item:hover .swatch-name { color: var(--ink); } .swatch-item.active .swatch-name { color: var(--ink); -webkit-text-stroke: 0.5px var(--ink); transform: translateX(3px); } /* Col 3: THE 3 VIEWS (Front, Side, Iso) */ .product-views { display: flex; flex-direction: column; justify-content: space-between; height: 560px; border-left: 1px solid rgba(0, 0, 0, 0.15); /* Separador vertical */ padding-left: 2rem; } .view-item { position: relative; height: 30%; display: flex; align-items: center; justify-content: center; } .view-item img { max-width: 100%; max-height: 100%; object-fit: contain; mix-blend-mode: multiply; transition: filter 0.5s ease; } /* DIMENSION LINES CSS */ .dim-line { position: absolute; background-color: #333; } .dim-val { position: absolute; font-family: var(--font-sans); font-size: 0.65rem; font-weight: 600; color: #333; } .dim-w-line { top: 0px; left: 15%; width: 70%; height: 1px; } .dim-w-line::before, .dim-w-line::after { content: ''; position: absolute; width: 1px; height: 6px; background: #333; top: 0; } .dim-w-line::before { left: 0; } .dim-w-line::after { right: 0; } .dim-w-val { top: -15px; left: 50%; transform: translateX(-50%); } .dim-h-line { left: 0; top: 15%; width: 1px; height: 70%; } .dim-h-line::before, .dim-h-line::after { content: ''; position: absolute; width: 6px; height: 1px; background: #333; left: -3px; } .dim-h-line::before { top: 0; } .dim-h-line::after { bottom: 0; } .dim-h-val { left: -30px; top: 50%; transform: translateY(-50%); } .dim-d-line { right: 0; bottom: 15%; width: 1px; height: 40%; } .dim-d-line::before, .dim-d-line::after { content: ''; position: absolute; width: 6px; height: 1px; background: #333; left: -3px; } .dim-d-line::before { top: 0; } .dim-d-line::after { bottom: 0; } .dim-d-val { right: -30px; bottom: 35%; } /* Composite Mode for Pre-composed 3-view images */ .product-views.composite-mode { display: flex; justify-content: center; align-items: center; overflow: hidden; padding: 0; border-left: none; /* Sin borde separador */ mix-blend-mode: multiply; /* El contenedor completo se mezcla con el fondo */ } .composite-wrapper { width: 100%; height: 100%; display: flex; justify-content: center; mix-blend-mode: multiply; } .full-height-composite { width: 100%; height: 100%; object-fit: contain; padding: 1rem; mix-blend-mode: multiply; } /* ACTION BUTTONS (Product Card) */ .product-actions { display: flex; flex-direction: column; gap: 0.8rem; margin-top: 1rem; } /* Sillas desktop — bottom row abarca todo el ancho del card (grid-column: 1/-1) */ .silla-bottom-row { /* Layout via inline style (igual que poltrona-bottom-row) */ } .btn-product-wa { display: inline-flex; align-items: center; gap: 0.8rem; padding: 0.8rem 0; background-color: transparent; color: var(--ink); font-family: var(--font-sans); font-weight: 600; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.15em; transition: all 0.3s ease; width: fit-content; border-bottom: 1px solid transparent; } .btn-product-wa:hover { color: #25D366; border-bottom: 1px solid #25D366; padding-left: 5px; } .btn-product-wa svg { width: 22px; height: 22px; fill: currentColor; } .btn-reset-color { display: inline-flex; align-items: center; background-color: transparent; color: rgba(26, 18, 8, 0.5); /* Ink but 50% opacity */ font-family: var(--font-sans); font-weight: 500; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; transition: all 0.3s ease; border: none; cursor: pointer; width: fit-content; padding: 0.5rem 0; border-bottom: 1px solid transparent; } .btn-reset-color:hover { color: var(--ink); padding-left: 5px; } /* ─── NOSOTROS ─── */ #nosotros { background: var(--ink); color: var(--white); padding: 10rem 2rem; } #nosotros h2 { color: var(--white); margin-bottom: 1.5rem; } #nosotros h2 em { color: var(--gold-light); } #nosotros .section-label { color: var(--gold); } .nosotros-inner { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 6rem; align-items: center; } .nosotros-text { display: flex; flex-direction: column; gap: 1.5rem; } .nosotros-text p { color: rgba(255, 255, 255, 0.7); line-height: 1.9; font-size: 1.05rem; } .nosotros-location { margin-top: 2.5rem; padding-top: 2.5rem; border-top: 1px solid rgba(255, 255, 255, 0.1); } .nosotros-location h4 { font-family: var(--font-serif); font-size: 1.8rem; color: var(--white); font-weight: 400; margin-bottom: 0.5rem; } .nosotros-location p { font-size: 0.95rem; color: rgba(255, 255, 255, 0.5); margin-bottom: 2rem; } .btn-text-link { display: inline-flex; align-items: center; font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); transition: all var(--transition); border-bottom: 1px solid transparent; padding-bottom: 3px; } .btn-text-link:hover { color: var(--white); border-bottom-color: var(--white); padding-left: 10px; } .nosotros-map { width: 100%; height: 500px; border-radius: 12px; overflow: hidden; background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.05); } /* ─── CONTACTO ─── */ #contacto { text-align: center; background: var(--cream-dark); } .contacto-inner { max-width: 640px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 1.5rem; } .contacto-inner p { color: var(--ink-light); line-height: 1.8; } .btn-whatsapp-premium { display: inline-flex; align-items: center; gap: 1.2rem; padding: 1.4rem 3.5rem; background: var(--ink); border: 1px solid var(--gold); color: var(--gold); font-size: 0.85rem; letter-spacing: 0.2em; text-transform: uppercase; border-radius: 100px; transition: all var(--transition); margin-top: 1.5rem; } .btn-whatsapp-premium svg { width: 22px; height: 22px; fill: var(--gold); transition: fill var(--transition); } .btn-whatsapp-premium:hover { background: var(--gold); color: var(--ink); transform: translateY(-4px); box-shadow: 0 15px 40px rgba(201, 169, 110, 0.25); } .btn-whatsapp-premium:hover svg { fill: var(--ink); } /* ─── FOOTER ─── */ footer { background: var(--ink); color: rgba(255, 255, 255, 0.35); text-align: center; padding: 2.5rem 2rem; font-size: 0.78rem; line-height: 2; letter-spacing: 0.05em; } footer strong { color: rgba(255, 255, 255, 0.7); } /* ─── REVEAL ANIMATION ─── */ .reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease, transform 0.8s ease; } .reveal.visible { opacity: 1; transform: translateY(0); } /* ─── FADE TRANSITIONS ─── */ .fade-out { opacity: 0 !important; pointer-events: none; } /* Entrada cinematográfica al hacer scroll: el card aparece desde abajo con un fade + slight scale + blur sutil, easing cubic-bezier orgánico. Funciona para sillas, poltronas/bancos/banquetas/puffs y sillones, tanto en PC como en mobile (la regla no está scopeada a viewport). */ .product-card-poltrona, .product-card, .product-card-sillon { transition: opacity 0.95s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.95s cubic-bezier(0.22, 0.61, 0.36, 1), filter 0.95s cubic-bezier(0.22, 0.61, 0.36, 1) !important; will-change: opacity, transform, filter; } /* Mobile: blur más liviano para no castigar GPUs de gama media y duración un toque más corta para sentirse ágil con el scroll de un dedo. */ @media (max-width: 768px) { .product-card:not(.visible), .product-card-poltrona:not(.visible), .product-card-sillon:not(.visible) { transform: translateY(36px) scale(0.97); filter: blur(2.5px); } .product-card-poltrona, .product-card, .product-card-sillon { transition: opacity 0.8s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1), filter 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) !important; } } .dynamic-img { transition: opacity 0.55s cubic-bezier(0.25, 0.1, 0.25, 1), filter 0.5s ease; } .fade-target { transition: opacity 0.45s cubic-bezier(0.25, 0.1, 0.25, 1); } /* ─── STAGGERED ENTRANCE ANIMATIONS ───────────────────────── - Imagen del producto: fade + scale 0.95 → 1 - Swatches (cuero / estructura): fade + slide-in con stagger (delay calculado vía --idx por item) */ .poltrona-img-col.fade-target, .product-zoom.fade-target { transition: opacity 0.55s cubic-bezier(0.25, 0.1, 0.25, 1); will-change: opacity; } /* Container de swatches: que NO use opacity 0 (la dejamos en los items) para que el stagger se vea limpio y no se enmascare */ .swatches-container.fade-target.fade-out { opacity: 1 !important; } .swatch-item { transition: opacity 0.45s cubic-bezier(0.25, 0.1, 0.25, 1) calc(var(--idx, 0) * 70ms), transform 0.45s cubic-bezier(0.25, 0.1, 0.25, 1) calc(var(--idx, 0) * 70ms); will-change: opacity, transform; } .product-card-poltrona:not(.visible) .swatch-item, .product-card:not(.visible) .swatch-item, .swatches-container.fade-out .swatch-item { opacity: 0; transform: translateX(-12px); } /* Bottom row (botones precio/whatsapp): mismo timing que la imagen para que entre en sync con todo el resto y no salte de golpe */ .poltrona-bottom-row.fade-target, .silla-bottom-row.fade-target { transition: opacity 0.55s cubic-bezier(0.25, 0.1, 0.25, 1), transform 0.55s cubic-bezier(0.25, 0.1, 0.25, 1); will-change: opacity, transform; } .product-card-poltrona:not(.visible) .poltrona-bottom-row, .product-card:not(.visible) .silla-bottom-row, .poltrona-bottom-row.fade-target.fade-out, .silla-bottom-row.fade-target.fade-out { transform: translateY(8px); } /* ─── HEADER (TÍTULO) ENTRANCE ─────────────────────────────── Cuando el card todavía no es .visible, el header arranca apenas desplazado a la izquierda con opacidad reducida. Al añadirse .visible transita a su posición natural con un delay corto que cierra el stagger del card → header → imagen → swatches → bottom row. */ .silla-card-top, .poltrona-header, .sillon-header-row { transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) 0.15s, transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) 0.15s; will-change: opacity, transform; } .product-card:not(.visible) .silla-card-top, .product-card-poltrona:not(.visible) .poltrona-header, .product-card-sillon:not(.visible) .sillon-header-row { opacity: 0; transform: translateX(-14px); } /* IMAGEN DEL CARD — leve zoom-in al entrar (no aplica al sillón porque ahí la imagen ya es un carrusel con scroll-snap y no debe escalarse). */ .poltrona-img-col, .product-zoom { transition: opacity 0.85s cubic-bezier(0.22, 0.61, 0.36, 1) 0.2s, transform 0.85s cubic-bezier(0.22, 0.61, 0.36, 1) 0.2s; will-change: opacity, transform; } .product-card-poltrona:not(.visible) .poltrona-img-col, .product-card:not(.visible) .product-zoom { opacity: 0; transform: scale(0.92); } /* ─── VARIANT BUTTONS (iOS Segmented Control) ─── */ .variants-bar-wrapper { display: flex; align-items: center; gap: 15px; margin-bottom: 25px; } .variants-segmented { position: relative; display: inline-flex; background: rgba(26, 18, 8, 0.05); padding: 4px; border-radius: 100px; z-index: 1; } .sc-bubble { position: absolute; top: 4px; left: 0; height: calc(100% - 8px); background: var(--ink); border-radius: 100px; transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1), width 0.35s cubic-bezier(0.25, 1, 0.5, 1); z-index: -1; } .variant-btn { position: relative; border: none; padding: 0.5rem 1.4rem; border-radius: 100px; font-family: var(--font-sans); font-size: 0.82rem; font-weight: 500; color: var(--ink); background: transparent; cursor: pointer; letter-spacing: 0.02em; transition: color 0.35s ease; z-index: 2; } .variant-btn.active { color: #ffffff; } .variant-btn:hover:not(.active) { opacity: 0.6; } /* ─── KEYFRAMES ─── */ @keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeUpHint { from { opacity: 0; transform: translate(-50%, 20px); } to { opacity: 1; transform: translate(-50%, 0); } } @keyframes fadeDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } @keyframes heroScaleIn { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: scale(1); } } @keyframes heroFadeRight { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: translateX(0); } } @keyframes heroScaleUp { from { opacity: 0; transform: translateY(12px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } } /* ─── NAV ONBOARDING HINT ──────────────────────────────────── Aparece UNA SOLA VEZ después de la cortina, primera visita. Spotlight sobre el hamburger del navbar + flecha + tooltip. El resto de la pantalla queda en penumbra. Se cierra al tocar/click o solo después de 6 segundos. Persistencia en localStorage. */ #nav-onboarding { position: fixed; inset: 0; z-index: 9500; pointer-events: auto; opacity: 0; transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1); } #nav-onboarding.visible { opacity: 1; } /* Spotlight: el "halo" iluminado sobre el hamburger. Es un círculo transparente cuya sombra (rgba negro) cubre toda la pantalla salvo este área — ese es el spotlight effect. JS calcula posición/tamaño. */ .nav-onboarding-spotlight { position: absolute; border-radius: 50%; pointer-events: none; box-shadow: 0 0 0 9999px rgba(13, 8, 6, 0.72), 0 0 24px 6px rgba(201, 169, 110, 0.45) inset, 0 0 18px 2px rgba(201, 169, 110, 0.55); animation: navOnboardPulse 2s ease-in-out infinite; background: transparent; } @keyframes navOnboardPulse { 0%, 100% { box-shadow: 0 0 0 9999px rgba(13, 8, 6, 0.72), 0 0 24px 6px rgba(201, 169, 110, 0.45) inset, 0 0 18px 2px rgba(201, 169, 110, 0.55); } 50% { box-shadow: 0 0 0 9999px rgba(13, 8, 6, 0.78), 0 0 28px 8px rgba(201, 169, 110, 0.55) inset, 0 0 26px 6px rgba(201, 169, 110, 0.75); } } .nav-onboarding-tooltip { position: absolute; display: flex; flex-direction: column; align-items: flex-end; gap: 0.5rem; max-width: 220px; transform: translateY(20px); opacity: 0; transition: opacity 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) 0.25s, transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) 0.25s; } #nav-onboarding.visible .nav-onboarding-tooltip { opacity: 1; transform: translateY(0); } .nav-onboarding-arrow { width: 56px; height: 84px; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4)); } .nav-onboarding-arrow path { stroke-dasharray: 200; stroke-dashoffset: 200; animation: navOnboardDrawArrow 1.2s cubic-bezier(0.22, 0.61, 0.36, 1) 0.55s forwards; } @keyframes navOnboardDrawArrow { to { stroke-dashoffset: 0; } } .nav-onboarding-text { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: 1.15rem; line-height: 1.3; color: #F4ECDD; text-align: right; margin: 0; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5); letter-spacing: 0.01em; } .nav-onboarding-tap-hint { position: absolute; bottom: max(2rem, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); font-family: var(--font-sans); font-size: 0.72rem; font-weight: 400; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(244, 236, 221, 0.55); opacity: 0; animation: navOnboardHintFade 0.6s ease-out 1.4s forwards; white-space: nowrap; } @keyframes navOnboardHintFade { to { opacity: 1; } } @media (max-width: 640px) { .nav-onboarding-tooltip { max-width: 180px; } .nav-onboarding-text { font-size: 1rem; } .nav-onboarding-arrow { width: 48px; height: 72px; } } @media (prefers-reduced-motion: reduce) { .nav-onboarding-spotlight { animation: none; } .nav-onboarding-arrow path { stroke-dasharray: none; stroke-dashoffset: 0; animation: none; } } /* ─── PAGE CURTAIN (intro animation + preload) ─── */ body.curtain-active { overflow: hidden !important; height: 100vh !important; height: 100dvh !important; touch-action: none !important; } #page-curtain { position: fixed; inset: 0; z-index: 9999; background: #0D0806; pointer-events: auto; /* Bloquear clics mientras carga */ touch-action: none; /* Bloquear deslizamiento táctil */ opacity: 1; transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1); display: flex; align-items: center; justify-content: center; } #page-curtain.fade-out { opacity: 0; pointer-events: none; /* Permitir interacción durante y post fade */ } .curtain-inner { display: flex; flex-direction: column; align-items: center; gap: 1.8rem; opacity: 0; transform: translateY(8px); animation: curtainFadeIn 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) 0.15s forwards; } /* ─── Icono fluido de muebles ─── */ /* 4 siluetas (silla → sillón → puff → banco) en cross-fade ciclico. Cada silueta es un dentro del SVG; las apilamos absolutas y alternamos opacidad con animation-delay. Loop total: 8s. Bonus: leve "breathe" en el contenedor para sensación de fluido. */ .curtain-icon { width: 64px; height: 48px; position: relative; animation: curtainIconBreathe 4s ease-in-out infinite; } .curtain-icon svg { position: absolute; inset: 0; width: 100%; height: 100%; } .curtain-icon-shape { opacity: 0; animation: curtainShapeCycle 8s ease-in-out infinite; transform-origin: 40px 32px; } .curtain-icon-shape:nth-child(1) { animation-delay: 0s; } .curtain-icon-shape:nth-child(2) { animation-delay: 2s; } .curtain-icon-shape:nth-child(3) { animation-delay: 4s; } .curtain-icon-shape:nth-child(4) { animation-delay: 6s; } @keyframes curtainShapeCycle { 0% { opacity: 0; transform: scale(0.85) translateY(3px); } 6% { opacity: 1; transform: scale(1) translateY(0); } 20% { opacity: 1; transform: scale(1) translateY(0); } 26% { opacity: 0; transform: scale(0.85) translateY(-3px); } 100% { opacity: 0; } } @keyframes curtainIconBreathe { 0%, 100% { transform: scale(0.97); } 50% { transform: scale(1.03); } } .curtain-logo { display: flex; align-items: baseline; gap: 0.35em; letter-spacing: 0.06em; font-size: clamp(2.2rem, 6vw, 3.4rem); line-height: 1; color: #F4ECDD; } .curtain-logo .logo-skin { font-family: var(--font-serif); font-weight: 300; color: #F4ECDD; } .curtain-logo .logo-leather { font-family: var(--font-serif); font-weight: 400; font-style: italic; color: #C9A96E; } .curtain-progress { width: clamp(160px, 22vw, 240px); height: 1px; background: rgba(201, 169, 110, 0.18); overflow: hidden; position: relative; } .curtain-progress-fill { position: absolute; inset: 0 auto 0 0; width: 0%; background: #C9A96E; transition: width 0.35s cubic-bezier(0.22, 0.61, 0.36, 1); box-shadow: 0 0 6px rgba(201, 169, 110, 0.5); } @keyframes curtainFadeIn { to { opacity: 1; transform: translateY(0); } } /* Versión "rápida" cuando el visitante ya pasó por la cortina */ #page-curtain.curtain-quick { transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1); } #page-curtain.curtain-quick .curtain-inner { animation-duration: 0.25s; animation-delay: 0s; } /* ─── MENU TOGGLE (fixed top-right corner) ─── */ .menu-toggle { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px; width: 32px; height: 32px; background: transparent; border: none; cursor: pointer; padding: 0; z-index: 301; position: fixed; top: 22px; right: 28px; color: var(--ink); } .menu-toggle span { display: block; width: 22px; height: 1.5px; border-radius: 2px; background: currentColor; transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.35s ease; transform-origin: center; } /* Animación X con 2 spans */ .menu-toggle.open span:nth-child(1) { transform: translateY(3.75px) rotate(45deg); } .menu-toggle.open span:nth-child(2) { transform: translateY(-3.75px) rotate(-45deg); } .menu-toggle.open { color: var(--white) !important; } /* Poltronas / Bancos / Banquetas / Puffs - desktop: card compacto unificado */ @media (min-width: 1025px) { .product-card-poltrona { padding: 1.5rem 3rem 1rem; border-radius: 28px; margin-bottom: 1.25rem; } .product-card-poltrona .poltrona-fade-zone { grid-template-columns: 1fr 1.1fr; gap: 2rem; min-height: 320px; } .product-card-poltrona .poltrona-fade-zone.inverted { grid-template-columns: 1.1fr 1fr; } .product-card-poltrona .poltrona-img-col { height: var(--poltrona-img-h-tablet, 320px); min-height: var(--poltrona-img-h-tablet, 320px); padding: 0.5rem 1rem 1rem; } .product-card-poltrona .poltrona-info-col { min-height: 280px; } .product-card-poltrona .poltrona-top-row { margin-bottom: 1rem; gap: 1.25rem; padding-top: 1.5rem; } .product-card-poltrona .poltrona-header { padding-left: 1.25rem; border-left-width: 2px; } .product-card-poltrona .poltrona-header h1 { font-size: 2.9rem; } .product-card-poltrona .medidas-img, .product-card-poltrona .medidas-box { max-width: 150px; } .product-card-poltrona .poltrona-dims { margin-bottom: 1.5rem; font-size: 0.75rem; gap: 1.25rem; } .product-card-poltrona .swatches-container { gap: 1.75rem; margin-bottom: 0; /* Removido para centrado vertical perfecto */ } .product-card-poltrona .swatch-col { min-width: 150px; gap: 1rem; } .product-card-poltrona .swatch-col h3 { font-size: 0.78rem; margin-bottom: 0.6rem; } .product-card-poltrona .swatch-circle { width: 44px; height: 44px; } .product-card-poltrona .swatch-item { gap: 1.1rem; } .product-card-poltrona .product-zoom { height: 480px; } /* Variant toggle - 20% más grande y alineado con el espacio entre título y subtítulo */ .poltrona-variants-container { display: flex; align-items: center; margin-top: 2.2rem; } .product-card-poltrona .variants-static-row { padding-left: 1.35rem; padding-right: 0; } .product-card-poltrona .variants-bar-wrapper { justify-content: flex-start; margin-left: 0; margin-bottom: 0; } .product-card-poltrona .variants-segmented { padding: 5px; margin-left: 0; } .product-card-poltrona .variant-btn { padding: 0.6rem 1.65rem; font-size: 1.02rem; letter-spacing: 0.04em; } /* Bottom row dentro del fade-zone (grid 2 cols): span full + estilos desktop. En mobile (max-width: 768px) se aplana con display: contents */ .product-card-poltrona .poltrona-bottom-row { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; width: 100%; border-top: 1px solid rgba(0, 0, 0, 0.05); padding-top: 0.75rem; padding-bottom: 0.25rem; margin-top: 0.5rem; position: relative; z-index: 10; } /* Banquetas: toggle de variantes alineado con los swatches */ .products-grid[data-category="banquetas"] .variants-static-row { padding-left: 0; } .products-grid[data-category="banquetas"] .variants-bar-wrapper { margin-left: 0; } } @media (max-width: 1024px) { .product-card { height: auto; padding: 2rem 1rem; } .product-fade-zone { grid-template-columns: 1fr; gap: 3rem; } .product-card-poltrona { height: auto; padding: 2rem 1rem; } .poltrona-fade-zone, .poltrona-fade-zone.inverted { grid-template-columns: 1fr; gap: 3rem; } .product-zoom, .product-views { height: 60vh; } .product-views { border-left: none; border-top: 1px solid rgba(0, 0, 0, 0.15); flex-direction: row; padding-left: 0; padding-top: 2rem; } .view-item { width: 33%; height: 100%; } .nosotros-inner { grid-template-columns: 1fr; gap: 4rem; text-align: center; } .nosotros-map { height: 400px; } .nosotros-location { display: flex; flex-direction: column; align-items: center; } } /* ─── FOOTER ─── */ .footer-inner { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 1rem; } .footer-info { text-align: center; } /* ─── PRICING ─── */ .product-price-block { margin: 1.5rem 0; display: grid; align-items: center; justify-items: start; min-height: 52px; position: relative; z-index: 999; } .btn-reveal-price { grid-area: 1 / 1; display: inline-flex; align-items: center; justify-content: center; appearance: none; -webkit-appearance: none; background: transparent; border: 1px solid var(--ink-light); color: var(--ink); font-family: var(--font-sans); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.15em; padding: 0.9rem 2rem; border-radius: 100px; cursor: pointer; transition: opacity 0.4s ease, visibility 0.4s, background 0.3s, color 0.3s, border-color 0.3s; position: relative; z-index: 999; } .btn-reveal-price.hidden { opacity: 0; visibility: hidden; pointer-events: none; } .btn-reveal-price:hover { background: var(--ink); color: var(--white); border-color: var(--ink); } .product-price-value { grid-area: 1 / 1; font-family: var(--font-sans); font-size: 1.5rem; font-weight: 500; color: var(--ink); opacity: 0; visibility: hidden; transform: translateY(5px); transition: opacity 0.5s ease, visibility 0.5s, transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); } .product-price-value.revealed { opacity: 1; visibility: visible; transform: translateY(0); } .wholesale-label { font-size: 0.7rem; color: var(--gold); text-transform: uppercase; letter-spacing: 0.1em; display: block; margin-bottom: 0.2rem; } /* ─── ADMIN: ESCALAR IMÁGENES — switch elegante ────────────── Toggle estilo iOS para activar/desactivar el modo de escalado del catálogo desde el panel admin. Reemplaza al botón flotante como punto de entrada principal (el botón flotante sigue existiendo como atajo cuando ya estás en modo escalado). */ .admin-scale-card { background: #faf8f5; border: 1px solid rgba(201, 169, 110, 0.25); border-radius: 10px; padding: 1.4rem 1.6rem; margin-top: 1rem; } .admin-scale-toggle { display: flex; align-items: center; gap: 1.5rem; cursor: pointer; } .admin-scale-toggle-text { display: flex; flex-direction: column; gap: 0.35rem; flex: 1; min-width: 0; } .admin-scale-toggle-text strong { font-family: var(--font-serif); font-weight: 400; font-size: 1.15rem; color: var(--ink); } .admin-scale-toggle-sub { font-size: 0.82rem; line-height: 1.4; color: var(--ink-light); opacity: 0.8; } /* Switch iOS-like — 52x30, track gris → dorado al activar */ .admin-scale-switch { position: relative; display: inline-block; width: 52px; height: 30px; flex-shrink: 0; } .admin-scale-switch input { opacity: 0; width: 0; height: 0; position: absolute; } .admin-scale-switch-slider { position: absolute; inset: 0; background: #d8d4cd; border-radius: 30px; transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1); cursor: pointer; } .admin-scale-switch-slider::before { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; background: #ffffff; border-radius: 50%; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15), 0 1px 1px rgba(0, 0, 0, 0.08); transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); } .admin-scale-switch input:checked + .admin-scale-switch-slider { background: var(--gold); } .admin-scale-switch input:checked + .admin-scale-switch-slider::before { transform: translateX(22px); } .admin-scale-switch input:focus-visible + .admin-scale-switch-slider { outline: 2px solid var(--gold); outline-offset: 2px; } .admin-scale-tip { margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid rgba(0, 0, 0, 0.06); font-size: 0.78rem; line-height: 1.5; color: var(--ink-light); opacity: 0.85; } /* Mobile: switch un poco más chico y stack vertical si no entra */ @media (max-width: 640px) { .admin-scale-card { padding: 1.1rem 1.2rem; } .admin-scale-toggle { gap: 1rem; } .admin-scale-toggle-text strong { font-size: 1.02rem; } .admin-scale-toggle-sub { font-size: 0.76rem; } } /* ─── Nota sutil al lado del precio ─── */ /* Aclara que el precio listado corresponde a las medidas estándar. Aparece en: puffs, bancos y sillones de 2 cuerpos (no individuales). */ .price-size-note { font-family: var(--font-serif); font-style: italic; font-weight: 300; font-size: 0.94rem; /* +30% sobre el 0.72rem original */ letter-spacing: 0.02em; color: rgba(0, 0, 0, 0.42); line-height: 1.3; max-width: 20rem; white-space: nowrap; } /* Variante "wide": para puffs, bancos, banquetas, poltronas. La nota es el HIJO DEL MEDIO de .poltrona-bottom-row (entre el precio y el botón WhatsApp). En desktop queda centrada horizontalmente — justify-content: space-between distribuye los 3 hijos — y se alinea verticalmente con los botones via align-items: center del padre. */ .price-size-note--wide { align-self: center; text-align: center; } /* En sillones la nota va dentro del flex-column de .sillon-actions (entre el precio y el botón WhatsApp). La pegamos al precio con un margen negativo para que no flote en el medio del gap. */ .price-size-note--sillon { display: block; margin-top: -0.6rem; max-width: none; } /* ─── Mobile: la nota va ARRIBA de la fila precio+WhatsApp ───────── Usamos order: -1 + flex-basis: 100% para que ocupe una fila propia por encima de los botones (preservando su alineación horizontal). Requiere flex-wrap: wrap en los row contenedores. Aplica a: · puffs / bancos / banquetas / poltronas (.poltrona-bottom-row) · sillas / varios (.silla-bottom-row) · sillones (.sillon-actions — en mobile es flex-row) */ @media (max-width: 768px) { .poltrona-bottom-row, .silla-bottom-row, .sillon-actions { flex-wrap: wrap; } .price-size-note--wide { order: -1; flex-basis: 100%; max-width: none; text-align: center; white-space: normal; margin-bottom: 0.4rem; } } @media (max-width: 640px) { .price-size-note { font-size: 0.85rem; /* +30% sobre el 0.65rem original */ max-width: 14rem; white-space: normal; } .price-size-note--wide { font-size: 0.85rem; max-width: none; } /* (Sin override de --sillon acá: la regla absoluta del block ≤768px ya maneja el layout mobile completo, incluido posicionamiento.) */ } /* ─── ADMIN MODAL ─── */ .admin-modal-overlay { position: fixed; inset: 0; background: rgba(26, 18, 8, 0.95); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); z-index: 9999; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: all 0.4s ease; } .admin-modal-overlay.open { opacity: 1; visibility: visible; } .admin-modal-content { background: var(--cream); width: 90%; max-width: 1000px; max-height: 85vh; border-radius: 20px; padding: 3rem; position: relative; overflow-y: auto; transform: translateY(30px); transition: transform 0.4s ease; box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5); } .admin-modal-overlay.open .admin-modal-content { transform: translateY(0); } .admin-modal-close { position: absolute; top: 1.5rem; right: 2rem; background: none; border: none; font-size: 2rem; color: var(--ink); cursor: pointer; } .admin-modal-header { margin-bottom: 2rem; text-align: center; padding: 0 4rem; /* Safety padding to avoid overlap with Close button */ } .admin-modal-header h2 { font-size: 2.5rem; margin-bottom: 0.5rem; } .admin-modal-header p { color: var(--ink-light); font-size: 0.9rem; } .admin-modal-subheader { font-family: var(--font-serif); font-style: italic; color: var(--gold); font-size: 1.5rem; font-weight: 300; margin-top: -0.25rem; margin-bottom: 0.75rem; } /* Estadísticas del sitio en el panel admin */ .admin-site-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 1.5rem; } .admin-stat-card { background: var(--cream-dark); border: 1px solid rgba(201, 169, 110, 0.18); border-radius: 12px; padding: 1.25rem 1rem; display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; text-align: left; } .admin-stat-num { font-family: var(--font-serif); font-size: 2.4rem; font-weight: 500; color: var(--ink); line-height: 1; letter-spacing: -0.01em; } .admin-stat-label { font-family: var(--font-sans); font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-light); opacity: 0.8; } @media (max-width: 768px) { .admin-site-stats { grid-template-columns: 1fr; gap: 0.6rem; } .admin-stat-card { flex-direction: row; align-items: center; justify-content: space-between; padding: 0.85rem 1rem; } .admin-stat-num { font-size: 1.6rem; } } .admin-toolbar { display: flex; justify-content: space-between; align-items: center; background: var(--cream-dark); padding: 1.5rem; border-radius: 12px; margin-bottom: 2rem; gap: 1rem; flex-wrap: wrap; } .admin-toolbar-group { display: flex; align-items: center; gap: 1rem; } .admin-toolbar input[type="number"] { border: 1px solid rgba(0, 0, 0, 0.1); padding: 0.5rem; border-radius: 6px; font-family: var(--font-sans); width: 80px; text-align: center; } .btn-admin { background: var(--ink); color: var(--white); border: none; padding: 0.6rem 1.2rem; border-radius: 100px; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; cursor: pointer; transition: background 0.3s ease; } .btn-admin:hover { background: var(--ink-light); } .btn-admin.save { background: var(--gold); color: var(--ink); font-weight: 600; } .btn-admin.save:hover { background: #b5955b; } .admin-table { width: 100%; border-collapse: collapse; } .admin-table th { text-align: left; padding: 1rem; border-bottom: 2px solid var(--ink); font-family: var(--font-sans); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-light); } .admin-table td { padding: 1rem; border-bottom: 1px solid rgba(0, 0, 0, 0.05); font-family: var(--font-sans); vertical-align: middle; } .admin-table input[type="number"] { width: 120px; padding: 0.5rem; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 6px; font-family: var(--font-sans); } .admin-table input[type="number"]:focus { outline: none; border-color: var(--ink); } .admin-category-header td { padding: 2.5rem 1rem 0.5rem; font-family: var(--font-serif); font-size: 1.5rem; color: var(--ink); border-bottom: 2px solid var(--ink-light) !important; text-transform: uppercase; letter-spacing: 0.1em; } .admin-product-col { display: flex; align-items: center; gap: 1.5rem; } .admin-product-col strong { font-weight: 500; font-family: var(--font-sans); color: var(--ink); } .admin-thumb { width: 60px; height: 60px; object-fit: contain; mix-blend-mode: multiply; background: #f4f1ec; border-radius: 8px; padding: 6px; } .input-currency { display: flex; align-items: center; gap: 0.4rem; } .input-currency span { font-family: var(--font-sans); color: var(--ink-light); font-weight: 500; font-size: 0.9rem; } /* ─── FIX HITBOX OVERLAPS ─── */ .product-details, .poltrona-info-col { pointer-events: auto; } .poltrona-img-col, .product-zoom { pointer-events: none; } /* ─── BENEFICIOS ─── */ #beneficios { background: var(--ink); padding: 3rem 2rem 6rem; } .beneficios-grid { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; } .beneficio-item { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1rem; padding: 1.5rem 1rem; border: 1px solid rgba(201, 169, 110, 0.12); border-radius: 2px; transition: border-color var(--transition), opacity 0.6s ease, transform 0.6s ease; opacity: 0; transform: translateY(36px); } .beneficio-item.visible { opacity: 1; transform: translateY(0); } .beneficio-item.visible:nth-child(1) { transition-delay: 0.05s; } .beneficio-item.visible:nth-child(2) { transition-delay: 0.18s; } .beneficio-item.visible:nth-child(3) { transition-delay: 0.31s; } .beneficio-item.visible:nth-child(4) { transition-delay: 0.44s; } .beneficio-item.visible:nth-child(5) { transition-delay: 0.57s; } .beneficio-item:hover { border-color: rgba(201, 169, 110, 0.35); } .beneficio-icon { width: 44px; height: 44px; color: var(--gold); flex-shrink: 0; } .beneficio-icon svg { width: 100%; height: 100%; } .beneficio-item h3 { font-family: var(--font-serif); font-size: 1.15rem; font-weight: 400; color: var(--gold-light); letter-spacing: 0.02em; line-height: 1.2; } .beneficio-item p { font-size: 0.8rem; color: rgba(255, 255, 255, 0.45); line-height: 1.75; letter-spacing: 0.02em; } @media (max-width: 1024px) { .beneficios-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { #beneficios { /* Padding-top generoso: el sticky del hero se "despega" exactamente cuando el usuario llega aquí. Un padding grande crea la separación visual entre el último frame del sillón y el contenedor oscuro, evitando el solapamiento. Valor elegido para que en el iPhone SE (375px) haya ~60px de aire. */ padding: 6rem 1rem 3rem; } /* Beneficios: 2 columnas en mobile, cards compactos */ .beneficios-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } .beneficio-item { padding: 16px 10px; gap: 8px; border-radius: 12px; } .beneficio-icon { width: 32px; height: 32px; } .beneficio-item h3 { font-size: 0.92rem; line-height: 1.15; } .beneficio-item p { font-size: 0.7rem; line-height: 1.5; } } /* ─── CUEROS DISPONIBLES ─── */ #cueros { background: var(--cream-dark); padding: 8rem 2rem; } #cueros h2 { color: var(--ink); } .cueros-subtitle { margin-top: 1rem; font-size: 0.78rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-light); } .cueros-grid { max-width: 1100px; margin: 0 auto 3rem; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; } .cuero-card { display: flex; flex-direction: column; align-items: center; gap: 1rem; cursor: default; } .cuero-swatch { width: 100%; aspect-ratio: 3 / 4; background-color: var(--swatch-color); border-radius: 2px; position: relative; overflow: hidden; transition: transform var(--transition), box-shadow var(--transition); } .cuero-swatch img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; } .cuero-card:hover .cuero-swatch img { transform: scale(1.05); } .cuero-card:hover .cuero-swatch { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18); } .cuero-texture { position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='leather'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23leather)' opacity='0.08'/%3E%3C/svg%3E"); mix-blend-mode: overlay; pointer-events: none; z-index: 1; } .cuero-name { font-family: var(--font-serif); font-size: 1.1rem; font-weight: 400; color: var(--ink); letter-spacing: 0.06em; text-align: center; } .cueros-nota { text-align: center; font-size: 0.8rem; color: var(--ink-light); letter-spacing: 0.08em; max-width: 480px; margin: 0 auto; padding-top: 1rem; border-top: 1px solid rgba(201, 169, 110, 0.25); } @media (max-width: 1024px) { .cueros-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 640px) { .cueros-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; } } /* ─── SILLONES CALLOUT (Más allá del catálogo) ─── */ .sillones-callout { max-width: 1080px; margin: -2rem auto 5rem; padding: 0 2rem; /* Entrada cinematográfica al hacer scroll — la clase .visible la añade el IntersectionObserver cuando el callout entra al viewport. */ opacity: 0; transform: translateY(50px) scale(0.96); filter: blur(5px); transition: opacity 1s cubic-bezier(0.22, 0.61, 0.36, 1), transform 1s cubic-bezier(0.22, 0.61, 0.36, 1), filter 1s cubic-bezier(0.22, 0.61, 0.36, 1); will-change: opacity, transform, filter; } .sillones-callout.visible { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); } /* Stagger interno: eyebrow → título → body → CTA caen en cascada cuando el callout aparece, sumándole carácter al "reveal". */ .sillones-callout-eyebrow, .sillones-callout-title, .sillones-callout-body, .sillones-callout-cta { opacity: 0; transform: translateY(14px); transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1); } .sillones-callout.visible .sillones-callout-eyebrow { transition-delay: 0.25s; opacity: 1; transform: translateY(0); } .sillones-callout.visible .sillones-callout-title { transition-delay: 0.40s; opacity: 1; transform: translateY(0); } .sillones-callout.visible .sillones-callout-body { transition-delay: 0.55s; opacity: 1; transform: translateY(0); } .sillones-callout.visible .sillones-callout-cta { transition-delay: 0.75s; opacity: 1; transform: translateY(0); } .sillones-callout-inner { position: relative; background: linear-gradient(135deg, #1A1208 0%, #2A1810 60%, #3D2415 100%); color: var(--white); padding: 3.5rem 4rem; border-radius: 28px; border: 1px solid rgba(201, 169, 110, 0.25); box-shadow: 0 30px 60px rgba(26, 18, 8, 0.18); overflow: hidden; text-align: center; } .sillones-callout-inner::before { content: ""; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E"); opacity: 0.5; pointer-events: none; } .sillones-callout-inner>* { position: relative; z-index: 1; } .sillones-callout-eyebrow { font-family: var(--font-sans); font-size: 0.7rem; letter-spacing: 0.32em; text-transform: uppercase; color: var(--gold); display: block; margin-bottom: 1.1rem; } .sillones-callout-title { font-family: var(--font-serif); font-size: clamp(2.2rem, 4.5vw, 3.4rem); font-weight: 300; font-style: italic; color: var(--gold-light); line-height: 1.05; margin-bottom: 1.6rem; } .sillones-callout-body { font-family: var(--font-sans); font-size: 1.02rem; line-height: 1.85; font-weight: 300; color: rgba(255, 255, 255, 0.78); max-width: 680px; margin: 0 auto 2rem; } .sillones-callout-cta { display: inline-flex; align-items: center; gap: 0.7rem; padding: 1rem 2.4rem; border: 1px solid var(--gold); border-radius: 100px; color: var(--gold); font-family: var(--font-sans); font-size: 0.78rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; transition: all var(--transition); } .sillones-callout-cta svg { width: 16px; height: 16px; fill: currentColor; transition: transform var(--transition); } .sillones-callout-cta:hover { background: var(--gold); color: var(--ink); transform: translateY(-2px); box-shadow: 0 12px 30px rgba(201, 169, 110, 0.25); } .sillones-callout-cta:hover svg { transform: scale(1.05); } @media (max-width: 768px) { .sillones-callout { margin: 0 1rem 3.5rem; padding: 0; } .sillones-callout-inner { padding: 2.5rem 1.5rem; border-radius: 16px; } .sillones-callout-body { font-size: 0.95rem; } } /* ─── SILLONES SHOWCASE CARD ─── */ .product-card-sillon { background: #FFFFFF; border-radius: 4px; overflow: hidden; margin-bottom: 2rem; border: 1px solid rgba(201, 169, 110, 0.18); box-shadow: 0 4px 30px rgba(0, 0, 0, 0.05); /* position: relative para que .price-size-note--sillon pueda usar position: absolute en mobile y anclarse al top-right del card. */ position: relative; /* Entrada cinematográfica (ver regla compartida con transition) */ opacity: 0; transform: translateY(48px) scale(0.96); filter: blur(4px); } .product-card-sillon.visible { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); } /* Header de Sillón */ .sillon-header-row { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.5rem; border-bottom: 1px solid rgba(201, 169, 110, 0.18); position: relative; z-index: 10; } .sillon-title { font-family: var(--font-serif); font-size: clamp(3.5rem, 6vw, 5.6rem); font-weight: 300; color: var(--ink); margin: 0; line-height: 1; } .sillon-category { font-family: var(--font-serif); font-size: 2.2rem; font-weight: 300; font-style: italic; color: var(--gold); letter-spacing: 0.02em; text-transform: lowercase; } /* Layout Principal */ .sillon-layout { display: grid; grid-template-columns: 280px 1fr; } /* Columna Izquierda (Sidebar) */ .sillon-sidebar { display: flex; flex-direction: column; justify-content: space-between; border-right: 1px solid rgba(201, 169, 110, 0.18); padding: 1.5rem; position: relative; z-index: 10; } .sillon-colors { margin-bottom: 1.5rem; } .sillon-active-color { display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: 1.2rem; } .sillon-active-label { font-size: 1.1rem; font-family: var(--font-serif); color: var(--ink); text-transform: uppercase; letter-spacing: 0.05em; } .sillon-active-name { display: none; } .sillon-swatches-wrap { display: flex; flex-direction: column; gap: 0.8rem; } .sillon-swatches-wrap .swatch-item { gap: 0.8rem; } .sillon-swatches-wrap .swatch-circle { width: 44px; height: 44px; } .sillon-swatches-wrap .swatch-name { font-size: 0.95rem; } /* Acciones (Precios y Botón WP) */ .sillon-actions { display: flex; flex-direction: column; gap: 1.2rem; padding-top: 1.5rem; border-top: 1px solid rgba(201, 169, 110, 0.18); } .sillon-actions .product-price-block { margin: 0; align-items: flex-start; } /* Botón WA */ .btn-sillon-wa { display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; padding: 0.85rem 1.2rem; border: 1px solid var(--ink); color: var(--ink); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; border-radius: 100px; transition: all var(--transition); width: 100%; } .btn-sillon-wa:hover { background: var(--ink); color: var(--white); } /* Columna Derecha (Imágenes) */ .sillon-images { display: flex; flex-direction: column; } /* Hero imagen full-width */ .sillon-hero { position: relative; width: 100%; height: var(--sillon-hero-h, 400px); background: #FFFFFF; overflow: hidden; display: flex; align-items: center; justify-content: center; border-bottom: 1px solid rgba(201, 169, 110, 0.18); } .sillon-main-img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; padding: 1.5rem 2rem; transition: opacity 0.32s ease, transform 0.7s ease; pointer-events: none; } .sillon-hero:hover .sillon-main-img { transform: scale(1.03); } /* Vistas frente/lateral */ .sillon-thumbs-row { display: grid; grid-template-columns: 1fr 1fr; flex: 1; min-height: 250px; } .sillon-view-item { display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; padding: 1.5rem; } .sillon-view-item:first-child { border-right: 1px solid rgba(201, 169, 110, 0.18); } .sillon-thumb-container { flex: 1; width: 100%; display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; } .sillon-thumb { width: 100%; max-height: 100%; object-fit: contain; background: transparent; mix-blend-mode: multiply; transition: opacity 0.32s ease, transform 0.5s ease; pointer-events: none; } .sillon-view-item:hover .sillon-thumb { transform: scale(1.04); } .sillon-view-label { font-size: 0.85rem; font-family: var(--font-serif); letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink); position: absolute; bottom: 1rem; } /* Responsive */ @media (max-width: 900px) { .sillon-hero { height: 580px; } .sillon-name { font-size: 3rem; } .sillon-body { grid-template-columns: 1fr; } .sillon-body-left { border-right: none; border-bottom: 1px solid rgba(201, 169, 110, 0.18); } .sillon-body-left, .sillon-body-right { padding: 1.5rem; } } /* Dots del carrusel sillón — solo se muestran en mobile (display:flex en el bloque @media de abajo); en desktop quedan ocultos. */ .sillon-dots { display: none; } /* Chip dorado con el nombre del color/estructura activa, visible al lado de los swatches en mobile. Oculto en desktop (ahí ya se ve el nombre junto a cada círculo). */ .swatch-active-display { display: none; } /* ─────────────────────────────────────────────────────────────── SILLONES MOBILE — Layout poltrona-style + carrusel horizontal swipeable (zoom / front / side) con scroll-snap nativo. ─────────────────────────────────────────────────────────────── */ @media (max-width: 768px) { /* Card como cream pill estilo poltrona */ .product-card-sillon { background: var(--cream); border-radius: 18px; padding: 18px 22px 22px; margin: 0 0 14px 0; border: 1px solid rgba(26, 18, 8, 0.04); box-shadow: 0 4px 16px rgba(26, 18, 8, 0.06), 0 1px 3px rgba(26, 18, 8, 0.04); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-auto-rows: auto; gap: 14px 12px; overflow: hidden; } /* Aplanar wrappers internos para que sus hijos sean grid items directos */ .sillon-layout, .sillon-sidebar { display: contents; } /* Header (nombre + "Sillón") — fila 1, alineado a la izq estilo poltrona */ .sillon-header-row { grid-column: 1 / -1; grid-row: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 0; border: none; margin: 0; } .sillon-title { font-family: var(--font-serif); font-size: 32px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; line-height: 0.95; color: var(--ink); margin: 0; } .sillon-category { font-family: var(--font-serif); font-size: 16px; font-style: italic; color: var(--ink-light); text-transform: lowercase; opacity: 0.75; line-height: 1; } /* ─── CARRUSEL HORIZONTAL ──────────────────────────────────── .sillon-images se convierte en un scroll-snap container con 3 slides (hero + las 2 thumbnails) ocupando el ancho completo cada una. Swipe nativo con momentum, snap obligatorio y scroll-behavior: smooth para programmatic scroll. Aplanamos .sillon-thumbs-row vía display: contents para que sus 2 .sillon-view-item sean hermanos directos de .sillon-hero. Usamos !important + descendant para asegurar override del base. */ .product-card-sillon .sillon-images { grid-column: 1 / -1 !important; grid-row: 2 !important; display: flex !important; flex-direction: row !important; width: 100% !important; overflow-x: auto !important; overflow-y: hidden !important; scroll-snap-type: x mandatory !important; scroll-behavior: smooth !important; -webkit-overflow-scrolling: touch !important; overscroll-behavior-x: contain !important; scrollbar-width: none !important; border-radius: 12px !important; background: #FFFFFF !important; border: 1px solid rgba(26, 18, 8, 0.04) !important; padding: 0 !important; height: var(--sillon-hero-h-mobile, 260px) !important; margin: 0 !important; } .product-card-sillon .sillon-images::-webkit-scrollbar { display: none; } .product-card-sillon .sillon-thumbs-row { display: contents !important; } /* Cada slide ocupa 100% del viewport del carrusel */ .product-card-sillon .sillon-hero, .product-card-sillon .sillon-view-item { flex: 0 0 100% !important; width: 100% !important; height: 100% !important; min-height: 0 !important; scroll-snap-align: center !important; scroll-snap-stop: always !important; display: flex !important; align-items: center !important; justify-content: center !important; border: none !important; border-right: none !important; border-bottom: none !important; padding: 12px 14px !important; background: transparent !important; box-sizing: border-box !important; position: relative !important; overflow: visible !important; /* Evita que WebKit recorte la imagen al aplicar transform + mix-blend-mode */ } /* Curva de easing más orgánica para el snap (la mayoría de browsers ignora el timing del snap pero respetan scroll-behavior smooth) */ .sillon-main-img, .sillon-thumb { width: 100%; height: 100%; object-fit: contain; padding: 0; mix-blend-mode: multiply; pointer-events: none; transition: opacity 0.45s cubic-bezier(0.25, 0.1, 0.25, 1), transform 0.45s cubic-bezier(0.25, 0.1, 0.25, 1); will-change: transform; /* Optimización GPU WebKit */ isolation: isolate; /* Crea un nuevo contexto de apilamiento para evitar bugs de mezcla */ } /* Anulamos el hover-scale que aplicaba en desktop al thumb individual */ .sillon-hero:hover .sillon-main-img, .sillon-view-item:hover .sillon-thumb { transform: none; } /* Etiquetas de vista ocultas en mobile — los dots dorados ya indican la posición en el carrusel, no hace falta el chip de texto. */ .sillon-view-label { display: none !important; } /* Dots indicadores (inyectados por JS) — posicionados sobre el carrusel en la misma celda del grid (row 2) con align-self: end. */ .sillon-dots { grid-column: 1 / -1; grid-row: 2; align-self: end; justify-self: center; display: flex !important; gap: 6px; padding: 0 0 8px 0; pointer-events: none; z-index: 5; margin-top: -22px; } .sillon-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, 0.65); transition: width 0.4s cubic-bezier(0.25, 0.1, 0.25, 1), background 0.4s cubic-bezier(0.25, 0.1, 0.25, 1); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); } .sillon-dot.active { width: 18px; background: var(--gold); border-radius: 100px; } /* Sillon-colors → swatches estilo poltrona-style: header "Colores de Cuero" arriba + círculos en fila horizontal (igual que en .swatch-col h3 + .swatch-item de las poltronas). */ .sillon-colors { grid-column: 1 / -1; grid-row: 3; margin: 0; padding: 0; } /* Reemplazamos el label "Color · NombreActivo" por un header tipo poltrona "Colores de Cuero" usando ::before. El active-color block original queda oculto en mobile. */ .product-card-sillon .sillon-active-color { display: none !important; } .product-card-sillon .sillon-colors::before { content: "Colores de Cuero"; display: block; font-family: var(--font-sans); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.05em; color: #4A4A4A; margin: 0 0 10px 0; line-height: 1.2; } .product-card-sillon .sillon-swatches-wrap { display: flex !important; flex-direction: row !important; flex-wrap: wrap; gap: 10px; align-items: center; } .product-card-sillon .sillon-swatches-wrap .swatch-item .swatch-name { display: none; } .product-card-sillon .sillon-swatches-wrap .swatch-item { gap: 0; } .product-card-sillon .sillon-swatches-wrap .swatch-circle { width: 26px; height: 26px; } /* Sillon-actions: precio izq + WA der estilo poltrona-bottom-row. Forzamos flex-direction: row para sobreescribir el column del base. */ .sillon-actions { grid-column: 1 / -1; grid-row: 4; display: flex !important; flex-direction: row !important; align-items: center; justify-content: space-between; gap: 10px; width: 100%; border-top: 1px solid rgba(0, 0, 0, 0.05); padding: 10px 0 2px 0; margin: 6px 0 0 0; box-sizing: border-box; } .sillon-actions .product-price-block { flex: 1 1 0; min-width: 0; width: 100%; min-height: 38px; max-height: 38px; grid-template-rows: 38px; } .sillon-actions .product-price-value, .sillon-actions .btn-reveal-price { height: 38px; font-size: 10px; letter-spacing: 0.16em; padding: 0 10px; } .btn-sillon-wa { flex: 1 1 0; width: 100%; height: 38px; padding: 0 10px; border-radius: 100px; background: var(--ink); color: var(--white); border: none; display: flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; font-size: 0; box-sizing: border-box; } .btn-sillon-wa svg { width: 12px; height: 12px; fill: var(--white); flex-shrink: 0; } .btn-sillon-wa::after { content: "Consultar"; font-family: var(--font-sans); font-size: 10px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--white); } } /* ═══════════════════════════════════════════════════════════════ AUTH SYSTEM — Login button, user menu, modal, admin users ═══════════════════════════════════════════════════════════════ */ /* ─── NAV LOGIN BUTTON ─── */ .nav-auth { position: relative; display: inline-flex; align-items: center; } /* Cualquier elemento con atributo [hidden] en el nav-auth desaparece incluso si su display por defecto es inline-flex (esto sobreescribe las reglas de abajo que setean display explícitamente). */ .nav-auth [hidden], .nav-login-btn[hidden], .user-menu[hidden] { display: none !important; } .nav-login-btn { display: inline-flex; align-items: center; gap: 0.55rem; background: transparent; border: 1px solid rgba(201, 169, 110, 0.55); color: var(--gold); padding: 0.5rem 1.1rem; border-radius: 100px; font-family: var(--font-sans); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; transition: all var(--transition); } .nav-login-btn svg { width: 14px; height: 14px; stroke-width: 1.7; } .nav-login-btn:hover { background: var(--gold); color: var(--ink); border-color: var(--gold); } /* ─── USER MENU (logged-in) ─── */ .user-menu { position: relative; } .user-menu-toggle { display: inline-flex; align-items: center; gap: 0.55rem; background: transparent; border: 1px solid rgba(201, 169, 110, 0.35); padding: 0.35rem 0.9rem 0.35rem 0.35rem; border-radius: 100px; cursor: pointer; color: var(--ink); transition: all var(--transition); } .user-menu-toggle:hover { border-color: var(--gold); background: rgba(201, 169, 110, 0.08); } .user-avatar { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, var(--gold) 0%, #a88849 100%); color: var(--ink); font-family: var(--font-serif); font-size: 0.95rem; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; letter-spacing: 0; flex-shrink: 0; } .user-menu-name { font-family: var(--font-sans); font-size: 0.78rem; font-weight: 500; letter-spacing: 0.06em; color: inherit; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .user-menu-chev { width: 12px; height: 12px; opacity: 0.6; transition: transform 0.3s ease; } .user-menu-toggle[aria-expanded="true"] .user-menu-chev { transform: rotate(180deg); } /* Dropdown */ .user-menu-dropdown { position: absolute; top: calc(100% + 10px); right: 0; min-width: 260px; background: rgba(26, 18, 8, 0.96); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(201, 169, 110, 0.18); border-radius: 14px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35); padding: 0.6rem; z-index: 302; /* Entrada elegante: fade + slide-down + leve scale, cubic-bezier orgánico */ opacity: 0; transform: translateY(-10px) scale(0.96); transform-origin: top right; transition: opacity 0.32s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1); pointer-events: none; will-change: opacity, transform; } /* CRÍTICO: mantenemos el dropdown EN EL FLUJO de renderizado incluso con [hidden] (default browser sería display:none, que rompe las transitions porque no se puede animar entre display:none ↔ block). Lo escondemos solo con opacity + pointer-events, así las transiciones corren. */ .user-menu-dropdown[hidden] { display: block !important; visibility: visible; } .user-menu-dropdown:not([hidden]) { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; } /* Stagger interno: header → items van apareciendo en cascada al abrir */ .user-menu-dropdown .user-menu-header, .user-menu-dropdown .user-menu-item { opacity: 0; transform: translateY(-6px); transition: opacity 0.32s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1); } .user-menu-dropdown:not([hidden]) .user-menu-header { transition-delay: 0.08s; opacity: 1; transform: translateY(0); } .user-menu-dropdown:not([hidden]) .user-menu-item:nth-child(2) { transition-delay: 0.14s; opacity: 1; transform: translateY(0); } .user-menu-dropdown:not([hidden]) .user-menu-item:nth-child(3) { transition-delay: 0.18s; opacity: 1; transform: translateY(0); } .user-menu-dropdown:not([hidden]) .user-menu-item:nth-child(4) { transition-delay: 0.22s; opacity: 1; transform: translateY(0); } .user-menu-dropdown:not([hidden]) .user-menu-item:nth-child(5) { transition-delay: 0.26s; opacity: 1; transform: translateY(0); } .user-menu-header { padding: 0.9rem 0.85rem 1rem; border-bottom: 1px solid rgba(255, 255, 255, 0.08); margin-bottom: 0.5rem; } .user-menu-name-big { font-family: var(--font-serif); font-size: 1.2rem; font-weight: 400; color: var(--white); line-height: 1.2; margin-bottom: 0.4rem; } .user-menu-role { display: inline-block; font-size: 0.62rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; padding: 0.2rem 0.6rem; border-radius: 100px; background: rgba(201, 169, 110, 0.15); color: var(--gold); } .user-menu-role.role-admin { background: rgba(201, 169, 110, 0.2); color: var(--gold-light); } .user-menu-role.role-wholesale { background: rgba(74, 124, 89, 0.2); color: #8fc49c; } .user-menu-item { display: flex; align-items: center; gap: 0.7rem; width: 100%; padding: 0.75rem 0.85rem; background: transparent; border: none; border-radius: 8px; color: rgba(255, 255, 255, 0.75); font-family: var(--font-sans); font-size: 0.82rem; text-align: left; cursor: pointer; transition: background 0.2s ease, color 0.2s ease, padding-left 0.2s ease; } .user-menu-item svg { width: 16px; height: 16px; stroke-width: 1.6; flex-shrink: 0; opacity: 0.75; } .user-menu-item:hover { background: rgba(255, 255, 255, 0.06); color: var(--white); padding-left: 1.05rem; } .user-menu-item:hover svg { opacity: 1; } .user-menu-logout { color: rgba(255, 150, 130, 0.85); margin-top: 0.35rem; border-top: 1px solid rgba(255, 255, 255, 0.06); padding-top: 0.85rem; border-radius: 0 0 8px 8px; } .user-menu-logout:hover { color: #ff8f78; background: rgba(255, 100, 80, 0.08); } /* ─── LOGIN MODAL ─── */ .auth-modal { position: fixed; inset: 0; z-index: 9998; display: flex; align-items: center; justify-content: center; padding: 2rem; animation: authFadeIn 0.3s ease; } .auth-modal[hidden] { display: none; } @keyframes authFadeIn { from { opacity: 0; } to { opacity: 1; } } .auth-modal-backdrop { position: absolute; inset: 0; background: rgba(13, 8, 6, 0.78); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); cursor: pointer; } .auth-modal-card { position: relative; width: 100%; max-width: 440px; background: var(--cream); border-radius: 20px; padding: 3rem 2.5rem 2.5rem; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4); animation: authCardIn 0.4s cubic-bezier(0.2, 0.9, 0.3, 1); } @keyframes authCardIn { from { opacity: 0; transform: translateY(20px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } } .auth-modal-close { position: absolute; top: 1rem; right: 1rem; width: 36px; height: 36px; background: transparent; border: none; border-radius: 50%; color: var(--ink-light); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background 0.2s ease, color 0.2s ease; } .auth-modal-close svg { width: 18px; height: 18px; } .auth-modal-close:hover { background: rgba(0, 0, 0, 0.06); color: var(--ink); } .auth-modal-header { text-align: center; margin-bottom: 1.8rem; } .auth-eyebrow { font-size: 0.68rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.75rem; } .auth-modal-header h2 { font-family: var(--font-serif); font-size: 2.6rem; font-weight: 300; color: var(--ink); line-height: 1; margin-bottom: 0.75rem; } .auth-sub { font-size: 0.82rem; color: var(--ink-light); line-height: 1.55; max-width: 320px; margin: 0 auto; } /* Form */ .auth-form { display: flex; flex-direction: column; gap: 1rem; } .auth-field { display: flex; flex-direction: column; gap: 0.4rem; } .auth-field label { font-family: var(--font-sans); font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.15em; color: var(--ink-light); } .auth-field input { font-family: var(--font-sans); font-size: 0.95rem; color: var(--ink); background: var(--cream-dark); border: 1px solid transparent; border-radius: 10px; padding: 0.85rem 1rem; transition: border-color 0.25s ease, background 0.25s ease; outline: none; width: 100%; } .auth-field input:focus { border-color: var(--gold); background: #fff; } .auth-password-wrap { position: relative; display: flex; align-items: center; } .auth-password-wrap input { padding-right: 3rem; } .auth-eye { position: absolute; right: 10px; width: 32px; height: 32px; background: transparent; border: none; border-radius: 50%; color: var(--ink-light); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background 0.2s ease, color 0.2s ease; } .auth-eye svg { width: 16px; height: 16px; } .auth-eye:hover { background: rgba(0, 0, 0, 0.05); color: var(--ink); } .auth-error { color: #b23a3a; font-size: 0.82rem; background: rgba(178, 58, 58, 0.08); border-left: 3px solid #b23a3a; padding: 0.6rem 0.85rem; border-radius: 6px; margin: 0; } .auth-submit { display: inline-flex; align-items: center; justify-content: center; padding: 0.95rem 1.5rem; background: var(--ink); color: var(--white); border: 1px solid var(--ink); border-radius: 100px; font-family: var(--font-sans); font-size: 0.78rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; cursor: pointer; transition: all var(--transition); margin-top: 0.6rem; } .auth-submit:hover { background: var(--gold); color: var(--ink); border-color: var(--gold); } .auth-submit:disabled { opacity: 0.55; cursor: not-allowed; } .auth-help { text-align: center; font-size: 0.78rem; color: var(--ink-light); margin-top: 0.4rem; } .auth-help a { color: var(--gold); border-bottom: 1px solid transparent; transition: border-color 0.25s ease; } .auth-help a:hover { border-bottom-color: var(--gold); } /* ─── ADMIN TABS ─── */ .admin-tabs { display: flex; gap: 0.25rem; border-bottom: 1px solid rgba(0, 0, 0, 0.1); margin-bottom: 2rem; padding: 0 0.5rem; } .admin-tab { background: transparent; border: none; padding: 0.85rem 1.25rem; font-family: var(--font-sans); font-size: 0.78rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-light); cursor: pointer; position: relative; transition: color 0.25s ease; } .admin-tab::after { content: ""; position: absolute; bottom: -1px; left: 0.8rem; right: 0.8rem; height: 2px; background: var(--gold); transform: scaleX(0); transform-origin: center; transition: transform 0.3s cubic-bezier(0.2, 0.9, 0.3, 1); } .admin-tab:hover { color: var(--ink); } .admin-tab.active { color: var(--ink); } .admin-tab.active::after { transform: scaleX(1); } /* Por defecto (desktop) se muestra el label largo; mobile lo overridea. */ .admin-tab .tab-label-full { display: inline; } .admin-tab .tab-label-short { display: none; } .admin-tab-panel[hidden] { display: none; } /* ─── ADMIN USERS ─── */ .admin-users-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 2rem; margin-bottom: 1.5rem; flex-wrap: wrap; } .admin-users-header h3 { font-size: 1.5rem; color: var(--ink); } .admin-users-header code { background: var(--cream-dark); padding: 0.1rem 0.4rem; border-radius: 4px; font-size: 0.75rem; color: var(--ink); } .admin-users-actions { display: flex; gap: 0.6rem; flex-shrink: 0; } .admin-users-table th, .admin-users-table td { padding: 0.9rem 1rem; font-size: 0.88rem; } .admin-users-table td code { background: var(--cream-dark); padding: 0.2rem 0.55rem; border-radius: 4px; font-family: "SF Mono", Menlo, Consolas, monospace; font-size: 0.8rem; color: var(--ink-light); } .admin-user-role { display: inline-block; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; } .admin-user-status { display: inline-block; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.22rem 0.7rem; border-radius: 100px; } .admin-user-status.active { background: rgba(74, 124, 89, 0.12); color: #3d6348; } .admin-user-status.inactive { background: rgba(120, 120, 120, 0.12); color: #777; } .admin-user-self { font-size: 0.7rem; color: var(--gold); font-weight: 500; letter-spacing: 0.05em; font-style: italic; } .admin-user-row-actions { display: flex; gap: 0.4rem; flex-wrap: wrap; } .btn-admin-mini { background: transparent; border: 1px solid rgba(0, 0, 0, 0.12); color: var(--ink); padding: 0.4rem 0.75rem; border-radius: 100px; font-size: 0.68rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease; font-family: var(--font-sans); } .btn-admin-mini:hover { background: var(--ink); color: var(--white); border-color: var(--ink); } .btn-admin-mini.danger { color: #b23a3a; border-color: rgba(178, 58, 58, 0.3); font-size: 0.95rem; padding: 0.2rem 0.65rem; line-height: 1; font-weight: 400; } .btn-admin-mini.danger:hover { background: #b23a3a; color: var(--white); border-color: #b23a3a; } /* Add-user inline form */ .admin-add-user { background: var(--cream-dark); padding: 1.5rem; border-radius: 12px; margin-bottom: 1.5rem; border: 1px solid rgba(201, 169, 110, 0.2); } .admin-add-user-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem 1.25rem; margin-bottom: 1.25rem; } .admin-add-user-grid label { display: flex; flex-direction: column; gap: 0.35rem; font-family: var(--font-sans); font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-light); } .admin-add-user-grid input, .admin-add-user-grid select { font-family: var(--font-sans); font-size: 0.9rem; font-weight: 400; text-transform: none; letter-spacing: normal; color: var(--ink); background: var(--white); border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 8px; padding: 0.65rem 0.85rem; transition: border-color 0.2s ease; outline: none; } .admin-add-user-grid input:focus, .admin-add-user-grid select:focus { border-color: var(--gold); } .admin-add-user-actions { display: flex; justify-content: flex-end; gap: 0.6rem; } /* Responsive auth/admin */ @media (max-width: 768px) { .user-menu-name { display: none; } .user-menu-dropdown { right: -10px; min-width: 240px; } .auth-modal-card { padding: 2.5rem 1.5rem 1.8rem; } .auth-modal-header h2 { font-size: 2rem; } .admin-users-header { flex-direction: column; gap: 1rem; } .desktop-only { display: none !important; } .mobile-only { display: block !important; } .nav-right { display: none; } /* Nav móvil: más fino y elegante. Sin animación de entrada para que el hamburger esté visible apenas carga la página. */ .nav-inner { height: 52px; padding: 0 16px; opacity: 1; animation: none; } .logo { font-size: 1.15rem; } /* Right group: nav-right (Ingresar/avatar) + nav-mobile-actions (hamburger) juntos a la derecha. margin-left: auto empuja todo el grupo al final. */ .nav-right { display: flex; align-items: center; gap: 8px; margin-left: auto; margin-right: 0; } .nav-fixed-links { gap: 0; margin: 0; padding: 0; } /* Botón "Ingresar" más compacto en mobile */ .nav-login-btn { padding: 0.4rem 0.85rem; font-size: 0.62rem; letter-spacing: 0.12em; gap: 0.35rem; } .nav-login-btn svg { width: 12px; height: 12px; } /* User menu (logged in) compacto */ .user-menu-toggle { padding: 0.25rem 0.55rem 0.25rem 0.25rem; gap: 0.4rem; } .user-avatar { width: 24px; height: 24px; font-size: 0.85rem; } .user-menu-name { display: none; } /* Hamburger en mobile — fluye junto al botón Ingresar (NO fixed) */ .menu-toggle { position: relative; top: auto; right: auto; width: 28px; height: 28px; padding: 0; background: transparent; border: none; cursor: pointer; z-index: 400; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; flex-shrink: 0; } /* Wrapper de los actions móviles también con relative para flow inline */ .nav-mobile-actions { position: relative; margin-left: 10px; } .menu-toggle span { display: block; width: 20px; height: 1.5px; background: var(--ink); transition: transform 0.3s ease; } #navbar:not(.scrolled) .menu-toggle span { background: var(--ink); } .menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(3.25px) rotate(45deg); } .menu-toggle[aria-expanded="true"] span:nth-child(2) { transform: translateY(-3.25px) rotate(-45deg); } /* Mobile: reducir padding global de section + section-header para que las secciones (catálogo, cueros, nosotros, etc.) no tengan tanto aire entre sí. */ section { padding: 3rem 1rem; } .section-header { margin-bottom: 2rem; } /* Catálogo (#catalogo es
): el section default arriba lo cubre */ #catalogo { padding: 3rem 1rem 1.5rem; /* extra-tight bottom para acercar a Cueros */ } /* Catálogo - Sillas (mobile) */ .products-grid { padding: 4px 0 0; gap: 18px; display: flex; flex-direction: column; } /* Card: fondo blanco + sombra suave para diferenciarlo del fondo de página */ .product-card { background: var(--cream); border-radius: 18px; padding: 0; position: relative; box-shadow: 0 4px 16px rgba(26, 18, 8, 0.06), 0 1px 3px rgba(26, 18, 8, 0.04) !important; border: 1px solid rgba(26, 18, 8, 0.04) !important; overflow: hidden; } /* Card grid: header (1) → image (2) → swatches (3) → botones 50/50 (4). .product-details usa display: contents para que sus hijos sean grid items directos de .product-fade-zone (pueden tener grid-row/column propios). background TRANSPARENT en grid items + el card outer maneja el blanco. */ .product-fade-zone { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-auto-rows: auto; gap: 14px 12px; padding: 18px 22px 22px; background: transparent; } .product-details { display: contents; } .product-fade-zone > div[id^="dynamic-details"], .product-details > div[id^="dynamic-details"] { display: contents; } /* Mobile: silla-card-top con su propio padding (card tiene padding:0 en mobile) */ .silla-card-top { display: flex; flex-direction: row; justify-content: space-between; align-items: baseline; padding: 18px 22px 0; margin-bottom: 0; } .silla-top-name { font-size: 32px; letter-spacing: 0.1em; line-height: 0.95; } .silla-top-cat { font-size: 16px; line-height: 1; } /* silla-static-header ahora sin h1/h2, ocupa fila 1 solo si hay variants */ .silla-static-header { grid-column: 1 / -1; grid-row: 1; display: flex; flex-direction: column; align-items: flex-start; margin: 0; padding: 0; } /* Si no hay variants, el header queda vacío — colapsar */ .silla-static-header:empty { display: none; } /* Imagen — fila 2, full width, fondo blanco. Sin overflow: hidden, sin background sólido en swatches/titles → la silla y su sombra pueden extenderse libremente y el usuario las acomoda manualmente con el modo "Ajustar Imágenes". */ .product-fade-zone > div[id^="zoom-container"] { grid-column: 1 / -1; grid-row: 2; background: transparent; padding: 4px 0; margin: 0; height: 230px; display: flex; align-items: center; justify-content: center; overflow: visible; position: relative; } .product-zoom { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; border-radius: 0; background: transparent; overflow: visible; } .product-zoom img { max-width: 100%; max-height: 100%; object-fit: contain; mix-blend-mode: multiply; padding: 0; } /* Swatches — fila 3, full width, con respiro extra antes de los botones */ .swatches-container { grid-column: 1 / -1; grid-row: 3; margin-bottom: 12px; } /* Eyebrow viejo y vistas auxiliares: ocultos */ .silla-mobile-eyebrow, .silla-mobile-dim-tag { display: none !important; } .product-fade-zone > div[id^="views-container"] { display: none !important; } .swatch-name { display: none !important; } /* Header principal del card: ocupa fila 1 completa */ .silla-static-header { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; margin: 0; width: 100%; } .silla-static-header h1 { font-family: var(--font-serif); font-size: 32px; font-weight: 500; letter-spacing: 0.1em; line-height: 0.95; text-transform: uppercase; color: var(--ink); margin: 0; } .silla-static-header h2 { display: block !important; font-family: var(--font-serif); font-size: 16px; font-style: italic; font-weight: 400; color: var(--ink-light); margin: 4px 0 0 0; text-transform: lowercase; opacity: 0.75; } /* Contenedor de swatches: ocupa fila 3, apilado vertical, con margen extra abajo para separarlos visiblemente de los botones. */ .swatches-container { grid-column: 1 / -1; display: flex; flex-direction: column-reverse; align-items: stretch; gap: 14px; margin: 0 0 14px 0; padding: 0; width: 100%; } /* Cada column es una fila con h3 arriba y circles inline abajo, full width. IMPORTANTE: el desktop pone flex-direction: column en .swatch-col, lo override acá. */ .swatch-col { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 8px 10px; min-width: 0; margin: 0; width: 100%; } /* h3 ocupa fila completa — un toque más chico */ .swatch-col h3 { display: block !important; flex: 1 0 100%; text-align: left; font-family: var(--font-sans); font-size: 8.5px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-light); opacity: 0.7; margin: 0 0 2px 0; white-space: nowrap; line-height: 1; } .swatch-col h3 b { color: var(--ink); font-weight: 700; opacity: 1; } /* Cada swatch-item: solo el círculo, sin nombre */ .swatch-col .swatch-item { gap: 0; } .swatch-circle { width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 2px 4px rgba(0,0,0,0.15), 0 1px 3px rgba(0,0,0,0.05); /* Misma curva que las transiciones de cambio de variante en desktop */ transition: transform 0.5s cubic-bezier(0.25, 0.1, 0.25, 1), box-shadow 0.5s cubic-bezier(0.25, 0.1, 0.25, 1); } /* Anillo dorado fino y elegante alrededor del swatch activo. Usamos box-shadow (anima) en lugar del puntero ✦ flotante. */ .swatch-item.active .swatch-circle { transform: scale(1.05); box-shadow: inset 0 2px 4px rgba(0,0,0,0.2), 0 0 0 1.5px var(--gold), 0 0 0 4px rgba(201, 169, 110, 0.18), 0 4px 10px rgba(0,0,0,0.15); } .swatch-item.active::before { display: none; } /* En mobile no usamos la estrellita flotante: el anillo dorado del círculo ya cumple esa función y se ve más limpio en pantallas chicas. */ .swatch-pointer { display: none !important; } /* Chip dorado con el nombre del color/estructura activa, al lado derecho de los swatches. margin-left: auto lo empuja al extremo derecho del row del swatch-col (mobile usa flex-direction: row + wrap, así que el chip queda en la misma fila que los círculos). */ .swatch-active-display { display: inline-flex; align-items: center; margin-left: auto; padding-left: 10px; color: var(--gold); font-family: var(--font-serif); font-style: italic; font-size: 13px; letter-spacing: 0.02em; line-height: 1.2; white-space: nowrap; text-align: right; /* Mismo timing y curva que el fade de .dynamic-img al cambiar color, para que el chip y la imagen se desvanezcan/reaparezcan en sync. */ transition: opacity 0.55s cubic-bezier(0.25, 0.1, 0.25, 1); opacity: 1; } .swatch-active-display.fading { opacity: 0; } /* En sillón también funciona — sillon-swatches-wrap es flex row con wrap; el chip queda al lado de los círculos. */ .product-card-sillon .swatch-active-display { display: inline-flex !important; } /* silla-bottom-row se aplana en mobile para que precio y WA sean grid items directos */ .silla-bottom-row { display: contents; } /* Botón "VER PRECIO" — fila 4 col 1. Internamente uso grid 1x1 para que btn-reveal-price y product-price-value se solapen en la misma celda (mutua exclusividad). Box-sizing border-box evita que el border de la pill cause overflow. */ .product-price-block { grid-column: 1; grid-row: 4; width: 100%; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: 44px; align-items: stretch; justify-items: stretch; min-height: 44px; margin: 0; padding: 0; box-sizing: border-box; } .product-price-block > * { grid-area: 1 / 1; box-sizing: border-box; width: 100%; max-width: 100%; } .btn-reveal-price { width: 100%; height: 44px; padding: 0 12px; background: transparent; border: 1px solid var(--ink); color: var(--ink); border-radius: 100px; font-family: var(--font-sans); font-size: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; display: flex; align-items: center; justify-content: center; cursor: pointer; } .btn-reveal-price::after { display: none; } /* Pill del precio: layout columna (label arriba, precio abajo) para que ningún número grande se superponga con la etiqueta. */ .product-price-value { width: 100%; height: 44px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; border: 1px solid var(--ink); border-radius: 100px; padding: 4px 8px; font-family: var(--font-sans); font-size: 12px; font-weight: 600; letter-spacing: 0.02em; background: transparent; color: var(--ink); line-height: 1.1; overflow: hidden; white-space: nowrap; } .product-price-value .wholesale-label { display: block; font-size: 6.5px; letter-spacing: 0.16em; margin: 0 0 1px 0; color: var(--gold); line-height: 1; text-transform: uppercase; font-weight: 600; } /* Botón "CONSULTAR" — fila 4 col 2. En mobile reemplazo el texto largo "Consultar este modelo" por "CONSULTAR" usando un pseudo-elemento (font-size: 0 oculta el text node). */ .btn-product-wa { grid-column: 2; grid-row: 4; width: 100%; height: 44px; margin: 0 !important; padding: 0 12px; border-radius: 100px; background: var(--ink); color: var(--white); border: none; font-size: 0; /* oculta texto original */ display: flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; box-sizing: border-box; } .btn-product-wa svg { width: 14px; height: 14px; margin: 0; fill: var(--white); display: block; flex-shrink: 0; } .btn-product-wa::after { content: "Consultar"; display: inline-block; font-family: var(--font-sans); font-size: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--white); } .btn-product-wa:hover { color: var(--white); border: none; padding: 0 18px; background: var(--ink); } /* Tap Targets & Variant Bubble Fix */ .variants-segmented { overflow-x: auto; max-width: 100%; white-space: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .variants-segmented::-webkit-scrollbar { display: none; } .variant-btn { min-height: 38px; justify-content: center; } /* Catálogo - Poltronas / Bancos / Banquetas / Puffs (mobile) Mismo layout que las sillas: card blanco con sombra, grid 2 cols, header → imagen → swatches → botones 50/50. Usamos display: contents para "aplanar" la jerarquía intermedia (.poltrona-top-row, .poltrona-fade-zone, .poltrona-info-col) y que sus hijos sean grid items directos. */ .product-card-poltrona { background: var(--cream); border-radius: 18px; padding: 18px 22px 22px; margin: 0; border: 1px solid rgba(26, 18, 8, 0.04); box-shadow: 0 4px 16px rgba(26, 18, 8, 0.06), 0 1px 3px rgba(26, 18, 8, 0.04); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-auto-rows: auto; gap: 14px 12px; /* overflow: hidden en el card outer para evitar que una imagen muy grande (con scale aplicado por admin) invada el card de abajo. La sombra del sillón puede extenderse libremente DENTRO del card (zonas internas son transparentes), pero queda contenida en el rectángulo del card. */ overflow: hidden; } /* Aplanar wrappers intermedios para que sus hijos sean grid items */ .poltrona-top-row, .poltrona-fade-zone, .poltrona-info-col { display: contents; } /* Header (nombre + subtitle) — fila 1, alineado a la izquierda */ .poltrona-header { grid-column: 1 / -1; grid-row: 1; border: none !important; padding: 0 !important; text-align: left !important; display: flex; flex-direction: column; align-items: flex-start; margin: 0; } .poltrona-header h1 { font-family: var(--font-serif); font-size: 32px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; line-height: 0.95; color: var(--ink) !important; margin: 0 !important; } .poltrona-header h2 { display: block !important; font-family: var(--font-serif); font-size: 16px !important; font-style: italic; font-weight: 400; color: var(--ink-light) !important; margin: 4px 0 0 0 !important; text-transform: lowercase; opacity: 0.75; line-height: 1; } /* Variants segmented (cuando aplica): fila propia entre header e imagen, alineado a la izquierda como Barcelona, con scroll horizontal si los nombres no caben (Paulina con 3 variantes largas, etc.). IMPORTANTE: el JS envuelve los variants en .poltrona-variants-container (poltrona-style) o en .silla-static-header (sillas). Sin grid-column explícito caían a col 1 ocupando solo la mitad del card. */ .poltrona-variants-container, .variants-static-row { grid-column: 1 / -1; grid-row: 2; padding: 0; margin: 0; display: flex; justify-content: flex-start; align-items: center; width: 100%; max-width: 100%; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .poltrona-variants-container::-webkit-scrollbar, .variants-static-row::-webkit-scrollbar { display: none; } /* Wrapper interno: no clipear, no shrinkar — su ancho es el del segmented y deja que el scroll horizontal lo maneje el container externo. */ .variants-bar-wrapper { max-width: none; overflow: visible; margin: 0; width: max-content; flex-shrink: 0; } /* En mobile el segmented pasa a flex (no inline-flex) para que respete el ancho del container y el scroll horizontal interno funcione cuando hay 3+ variantes largas (Paulina, Barcelona, Pily, etc.). */ .product-card-poltrona .variants-segmented { display: inline-flex; width: max-content; max-width: none; overflow: visible; flex-shrink: 0; } .product-card-poltrona .variants-segmented::-webkit-scrollbar { display: none; } /* Botones de variante más compactos en mobile */ .product-card-poltrona .variant-btn { padding: 0.42rem 0.95rem; font-size: 0.72rem; min-height: 34px; } /* Imagen — full width, sin altura forzada */ .poltrona-img-col { grid-column: 1 / -1; grid-row: 3; height: var(--poltrona-img-h-mobile, 230px); min-height: 0; padding: 0; background: transparent; display: flex; align-items: center; justify-content: center; overflow: visible; } .poltrona-img-col img { max-width: 100%; max-height: 100%; object-fit: contain; mix-blend-mode: multiply; } /* Swatches del info-col (heredados via display: contents) — fila 4 */ .product-card-poltrona .swatches-container { grid-column: 1 / -1; grid-row: 4; margin: 0 0 14px 0; width: 100%; } /* Dims (medidas), si existen, las ocultamos en mobile (no en mockup) */ .poltrona-dims { display: none !important; } /* Bottom row: se aplana (display: contents) para que precio y botón sean grid items directos del card. También aplanamos los wrappers internos poltrona-bottom-left/right para que .product-price-block y .btn-product-wa lleguen al grid de raíz. */ .poltrona-bottom-row, .poltrona-bottom-left, .poltrona-bottom-right { display: contents; } /* Botones: precio izq, WA der — DESPUÉS de imagen (row 3) y swatches (row 4) */ .product-card-poltrona .product-price-block { grid-column: 1; grid-row: 5; align-self: center; } .product-card-poltrona .btn-product-wa { grid-column: 2; grid-row: 5; align-self: center; justify-self: end; } /* ─── BOTTOM ROW UNIFICADO MOBILE ─────────────────────────────────── Sillas + Poltronas/Bancos/Banquetas/Puffs: el bottom-row deja de usar display:contents (que rompía la animación de fade-out porque opacity no aplica en contents) y pasa a ser un flex container que spanea las 2 columnas. Esto: 1) restaura la animación opacity+slide en el cambio de variante 2) deja precio izq y CONSULTAR der con el mismo layout que las poltronas (space-between en vez de pegados con grid gap chico) 3) arregla el puff que quedaba "hecho cualquier cosa" */ .silla-bottom-row { grid-column: 1 / -1 !important; grid-row: 4 !important; display: flex !important; align-items: center; justify-content: space-between; width: 100%; gap: 10px; padding: 10px 0 2px 0; margin: 6px 0 0 0; box-sizing: border-box; } .poltrona-bottom-row { grid-column: 1 / -1 !important; grid-row: 5 !important; display: flex !important; align-items: center; justify-content: space-between; width: 100%; gap: 10px; padding: 10px 0 2px 0; margin: 6px 0 0 0; box-sizing: border-box; } .silla-bottom-row .poltrona-bottom-left, .silla-bottom-row .poltrona-bottom-right, .poltrona-bottom-row .poltrona-bottom-left, .poltrona-bottom-row .poltrona-bottom-right { display: flex; align-items: center; flex: 1 1 0; min-width: 0; } /* ─── BOTONES 15% MÁS CHICOS (44px → 38px) ──────────────────────── */ .silla-bottom-row .product-price-block, .poltrona-bottom-row .product-price-block { width: 100%; min-width: 0; grid-template-rows: 38px; min-height: 38px; max-height: 38px; } .silla-bottom-row .product-price-value, .silla-bottom-row .btn-reveal-price, .poltrona-bottom-row .product-price-value, .poltrona-bottom-row .btn-reveal-price { height: 38px; font-size: 10px; letter-spacing: 0.16em; padding: 0 10px; } .silla-bottom-row .product-price-value .wholesale-label, .poltrona-bottom-row .product-price-value .wholesale-label { font-size: 5.5px; } .silla-bottom-row .btn-product-wa, .poltrona-bottom-row .btn-product-wa { width: 100%; height: 38px; padding: 0 10px; /* anula reglas previas con grid-column / justify-self */ grid-column: auto; grid-row: auto; justify-self: auto; align-self: auto; } .silla-bottom-row .btn-product-wa::after, .poltrona-bottom-row .btn-product-wa::after { font-size: 10px; } .silla-bottom-row .btn-product-wa svg, .poltrona-bottom-row .btn-product-wa svg { width: 12px; height: 12px; } /* ─── BANQUETAS / WIDE-LAYOUT: imagen no debe pisar los swatches ── */ .product-card-poltrona .poltrona-img-col { overflow: hidden; } } /* ─── ULTRA-NARROW MOBILE (<380px): iPhone SE, Galaxy Fold cerrado ───── En pantallas chiquitas el bottom-row de "Ver Precio + Consultar" puede apretar los textos. Acá compactamos un poco más: gap menor, fuente más chica, padding interno menor. Suficiente para que no haya overlap ni text-clipping visible en 320-379px. */ @media (max-width: 379px) { .silla-bottom-row, .poltrona-bottom-row { gap: 6px !important; padding: 8px 0 2px 0 !important; } .silla-bottom-row .product-price-value, .silla-bottom-row .btn-reveal-price, .poltrona-bottom-row .product-price-value, .poltrona-bottom-row .btn-reveal-price { height: 36px; font-size: 9px; letter-spacing: 0.12em; padding: 0 8px; } .silla-bottom-row .product-price-block, .poltrona-bottom-row .product-price-block { min-height: 36px; max-height: 36px; grid-template-rows: 36px; } .silla-bottom-row .btn-product-wa, .poltrona-bottom-row .btn-product-wa { height: 36px; padding: 0 8px; gap: 5px; } .silla-bottom-row .btn-product-wa::after, .poltrona-bottom-row .btn-product-wa::after { font-size: 9px; /* Truncado si el texto no entra (raro, pero defensivo) */ overflow: hidden; text-overflow: ellipsis; max-width: 100%; white-space: nowrap; } .silla-bottom-row .btn-product-wa svg, .poltrona-bottom-row .btn-product-wa svg { width: 11px; height: 11px; } /* Nota sutil de medidas: aún más chica para que no compita */ .price-size-note--wide { font-size: 0.62rem !important; margin-bottom: 0.25rem !important; } } /* Continuación del bloque mobile general (≤768px) — todas las reglas de abajo no fueron movidas, solo re-envueltas en su @media correcto tras refactorizar para el breakpoint ultra-narrow. */ @media (max-width: 768px) { /* Cueros */ #cueros { padding: 2.5rem 1rem; } /* Cueros disponibles — swatches en forma de círculo, 4 columnas en mobile */ .cueros-grid { grid-template-columns: repeat(4, 1fr); gap: 14px 10px; max-width: 100%; padding: 0 4px; } .cuero-card { gap: 8px; } .cuero-swatch { aspect-ratio: 1 / 1; border-radius: 50%; overflow: hidden; } .cuero-swatch img { border-radius: 50%; } .cuero-name { font-size: 0.78rem; text-align: center; line-height: 1.1; } /* Nosotros */ #nosotros { padding: 3rem 1rem; } .nosotros-inner { gap: 3rem; } .nosotros-map { height: 250px; } /* Contacto & Footer */ #contacto { padding: 3rem 1rem; } .btn-whatsapp-premium { padding: 1rem 2rem; font-size: 0.75rem; width: 100%; justify-content: center; } footer { padding: 2rem 1.5rem; font-size: 0.7rem; } /* Modal Auth & Admin */ .auth-modal { padding: 1rem; align-items: flex-start; overflow-y: auto; } .auth-modal-card { width: 100%; margin: 2rem auto; max-height: calc(100vh - 4rem); overflow-y: auto; padding: 2rem 1.5rem 1.5rem; } .auth-modal-header h2 { font-size: 2rem; } .admin-modal-content { padding: 1.5rem 1rem; width: 95%; max-height: 90vh; overflow-x: hidden; /* nada de scroll horizontal a nivel modal */ } .admin-tab-panel { width: 100%; max-width: 100%; overflow-x: hidden; } /* ─── ADMIN MODAL: HEADER MÁS COMPACTO ───────────────────── */ .admin-modal-header { margin-bottom: 1.25rem; padding: 0.5rem 2rem 0; /* Safety padding on mobile */ } .admin-modal-close { top: 0.75rem; right: 0.75rem; font-size: 1.8rem; } .admin-modal-header h2 { font-size: 1.7rem; line-height: 1.15; letter-spacing: 0.005em; } .admin-modal-subheader { font-size: 1.2rem; margin-bottom: 0.5rem; margin-top: -0.15rem; } .admin-modal-header p { font-size: 0.82rem; line-height: 1.4; } /* ─── ADMIN SCALE MODE: BOTONES SOBRE CARDS EN MOBILE ───── Los botones del modo "Ajustar Imágenes" (ghost / apply all / reset / save) usan position:absolute con coords hardcodeadas en px. En desktop entran bien pero en mobile se pisan unos con otros porque el card es angosto. Acá los reposicionamos así: · 3 botones izquierdos apilados verticalmente arriba-izq · save-wrapper arriba-derecha · texto más chico para que entren sin wrap Usamos !important porque las posiciones originales están inline. */ .admin-scale-tool { font-size: 0.62rem !important; padding: 5px 9px !important; line-height: 1.2 !important; white-space: nowrap !important; } .admin-scale-tool[data-tool="ghost"] { top: 8px !important; left: 8px !important; } .admin-scale-tool[data-tool="apply"] { top: 38px !important; left: 8px !important; max-width: 55% !important; white-space: normal !important; line-height: 1.15 !important; } .admin-scale-tool[data-tool="reset"] { top: 78px !important; left: 8px !important; } .admin-scale-tool[data-tool="save"] { top: 8px !important; right: 8px !important; } /* ─── ADMIN TABS: 4 EN UNA FILA, ELEGANTES ──────────────── Antes los tabs llevaban emoji (💰📊👥) y se rompían en 2 líneas. Ahora son texto puro, distribuidos en partes iguales, con padding reducido para que entren los 4 sin wrap (incluyendo "Escalar Imágenes" que en mobile se abrevia a "Escalar" via .tab-label-*). El subrayado dorado del activo (::after) se mantiene intacto. */ .admin-tab .tab-label-full { display: none; } .admin-tab .tab-label-short { display: inline; } .admin-tabs { gap: 0; padding: 0; margin-bottom: 1.5rem; justify-content: stretch; } .admin-tab { flex: 1 1 0; min-width: 0; padding: 0.7rem 0.4rem; font-size: 0.68rem; letter-spacing: 0.08em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .admin-tab::after { left: 0.5rem; right: 0.5rem; } /* ─── TOOLBAR: cada grupo se apila y los botones envuelven ───── */ .admin-toolbar { flex-direction: column; align-items: stretch; gap: 0.75rem; width: 100%; max-width: 100%; box-sizing: border-box; overflow: visible; } .admin-toolbar-group { display: flex; flex-direction: row; flex-wrap: wrap; /* botones envuelven a la siguiente fila si no entran */ align-items: center; justify-content: flex-start; gap: 8px; width: 100%; min-width: 0; } .admin-toolbar-group > span { flex: 0 0 100%; /* el label "Variación Masiva" toma fila completa arriba */ margin-bottom: 2px; } .admin-toolbar input[type="number"] { flex: 0 0 70px; /* el % editable angosto a la izquierda */ width: 70px; min-width: 0; } .admin-toolbar-group .btn-admin { flex: 1 1 auto; /* botones expanden para llenar el row, envuelven si no entran */ width: auto; min-width: 0; white-space: normal; /* permite quebrar texto largo en 2 líneas */ line-height: 1.15; padding: 8px 10px; font-size: 0.7rem; } /* ─── ADMIN TABLES → CARDS APILADAS ────────────────────────── Reemplazamos el scroll horizontal de las tablas por un layout tipo card: cada se vuelve un bloque y cada es una fila "etiqueta: valor" usando ::before con data-label. applyAdminTableLabels() inyecta los data-label leyendo el . */ .admin-table { display: block; width: 100%; overflow: visible; white-space: normal; margin: 0; padding: 0; border-collapse: separate; border-spacing: 0; } .admin-table thead { display: none; } .admin-table tbody, .admin-table tfoot { display: block; } .admin-table tbody tr { display: block; width: 100%; margin: 0 0 12px 0; padding: 12px 14px; background: #fff; border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 10px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04); box-sizing: border-box; } .admin-table tbody tr.admin-category-header { background: var(--ink); border: none; padding: 8px 12px; text-align: center; border-radius: 8px; margin-top: 8px; } .admin-table tbody tr.admin-category-header td { display: block; width: 100%; padding: 0; border: none; color: #fff; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.78rem; text-align: center; } .admin-table tbody tr.admin-category-header td::before { display: none; } .admin-table td { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 8px 0; border: none; border-bottom: 1px dashed rgba(0, 0, 0, 0.06); gap: 12px; text-align: right; word-break: break-word; box-sizing: border-box; min-height: 32px; } .admin-table td:last-child { border-bottom: none; } .admin-table td::before { content: attr(data-label); flex: 0 0 40%; text-align: left; font-family: var(--font-sans); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-light); white-space: nowrap; } .admin-table td:not([data-label])::before { display: none; } /* td sin label (botones de acción solos) → centrado, full width */ .admin-table td:not([data-label]) { justify-content: center; text-align: center; } .admin-table .admin-product-col { display: flex; align-items: center; gap: 10px; justify-content: flex-end; flex-wrap: wrap; } .admin-table .admin-thumb { width: 36px; height: 36px; object-fit: cover; border-radius: 6px; } /* Inputs y selects ocupan el lado derecho sin pasarse */ .admin-table td .input-currency, .admin-table td input[type="number"], .admin-table td select { max-width: 60%; } .admin-table input[type="number"] { width: 100%; } .admin-table .input-currency { width: auto; } .admin-users-header { flex-direction: column; align-items: flex-start; gap: 1rem; } .admin-users-actions, .admin-add-user-actions { width: 100%; display: flex; flex-direction: column; } .btn-admin { width: 100%; text-align: center; } .admin-add-user-grid { grid-template-columns: 1fr; } } /* ─── REDUCED MOTION ─── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ─── SNAPSHOT COPIES DE CONFIGURACIÓN ─── */ .admin-snapshot-save { display: flex; gap: 10px; margin-bottom: 1.5rem; } #snapshot-name-input { flex: 1; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(201, 169, 110, 0.3); border-radius: 8px; padding: 10px 14px; color: var(--ink); font-family: var(--font-sans); font-size: 0.9rem; transition: border-color 0.3s, box-shadow 0.3s; } #snapshot-name-input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201, 169, 110, 0.15); } .admin-snapshot-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 1.5rem; max-height: 300px; overflow-y: auto; padding-right: 4px; } /* Custom scrollbar for snapshot list */ .admin-snapshot-list::-webkit-scrollbar { width: 6px; } .admin-snapshot-list::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.03); border-radius: 4px; } .admin-snapshot-list::-webkit-scrollbar-thumb { background: rgba(201, 169, 110, 0.3); border-radius: 4px; } .admin-snapshot-list::-webkit-scrollbar-thumb:hover { background: rgba(201, 169, 110, 0.5); } .admin-snapshot-item { display: flex; align-items: center; justify-content: space-between; background: rgba(26, 18, 8, 0.02); border: 1px solid rgba(26, 18, 8, 0.08); border-radius: 12px; padding: 12px 16px; transition: all 0.3s ease; } .admin-snapshot-item:hover { background: rgba(26, 18, 8, 0.04); border-color: rgba(201, 169, 110, 0.25); transform: translateY(-1px); } .admin-snapshot-info { display: flex; flex-direction: column; gap: 4px; } .admin-snapshot-item-name { font-family: var(--font-sans); font-weight: 600; font-size: 0.92rem; color: var(--ink); } .admin-snapshot-item-date { font-family: var(--font-sans); font-size: 0.75rem; color: var(--ink-light); opacity: 0.8; } .admin-snapshot-actions { display: flex; gap: 8px; } .admin-snapshot-btn { font-family: var(--font-sans); font-size: 0.8rem; font-weight: 500; padding: 6px 14px; border-radius: 20px; cursor: pointer; transition: all 0.2s; border: 1px solid transparent; } .admin-snapshot-btn.activate { background: var(--gold); color: #1A1208; } .admin-snapshot-btn.activate:hover { background: #bfa065; transform: scale(1.03); } .admin-snapshot-btn.delete { background: transparent; color: #f44336; border-color: rgba(244, 67, 54, 0.2); } .admin-snapshot-btn.delete:hover { background: rgba(244, 67, 54, 0.08); border-color: #f44336; } .admin-snapshot-empty { text-align: center; padding: 2rem; color: var(--ink-light); opacity: 0.7; font-size: 0.88rem; font-style: italic; }