/* ============================================================ VFitUY Landing — Light Premium ============================================================ */ /* ===== Design Tokens ===== */ :root { --primary: #002046; --primary-container: #1b365d; --primary-fixed: #d6e3ff; --primary-fixed-dim: #aec7f7; --surface: #faf9f7; --surface-warm: #f9f8f6; --surface-card: #ffffff; --surface-container-lowest: #ffffff; --surface-container-low: #f4f3f1; --surface-container: #efeeec; --surface-container-high: #e9e8e6; --surface-variant: #e3e2e0; --surface-dim: #dadad8; --on-surface: #1a1c1b; --on-surface-variant: #44474e; --on-primary: #ffffff; --on-background: #1a1c1b; --outline: #74777f; --outline-variant: #c4c6cf; --accent-orange: #f16e13; --accent-teal: #0094ad; --secondary-fixed-dim: #3eb5ce; --shadow-sm: 0 1px 2px rgba(0, 32, 70, 0.05), 0 1px 3px rgba(0, 32, 70, 0.05); --shadow-md: 0 4px 6px -1px rgba(0, 32, 70, 0.08), 0 2px 4px -2px rgba(0, 32, 70, 0.08); --shadow-lg: 0 10px 15px -3px rgba(0, 32, 70, 0.1), 0 4px 6px -4px rgba(0, 32, 70, 0.1); --shadow-xl: 0 20px 25px -5px rgba(0, 32, 70, 0.12), 0 8px 10px -6px rgba(0, 32, 70, 0.08); --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 20px; --radius-full: 999px; --container-max: 1280px; --margin-mobile: 16px; --margin-desktop: 48px; --gutter: 24px; --easing: cubic-bezier(0.4, 0, 0.2, 1); } /* ===== Reset / Base ===== */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } html:has(body.landing) { overflow-x: hidden; overscroll-behavior-x: none; } body.landing { margin: 0; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 16px; line-height: 24px; color: var(--on-surface); background: var(--surface); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } body.landing h1, body.landing h2, body.landing h3, body.landing h4, body.landing h5 { font-family: "Montserrat", -apple-system, BlinkMacSystemFont, sans-serif; margin: 0; } body.landing p { margin: 0; } body.landing ul { margin: 0; padding: 0; list-style: none; } body.landing a { color: inherit; text-decoration: none; } body.landing .btn, body.landing .floating-cta { color: var(--on-primary); } body.landing .btn-outline, body.landing .btn-premium, body.landing .btn-on-primary { color: var(--primary); } body.landing img { display: block; max-width: 100%; } ::selection { background: var(--accent-teal); color: #fff; } .material-symbols-outlined { font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24; font-size: 24px; line-height: 1; vertical-align: middle; } .container { width: 100%; max-width: var(--container-max); margin: 0 auto; padding-left: var(--margin-mobile); padding-right: var(--margin-mobile); } @media (min-width: 768px) { .container { padding-left: var(--margin-desktop); padding-right: var(--margin-desktop); } } /* ===== Reveal Animation ===== */ .reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.8s var(--easing), transform 0.8s var(--easing); } .reveal.active { opacity: 1; transform: translateY(0); } /* Fallback anti-invisible SOLO en /nosotros: si el JS no corrio / IntersectionObserver no soportado, el gate 'reveal-on' (script inline en el de nosotros.html) no se seteo -> mostramos el contenido sin animacion (preferimos verlo a ocultarlo). Scopeado a .nosotros-page: no puede afectar el reveal de inicio. */ html:not(.reveal-on) body.nosotros-page .reveal { opacity: 1; transform: none; } /* Idem para /inicio (scopeado a su clase de body unica has-hero-editorial): sin el gate 'reveal-on' (JS off / IO no soportado) mostramos todo sin animacion. El hero, que SI lleva .reveal en inicio, tambien queda visible. Con JS activo la regla es inerte (fade normal). */ html:not(.reveal-on) body.has-hero-editorial .reveal { opacity: 1; transform: none; } /* ===== Buttons ===== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 24px; border-radius: var(--radius-sm); font-family: "Montserrat", sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; cursor: pointer; border: 1px solid transparent; transition: transform 0.2s var(--easing), background 0.3s var(--easing), border-color 0.3s var(--easing), box-shadow 0.3s var(--easing), color 0.3s var(--easing); white-space: nowrap; } .btn:active { transform: scale(0.97); } .btn-sm { padding: 10px 20px; font-size: 14px; } .btn-lg { padding: 16px 32px; font-size: 16px; } .btn-full { width: 100%; padding: 16px 24px; } .btn-icon-leading { color: var(--accent-teal); } .btn-primary { background: var(--primary); color: var(--on-primary); box-shadow: var(--shadow-md); } .btn-primary:hover { background: var(--primary-container); box-shadow: var(--shadow-lg); } .btn-outline { background: transparent; color: var(--primary); border-color: var(--outline-variant); } .btn-outline:hover { background: var(--surface-container); border-color: var(--primary); } .btn-premium { background: var(--surface-container-lowest); color: var(--primary); border-color: var(--outline-variant); box-shadow: var(--shadow-sm); } .btn-premium:hover { border-color: rgba(0, 148, 173, 0.5); box-shadow: 0 0 40px rgba(0, 148, 173, 0.18), var(--shadow-md); } .btn-on-primary { background: var(--surface-container-lowest); color: var(--primary); box-shadow: var(--shadow-xl); } .btn-on-primary:hover { background: var(--surface-warm); transform: translateY(-2px); } /* ===== Navbar (fixed para que quede siempre arriba) ===== */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; background: #ffffff; box-shadow: var(--shadow-sm); transition: background 0.3s var(--easing), box-shadow 0.3s var(--easing), backdrop-filter 0.3s var(--easing); } /* Compensar el espacio que el nav fijo deja debajo (paginas sin hero editorial) */ body.landing { padding-top: 72px; } @media (min-width: 768px) { body.landing { padding-top: 80px; } } /* Hero editorial: el hero es full-bleed y absorbe el nav transparente arriba */ body.landing.has-hero-editorial { padding-top: 0; } /* Estado scrolled: blanco con shadow mas marcada (visible sobre cualquier fondo) */ .nav.scrolled { background: #ffffff; box-shadow: var(--shadow-md); } /* ---- Nav transparente SIN blur sobre el hero editorial ---- */ body.has-hero-editorial .nav:not(.scrolled) { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; } body.has-hero-editorial .nav:not(.scrolled) .nav-link { color: rgba(255, 255, 255, 0.92); } body.has-hero-editorial .nav:not(.scrolled) .nav-link:hover { color: #ffffff; } body.has-hero-editorial .nav:not(.scrolled) .btn-outline { border-color: rgba(255, 255, 255, 0.45); color: #ffffff; background: rgba(255, 255, 255, 0.05); } body.has-hero-editorial .nav:not(.scrolled) .btn-outline:hover { background: rgba(255, 255, 255, 0.15); border-color: rgba(255, 255, 255, 0.65); } body.has-hero-editorial .nav:not(.scrolled) .nav-burger { color: #ffffff; } .nav-inner { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0 var(--margin-mobile); height: 72px; } @media (min-width: 768px) { .nav-inner { padding: 0 56px; height: 80px; } } @media (min-width: 900px) { .nav-inner { display: grid; grid-template-columns: 1fr auto 1fr; } .nav-logo { justify-self: start; } .nav-links { justify-self: center; } .nav-actions { justify-self: end; } } /* nav-logo: el oscuro dimensiona el wrapper, el claro va absolute encima. El claro solo se ve sobre hero editorial (nav transparente). Crossfade en el toggle scrolled. En paginas sin hero editorial el claro nunca se ve. */ .nav-logo { display: flex; align-items: center; position: relative; } .nav-logo img, .nav-logo .nav-logo-img { height: 32px; width: auto; object-fit: contain; display: block; transition: opacity 0.3s var(--easing); } @media (min-width: 768px) { .nav-logo img, .nav-logo .nav-logo-img { height: 40px; } } .nav-logo-light { position: absolute; top: 50%; left: 0; transform: translateY(-50%); opacity: 0; pointer-events: none; } /* Sobre hero editorial sin scroll: mostrar claro, ocultar oscuro */ body.has-hero-editorial .nav:not(.scrolled) .nav-logo-light { opacity: 1; } body.has-hero-editorial .nav:not(.scrolled) .nav-logo-dark { opacity: 0; } .nav-links { display: none; align-items: center; gap: 64px; } @media (min-width: 900px) { .nav-links { display: flex; } } .nav-link { font-family: "Montserrat", sans-serif; font-size: 15px; font-weight: 500; color: var(--on-surface-variant); transition: color 0.3s var(--easing); } .nav-link:hover { color: var(--accent-teal); } .nav-actions { display: none; align-items: center; gap: 12px; } @media (min-width: 900px) { .nav-actions { display: flex; } } .nav-burger { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; background: transparent; border: none; color: var(--primary); cursor: pointer; padding: 0; } .nav-burger .material-symbols-outlined { font-size: 28px; } @media (min-width: 900px) { .nav-burger { display: none; } } /* ===== Mobile menu ===== */ .mobile-menu { position: fixed; inset: 0; z-index: 60; background: var(--surface-warm); padding: 80px var(--margin-mobile) 40px; transform: translateX(100%); transition: transform 0.3s var(--easing); overflow-y: auto; } .mobile-menu.open { transform: translateX(0); } .mobile-menu-close { position: absolute; top: 18px; right: var(--margin-mobile); width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: none; color: var(--primary); cursor: pointer; } .mobile-menu-close .material-symbols-outlined { font-size: 28px; } .mobile-menu-links { display: flex; flex-direction: column; gap: 24px; margin-top: 24px; } body.landing .mobile-menu-link { font-family: "Montserrat", sans-serif; font-size: 32px; font-weight: 600; color: var(--primary); letter-spacing: -0.01em; } .mobile-menu-links hr { border: none; border-top: 1px solid var(--surface-variant); margin: 8px 0; } /* ===== Floating CTA ===== */ .floating-cta { position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 40; display: inline-flex; flex-direction: column; align-items: center; gap: 10px; padding: 18px 12px; background: var(--primary); color: var(--on-primary); border-radius: var(--radius-lg) 0 0 var(--radius-lg); box-shadow: var(--shadow-lg); font-family: "Montserrat", sans-serif; font-size: 13px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; transition: background 0.3s var(--easing), padding-right 0.3s var(--easing); } .floating-cta:hover { background: var(--primary-container); padding-right: 16px; } .floating-cta .material-symbols-outlined { font-size: 22px; } .floating-cta-text { writing-mode: vertical-rl; text-orientation: mixed; transform: rotate(180deg); } @media (max-width: 640px) { .floating-cta { display: none; } } /* ===== Aurora ===== */ .aurora-container { --mx: 0; --my: 0; position: relative; overflow: hidden; isolation: isolate; } /* Spotlight that follows the mouse + colors shift via hue-rotate */ .aurora-container::before { content: ""; position: absolute; inset: -20%; z-index: 0; pointer-events: none; background: radial-gradient( circle at calc(50% + var(--mx) * 60%) calc(50% + var(--my) * 60%), rgba(230, 85, 30, 0.20) 0%, rgba(238, 110, 50, 0.10) 20%, rgba(0, 148, 173, 0.06) 40%, transparent 60% ); transition: background 0.25s ease-out; } .aurora-layer { position: absolute; inset: 0; pointer-events: none; z-index: 0; transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), filter 0.5s ease-out; will-change: transform, filter; filter: hue-rotate(calc(var(--mx) * 60deg)) saturate(calc(1.15 + var(--my) * 0.5)); } .aurora-layer-1 { transform: translate3d(calc(var(--mx) * -90px), calc(var(--my) * -90px), 0); } .aurora-layer-2 { transform: translate3d(calc(var(--mx) * 120px), calc(var(--my) * 60px), 0); } .aurora-layer-3 { transform: translate3d(calc(var(--mx) * 50px), calc(var(--my) * -80px), 0); } .aurora-blob { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.55; animation-duration: 20s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; } .aurora-bg-1 { width: 65%; height: 65%; top: -12%; left: -12%; background: radial-gradient(circle, rgba(120, 165, 245, 0.45) 0%, rgba(120, 165, 245, 0) 70%); animation-name: aurora-drift-1; } .aurora-bg-2 { width: 75%; height: 75%; bottom: -22%; right: -22%; background: radial-gradient(circle, rgba(62, 181, 206, 0.32) 0%, rgba(62, 181, 206, 0) 70%); animation-name: aurora-drift-2; } .aurora-bg-3 { width: 55%; height: 55%; top: 15%; right: 8%; background: radial-gradient(circle, rgba(233, 90, 32, 0.27) 0%, rgba(233, 90, 32, 0) 70%); animation-name: aurora-drift-1; animation-direction: reverse; } @keyframes aurora-drift-1 { 0% { transform: scale(1) translate(0, 0); } 33% { transform: scale(1.1) translate(5%, 5%); } 66% { transform: scale(0.9) translate(-5%, 2%); } 100% { transform: scale(1) translate(0, 0); } } @keyframes aurora-drift-2 { 0% { transform: scale(1) translate(0, 0); } 33% { transform: scale(0.9) translate(-5%, -5%); } 66% { transform: scale(1.1) translate(5%, -2%); } 100% { transform: scale(1) translate(0, 0); } } .aurora-container > .container, .aurora-container > .hero-inner { position: relative; z-index: 1; } /* ===== Sections ===== */ .section { padding: 96px 0; position: relative; } @media (max-width: 768px) { .section { padding: 64px 0; } } .section-light { background: var(--surface-container-lowest); border-block: 1px solid var(--surface-variant); } .section-warm { background: var(--surface-warm); } .section-primary { background: var(--primary); color: var(--on-primary); } /* Palabra "tienda" del CTA en el celeste clasico de VFitUY (mismo que "VFitUY") */ .cta-tienda { color: var(--secondary-fixed-dim); } /* ============================================================ Fondo de grilla difuminada (vignette) para TODOS los fondos navy: .section-primary (landing: beneficios + CTA final) y .nos-hero (nosotros). Grilla de lineas blancas tenues sobre el navy que se desvanece hacia los bordes via mask radial — "cuadraditos que se difuminan en los bordes". ============================================================ */ .section-primary, .nos-hero { position: relative; } .section-primary > *, .nos-hero > * { position: relative; z-index: 1; } .section-primary::before, .nos-hero::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: linear-gradient(to right, rgba(255, 255, 255, 0.08) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 255, 255, 0.08) 1px, transparent 1px); background-size: 48px 48px; -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 50%, #000 0%, transparent 82%); mask-image: radial-gradient(ellipse 90% 70% at 50% 50%, #000 0%, transparent 82%); } /* Wrapper que envuelve "Mucho más que ropa" + "Cómo funciona" con el mismo fondo */ .catalog-bg-wrapper { background: linear-gradient(rgba(249, 248, 246, 0.55), rgba(249, 248, 246, 0.55)), url("/static/imagenes/landing/Background-Seccion-3.webp") center / cover no-repeat, var(--surface-warm); } .catalog-bg-wrapper .section-catalog, .catalog-bg-wrapper .section-como-funciona { background: transparent; } .catalog-bg-wrapper .section .container { position: relative; z-index: 1; } /* Versión mobile del background de catalog (≤768px) */ @media (max-width: 768px) { .catalog-bg-wrapper { background: linear-gradient(rgba(249, 248, 246, 0.55), rgba(249, 248, 246, 0.55)), url("/static/imagenes/landing/Mobile-Background-Seccion-3.webp") center / cover no-repeat, var(--surface-warm); } } /* Sección "Quiénes somos" con imagen de fondo */ .section-nosotros { position: relative; overflow: hidden; background-color: var(--surface-warm); } .section-nosotros::before { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(249, 248, 246, 0.55), rgba(249, 248, 246, 0.55)), url("/static/imagenes/landing/Background-Seccion-6.png") 80% center / cover no-repeat; transform: scale(1.1); pointer-events: none; z-index: 0; } .section-nosotros .container { position: relative; z-index: 1; } /* Versión mobile del background de "Quiénes somos" (≤768px) */ @media (max-width: 768px) { .section-nosotros::before { background: linear-gradient(rgba(249, 248, 246, 0.55), rgba(249, 248, 246, 0.55)), url("/static/imagenes/landing/Mobile-Background-Seccion-6.png") 30% center / cover no-repeat; transform: none; } } .section-header { text-align: center; margin-bottom: 64px; } .section-header-narrow { max-width: 720px; margin-left: auto; margin-right: auto; } .section-title { font-size: 32px; line-height: 40px; font-weight: 600; letter-spacing: -0.01em; color: var(--primary); margin-bottom: 16px; } @media (min-width: 768px) { .section-title { font-size: 40px; line-height: 48px; } } .section-title-on-primary { color: var(--on-primary); } .section-subtitle { font-size: 18px; line-height: 28px; color: var(--on-surface-variant); } .section-subtitle-on-primary { color: var(--primary-fixed-dim); } .text-gradient { background: linear-gradient(135deg, var(--primary) 0%, var(--accent-orange) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* ===== Hero (editorial) ===== Full-bleed background image + vertical glass panel + serif XL title. Parallax sutil al mover el mouse (variables --mx / --my seteadas via JS). */ .hero { position: relative; min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; background: var(--primary); /* fallback color mientras carga la imagen */ overflow: hidden; --mx: 0; --my: 0; } /* ---- Background image (parallax 15px max, scale up para no exponer bordes) ---- */ .hero-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: linear-gradient(135deg, var(--primary), var(--primary-container)); } .hero-bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; transform: scale(1.08) translate3d(calc(var(--mx) * -16px), calc(var(--my) * -16px), 0); transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); will-change: transform; } /* Fade-in de la imagen del hero sobre el LQIP (inicio.js pone las clases SOLO si la imagen aun no estaba cargada; sin JS no hay clases y se ve normal). OJO: la transition re-declara la de transform para no pisar el parallax. Al terminar el fade, inicio.js REMUEVE ambas clases -> estado base intacto. */ .hero-bg img.hero-img-loading { opacity: 0; transition: opacity 0.3s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); } .hero-bg img.hero-img-loading.hero-img-loaded { opacity: 1; } /* ---- Cortina de vidrio estriado (barras verticales densas) ---- ~32 barras pegadas (gap 0) que llenan el ancho con flex-grow proporcional. El parallax se aplica al CONTAINER (no por barra) para que las barras nunca se separen entre si al mover el mouse. Variables JS por barra: --g (grow 6-22), --bl (blur 6-18), --op (0.02-0.08). */ .hero-blinds { position: absolute; top: 0; bottom: 0; left: 51%; right: 0; z-index: 1; display: flex; align-items: stretch; justify-content: flex-start; gap: 0; pointer-events: none; overflow: hidden; transform: translate3d(calc(var(--mx, 0) * 12px), 0, 0); transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1); will-change: transform; } .hero-blind { height: 100%; flex: 1 1 0; min-width: 0; background: rgba(255, 255, 255, var(--op, 0.05)); backdrop-filter: blur(calc(var(--bl, 12px))) saturate(105%); -webkit-backdrop-filter: blur(calc(var(--bl, 12px))) saturate(105%); } /* ---- Scrim oscuro abajo para legibilidad de los CTAs ---- */ .hero-scrim { position: absolute; inset: 0; z-index: 2; background: linear-gradient( 180deg, rgba(8, 12, 20, 0.20) 0%, rgba(8, 12, 20, 0.10) 30%, rgba(8, 12, 20, 0.55) 100% ); pointer-events: none; } /* ---- Contenido sobre todo ---- */ .hero-content { position: relative; z-index: 3; width: 100%; padding: 120px 0 96px; } .hero-inner { display: flex; flex-direction: column; align-items: flex-start; text-align: left; gap: 22px; max-width: 760px; } /* ---- Badge (variante sobre fondo oscuro: glass blanco) ---- */ .hero-editorial .hero-badge { background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.22); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: none; } .hero-editorial .hero-badge-text { color: rgba(255, 255, 255, 0.95); } .hero-badge { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: var(--radius-full); background: rgba(255, 255, 255, 0.7); border: 1px solid rgba(0, 148, 173, 0.3); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: var(--shadow-sm); } .hero-badge-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-teal); animation: pulse 2s ease-in-out infinite; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } .hero-badge-text { font-family: "Inter", sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--primary); } .hero-badge-static .hero-badge-dot { display: none; } .hero-badge-static { background: var(--surface-container-lowest); } /* ---- Title editorial: "VFitUY" serif XL + subtitulo sans ---- */ .hero-title { margin: 0; display: flex; flex-direction: column; gap: 10px; color: #ffffff; } .hero-title-serif { font-family: "Playfair Display", "Georgia", serif; font-weight: 800; font-size: clamp(80px, 13vw, 200px); line-height: 0.92; letter-spacing: -0.04em; color: #ffffff; text-shadow: 0 4px 40px rgba(0, 0, 0, 0.30); } .hero-title-sub { font-family: "Inter", sans-serif; font-weight: 500; font-size: clamp(20px, 2.4vw, 30px); line-height: 1.25; letter-spacing: -0.01em; color: rgba(255, 255, 255, 0.92); max-width: 560px; } /* ---- Rotator + desc (variantes claras sobre hero) ---- */ .hero-editorial .hero-rotator-item { color: rgba(255, 255, 255, 0.86); } .hero-editorial .hero-desc { color: rgba(255, 255, 255, 0.78); } .hero-rotator { height: 56px; width: 100%; max-width: 560px; overflow: hidden; position: relative; } .hero-rotator-track { animation: rotator-slide 12s infinite; } .hero-rotator-item { font-family: "Inter", sans-serif; font-size: 18px; font-weight: 400; height: 56px; display: flex; align-items: center; justify-content: flex-start; color: var(--on-surface-variant); } @keyframes rotator-slide { 0%, 25% { transform: translateY(0); } 33.33%, 58.33% { transform: translateY(-56px); } 66.66%, 91.66% { transform: translateY(-112px); } 100% { transform: translateY(0); } } .hero-desc { font-size: 16px; line-height: 26px; color: var(--on-surface-variant); max-width: 600px; } .hero-ctas { display: flex; flex-wrap: wrap; gap: 16px; justify-content: flex-start; margin-top: 8px; width: 100%; } @media (max-width: 520px) { .hero-ctas { flex-direction: column; align-items: stretch; } .hero-ctas .btn { width: 100%; } } /* ---- Scroll cue (esquina inferior derecha) ---- */ .hero-scroll-cue { position: absolute; bottom: 32px; right: 32px; z-index: 4; display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px 12px 18px; border-radius: var(--radius-full); background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.18); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: #ffffff; text-decoration: none; font-family: "Inter", sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; transition: transform 0.25s var(--easing), background 0.25s var(--easing); } .hero-scroll-cue:hover { background: rgba(255, 255, 255, 0.15); transform: translateY(-2px); } .hero-scroll-cue .material-symbols-outlined { font-size: 18px; animation: scroll-cue-bounce 2.4s ease-in-out infinite; } @keyframes scroll-cue-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } } @media (max-width: 768px) { .hero-scroll-cue { bottom: 22px; right: 22px; padding: 10px 14px; font-size: 11px; } } /* ---- Mobile: sacar las barras + parallax off + title smaller ---- */ @media (max-width: 768px) { .hero-bg img { /* Sin parallax en mobile, solo scale para evitar bordes */ transform: scale(1.04); } /* Cortina de vidrio se oculta totalmente en mobile (mejor performance y mas espacio para la imagen). El scrim oscuro abajo sigue dando legibilidad. */ .hero-blinds { display: none; } .hero-content { padding: 100px 0 80px; } .hero-inner { gap: 18px; max-width: 100%; } .hero-title { gap: 6px; } } /* ---- Reduced motion: sin parallax, sin bounce ---- */ @media (prefers-reduced-motion: reduce) { .hero-bg img, .hero-blinds { transform: none !important; transition: none !important; } .hero-scroll-cue .material-symbols-outlined { animation: none; } } /* ===== Section eyebrow (chip arriba del titulo) ===== */ .section-eyebrow { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; margin-bottom: 16px; background: rgba(0, 148, 173, 0.10); border: 1px solid rgba(0, 148, 173, 0.25); border-radius: var(--radius-full); font-family: "Inter", sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-teal); } .section-eyebrow .material-symbols-outlined { font-size: 16px; font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 20; } /* ===== Before / After Slider (Demo Visual section 2) ===== */ .ba-slider-wrap { max-width: 520px; margin: 0 auto; margin-bottom: 20px; } .ba-slider { position: relative; --pos: 50%; aspect-ratio: 4 / 5; max-height: 560px; margin: 0 auto; border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-xl); background: var(--surface-container); user-select: none; -webkit-user-select: none; touch-action: pan-y pinch-zoom; cursor: ew-resize; } .ba-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; -webkit-user-drag: none; } .ba-img-after { z-index: 1; } .ba-img-before { z-index: 2; clip-path: inset(0 calc(100% - var(--pos)) 0 0); } .ba-divider { position: absolute; top: 0; bottom: 0; left: var(--pos); transform: translateX(-50%); width: 3px; background: rgba(255, 255, 255, 0.95); box-shadow: 0 0 0 1px rgba(0, 32, 70, 0.15), 0 4px 12px rgba(0, 32, 70, 0.25); z-index: 3; pointer-events: none; } .ba-handle { position: absolute; top: 50%; left: var(--pos); transform: translate(-50%, -50%); width: 52px; height: 52px; border-radius: 50%; background: #ffffff; border: 2px solid var(--primary); color: var(--primary); display: grid; place-items: center; cursor: grab; z-index: 4; box-shadow: 0 4px 16px rgba(0, 32, 70, 0.30), 0 0 0 6px rgba(255, 255, 255, 0.15); transition: transform 0.15s ease-out, box-shadow 0.15s ease-out, background 0.15s ease-out; padding: 0; font: inherit; } .ba-handle:hover { background: var(--primary); color: #ffffff; box-shadow: 0 6px 20px rgba(0, 32, 70, 0.35), 0 0 0 8px rgba(255, 255, 255, 0.2); } .ba-handle:active, .ba-handle.dragging { cursor: grabbing; transform: translate(-50%, -50%) scale(0.95); } .ba-handle:focus-visible { outline: 3px solid var(--accent-teal); outline-offset: 3px; } .ba-handle .material-symbols-outlined { font-size: 26px; transform: rotate(90deg); font-variation-settings: "FILL" 0, "wght" 600, "GRAD" 0, "opsz" 24; } .ba-tag { position: absolute; bottom: 18px; padding: 7px 14px; border-radius: var(--radius-full); font-family: "Inter", sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; z-index: 3; pointer-events: none; display: inline-flex; align-items: center; gap: 5px; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: opacity 0.25s var(--easing); } .ba-tag-before { left: 18px; background: rgba(255, 255, 255, 0.92); color: var(--primary); border: 1px solid rgba(0, 32, 70, 0.08); } .ba-tag-after { right: 18px; background: rgba(0, 32, 70, 0.88); color: #ffffff; border: 1px solid rgba(255, 255, 255, 0.12); } .ba-tag-after .material-symbols-outlined { font-size: 14px; color: var(--secondary-fixed-dim); font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 20; } /* En mobile achicamos handle y tags para no tapar la imagen */ @media (max-width: 640px) { .ba-slider { aspect-ratio: 3 / 4; } .ba-handle { width: 44px; height: 44px; } .ba-handle .material-symbols-outlined { font-size: 22px; } .ba-tag { font-size: 11px; padding: 5px 11px; bottom: 12px; } .ba-tag-before { left: 12px; } .ba-tag-after { right: 12px; } } /* ===== Demo section 2: layout 2 columnas (visual izq + info der) ===== En mobile la info (titulo) va arriba y la demo abajo; en desktop la demo queda a la izquierda y la info a la derecha (via order). */ .demo-split { display: grid; grid-template-columns: 1fr; gap: 44px; } .demo-info { order: 1; } .demo-visual { order: 2; text-align: center; } @media (min-width: 920px) { .demo-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 60px; align-items: center; } .demo-visual { order: 1; } .demo-info { order: 2; } /* En desktop la info va alineada a la izquierda, asi que los tags tambien. Usamos ".demo-info .demo-info-tags" (0,2,1) para ganarle a la regla base ".demo-info-tags { justify-content: center }" (0,1,0) que aparece despues. */ .demo-info .demo-info-tags { justify-content: flex-start; } } /* En layout apilado (mobile/tablet, <920px) centramos toda la info para que quede alineada con la demo visual de abajo (que va centrada via margin auto). Usamos ".demo-info X" (especificidad 0,2,0) para ganarle a la regla base ".demo-info-tags { margin: 0 }" que aparece mas abajo en el archivo. En desktop (>=920px) la info vuelve a alinearse a la izquierda. */ @media (max-width: 919px) { .demo-info { text-align: center; } .demo-info .demo-info-desc, .demo-info .demo-art, .demo-info .demo-info-tags { margin-left: auto; margin-right: auto; } } /* --- Columna visual (reusa .ba-slider-wrap, un poco mas chico) --- */ .demo-visual .ba-slider-wrap { max-width: 430px; } .demo-visual-hint { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 20px; /* <-- separacion respecto al slider: subi este numero para alejar el texto de la imagen */ font-family: "Inter", sans-serif; font-size: 13px; font-weight: 500; color: var(--on-surface-variant); } .demo-visual-hint .material-symbols-outlined { font-size: 18px; color: var(--accent-teal); } /* --- Columna info (titulo + descripcion + arte + tags) --- */ /* Usamos "body.landing .demo-info-title" (especificidad 0,2,1) para ganarle a la regla global "body.landing h1...h5 { font-family: Montserrat }" (0,1,2), que si no pisa el font-family de Playfair Display. */ body.landing .demo-info-title { font-family: "Playfair Display", "Georgia", serif; font-size: 36px; line-height: 1.08; font-weight: 700; letter-spacing: -0.02em; color: var(--primary); margin: 4px 0 18px; } @media (min-width: 768px) { body.landing .demo-info-title { font-size: 46px; } } .demo-info-accent { color: var(--accent-teal); } .demo-info-desc { font-size: 17px; line-height: 1.6; color: var(--on-surface-variant); max-width: 460px; margin-bottom: 28px; } /* Mockup de la app: ventana + foto + filas de resultado + chip flotante */ .demo-art { position: relative; width: 100%; max-width: 460px; margin-bottom: 42px; } .demo-art-window { background: var(--surface-card); border: 1px solid var(--surface-variant); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); overflow: hidden; } .demo-art-bar { display: flex; align-items: center; gap: 7px; padding: 14px 18px; border-bottom: 1px solid var(--surface-container); } .demo-art-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--surface-variant); } .demo-art-dot:nth-child(1) { background: var(--accent-teal); } .demo-art-dot:nth-child(2) { background: var(--secondary-fixed-dim); } .demo-art-dot:nth-child(3) { background: var(--primary-fixed-dim); } .demo-art-url { flex: 1; height: 12px; margin-left: 8px; border-radius: 6px; background: var(--surface-container); } .demo-art-body { display: flex; gap: 22px; padding: 24px; align-items: center; } .demo-art-photo { flex-shrink: 0; width: 128px; height: 166px; border-radius: 16px; background: linear-gradient(160deg, rgba(174, 199, 247, 0.45), rgba(174, 199, 247, 0.16)); border: 1px solid rgba(0, 32, 70, 0.06); display: grid; place-items: center; } .demo-art-photo .material-symbols-outlined { font-size: 92px; color: var(--primary); opacity: 0.85; font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 48; } .demo-art-rows { flex: 1; display: flex; flex-direction: column; gap: 18px; } .demo-art-row { display: flex; align-items: center; gap: 12px; } .demo-art-row .material-symbols-outlined { font-size: 24px; color: var(--primary); } .demo-art-row--ok .material-symbols-outlined { color: var(--accent-teal); font-variation-settings: "FILL" 1; } .demo-art-bar-line { flex: 1; height: 13px; border-radius: 7px; background: rgba(174, 199, 247, 0.55); } .demo-art-bar-line--sm { max-width: 76%; } .demo-art-bar-line--xs { max-width: 54%; background: rgba(0, 148, 173, 0.30); } .demo-art-chip { position: absolute; bottom: -18px; right: 20px; display: inline-flex; align-items: center; gap: 7px; padding: 9px 15px; background: var(--surface-card); border: 1px solid var(--surface-variant); border-radius: var(--radius-full); box-shadow: var(--shadow-md); font-family: "Inter", sans-serif; font-size: 13px; font-weight: 600; color: var(--primary); } .demo-art-chip .material-symbols-outlined { font-size: 18px; color: var(--accent-teal); font-variation-settings: "FILL" 1; } /* Tags estilo referencia: cuadradito + texto */ .demo-info-tags { list-style: none; margin: 0; padding: 0; max-width: 460px; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 24px; } .demo-info-tags li { display: inline-flex; align-items: center; gap: 9px; font-family: "Inter", sans-serif; font-size: 14px; font-weight: 500; color: var(--on-surface); } .demo-tag-dot { width: 9px; height: 9px; border-radius: 2px; background: var(--accent-teal); flex-shrink: 0; } /* En pantallas chicas el mockup respira menos */ @media (max-width: 480px) { .demo-art-body { gap: 16px; padding: 18px; } .demo-art-photo { width: 104px; height: 140px; } .demo-art-photo .material-symbols-outlined { font-size: 76px; } } /* ===== "Mucho mas que ropa" — header + 4 cards de categoria ===== Reemplaza al viejo collage flotante. Panel claro con el header centrado y una grilla de 4 cards (Prendas / Conjuntos / Accesorios / Calzado). La 4ta es un placeholder ("Proximamente") hasta tener la imagen de calzado. */ .section-catalog { padding: 80px 0 36px; } .cat-panel { background: var(--surface-warm); border: 1px solid var(--surface-variant); border-radius: 28px; padding: 48px 40px; box-shadow: var(--shadow-sm); } .cat-panel .section-header { margin-bottom: 0; } .cat-grid { margin-top: 40px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .cat-card { position: relative; margin: 0; aspect-ratio: 4 / 5; border-radius: var(--radius-xl); overflow: hidden; background: var(--surface-container); border: 1px solid var(--surface-variant); box-shadow: var(--shadow-md); transition: transform 0.25s var(--easing), box-shadow 0.25s var(--easing); } .cat-card img { width: 100%; height: 100%; object-fit: cover; display: block; } .cat-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); } .cat-label { position: absolute; left: 14px; bottom: 14px; z-index: 2; display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: var(--radius-full); background: rgba(0, 32, 70, 0.92); color: #ffffff; font-family: "Inter", sans-serif; font-size: 13px; font-weight: 600; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .cat-label .material-symbols-outlined { font-size: 18px; font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 20; } @media (max-width: 860px) { .cat-grid { grid-template-columns: 1fr 1fr; gap: 16px; } .cat-panel { padding: 36px 22px; } } @media (max-width: 460px) { .cat-grid { gap: 12px; } } /* ===== "Como funciona" — panel: intro + 3 pasos + beneficios ===== Grid de 3 columnas dentro de un panel blanco: intro (titulo + texto) / pasos numerados con flechas / beneficios. La linea divisoria va como pseudo-elemento en el gutter (no como border) para separarla de los iconos. El layout de 3 columnas necesita ~1240px; debajo apila en una sola columna (intro arriba, pasos en fila, beneficios en fila) para que no se enciman. */ .section-como-funciona { padding: 36px 0 80px; } .hiw2-panel { background: var(--surface-card); border: 1px solid var(--surface-variant); border-radius: 28px; padding: 48px 44px; box-shadow: var(--shadow-md); } .hiw2-grid { display: grid; grid-template-columns: minmax(180px, 0.7fr) minmax(0, 2.2fr) minmax(230px, 0.95fr); gap: 40px; align-items: center; } .hiw2-intro .section-title { margin-bottom: 14px; } body.landing .hiw2-lead { font-size: 16px; line-height: 1.6; color: var(--on-surface-variant); } /* --- Pasos --- */ .hiw2-steps { display: flex; align-items: flex-start; justify-content: center; gap: 10px; } .hiw2-step { display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 132px; } .hiw2-step--result { max-width: 220px; } .hiw2-step-visual { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; } .hiw2-step-card { position: relative; width: 100px; height: 100px; flex-shrink: 0; border-radius: 20px; background: var(--surface-card); border: 1px solid var(--surface-variant); box-shadow: var(--shadow-sm); display: grid; place-items: center; } .hiw2-step-ic { font-size: 44px; color: var(--accent-teal); font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 40; } .hiw2-step-num { position: absolute; top: -12px; left: -12px; width: 30px; height: 30px; border-radius: 50%; background: var(--accent-teal); color: #ffffff; display: grid; place-items: center; font-family: "Inter", sans-serif; font-size: 14px; font-weight: 700; box-shadow: 0 4px 10px rgba(0, 148, 173, 0.35); } .hiw2-step-title { font-family: "Montserrat", sans-serif; font-size: 15px; font-weight: 700; color: var(--primary); margin-bottom: 5px; } .hiw2-step-desc { font-size: 13px; line-height: 1.45; color: var(--on-surface-variant); } /* Mini-card de resultado (talle) junto al paso 3 */ .hiw2-result-badge { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 12px; border-radius: 14px; background: rgba(0, 148, 173, 0.08); border: 1px solid rgba(0, 148, 173, 0.22); } .hiw2-result-lb { font-family: "Inter", sans-serif; font-size: 10.5px; font-weight: 600; color: var(--on-surface-variant); } .hiw2-result-size { font-family: "Montserrat", sans-serif; font-size: 16px; font-weight: 700; color: var(--accent-teal); } .hiw2-result-check { font-size: 17px; color: var(--accent-teal); font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 20; } /* Flecha punteada entre pasos (SVG: linea dashed + cabeza, todo en teal) */ .hiw2-arrow { flex-shrink: 0; display: flex; align-items: center; align-self: flex-start; margin-top: 32px; color: var(--accent-teal); } .hiw2-arrow-svg { display: block; width: 36px; height: 36px; opacity: 0.9; } /* --- Beneficios (col derecha) --- La linea es un pseudo-elemento ubicado en el gutter, separada de los iconos. En mobile se oculta y se usa un borde superior. */ .hiw2-benefits { position: relative; list-style: none; margin: 0; padding: 0 0 0 28px; display: flex; flex-direction: column; gap: 22px; } .hiw2-benefits::before { content: ""; position: absolute; top: 0; bottom: 0; left: -18px; width: 1px; background: var(--surface-variant); } .hiw2-benefit { display: flex; gap: 14px; align-items: flex-start; } .hiw2-benefit-ic { flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; background: var(--c-soft); display: grid; place-items: center; } .hiw2-benefit-ic .material-symbols-outlined { font-size: 22px; color: var(--c); font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 24; } .hiw2-benefit-tx { display: flex; flex-direction: column; gap: 3px; } .hiw2-benefit-tx strong { font-family: "Montserrat", sans-serif; font-size: 15px; font-weight: 700; color: var(--primary); } .hiw2-benefit-tx span { font-size: 14px; line-height: 1.45; color: var(--on-surface-variant); } .hiw2-benefit--tienda { --c: #0094ad; --c-soft: rgba(0, 148, 173, .12); } .hiw2-benefit--cliente { --c: #f16e13; --c-soft: rgba(241, 110, 19, .12); } .hiw2-benefit--eco { --c: #2e9e5b; --c-soft: rgba(46, 158, 91, .12); } /* --- Responsive --- >=1241px: 3 columnas. <=1240px: una sola columna (intro centrado arriba, pasos en fila centrada, beneficios en fila con borde superior). <=760px: los pasos pasan a vertical (flechas rotadas) y los beneficios se apilan. */ @media (max-width: 1240px) { .hiw2-grid { grid-template-columns: 1fr; gap: 36px; } .hiw2-intro { text-align: center; max-width: 600px; margin: 0 auto; } /* body.landing para ganarle en especificidad a "body.landing ul {padding:0}" (linea 84), que si no resetea este padding-top a 0 y la linea queda pegada. */ body.landing .hiw2-benefits { padding: 36px 0 0; border-top: 1px solid var(--surface-variant); flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 24px 32px; } .hiw2-benefits::before { display: none; } .hiw2-benefit { flex: 1 1 240px; max-width: 300px; } } @media (max-width: 760px) { .hiw2-panel { padding: 36px 22px; } .hiw2-steps { flex-direction: column; align-items: center; gap: 26px; } .hiw2-step { align-items: center; text-align: center; max-width: 280px; } .hiw2-step--result { max-width: 280px; } .hiw2-arrow { transform: rotate(90deg); margin: 2px 0; align-self: center; } .hiw2-benefit { flex: 1 1 100%; max-width: 320px; } } /* ===== Marquee ===== */ .marquee { overflow: hidden; padding: 16px 0; } @media (max-width: 768px), (max-height: 600px) { .marquee { display: none; } } .marquee-primary { background: var(--primary); color: var(--primary-fixed-dim); border-block: 1px solid var(--primary-container); } .marquee-light { background: var(--surface-variant); color: var(--primary); padding: 12px 0; } .marquee-track { display: flex; width: 200%; animation: marquee 30s linear infinite; } .marquee-content { display: flex; width: 50%; align-items: center; justify-content: space-around; white-space: nowrap; font-family: "Montserrat", sans-serif; font-size: 16px; font-weight: 500; } .marquee-light .marquee-content { font-family: "Inter", sans-serif; font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 500; } .marquee-content span + span { margin-left: 16px; } @keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } /* ===== Beneficios (4 cards) ===== */ .benefits-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } @media (max-width: 1024px) { .benefits-cards { grid-template-columns: repeat(2, 1fr); gap: 20px; } } @media (max-width: 560px) { .benefits-cards { grid-template-columns: 1fr; gap: 16px; } } .benefit-card { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: var(--radius-lg); padding: 32px 24px; display: flex; flex-direction: column; gap: 16px; transition: transform 0.3s var(--easing), border-color 0.3s var(--easing), background 0.3s var(--easing); } .benefit-card:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.25); transform: translateY(-4px); } .benefit-icon { width: 52px; height: 52px; border-radius: var(--radius-md); display: inline-flex; align-items: center; justify-content: center; } .benefit-icon .material-symbols-outlined { font-size: 28px; } .benefit-icon-orange { background: rgba(241, 110, 19, 0.18); color: var(--accent-orange); } .benefit-icon-teal { background: rgba(0, 148, 173, 0.18); color: var(--accent-teal); } .benefit-icon-blue { background: rgba(174, 199, 247, 0.18); color: var(--primary-fixed-dim); } .benefit-icon-teal-light { background: rgba(62, 181, 206, 0.18); color: var(--secondary-fixed-dim); } .benefit-title { font-family: "Montserrat", sans-serif; font-size: 20px; line-height: 26px; font-weight: 600; color: var(--on-primary); margin: 0; } .benefit-desc { font-family: "Inter", sans-serif; font-size: 15px; line-height: 22px; color: var(--primary-fixed-dim); } /* ===== Placeholder de imagen futura (debajo de las 4 cards de beneficios) ===== Aquí irá una imagen de analíticas / dashboard. Por ahora muestra un placeholder con icono + label. */ /* ===== Benefits analytics (Chart.js cards) ===== */ .analytics-mobile-title { display: none; } .benefits-analytics { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 48px auto 0; max-width: 820px; } .analytics-card { position: relative; background: #ffffff; border-radius: var(--radius-lg); padding: 16px 18px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.04); display: flex; flex-direction: column; min-width: 0; overflow: hidden; } .analytics-card-title { font-family: "Inter", sans-serif; font-size: 14px; font-weight: 600; color: var(--primary); margin: 0 0 8px; letter-spacing: -0.01em; } /* Heights — top (stat + donut) chicas, bottom (bar + line) un poco más grandes */ .benefits-analytics > .analytics-card:nth-child(1), .benefits-analytics > .analytics-card:nth-child(2) { height: 210px; } .benefits-analytics > .analytics-card:nth-child(3), .benefits-analytics > .analytics-card:nth-child(4) { height: 230px; } .benefits-analytics > .analytics-card:nth-child(2) { padding-right: 12px; } .benefits-analytics > .analytics-card:nth-child(2) .analytics-chart-wrap { height: 160px; } .benefits-analytics > .analytics-card:nth-child(4) .analytics-card-title { margin-bottom: 4px; } .benefits-analytics > .analytics-card:nth-child(3) .analytics-chart-wrap, .benefits-analytics > .analytics-card:nth-child(4) .analytics-chart-wrap { height: 180px; } /* Stat card (52%) */ .analytics-stat { flex-direction: row; align-items: center; gap: 16px; } .analytics-stat-icon { flex-shrink: 0; width: 46px; height: 46px; border-radius: 50%; background: rgba(0, 148, 173, 0.12); display: flex; align-items: center; justify-content: center; } .analytics-stat-icon .material-symbols-outlined { font-size: 24px; color: var(--accent-teal); font-variation-settings: "FILL" 0, "wght" 500; } .analytics-stat-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .analytics-stat-number { font-family: "Montserrat", sans-serif; font-size: 46px; font-weight: 700; color: var(--primary); line-height: 0.95; letter-spacing: -0.03em; } .analytics-stat-desc { font-family: "Inter", sans-serif; font-size: 12px; color: var(--on-surface-variant); margin: 0; line-height: 1.4; max-width: 220px; } /* Chart wrapper */ .analytics-chart-wrap { position: relative; flex: 1; min-width: 0; min-height: 0; } /* "Próximamente" placeholder (cuando aún no hay datos reales) */ .analytics-placeholder { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, rgba(0, 148, 173, 0.04) 0%, rgba(0, 148, 173, 0.08) 100%); border-radius: var(--radius-md); border: 1px dashed rgba(0, 148, 173, 0.25); } .analytics-placeholder-tag { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; background: #ffffff; color: var(--primary); font-family: "Inter", sans-serif; font-size: 13px; font-weight: 600; letter-spacing: -0.01em; border-radius: 999px; box-shadow: 0 2px 8px rgba(0, 32, 70, 0.08), 0 1px 3px rgba(0, 32, 70, 0.06); border: 1px solid rgba(0, 148, 173, 0.18); } .analytics-placeholder-tag .material-symbols-outlined { font-size: 18px; color: var(--accent-teal); font-variation-settings: "FILL" 0, "wght" 500; } @media (max-width: 900px) { /* En mobile ocultamos "Datos reales del sector" (titulo + stat 52% + graficos): al visitante que entra desde el celular no le suma y solo alarga la bajada al contacto. En desktop queda tal cual. Como el bloque no se muestra, ya no hacen falta sus estilos mobile (grid de 1 columna, alturas de cards, etc.). */ body.landing .analytics-mobile-title, .benefits-analytics { display: none; } } /* ===== Audience cards ===== */ .audience-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; } @media (max-width: 900px) { .audience-grid { grid-template-columns: 1fr; } } .audience-card { /* Mismo estilo de caja que los .nos-card de "Que nos hace diferentes" */ padding: 32px; border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 32px; } /* transition con mayor specificity que :where(.reveal) .audience-card para que el hover (transform/sombra) anime, conservando el fade-in escalonado del reveal */ .audience-grid .audience-card { transition: opacity 0.55s var(--easing) calc(var(--stagger, 0) * 90ms), transform 0.25s var(--easing), box-shadow 0.25s var(--easing); } .audience-card-light { background: var(--surface-card); border: 1px solid var(--surface-variant); } .audience-card-dark { /* La card de "Para la Tienda" sigue siendo azul */ background: var(--primary); border: 1px solid var(--primary-container); color: var(--on-primary); } .audience-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); } .audience-card-header { display: flex; align-items: center; gap: 16px; } .audience-card-icon { color: var(--primary); } .audience-card-icon-teal { color: var(--secondary-fixed-dim); } .audience-card-icon .material-symbols-outlined { font-size: 36px; } .audience-card-title { font-size: 28px; line-height: 34px; font-weight: 600; color: var(--primary); } .audience-card-dark .audience-card-title { color: var(--on-primary); } .audience-features { display: flex; flex-direction: column; gap: 24px; } .audience-features li { display: flex; align-items: flex-start; gap: 16px; } .audience-feature-icon { flex-shrink: 0; margin-top: 4px; } .audience-feature-icon-teal { color: var(--accent-teal); } .audience-card-dark .audience-feature-icon-teal { color: var(--secondary-fixed-dim); } .audience-features strong { display: block; font-family: "Montserrat", sans-serif; font-size: 18px; line-height: 24px; font-weight: 600; color: var(--primary); margin-bottom: 4px; } .audience-card-dark .audience-features strong { color: var(--on-primary); } .audience-features p { font-size: 15px; line-height: 22px; color: var(--on-surface-variant); } .audience-card-dark .audience-features p { color: var(--primary-fixed-dim); } /* ===== About ===== */ .about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; } @media (max-width: 900px) { .about-grid { grid-template-columns: 1fr; gap: 48px; } } .about-visual { position: relative; aspect-ratio: 1; } .about-image { width: 100%; height: 100%; border-radius: var(--radius-xl); object-fit: cover; display: block; position: relative; z-index: 1; } .about-copy { display: flex; flex-direction: column; gap: 24px; align-items: flex-start; } .about-lead { font-size: 18px; line-height: 28px; color: var(--on-surface-variant); } .about-body { font-size: 16px; line-height: 26px; color: var(--on-surface-variant); } .about-body-emphasis { font-family: "Montserrat", sans-serif; font-size: 18px; line-height: 28px; font-weight: 600; color: var(--primary); padding-left: 16px; border-left: 3px solid var(--accent-teal); } /* ===== Final CTA ===== */ .section-final-cta { padding: 140px 0; text-align: center; position: relative; } @media (max-width: 768px) { .section-final-cta { padding: 88px 0; } } .final-cta-inner { position: relative; z-index: 1; max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 28px; } .final-cta-badge { display: inline-flex; align-items: center; gap: 8px; padding: 8px 18px; border-radius: var(--radius-full); background: rgba(255, 255, 255, 0.08); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.15); color: var(--secondary-fixed-dim); font-family: "Inter", sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; } .final-cta-badge .material-symbols-outlined { font-size: 16px; font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 20; } .final-cta-title { font-size: 44px; line-height: 52px; font-weight: 700; letter-spacing: -0.025em; color: var(--on-primary); margin: 0; } @media (min-width: 768px) { .final-cta-title { font-size: 64px; line-height: 72px; } } .final-cta-title-emph { color: #ffffff; display: inline-block; } .final-cta-desc { font-size: 18px; line-height: 28px; color: var(--primary-fixed-dim); max-width: 580px; } .final-cta-btn { display: inline-flex !important; align-items: center; gap: 8px; margin-top: 4px; transition: gap 0.25s var(--easing), transform 0.15s ease-out, box-shadow 0.25s var(--easing); } .final-cta-btn:hover { gap: 14px; transform: translateY(-2px); box-shadow: var(--shadow-lg); } .final-cta-btn:active { transform: translateY(0) scale(0.97); } .final-cta-btn .material-symbols-outlined { font-size: 20px; transition: transform 0.25s var(--easing); font-variation-settings: "FILL" 0, "wght" 600, "GRAD" 0, "opsz" 24; } .final-cta-btn:hover .material-symbols-outlined { transform: translateX(2px); } /* ===== Footer ===== */ .footer { /* Imagen de fondo (prendas etereas) en su forma normal, sin desenfoque. aspect-ratio = proporcion real de Footer.png (2083x755) para que el footer tenga la altura justa de la imagen a ancho completo y se vea entera, sin recorte. background-color = fallback si la imagen no carga. */ aspect-ratio: 2083 / 755; /* centra verticalmente el contenido dentro del alto de la imagen */ display: flex; align-items: center; background-color: var(--surface-container); background-image: url('../imagenes/landing/Footer.png'); background-size: cover; background-position: center; background-repeat: no-repeat; border-top: 1px solid var(--surface-variant); } .footer-inner { width: 100%; display: flex; justify-content: space-between; align-items: flex-start; gap: 64px; max-width: none; padding: 64px var(--margin-mobile); } @media (min-width: 768px) { .footer-inner { padding-inline: 56px; } } .footer-brand { flex: 1 1 320px; max-width: 360px; } .footer-cols { display: flex; gap: 96px; flex-wrap: wrap; justify-content: flex-end; } @media (max-width: 768px) { .footer-inner { flex-direction: column; gap: 32px; padding: 40px var(--margin-mobile); } .footer-brand { flex: 0 1 auto; max-width: 100%; } .footer-cols { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px 16px; justify-content: flex-start; } .footer-col { min-width: 0; } .footer-heading { margin-bottom: 14px; } .footer-col ul { gap: 10px; } .footer-col a { font-size: 13px; } } .footer-brand { display: flex; flex-direction: column; gap: 16px; } .footer-logo { height: 32px; width: auto; object-fit: contain; object-position: left; } .footer-tagline { font-size: 14px; line-height: 22px; color: var(--on-surface); } .footer-copy { font-size: 13px; line-height: 18px; color: var(--on-surface); } .footer-heading { font-family: "Montserrat", sans-serif; font-size: 14px; font-weight: 600; color: var(--primary); margin: 0 0 24px; } .footer-col ul { display: flex; flex-direction: column; gap: 14px; } .footer-col a { font-size: 14px; color: var(--on-surface-variant); transition: color 0.2s var(--easing); } .footer-col a:hover { color: var(--accent-teal); } /* ===== 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; } .reveal { opacity: 1; transform: none; } } /* ============================================================ Contacto Page ============================================================ */ .nav-back { display: inline-flex; align-items: center; gap: 8px; font-family: "Montserrat", sans-serif; font-size: 14px; font-weight: 500; color: var(--on-surface-variant); transition: color 0.3s var(--easing); } .nav-back:hover { color: var(--primary); } .nav-back .material-symbols-outlined { font-size: 20px; } .contacto-main { min-height: calc(100vh - 80px); padding: 64px 16px 96px; background: var(--surface); display: flex; align-items: flex-start; justify-content: center; } @media (min-width: 768px) { .contacto-main { padding: 80px 48px 96px; } } .contacto-inner { position: relative; z-index: 1; width: 100%; max-width: 760px; display: flex; flex-direction: column; gap: 40px; } .contacto-header { text-align: center; } body.landing .contacto-title { font-family: "Playfair Display", "Georgia", serif; font-size: 40px; line-height: 48px; font-weight: 700; letter-spacing: -0.02em; color: var(--primary); margin: 0 0 16px; } @media (min-width: 768px) { .contacto-title { font-size: 48px; line-height: 56px; } } body.landing .contacto-subtitle { font-size: 18px; line-height: 28px; color: var(--on-surface-variant); max-width: 560px; margin: 0 auto; } .contacto-card { background: var(--surface-card); border: 1px solid var(--surface-variant); border-radius: var(--radius-lg); padding: 40px 32px; box-shadow: var(--shadow-md); } @media (min-width: 768px) { .contacto-card { padding: 48px; } } #contact-form { display: flex; flex-direction: column; gap: 24px; } #contact-form[hidden] { display: none; } .form-row { display: flex; flex-direction: column; gap: 8px; } .form-row-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } @media (max-width: 520px) { .form-row-grid { grid-template-columns: 1fr; } } .form-label { font-family: "Inter", sans-serif; font-size: 14px; font-weight: 500; color: var(--on-surface-variant); } .req { color: #ba1a1a; margin-left: 2px; } .form-input, .form-select, .form-textarea { width: 100%; font-family: "Inter", sans-serif; font-size: 15px; line-height: 22px; color: var(--on-surface); background: var(--surface-card); border: 1px solid var(--outline-variant); border-radius: var(--radius-sm); padding: 12px 14px; transition: border-color 0.2s var(--easing), box-shadow 0.2s var(--easing); } .form-input:focus, .form-select:focus, .form-textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(0, 32, 70, 0.1); } .form-input.invalid, .form-select.invalid, .form-textarea.invalid { border-color: #ba1a1a; background: #fff8f8; } .form-input.invalid:focus, .form-select.invalid:focus, .form-textarea.invalid:focus { border-color: #ba1a1a; box-shadow: 0 0 0 3px rgba(186, 26, 26, 0.15); } .form-textarea { resize: vertical; min-height: 96px; } .field-error { display: block; margin-top: 6px; color: #ba1a1a; font-family: "Inter", sans-serif; font-size: 13px; line-height: 18px; font-weight: 500; } .field-error[hidden] { display: none; } .phone-row { display: flex; gap: 8px; } .phone-code { flex: 0 0 auto; width: 110px; padding-right: 8px; background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2344474e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right 10px center; appearance: none; -webkit-appearance: none; cursor: pointer; } .phone-number { flex: 1; } .form-consent { margin-top: 8px; padding-top: 24px; border-top: 1px solid var(--surface-variant); display: flex; flex-direction: column; gap: 14px; } .form-consent-intro, .form-consent-note { font-size: 14px; line-height: 20px; color: var(--on-surface-variant); } .form-consent-fine { font-size: 12px; line-height: 18px; color: var(--on-surface-variant); margin-top: 6px; } .form-consent-fine a { color: var(--primary); border-bottom: 1px solid currentColor; } .form-checkbox-row { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; } .form-checkbox-row input { width: 16px; height: 16px; margin-top: 4px; accent-color: var(--primary); cursor: pointer; flex-shrink: 0; } .form-checkbox-row span { font-size: 14px; line-height: 20px; color: var(--on-surface); } .form-checkbox-row .req { color: #ba1a1a; } .form-actions { padding-top: 8px; } body.landing .form-actions .btn { width: auto; } @media (max-width: 520px) { body.landing .form-actions .btn { width: 100%; } } .form-error { margin: 16px 0 0; padding: 12px 16px; background: #fff0f0; border: 1px solid rgba(186, 26, 26, 0.3); border-radius: var(--radius-sm); color: #ba1a1a; font-size: 14px; font-weight: 500; text-align: center; } .form-error[hidden] { display: none; } .form-success { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 32px 0; } .form-success[hidden] { display: none; } .form-success-icon { color: var(--accent-teal); } .form-success-icon .material-symbols-outlined { font-size: 64px; } .form-success-title { font-family: "Montserrat", sans-serif; font-size: 28px; font-weight: 600; color: var(--primary); margin: 0; } .form-success-text { font-size: 16px; color: var(--on-surface-variant); max-width: 380px; } .contacto-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px; color: var(--on-surface-variant); } .contacto-footer-link { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--on-surface-variant); transition: color 0.2s var(--easing); } .contacto-footer-link:hover { color: var(--primary); } .contacto-footer-link .material-symbols-outlined { font-size: 18px; } .contacto-footer-sep { color: var(--outline-variant); } /* ============================================================ Panel Login (light premium variant) Scoped under .panel-login (added on when view==login) ============================================================ */ body.panel-login { margin: 0; min-height: 100vh; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 16px; line-height: 24px; color: var(--on-surface); background: var(--surface); display: flex; /* `safe center`: centra verticalmente cuando el contenido entra en la ventana, pero cae a `flex-start` cuando excede (al aparecer errores de validación, la card crece más alto que el viewport). Sin `safe`, un align-items: center común empuja el top de la card fuera del viewport y el usuario no puede scrollearla. */ align-items: safe center; justify-content: center; /* overflow-x oculto para el .pl-grid de fondo; overflow-y auto para que la página pueda scrollearse cuando la card desborda. */ overflow-x: hidden; overflow-y: auto; position: relative; } body.panel-login h1, body.panel-login h2, body.panel-login h3 { font-family: "Montserrat", sans-serif; margin: 0; } body.panel-login .pl-grid { position: absolute; inset: 0; opacity: 0.04; background-image: radial-gradient(#1a1c1b 1px, transparent 1px); background-size: 32px 32px; pointer-events: none; z-index: 0; } body.panel-login .pl-shell { position: relative; z-index: 1; width: 100%; max-width: 480px; padding: 24px 16px; } body.panel-login .pl-card { background: var(--surface-card); border: 1px solid var(--outline-variant); border-radius: var(--radius-lg); padding: 40px 32px; box-shadow: 0 25px 50px -12px rgba(0, 32, 70, 0.15); animation: fade-in-up 0.7s cubic-bezier(0.16, 1, 0.3, 1); } @media (min-width: 600px) { body.panel-login .pl-card { padding: 56px 48px; } } @keyframes fade-in-up { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } body.panel-login .pl-header { text-align: center; margin-bottom: 40px; } body.panel-login .pl-logo { width: 64px; height: 64px; margin: 0 auto 24px; object-fit: contain; } body.panel-login .pl-title { font-family: "Playfair Display", "Georgia", serif; font-size: 28px; line-height: 36px; font-weight: 600; color: var(--on-surface); letter-spacing: -0.01em; margin-bottom: 12px; } body.panel-login .pl-sub { font-size: 14px; line-height: 22px; color: var(--on-surface-variant); max-width: 280px; margin: 0 auto; } body.panel-login .pl-error { background: #ffeaea; color: #ba1a1a; font-size: 14px; padding: 12px 16px; border-radius: var(--radius-sm); margin-bottom: 24px; text-align: center; } body.panel-login .pl-form { display: flex; flex-direction: column; gap: 28px; } body.panel-login .pl-group { position: relative; } body.panel-login .pl-label { display: block; font-family: "Inter", sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--on-surface-variant); margin-bottom: 8px; transition: color 0.3s var(--easing); } body.panel-login .pl-input-wrap { position: relative; display: flex; align-items: center; } body.panel-login .pl-icon { position: absolute; left: 0; color: var(--on-surface-variant); pointer-events: none; transition: color 0.3s var(--easing), transform 0.3s var(--easing); } body.panel-login .pl-icon .material-symbols-outlined { font-size: 22px; } body.panel-login .pl-input { width: 100%; background: transparent; border: none; border-bottom: 1px solid var(--outline-variant); border-radius: 0; padding: 12px 36px 12px 36px; font-family: "Inter", sans-serif; font-size: 16px; color: var(--on-surface); transition: border-color 0.3s var(--easing), background 0.3s var(--easing); } body.panel-login .pl-input::placeholder { color: rgba(68, 71, 78, 0.5); } body.panel-login .pl-input:focus { outline: none; border-bottom-color: var(--primary); background: var(--surface-container-low); } body.panel-login .pl-input.pl-invalid { border-bottom-color: #ba1a1a; border-bottom-width: 2px; } body.panel-login .pl-input.pl-invalid:focus { background: #fff8f8; box-shadow: none; } body.panel-login .pl-field-error { margin-top: 8px; } body.panel-login .pl-form-error { margin-top: 4px; } body.panel-login .pl-group:focus-within .pl-label, body.panel-login .pl-group:focus-within .pl-icon { color: var(--primary); } body.panel-login .pl-group:focus-within .pl-icon { transform: scale(1.1); } body.panel-login .pl-toggle { position: absolute; right: 0; background: transparent; border: none; color: var(--on-surface-variant); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 4px; transition: color 0.2s var(--easing); } body.panel-login .pl-toggle:hover { color: var(--on-surface); } body.panel-login .pl-toggle .material-symbols-outlined { font-size: 22px; } body.panel-login .pl-actions { display: flex; flex-direction: column; gap: 24px; padding-top: 8px; } body.panel-login .pl-forgot { align-self: flex-end; font-size: 14px; color: var(--on-surface-variant); transition: color 0.3s var(--easing); border-bottom: 1px solid transparent; padding-bottom: 1px; } body.panel-login .pl-forgot:hover { color: var(--primary); border-bottom-color: var(--primary); } body.panel-login .pl-submit { position: relative; width: 100%; background: var(--primary); color: var(--on-primary); border: none; border-radius: var(--radius-sm); padding: 16px; font-family: "Montserrat", sans-serif; font-size: 14px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; transition: background 0.3s var(--easing), transform 0.2s var(--easing); overflow: hidden; } body.panel-login .pl-submit:hover { background: var(--primary-container); } body.panel-login .pl-submit:active { transform: scale(0.98); } body.panel-login .pl-submit-inner { display: inline-flex; align-items: center; justify-content: center; gap: 8px; } body.panel-login .pl-submit-inner .material-symbols-outlined { font-size: 18px; transition: transform 0.3s var(--easing); } body.panel-login .pl-submit:hover .pl-submit-inner .material-symbols-outlined { transform: translateX(4px); } body.panel-login .pl-divider { margin-top: 32px; display: flex; align-items: center; justify-content: center; gap: 12px; opacity: 0.6; } body.panel-login .pl-divider span { font-family: "Inter", sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--on-surface-variant); } body.panel-login .pl-divider::before, body.panel-login .pl-divider::after { content: ""; width: 32px; height: 1px; background: var(--outline-variant); } body.panel-login .pl-volver { position: absolute; top: 24px; left: 24px; z-index: 2; display: inline-flex; align-items: center; gap: 8px; font-family: "Montserrat", sans-serif; font-size: 14px; font-weight: 500; color: var(--on-surface-variant); transition: color 0.3s var(--easing); text-decoration: none; } body.panel-login .pl-volver:hover { color: var(--primary); } body.panel-login .pl-volver .material-symbols-outlined { font-size: 20px; } /* Mobile + short viewport: body fully locked, pl-shell scrolls internally */ @media (max-width: 600px), (max-height: 600px) { html:has(body.panel-login) { height: 100%; overflow: hidden; overscroll-behavior: none; } body.panel-login { position: fixed; inset: 0; flex-direction: column; align-items: stretch; justify-content: center; padding: 60px 16px 16px; overflow: hidden; overscroll-behavior: none; touch-action: none; } body.panel-login .pl-volver { position: absolute; top: 16px; left: 16px; margin: 0; z-index: 2; } body.panel-login .pl-shell { flex: 0 1 auto; width: 100%; max-width: 520px; margin: 0 auto; padding: 0; max-height: 100%; overflow-y: auto; overflow-x: hidden; overscroll-behavior-y: contain; overscroll-behavior-x: none; touch-action: pan-y; -webkit-overflow-scrolling: touch; } body.panel-login .pl-card { padding: 28px 24px; animation: none; } /* Compactar tipografía */ body.panel-login .pl-header { margin-bottom: 20px; } body.panel-login .pl-logo { width: 52px; height: 52px; margin-bottom: 12px; } body.panel-login .pl-title { font-size: 26px; line-height: 32px; margin-bottom: 6px; } body.panel-login .pl-sub { font-size: 13px; line-height: 18px; max-width: 100%; } body.panel-login .pl-form { gap: 18px; } body.panel-login .pl-actions { padding-top: 4px; } body.panel-login .pl-divider { margin-top: 18px; gap: 10px; } body.panel-login .pl-divider span { white-space: nowrap; letter-spacing: 0.1em; font-size: 10px; } body.panel-login .pl-divider::before, body.panel-login .pl-divider::after { width: 20px; } } /* En viewports muy bajos (landscape phones), volver al card más compacto */ @media (max-height: 480px) { body.panel-login .pl-card { padding: 20px 24px; } body.panel-login .pl-header { margin-bottom: 12px; } body.panel-login .pl-logo { width: 40px; height: 40px; margin-bottom: 8px; } body.panel-login .pl-title { font-size: 22px; line-height: 28px; } body.panel-login .pl-form { gap: 14px; } } /* ============================================================ Nosotros page (hero navy + historia + cards + stats + cta) Reutiliza .section / .container / .section-eyebrow / .section-title / .section-subtitle / .final-cta-* de la landing. Solo estilos propios abajo. ============================================================ */ /* Hero navy centrado (debajo del nav blanco) */ .nos-hero { background: var(--primary); text-align: center; padding: 80px 16px 88px; } @media (min-width: 768px) { .nos-hero { padding: 104px 48px 104px; } } .nos-hero-inner { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; } .nos-hero-eyebrow { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: var(--radius-full); background: rgba(255, 255, 255, 0.10); border: 1px solid rgba(255, 255, 255, 0.22); font-family: "Inter", sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.95); } .nos-hero-eyebrow .material-symbols-outlined { font-size: 16px; color: var(--secondary-fixed-dim); font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 20; } body.landing .nos-hero-title { font-family: "Playfair Display", "Georgia", serif; font-size: clamp(44px, 8vw, 80px); line-height: 1.04; font-weight: 800; letter-spacing: -0.02em; color: #ffffff; margin: 20px 0 18px; } .nos-hero-title-accent { color: var(--secondary-fixed-dim); } .nos-hero-sub { font-size: 18px; line-height: 28px; color: rgba(255, 255, 255, 0.78); max-width: 620px; margin: 0 auto; } /* Encabezado centrado de sección */ .nos-head { text-align: center; max-width: 720px; margin: 0 auto; } /* Nuestra historia: texto (izq) + foto (der) */ .nos-historia { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; } @media (min-width: 900px) { .nos-historia { grid-template-columns: 1.1fr 0.9fr; gap: 72px; } } .nos-historia-copy { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; } /* La "barra" teal a la izquierda de cada parrafo (acento VFitUY) */ .nos-bar { font-size: 16px; line-height: 27px; color: var(--on-surface-variant); padding-left: 16px; border-left: 3px solid var(--accent-teal); } .nos-historia-photo { margin: 0; width: 100%; aspect-ratio: 4 / 3; border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-xl); background: var(--surface-container); } .nos-historia-photo img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Fondo de la seccion "Quienes somos": imagen tenue + velo claro para asegurar el contraste del texto oscuro. El contenido va por encima. */ .nos-historia-section { position: relative; overflow: hidden; } .nos-historia-section::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; /* DIAL: subir el 0.42 = mas velo (imagen mas tenue) / bajar = mas presente */ background: linear-gradient(rgba(249, 248, 246, 0.42), rgba(249, 248, 246, 0.42)), url("/static/imagenes/landing/Background-Sobre-Nosotros-Seccion-2.webp") center / cover no-repeat; } /* Version mobile del fondo (≤768px) */ @media (max-width: 768px) { .nos-historia-section::before { background: linear-gradient(rgba(249, 248, 246, 0.42), rgba(249, 248, 246, 0.42)), url("/static/imagenes/landing/Mobile-Background-Sobre-Nosotros-Seccion-2.webp") center / cover no-repeat; } } .nos-historia-section > .container { position: relative; z-index: 1; } /* Fondo de la seccion "Nuestra mision y vision" (mismo patron: imagen tenue + velo) */ .nos-mv-section { position: relative; overflow: hidden; } .nos-mv-section::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; /* DIAL: subir el 0.42 = mas velo / bajar = imagen mas presente */ background: linear-gradient(rgba(249, 248, 246, 0.42), rgba(249, 248, 246, 0.42)), url("/static/imagenes/landing/Background-Sobre-Nosotros-Seccion-4.webp") center / cover no-repeat; } /* Version mobile del fondo (≤768px) */ @media (max-width: 768px) { .nos-mv-section::before { background: linear-gradient(rgba(249, 248, 246, 0.42), rgba(249, 248, 246, 0.42)), url("/static/imagenes/landing/Mobile-Background-Sobre-Nosotros-Seccion-4.webp") center / cover no-repeat; } } .nos-mv-section > .container { position: relative; z-index: 1; } /* Video manifiesto (frase para pensar): banda full-bleed con velo navy y frase en Playfair blanca. El video va de fondo, el contenido por encima. */ .nos-video { position: relative; min-height: clamp(440px, 72vh, 640px); display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; background: var(--primary); /* fallback mientras carga / si no hay video */ } .nos-video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; /* DIAL: sube el encuadre para no cortar la remera abajo. Mas % = muestra mas la parte baja (sube el video). 50% = centrado. */ object-position: center 70%; z-index: 0; } /* Velo navy para que la frase blanca se lea siempre sobre el video claro */ .nos-video::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(rgba(0, 32, 70, 0.5), rgba(0, 32, 70, 0.62)); pointer-events: none; } .nos-video-inner { position: relative; z-index: 2; max-width: 780px; padding: 0 24px; display: flex; flex-direction: column; align-items: center; gap: 18px; } body.landing .nos-video-phrase { font-family: "Playfair Display", "Georgia", serif; font-size: clamp(32px, 6vw, 60px); line-height: 1.08; font-weight: 800; letter-spacing: -0.02em; color: #ffffff; margin: 0; } /* Reduced motion: sin autoplay, queda el fondo navy */ @media (prefers-reduced-motion: reduce) { .nos-video video { display: none; } } /* Cards (diferentes / mision-vision) */ .nos-cards-3, .nos-cards-2 { display: grid; grid-template-columns: 1fr; gap: 24px; margin-top: 48px; } @media (min-width: 768px) { .nos-cards-3 { grid-template-columns: repeat(3, 1fr); } .nos-cards-2 { grid-template-columns: repeat(2, 1fr); max-width: 900px; margin-inline: auto; margin-top: 48px; } } .nos-card { background: var(--surface-card); border: 1px solid var(--surface-variant); border-radius: var(--radius-xl); padding: 32px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 14px; text-align: left; transition: transform 0.25s var(--easing), box-shadow 0.25s var(--easing); } .nos-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); } .nos-card-icon { width: 52px; height: 52px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; background: rgba(0, 148, 173, 0.10); color: var(--accent-teal); } .nos-card-icon .material-symbols-outlined { font-size: 28px; font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 24; } .nos-card-title { font-family: "Montserrat", sans-serif; font-size: 20px; font-weight: 600; color: var(--primary); margin: 0; } .nos-card-text { font-size: 15px; line-height: 24px; color: var(--on-surface-variant); margin: 0; } /* Stats (VFitUY en numeros) */ .nos-stats { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 48px; } @media (min-width: 640px) { .nos-stats { grid-template-columns: repeat(3, 1fr); } } .nos-stat { background: var(--surface-card); border: 1px solid var(--surface-variant); border-radius: var(--radius-xl); padding: 32px 24px; text-align: center; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; justify-content: center; } .nos-stat-num { display: block; font-family: "Montserrat", sans-serif; font-weight: 700; /* fluido: ~22px en el band de 3 columnas angosto, 30px en desktop — evita que "Octubre 2025" envuelva a 2 lineas entre 640-767px */ font-size: clamp(22px, 4.2vw, 30px); line-height: 1.1; letter-spacing: -0.01em; color: var(--accent-teal); } .nos-stat-label { display: block; margin-top: 8px; font-size: 13px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; color: var(--on-surface-variant); } /* Stat "Proximamente" (sin datos reales aun) — mismo lenguaje visual que el placeholder de la grafica de conversion: borde teal punteado + pill blanca. */ .nos-stat.nos-stat-soon { border-style: dashed; border-color: rgba(0, 148, 173, 0.25); background: linear-gradient(135deg, rgba(0, 148, 173, 0.04) 0%, rgba(0, 148, 173, 0.08) 100%); box-shadow: none; gap: 4px; } .nos-stat-soon-tag { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; background: #ffffff; color: var(--primary); font-family: "Inter", sans-serif; font-size: 13px; font-weight: 600; letter-spacing: -0.01em; border-radius: var(--radius-full); box-shadow: 0 2px 8px rgba(0, 32, 70, 0.08), 0 1px 3px rgba(0, 32, 70, 0.06); border: 1px solid rgba(0, 148, 173, 0.18); } .nos-stat-soon-tag .material-symbols-outlined { font-size: 18px; color: var(--accent-teal); } /* ============================================================ Terminos page (sidebar índice + content card) ============================================================ */ .terminos-header { padding: 64px 16px 32px; text-align: center; background: var(--surface-warm); } @media (min-width: 768px) { .terminos-header { padding: 80px 48px 48px; } } body.landing .terminos-title { font-family: "Playfair Display", "Georgia", serif; font-size: 44px; line-height: 52px; font-weight: 700; letter-spacing: -0.02em; color: var(--primary); margin: 0 0 16px; } @media (min-width: 768px) { body.landing .terminos-title { font-size: 56px; line-height: 64px; } } body.landing .terminos-subtitle { font-size: 17px; line-height: 26px; color: var(--on-surface-variant); max-width: 560px; margin: 0 auto; } .terminos-main { background: var(--surface-warm); padding: 0 16px 96px; } @media (min-width: 768px) { .terminos-main { padding: 0 48px 96px; } } .terminos-layout { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: 32px; } @media (min-width: 900px) { .terminos-layout { grid-template-columns: 260px 1fr; gap: 64px; align-items: start; } } /* Sidebar (índice). Override del overflow-x:hidden global de body.landing: Chrome rompe position:sticky cuando un ancestor tiene overflow!=visible, aunque sea solo en X. Para /terminos no hay riesgo de scroll horizontal (no tiene marquees ni hero que se salga del viewport), así que restauramos visible. */ html:has(body.landing.terminos-page), body.landing.terminos-page { overflow-x: visible; } .terminos-sidebar { align-self: start; } @media (min-width: 900px) { .terminos-sidebar { position: sticky; top: 100px; padding: 16px 0; } } .terminos-sidebar-title { font-family: "Inter", sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--on-surface-variant); margin: 0 0 16px; padding-left: 16px; } .terminos-toc { display: flex; flex-direction: column; gap: 2px; border-left: 1px solid var(--surface-variant); } body.landing .terminos-toc-link { display: block; padding: 10px 16px; font-family: "Inter", sans-serif; font-size: 14px; line-height: 20px; color: var(--on-surface-variant); border-left: 2px solid transparent; margin-left: -1px; transition: color 0.2s var(--easing), border-left-color 0.2s var(--easing), background 0.2s var(--easing); text-decoration: none; } body.landing .terminos-toc-link:hover { color: var(--primary); background: var(--surface-container-low); } body.landing .terminos-toc-link.active { color: var(--primary); border-left-color: var(--primary); font-weight: 600; background: var(--surface-container-low); } /* Content card */ .terminos-content { background: var(--surface-container-lowest); border-radius: var(--radius-lg); border: 1px solid var(--surface-variant); padding: 40px 28px; box-shadow: var(--shadow-sm); } @media (min-width: 768px) { .terminos-content { padding: 56px 48px; } } .terminos-section { padding-bottom: 40px; border-bottom: 1px solid var(--surface-variant); margin-bottom: 40px; scroll-margin-top: 100px; } .terminos-section:last-child { padding-bottom: 0; border-bottom: none; margin-bottom: 0; } body.landing .terminos-section-title { font-family: "Playfair Display", "Georgia", serif; font-size: 28px; line-height: 36px; font-weight: 700; letter-spacing: -0.01em; color: var(--primary); margin: 0 0 20px; } body.landing .terminos-section p { font-family: "Inter", sans-serif; font-size: 16px; line-height: 26px; color: var(--on-surface); margin: 0 0 14px; } body.landing .terminos-section p:last-child { margin-bottom: 0; } body.landing .terminos-section a { color: var(--primary); font-weight: 500; border-bottom: 1px solid var(--accent-teal); transition: color 0.2s var(--easing), border-color 0.2s var(--easing); } body.landing .terminos-section a:hover { color: var(--accent-teal); border-bottom-color: var(--primary); } /* ============================================================ ===== Probador como iframe overlay (en la landing) ===== ============================================================ */ .probador-iframe-overlay { position: fixed; inset: 0; z-index: 9999; background: transparent; animation: probador-overlay-fade 180ms ease-out; } .probador-iframe { width: 100%; height: 100%; border: 0; background: transparent; display: block; } /* Cuando el probador está abierto, blureamos todo el contenido de la landing menos el overlay mismo. Esto sí cruza el borde de stacking contexts, a diferencia de backdrop-filter dentro del iframe. */ body.probador-open > *:not(.probador-iframe-overlay) { filter: blur(6px); transition: filter 220ms ease-out; pointer-events: none; user-select: none; } @keyframes probador-overlay-fade { from { opacity: 0; } to { opacity: 1; } } /* ============================================================ ===== Probador (popup) ===== ============================================================ */ html:has(body.probador-page), body.probador-page { overflow: hidden; overscroll-behavior: none; } /* Body transparente: cuando el popup se embeba en una tienda (iframe), el visitante sigue viendo la tienda detrás del overlay. */ body.probador-page { margin: 0; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 16px; line-height: 24px; color: var(--on-surface); background: transparent; min-height: 100vh; min-height: 100dvh; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body.probador-page h1, body.probador-page h2, body.probador-page h3, body.probador-page h4 { font-family: "Montserrat", -apple-system, BlinkMacSystemFont, sans-serif; margin: 0; color: var(--primary); } body.probador-page p { margin: 0; } body.probador-page button { font-family: inherit; cursor: pointer; } body.probador-page input, body.probador-page select, body.probador-page textarea { font-family: inherit; } .probador-page .hidden { display: none !important; } /* ===== Overlay ===== Dim neutro suave en lugar de un tinte azul fuerte, así el visitante percibe el popup como sobreimpreso a la tienda. */ .probador-overlay { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.28); display: flex; align-items: flex-start; justify-content: center; padding: 32px 16px; z-index: 1000; animation: probador-fade-in 220ms ease-out; } /* ===== Popup container ===== */ .probador-popup { position: relative; width: 100%; max-width: 560px; max-height: calc(100vh - 64px); max-height: calc(100dvh - 64px); background: var(--surface-card); border-radius: var(--radius-xl); box-shadow: var(--shadow-xl); display: flex; flex-direction: column; overflow: hidden; animation: probador-pop-in 240ms cubic-bezier(0.16, 1, 0.3, 1); } /* ===== Sheet handle (mobile decorativo) ===== */ .probador-sheet-handle { display: none; } /* ===== Header sticky ===== */ .probador-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--surface-variant); background: var(--surface-card); flex-shrink: 0; } .probador-store { display: flex; align-items: center; gap: 12px; min-width: 0; } .probador-store-logo { height: 44px; width: auto; max-width: 160px; object-fit: contain; display: block; flex-shrink: 0; } .probador-store-avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center; font-family: "Montserrat", sans-serif; font-weight: 600; font-size: 18px; flex-shrink: 0; } .probador-store-text { min-width: 0; } .probador-store-greeting { font-family: "Montserrat", sans-serif; font-weight: 600; font-size: 15px; line-height: 20px; color: var(--primary); letter-spacing: -0.01em; } .probador-store-sub { font-size: 13px; line-height: 18px; color: var(--on-surface-variant); margin-top: 2px; } .probador-header-right { display: flex; align-items: center; gap: 12px; flex-shrink: 0; } .probador-brand { width: 40px; height: 40px; object-fit: contain; } .probador-close { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--surface-variant); background: var(--surface-card); color: var(--on-surface-variant); display: flex; align-items: center; justify-content: center; transition: background 180ms var(--easing), color 180ms var(--easing), border-color 180ms var(--easing); } .probador-close:hover { background: var(--surface-container-low); color: var(--primary); border-color: var(--primary); } .probador-close .material-symbols-outlined { font-size: 20px; } /* ===== Body scrollable + alternancia de vistas ===== */ .probador-body { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 18px 20px 20px; background: var(--surface-warm); } .probador-view { display: none; animation: probador-view-fade 180ms ease-out; } .probador-body[data-active="terminos"] .probador-view[data-view="terminos"] { display: block; } .probador-body[data-active="upload"] .probador-view[data-view="upload"] { display: block; } .probador-body[data-active="generando"] .probador-view[data-view="generando"] { display: block; } /* ===== Intro ===== */ .probador-intro { margin-bottom: 16px; } .probador-intro-title { font-size: 20px; line-height: 26px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 4px; } .probador-intro-text { font-size: 13px; line-height: 19px; color: var(--on-surface-variant); } /* ===== Vista de aceptacion de terminos (solo primera vez) ===== */ .probador-terms { display: flex; flex-direction: column; gap: 18px; padding: 4px 2px 0; max-width: 480px; margin: 0 auto; } .probador-terms-title { font-family: "Montserrat", sans-serif; font-size: 22px; line-height: 28px; font-weight: 700; letter-spacing: -0.02em; color: var(--primary); margin: 0; } .probador-terms-intro { font-size: 14px; line-height: 20px; color: var(--on-surface-variant); margin: 0; } .probador-terms-list { list-style: none; padding: 0; margin: 4px 0; display: flex; flex-direction: column; gap: 12px; } .probador-terms-list li { display: flex; align-items: flex-start; gap: 12px; font-size: 14px; line-height: 20px; color: var(--on-surface); } .probador-terms-list .material-symbols-outlined { font-size: 22px; color: var(--accent-teal); flex-shrink: 0; margin-top: 1px; } .probador-terms-link { font-size: 13px; line-height: 18px; color: var(--on-surface-variant); padding: 12px 14px; background: var(--surface-container-low); border: 1px solid var(--surface-variant); border-radius: var(--radius-md); margin: 0; } .probador-terms-link a { color: var(--primary); text-decoration: underline; text-decoration-color: var(--outline-variant); text-underline-offset: 2px; font-weight: 600; } .probador-terms-link a:hover { text-decoration-color: var(--primary); } .probador-terms-actions { display: grid; grid-template-columns: auto 1fr; gap: 10px; margin-top: 4px; } @media (max-width: 768px) { .probador-terms-title { font-size: 19px; line-height: 24px; } .probador-terms-list li { font-size: 13px; line-height: 18px; } .probador-terms-link { font-size: 12px; line-height: 16px; padding: 10px 12px; } } /* ===== Wrapper foto + prenda (necesario para flotar la prenda en mobile) ===== */ .probador-photo-block { position: relative; } /* ===== Prenda card (desktop: bloque debajo del upload, igual que antes) ===== */ .probador-prenda { margin-bottom: 18px; } .probador-prenda-label, .probador-section-label { font-family: "Montserrat", sans-serif; font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-teal); margin-bottom: 8px; } .probador-prenda-card { position: relative; background: var(--surface-card); border: 1px solid var(--surface-variant); border-radius: var(--radius-lg); padding: 12px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; align-items: stretch; gap: 10px; } /* Badge oculto por default — solo se muestra en mobile como pill flotante. */ .probador-prenda-badge { display: none; } .probador-prenda-img { width: 100%; aspect-ratio: 1 / 1; max-height: 280px; background: var(--surface-container-low); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; overflow: hidden; } .probador-prenda-img img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; } .probador-prenda-name { font-family: "Montserrat", sans-serif; font-size: 15px; line-height: 20px; font-weight: 600; letter-spacing: -0.01em; color: var(--primary); text-align: center; margin: 4px 0 2px; } /* Link a la ficha del producto (solo cuando la tienda pasa garment_url) */ .probador-prenda-link { color: inherit; text-decoration: none; cursor: pointer; } .probador-prenda-link:hover { text-decoration: underline; text-underline-offset: 2px; } .probador-prenda-link:focus-visible { text-decoration: underline; text-underline-offset: 2px; /* outline hacia adentro: el foco no lo recorta el overflow:hidden del .probador-prenda-name en su variante mobile (nowrap + ellipsis). */ outline: 2px solid currentColor; outline-offset: -2px; } /* ===== Form ===== */ .probador-form { display: flex; flex-direction: column; } /* ===== Upload area ===== */ .probador-upload { position: relative; margin-bottom: 18px; } .probador-upload input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; pointer-events: none; } .probador-dropzone { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; aspect-ratio: 1 / 1; max-height: 320px; background: var(--surface-container-low); border: 2px dashed var(--outline-variant); border-radius: var(--radius-lg); cursor: pointer; overflow: hidden; position: relative; transition: border-color 180ms var(--easing), background 180ms var(--easing); } .probador-dropzone:hover { border-color: var(--primary); background: var(--surface-container); } .probador-dropzone img { display: none; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; position: relative; } .probador-dropzone img[src]:not([src=""]) { display: block; } .probador-dropzone img[src]:not([src=""]) ~ .probador-dropzone-hint { display: none; } /* Cuando hay una foto cargada, el dropzone deja de ser clickeable; solo el botón "Cambiar" abre el file picker. */ .probador-dropzone.has-image { cursor: default; pointer-events: none; border-style: solid; border-color: var(--surface-variant); padding: 6px; } .probador-change { position: absolute; top: 12px; right: 12px; display: inline-flex; align-items: center; gap: 4px; padding: 6px 12px; background: rgba(15, 23, 42, 0.85); color: #fff; border: 0; border-radius: var(--radius-md); font-family: "Inter", sans-serif; font-size: 13px; font-weight: 600; cursor: pointer; z-index: 2; box-shadow: var(--shadow-md); transition: background 180ms var(--easing); } .probador-change:hover { background: var(--primary); } .probador-change:disabled { opacity: 0.5; cursor: not-allowed; } .probador-change .material-symbols-outlined { font-size: 16px; } .probador-dropzone-hint { display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--on-surface-variant); text-align: center; padding: 16px; } .probador-dropzone-icon { font-size: 36px; color: var(--outline); } .probador-dropzone-text { font-family: "Montserrat", sans-serif; font-size: 14px; font-weight: 600; color: var(--primary); } .probador-dropzone-sub { font-size: 12px; color: var(--on-surface-variant); } /* ===== Rear hint ===== */ .probador-rear-hint { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; background: rgba(241, 110, 19, 0.08); border: 1px solid rgba(241, 110, 19, 0.25); border-radius: var(--radius-md); color: var(--on-surface); font-size: 13px; line-height: 18px; margin-bottom: 14px; } .probador-rear-hint .material-symbols-outlined { font-size: 18px; color: var(--accent-orange); flex-shrink: 0; } /* ===== Size selector ===== */ .probador-size { border: 1px solid var(--surface-variant); border-radius: var(--radius-md); padding: 10px 12px 12px; margin: 0 0 14px; background: var(--surface-card); } .probador-size-legend { font-family: "Montserrat", sans-serif; font-size: 12px; font-weight: 600; color: var(--primary); padding: 0 4px; letter-spacing: -0.01em; } .probador-size-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 8px; } .probador-size-option { position: relative; display: flex; align-items: center; justify-content: center; padding: 8px 6px; background: var(--surface-container-low); border: 1px solid transparent; border-radius: var(--radius-sm); cursor: pointer; font-size: 13px; font-weight: 500; color: var(--on-surface-variant); transition: all 180ms var(--easing); } .probador-size-option input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; } .probador-size-option:hover { background: var(--surface-container); color: var(--primary); } .probador-size-option:has(input:checked) { background: var(--primary); border-color: var(--primary); color: #fff; } /* ===== Hint person ===== */ .probador-hint { font-size: 12px; line-height: 16px; color: var(--on-surface-variant); text-align: center; margin: 0 0 14px; } /* ===== Botones ===== */ .probador-actions { display: grid; grid-template-columns: 1fr; gap: 8px; align-items: stretch; margin-bottom: 22px; } .probador-btn-wrap { display: flex; } .probador-btn-wrap .probador-btn { width: 100%; } .probador-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 16px; border-radius: var(--radius-md); font-family: "Inter", sans-serif; font-size: 14px; font-weight: 600; letter-spacing: -0.01em; text-decoration: none; /* pointer a nivel CLASE: el reset body.probador-page button no cubre al de descargar (sin href — el click es JS puro via /v1/download). */ cursor: pointer; border: 1px solid transparent; transition: all 180ms var(--easing); white-space: nowrap; } .probador-btn .material-symbols-outlined { font-size: 16px; } .probador-btn-primary { background: var(--primary); color: #fff; box-shadow: var(--shadow-sm); } .probador-btn-primary:hover:not(:disabled) { background: var(--primary-container); box-shadow: var(--shadow-md); transform: translateY(-1px); } .probador-btn-primary:disabled { opacity: 0.5; cursor: not-allowed; transform: none; } .probador-btn-ghost { background: transparent; color: var(--on-surface-variant); border-color: var(--surface-variant); } .probador-btn-ghost:hover:not(:disabled) { background: var(--surface-container-low); color: var(--primary); border-color: var(--primary); } .probador-btn-ghost:disabled { opacity: 0.5; cursor: not-allowed; } .probador-btn-secondary { background: var(--surface-container-low); color: var(--primary); border-color: var(--surface-variant); } .probador-btn-secondary:hover:not(:disabled) { background: var(--surface-container); border-color: var(--primary); } /* dropzone disabled state */ .probador-dropzone.is-disabled { opacity: 0.5; pointer-events: none; cursor: not-allowed; } /* ===== Historial ===== */ .probador-historial { margin-top: 4px; padding-top: 18px; border-top: 1px solid var(--surface-variant); } .probador-historial.hidden { display: none; } .probador-historial-head { margin-bottom: 12px; } .probador-historial-title { font-size: 16px; line-height: 22px; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 2px; } .probador-historial-sub { font-size: 12px; color: var(--on-surface-variant); } .probador-historial-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; } .probador-hist-empty { text-align: center; padding: 32px 20px; background: var(--surface-card); border: 1px dashed var(--surface-variant); border-radius: var(--radius-lg); color: var(--on-surface-variant); font-size: 14px; line-height: 20px; grid-column: 1 / -1; } .probador-hist-loading { text-align: center; padding: 28px; color: var(--on-surface-variant); font-size: 14px; grid-column: 1 / -1; } .probador-hist-card { position: relative; background: var(--surface-card); border: 1px solid var(--surface-variant); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; transition: transform 180ms var(--easing), box-shadow 180ms var(--easing); } .probador-hist-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); } .probador-hist-delete { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; border-radius: 50%; background: rgba(15, 23, 42, 0.78); color: #fff; border: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 2; box-shadow: var(--shadow-sm); transition: background 180ms var(--easing), transform 180ms var(--easing); } .probador-hist-delete:hover { background: #c1392b; transform: scale(1.05); } .probador-hist-delete .material-symbols-outlined { font-size: 14px; } .probador-hist-img { display: block; aspect-ratio: 4 / 5; background: var(--surface-container-low); overflow: hidden; } .probador-hist-img img { width: 100%; height: 100%; object-fit: cover; display: block; } .probador-hist-meta { padding: 8px 10px 10px; display: flex; flex-direction: column; gap: 6px; } .probador-hist-name { font-family: "Montserrat", sans-serif; font-size: 12px; line-height: 16px; font-weight: 600; color: var(--primary); letter-spacing: -0.01em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Link a la ficha del producto en la tarjeta del historial (solo si hay garment_product_url) */ .probador-hist-name-link { color: inherit; text-decoration: none; cursor: pointer; } .probador-hist-name-link:hover { text-decoration: underline; text-underline-offset: 2px; } .probador-hist-name-link:focus-visible { text-decoration: underline; text-underline-offset: 2px; /* outline hacia adentro: el foco no lo recorta el overflow:hidden + -webkit-line-clamp:2 del .probador-hist-name que lo contiene. */ outline: 2px solid currentColor; outline-offset: -2px; } .probador-hist-tags { display: flex; flex-wrap: wrap; gap: 4px; } .probador-hist-size, .probador-hist-expires { display: inline-block; font-size: 9px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; padding: 3px 6px; border-radius: var(--radius-full); } .probador-hist-size { background: rgba(0, 148, 173, 0.15); color: #2c6f6f; } .probador-hist-expires { background: var(--surface-container-low); color: var(--on-surface-variant); } .probador-hist-expires.is-warn { background: rgba(241, 110, 19, 0.12); color: #b8520d; } .probador-hist-actions { display: flex; gap: 6px; margin-top: 2px; } .probador-hist-btn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; background: var(--surface-container-low); border: 1px solid transparent; border-radius: 50%; color: var(--primary); text-decoration: none; cursor: pointer; transition: all 180ms var(--easing); } .probador-hist-btn:hover { background: var(--primary); color: #fff; } .probador-hist-btn .material-symbols-outlined { font-size: 16px; } /* ===== Vista 2: Generando ===== */ .probador-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 40px 16px 24px; min-height: 360px; gap: 18px; } .probador-spinner { width: 56px; height: 56px; border: 4px solid var(--surface-container-low); border-top-color: var(--primary); border-radius: 50%; animation: probador-spin 900ms linear infinite; } .probador-loading-title { font-family: "Montserrat", sans-serif; font-size: 18px; font-weight: 600; color: var(--primary); } .probador-loading-sub { font-size: 14px; color: var(--on-surface-variant); max-width: 280px; } .probador-progress { width: 100%; max-width: 320px; height: 8px; background: var(--surface-container-low); border-radius: var(--radius-full); overflow: hidden; } .probador-progress-bar { height: 100%; background: linear-gradient(90deg, var(--accent-teal), var(--primary)); border-radius: var(--radius-full); width: 0%; transition: width 200ms linear; } .probador-loading-note { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; line-height: 18px; color: var(--on-surface-variant); background: rgba(0, 148, 173, 0.08); border: 1px solid rgba(0, 148, 173, 0.25); border-radius: var(--radius-md); padding: 10px 12px; max-width: 360px; } .probador-loading-note .material-symbols-outlined { font-size: 18px; color: var(--accent-teal); flex-shrink: 0; } /* ===== Modal de resultado (encima del popup) ===== */ .probador-result-modal { position: fixed; inset: 0; z-index: 1500; display: flex; align-items: center; justify-content: center; padding: 24px; animation: probador-fade-in 200ms ease-out; } .probador-result-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.55); } .probador-result-card { position: relative; background: var(--surface-card); border-radius: var(--radius-xl); box-shadow: var(--shadow-xl); max-width: 460px; width: 100%; max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px); overflow-y: auto; padding: 22px 22px 20px; animation: probador-pop-in 220ms cubic-bezier(0.16, 1, 0.3, 1); } .probador-result-close { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; border-radius: 50%; border: 0; background: transparent; color: var(--on-surface-variant); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 180ms var(--easing), color 180ms var(--easing); } .probador-result-close:hover { background: var(--surface-container-low); color: var(--primary); } .probador-result-close .material-symbols-outlined { font-size: 20px; } .probador-result-head { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 16px; padding-right: 32px; } .probador-result-icon { width: 36px; height: 36px; border-radius: 50%; background: rgba(34, 197, 94, 0.15); color: rgb(22, 163, 74); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .probador-result-icon .material-symbols-outlined { font-size: 22px; font-weight: 700; } .probador-result-text { flex: 1; min-width: 0; } .probador-result-title { font-family: "Montserrat", sans-serif; font-size: 16px; line-height: 22px; font-weight: 700; letter-spacing: -0.01em; color: var(--primary); margin: 0 0 4px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .probador-result-badge { display: inline-flex; align-items: center; gap: 2px; font-family: "Inter", sans-serif; font-size: 10px; font-weight: 600; letter-spacing: 0.04em; padding: 2px 6px 2px 4px; border-radius: 6px; background: linear-gradient(135deg, #a78bfa, #6366f1); color: #fff; white-space: nowrap; } .probador-result-badge .material-symbols-outlined { font-size: 12px; } .probador-result-sub { font-size: 13px; line-height: 18px; color: var(--on-surface-variant); margin: 0; } .probador-result-img-wrap { background: var(--surface-container-low); border-radius: var(--radius-lg); overflow: hidden; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; max-height: 52vh; } .probador-result-img-wrap img { max-width: 100%; max-height: 52vh; width: auto; height: auto; object-fit: contain; display: block; cursor: zoom-in; } .probador-result-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } @media (max-width: 768px) { /* En mobile el card va pegado a los 3 bordes (left/right/bottom) como bottom-sheet. El border-radius queda solo arriba. */ .probador-result-modal { padding: 0; align-items: flex-end; } .probador-result-card { max-width: none; border-radius: var(--radius-xl) var(--radius-xl) 0 0; padding: 18px 18px 16px; } .probador-result-img-wrap { max-height: 44vh; } .probador-result-img-wrap img { max-height: 44vh; } } /* ===== Footer popup ===== */ .probador-footer { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 10px 20px; border-top: 1px solid var(--surface-variant); background: var(--surface-card); font-size: 11px; color: var(--on-surface-variant); flex-shrink: 0; } .probador-footer-brand { color: var(--on-surface-variant); text-decoration: none; } .probador-footer-vfituy { color: inherit; font-weight: 600; text-decoration: underline; text-decoration-color: var(--outline-variant); text-underline-offset: 3px; transition: color 180ms var(--easing), text-decoration-color 180ms var(--easing); } .probador-footer-vfituy:hover { color: var(--primary); text-decoration-color: var(--primary); } .probador-footer-link { color: var(--on-surface-variant); text-decoration: none; transition: color 180ms var(--easing); } .probador-footer-link:hover { color: var(--primary); text-decoration: underline; text-decoration-color: var(--primary); text-underline-offset: 3px; } /* ===== Toast interno ===== */ .probador-toast { position: absolute; top: 88px; left: 50%; transform: translateX(-50%); display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; background: var(--surface-card); border: 1px solid var(--surface-variant); border-left: 4px solid var(--primary); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); z-index: 20; max-width: calc(100% - 32px); width: 360px; animation: probador-toast-in 220ms ease-out; } .probador-toast.toast-success { border-left-color: #2c8a2c; } .probador-toast.toast-error { border-left-color: #c1392b; } .probador-toast.toast-info { border-left-color: var(--accent-teal); } .probador-toast-body { flex: 1; min-width: 0; } .probador-toast .toast-title { font-family: "Montserrat", sans-serif; font-size: 13px; font-weight: 600; color: var(--primary); margin-bottom: 2px; } .probador-toast .toast-message { font-size: 13px; line-height: 18px; color: var(--on-surface); } .probador-toast .toast-close { background: transparent; border: 0; color: var(--on-surface-variant); display: flex; align-items: center; justify-content: center; padding: 0; width: 24px; height: 24px; border-radius: 50%; transition: background 180ms var(--easing); } .probador-toast .toast-close:hover { background: var(--surface-container-low); } .probador-toast .toast-close .material-symbols-outlined { font-size: 16px; } /* ===== Lightbox (resultado + historial) ===== */ .result-lightbox { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.88); display: flex; align-items: center; justify-content: center; z-index: 2000; padding: 24px; cursor: zoom-out; } .result-lightbox img { max-width: min(440px, 88vw); max-height: 78vh; width: auto; height: auto; object-fit: contain; border-radius: var(--radius-md); box-shadow: var(--shadow-xl); } @media (max-width: 768px) { .result-lightbox { padding: 16px; } .result-lightbox img { max-width: 92vw; max-height: 80vh; } } /* ===== Animaciones ===== */ @keyframes probador-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes probador-pop-in { from { opacity: 0; transform: scale(0.96) translateY(8px); } to { opacity: 1; transform: scale(1) translateY(0); } } /* ===== Share sheet (fallback custom para cuando Web Share API no está) ===== */ .probador-share-sheet { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.18s var(--easing); } .probador-share-sheet.is-open { opacity: 1; pointer-events: auto; } .share-sheet-backdrop { position: absolute; inset: 0; /* Mismo overlay del lightbox: negro limpio, sin blur (igual en desktop y mobile) */ background: rgba(0, 0, 0, 0.88); } .share-sheet-card { position: relative; z-index: 1; width: 100%; max-width: 380px; margin: 16px; background: var(--surface-card); border-radius: var(--radius-xl); box-shadow: 0 12px 40px rgba(0, 32, 70, 0.25); padding: 18px 18px 22px; transform: scale(0.96) translateY(8px); transition: transform 0.18s var(--easing); } .probador-share-sheet.is-open .share-sheet-card { transform: scale(1) translateY(0); } .share-sheet-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } .share-sheet-title { font-family: "Inter", sans-serif; font-size: 17px; font-weight: 700; color: var(--primary); margin: 0; letter-spacing: -0.01em; } .share-sheet-close { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--surface-container-low); border: 0; color: var(--on-surface-variant); cursor: pointer; transition: background 0.15s, color 0.15s; } .share-sheet-close:hover { background: var(--surface-container); color: var(--primary); } .share-sheet-close .material-symbols-outlined { font-size: 20px; } .share-sheet-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .share-option { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 6px 4px; border: 0; background: transparent; color: var(--on-surface); font-family: "Inter", sans-serif; font-size: 12px; font-weight: 500; cursor: pointer; text-decoration: none; border-radius: 12px; transition: transform 0.15s var(--easing); } .share-option:hover { transform: translateY(-1px); } .share-option:active { transform: scale(0.96); } .share-icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; color: #fff; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12); } .share-icon svg { width: 24px; height: 24px; } .share-icon-copy { background: var(--surface-container); color: var(--primary); } .share-icon-copy .material-symbols-outlined { font-size: 24px; } .share-label { font-size: 12px; color: var(--on-surface); } @media (max-width: 768px) { /* En mobile el sheet se ancla al fondo (bottom-sheet) */ .probador-share-sheet { align-items: flex-end; } .share-sheet-card { margin: 0; max-width: none; border-radius: 20px 20px 0 0; padding: 16px 16px max(22px, calc(16px + env(safe-area-inset-bottom))); transform: translateY(100%); } .probador-share-sheet.is-open .share-sheet-card { transform: translateY(0); } } @keyframes probador-slide-up { from { transform: translateY(100%); } to { transform: translateY(0); } } @keyframes probador-spin { to { transform: rotate(360deg); } } @keyframes probador-view-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } @keyframes probador-toast-in { from { opacity: 0; transform: translate(-50%, -8px); } to { opacity: 1; transform: translate(-50%, 0); } } /* ===== Mobile: bottom-sheet ===== */ @media (max-width: 768px) { .probador-overlay { align-items: stretch; justify-content: stretch; padding: 0; } .probador-popup { position: fixed; top: 60px; left: 0; right: 0; bottom: 0; width: 100%; max-width: none; max-height: none; border-radius: 20px 20px 0 0; animation: probador-slide-up 280ms cubic-bezier(0.16, 1, 0.3, 1); transition: top 240ms var(--easing), max-height 240ms var(--easing); } /* Vista de terminos: el popup se ajusta al contenido (no fullscreen). Queda anclado al bottom como sheet pero compacto. Cuando el visitante acepta y pasa a 'upload', vuelve a fullscreen via la transition de arriba. */ .probador-popup[data-state="terminos"] { top: auto; max-height: 86vh; } /* Drag-to-dismiss: el wrapper es full-width con padding vertical (hitbox grande para que el dedo agarre facil); el palito visible es un ::before centrado. El touch lo maneja JS — touch-action: none evita scroll/pull-to-refresh del browser. */ .probador-sheet-handle { display: block; width: 100%; padding: 12px 0 6px; flex-shrink: 0; touch-action: none; cursor: grab; } .probador-sheet-handle::before { content: ""; display: block; width: 40px; height: 4px; border-radius: 2px; background: var(--surface-variant); margin: 0 auto; } .probador-sheet-handle:active { cursor: grabbing; } .probador-header { padding: 14px 18px; } .probador-store-logo { height: 38px; max-width: 130px; } .probador-store-avatar { width: 40px; height: 40px; font-size: 17px; } .probador-brand { width: 36px; height: 36px; } .probador-close { width: 34px; height: 34px; } .probador-body { padding: 16px; } .probador-intro-title { font-size: 19px; line-height: 24px; } .probador-intro-text { font-size: 13px; line-height: 18px; } /* Upload area en mobile: usa aspect 3/4 (mas vertical) para dejar espacio a la card flotante de la prenda en la esquina inferior derecha. */ .probador-dropzone { aspect-ratio: 3 / 4; max-height: 360px; } /* Prenda flotante en la esquina inferior derecha del upload area. */ .probador-prenda { position: absolute; bottom: 10px; right: 10px; margin: 0; width: 130px; z-index: 5; } /* En mobile el label suelto desaparece y aparece el badge pill dentro de la card. */ .probador-prenda-label { display: none; } .probador-prenda-card { padding: 6px 8px 8px; gap: 6px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18); border-color: rgba(255, 255, 255, 0.9); } .probador-prenda-badge { display: inline-block; position: absolute; top: -8px; left: 50%; transform: translateX(-50%); background: var(--primary); color: #fff; padding: 3px 10px; border-radius: 999px; font-family: "Montserrat", sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; box-shadow: var(--shadow-sm); } .probador-prenda-img { aspect-ratio: 1 / 1; max-height: none; } .probador-prenda-name { font-size: 11px; line-height: 14px; font-weight: 600; text-align: center; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .probador-historial-list { grid-template-columns: repeat(2, 1fr); gap: 8px; } .probador-hist-img { aspect-ratio: 4 / 5; } .probador-hist-meta { padding: 8px 10px 10px; } .probador-result-actions { grid-template-columns: 1fr 1fr; } .probador-result-actions .btn-back { grid-column: 1 / -1; } .probador-footer { padding: 10px 16px; font-size: 11px; } .probador-toast { top: 80px; width: calc(100% - 24px); } } @media (max-width: 380px) { .probador-historial-list { grid-template-columns: 1fr; } } /* ===== Reduced motion ===== */ @media (prefers-reduced-motion: reduce) { .probador-overlay, .probador-popup, .probador-view, .probador-toast, .probador-spinner, .probador-progress-bar, .probador-hist-card, .probador-btn-primary { animation: none !important; transition: none !important; } } /* ============================================================ ===== Micro-interactions: stagger reveal de grids ===== Cuando un entra al viewport, sus children internos (cards de grids) hacen fade-in en cascade. Usa CSS variable --stagger asignada por :nth-child para que el delay sea proporcional a la posicion del card. ============================================================ */ /* Stagger reveal: solo fade-in (sin transform) para no chocar con el hover translateY de las cards. :where() mantiene specificity 0 para que cualquier hover/transition de la card original gane sin conflicto. */ :where(.reveal) .benefit-card, :where(.reveal) .audience-card { opacity: 0; transition: opacity 0.55s var(--easing) calc(var(--stagger, 0) * 90ms); } :where(.reveal.active) .benefit-card, :where(.reveal.active) .audience-card { opacity: 1; } .benefits-cards > .benefit-card:nth-child(1), .audience-grid > .audience-card:nth-child(1) { --stagger: 1; } .benefits-cards > .benefit-card:nth-child(2), .audience-grid > .audience-card:nth-child(2) { --stagger: 2; } .benefits-cards > .benefit-card:nth-child(3) { --stagger: 3; } .benefits-cards > .benefit-card:nth-child(4) { --stagger: 4; } /* Respeta prefers-reduced-motion: stagger se desactiva, los elementos aparecen sin animacion. */ @media (prefers-reduced-motion: reduce) { :where(.reveal) .benefit-card, :where(.reveal) .audience-card { opacity: 1; transition: none; } } /* ============================================================ ===== Titulos editoriales: Playfair Display ===== Override de font-family para que TODOS los titles (de secciones y de targets/cards) usen la misma serif editorial que el hero. Prefix con body.landing para ganar specificity contra la regla global "body.landing h1..h5 { font-family: Montserrat }" del top del archivo. Solo aplica a titles — subtitles, eyebrows, body text quedan en Inter/Montserrat. ============================================================ */ body.landing .section-title, body.landing .benefit-title, body.landing .audience-card-title, body.landing .final-cta-title { font-family: "Playfair Display", "Georgia", serif; letter-spacing: -0.02em; } /* ============================================================ ===== Tint teal sutil al hover en fondos con color ===== Overlay layer (~7% accent-teal) sobre el background existente. Antes era warm-orange; unificado al teal para coherencia visual con el panel de gestión y la paleta general. @media (hover: hover) evita el efecto sticky en touch devices. ============================================================ */ @media (hover: hover) { .btn-primary:hover, .btn-on-primary:hover, .btn-premium:hover, .final-cta-btn:hover, .floating-cta:hover { background-image: linear-gradient(rgba(0, 148, 173, 0.07), rgba(0, 148, 173, 0.07)); } } /* Mismo tint en touch devices al tocar (:active) */ @media (hover: none) { .btn-primary:active, .btn-on-primary:active, .btn-premium:active, .final-cta-btn:active, .floating-cta:active { background-image: linear-gradient(rgba(0, 148, 173, 0.07), rgba(0, 148, 173, 0.07)); } } /* ============================================================= Probador: tabs "Probador" / "Tu talle" + form recomendador ============================================================= */ .probador-tabs { display: flex; gap: 0; margin-bottom: 14px; border-bottom: 1px solid var(--surface-variant); } .probador-tabs.hidden { display: none; } .probador-tab { flex: 1; background: transparent; border: none; color: var(--on-surface-variant); padding: 11px 14px 13px; font: inherit; font-family: "Montserrat", sans-serif; font-size: 13px; font-weight: 600; letter-spacing: -0.005em; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color 180ms var(--easing), border-color 180ms var(--easing); } .probador-tab:hover { color: var(--primary); } .probador-tab.is-active { color: var(--primary); border-bottom-color: var(--primary); } .probador-tab-content.hidden { display: none; } /* === Form de "Tu talle" === */ .size-form { display: flex; flex-direction: column; gap: 14px; } .size-form.hidden { display: none; } .size-form-group { border: 1px solid var(--surface-variant); border-radius: var(--radius-md); padding: 10px 12px 12px; background: var(--surface-card); margin: 0; } .size-form-legend { font-family: "Montserrat", sans-serif; font-size: 12px; font-weight: 600; color: var(--primary); padding: 0 4px; letter-spacing: -0.01em; } .size-form-radios { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; margin-top: 8px; } .size-form-radios-3 { grid-template-columns: repeat(3, 1fr); } .size-form-radio { position: relative; display: flex; align-items: center; justify-content: center; padding: 9px 6px; background: var(--surface-container-low); border: 1px solid transparent; border-radius: var(--radius-sm); cursor: pointer; font-size: 13px; font-weight: 500; color: var(--on-surface-variant); transition: all 180ms var(--easing); } .size-form-radio input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; } .size-form-radio:hover { background: var(--surface-container); color: var(--primary); } .size-form-radio:has(input:checked) { background: var(--primary); border-color: var(--primary); color: #fff; } .size-form-field { display: flex; flex-direction: column; gap: 6px; } .size-form-label-text { font-family: "Montserrat", sans-serif; font-size: 12px; font-weight: 600; color: var(--on-surface-variant); letter-spacing: -0.005em; } .size-form-field select { background: var(--surface-card); color: var(--on-surface); border: 1px solid var(--surface-variant); border-radius: var(--radius-sm); padding: 10px 12px; font: inherit; font-size: 14px; cursor: pointer; } .size-form-field select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(0, 148, 173, 0.16); } .size-form-slider-head { display: flex; align-items: baseline; justify-content: space-between; } .size-form-output { font-family: "Montserrat", sans-serif; font-size: 14px; font-weight: 600; color: var(--primary); font-variant-numeric: tabular-nums; } .size-form-field input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; background: var(--surface-container-low); border-radius: 999px; outline: none; margin: 8px 0; } .size-form-field input[type="range"]:focus { box-shadow: 0 0 0 3px rgba(0, 148, 173, 0.16); } .size-form-field input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 50%; background: var(--primary); border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18); cursor: pointer; transition: transform 120ms var(--easing); } .size-form-field input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.08); } .size-form-field input[type="range"]::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--primary); border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18); cursor: pointer; } .size-form-help { font-size: 12px; color: var(--on-surface-variant); line-height: 1.5; margin: 0; } /* Hint "(opcional)" junto al label de campos no obligatorios (ej. talle declarado). Reemplazó a los selectores de forma de cuerpo (discontinuados). */ .size-form-label-optional { font-weight: 400; color: var(--on-surface-variant); font-size: 11px; margin-left: 2px; } /* Estado inválido: borde rojo sin texto extra. Mantiene la altura del form estable (sin shifts) cuando faltan campos al submit. */ .size-form-group.is-invalid .size-form-radio { border-color: #dc3545; } .size-form-group.is-invalid .size-form-legend { color: #dc3545; } .size-form-field.is-invalid select { border-color: #dc3545; } .size-form-field.is-invalid .size-form-label-text { color: #dc3545; } /* === Card de resultado === */ .size-result { display: flex; flex-direction: column; gap: 12px; } .size-result.hidden { display: none; } .size-result-card { background: var(--surface-card); border: 1px solid var(--surface-variant); border-radius: var(--radius-md); padding: 22px 18px 18px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; } .size-result-label { font-size: 12px; font-weight: 600; color: var(--on-surface-variant); text-transform: uppercase; letter-spacing: 0.04em; margin: 0; } .size-result-size { font-family: "Montserrat", sans-serif; font-size: 64px; font-weight: 700; line-height: 1; color: var(--primary); letter-spacing: -0.02em; margin: 4px 0; } .size-result-conf { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--on-surface); font-weight: 500; } .size-result-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--on-surface-variant); } .size-result-dot--alta { background: #2c9d6a; } /* verde */ .size-result-dot--media { background: #d9a107; } /* amber */ .size-result-dot--baja { background: #c45050; } /* rojo */ .size-result-meta { font-size: 12px; color: var(--on-surface-variant); margin: 4px 0 0; line-height: 1.5; max-width: 320px; } /* Aviso "fuera de rango": el cuerpo supera el talle más grande de la tabla. */ .size-result-warn { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 12px; color: #8a6d00; background: rgba(255, 196, 0, 0.12); border: 1px solid rgba(255, 196, 0, 0.35); border-radius: 8px; padding: 7px 10px; margin: 8px auto 0; max-width: 320px; line-height: 1.4; } .size-result-warn .material-symbols-outlined { font-size: 16px; } .size-result-edit { display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: transparent; border: 1px solid var(--surface-variant); border-radius: var(--radius-sm); color: var(--on-surface); padding: 10px 14px; font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; transition: background 180ms var(--easing), border-color 180ms var(--easing); } .size-result-edit:hover { background: var(--surface-container-low); border-color: var(--primary); } .size-result-edit .material-symbols-outlined { font-size: 16px; } /* === Link "¿Por qué es mi talle?" + su modal (reusa .probador-result-modal/-card/-close) === */ .size-why-link { display: block; width: fit-content; margin: 12px auto 0; background: none; border: 0; padding: 2px 4px; font-family: inherit; font-size: 12px; color: var(--primary); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; } .size-why-link:hover { opacity: 0.7; } .size-why-card { max-width: 360px; } .size-why-title { font-family: "Montserrat", sans-serif; font-size: 17px; font-weight: 700; color: var(--on-surface); letter-spacing: -0.01em; margin: 0 0 12px; padding-right: 32px; } .size-why-body p { font-size: 13.5px; line-height: 1.55; color: var(--on-surface-variant); margin: 0 0 10px; } .size-why-body p:last-child { margin: 0; } .size-why-body strong { color: var(--on-surface); font-weight: 600; } /* El modal "¿por qué?" en mobile NO usa bottom-sheet: queda centrado como ventanita de aviso, igual que en desktop (sobreescribe el bottom-sheet que hereda de .probador-result-modal/-card). */ @media (max-width: 768px) { #size-why-modal { padding: 24px; align-items: center; } #size-why-modal .size-why-card { max-width: 360px; border-radius: var(--radius-xl); padding: 22px 22px 20px; } } /* === Feedback "¿Suele ser tu talle?" === Aparece debajo de la card de resultado cuando el visitante presiona "Obtener mi talle". Una vez clickeado un botón, se reemplaza por el bloque "¡Gracias por contarnos!". */ .size-feedback { background: var(--surface-card); border: 1px solid var(--surface-variant); border-radius: var(--radius-md); padding: 14px 14px 12px; display: flex; flex-direction: column; gap: 10px; } .size-feedback.hidden { display: none; } .size-feedback-q { font-family: "Montserrat", sans-serif; font-size: 13px; font-weight: 600; color: var(--on-surface); letter-spacing: -0.005em; text-align: center; margin: 0; } .size-feedback-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; } .size-feedback-btn { background: var(--surface-container-low); border: 1px solid transparent; border-radius: var(--radius-sm); color: var(--on-surface-variant); padding: 9px 6px; font: inherit; font-family: "Inter", sans-serif; font-size: 12px; font-weight: 500; line-height: 1.2; text-align: center; cursor: pointer; transition: background 180ms var(--easing), border-color 180ms var(--easing), color 180ms var(--easing); } .size-feedback-btn:hover { background: var(--surface-container); color: var(--primary); border-color: rgba(0, 148, 173, 0.30); } .size-feedback-btn.is-selected { background: var(--primary); border-color: var(--primary); color: #ffffff; } .size-feedback-btn:disabled { cursor: default; opacity: 0.7; } .size-feedback-thanks { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px; background: rgba(0, 148, 173, 0.08); border: 1px solid rgba(0, 148, 173, 0.25); border-radius: var(--radius-md); color: var(--primary); font-family: "Montserrat", sans-serif; font-size: 13px; font-weight: 600; letter-spacing: -0.005em; } .size-feedback-thanks.hidden { display: none; } .size-feedback-thanks .material-symbols-outlined { font-size: 18px; font-variation-settings: 'FILL' 1, 'wght' 500; } @media (max-width: 420px) { .size-feedback-actions { grid-template-columns: 1fr; } } /* === Estado degradado (sin tabla / categoría desconocida) === */ .size-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 28px 18px; background: var(--surface-card); border: 1px dashed var(--surface-variant); border-radius: var(--radius-md); color: var(--on-surface-variant); } .size-empty.hidden { display: none; } .size-empty .material-symbols-outlined { font-size: 32px; color: var(--on-surface-variant); opacity: 0.7; } .size-empty-text { font-size: 13px; margin: 0; line-height: 1.5; max-width: 320px; } /* ============================================================= Probador: tab "Closet" (Fase 2 — outfit multi-prenda) Layout referencia: rail de 3 slots cuadrados a la izquierda + dropzone de foto compartida (mismo input #foto) a la derecha. ============================================================= */ .closet-layout { display: grid; grid-template-columns: 96px 1fr; gap: 16px; align-items: start; } .closet-rail-col, .closet-photo { display: flex; flex-direction: column; min-width: 0; } .closet-rail { display: flex; flex-direction: column; gap: 10px; } .closet-slot { position: relative; /* ancla de la X de quitar (hermana del box) */ display: flex; flex-direction: column; gap: 6px; min-width: 0; } /* El box ES un