/* ─── Probador de Color de Cabello (addon hair-tryon) ─── */ /* Solo se carga cuando el addon está activo para el tenant. */ /* Vive en _platform para que CUALQUIER tema (Dawn, Cielo, …) que renderice la */ /* sección obtenga el diseño completo. Los var() llevan fallback para no depender */ /* de que el tema defina cada token. */ .section--hair-tryon { padding-top: 64px; padding-bottom: 64px; } .section--hair-tryon.section--custom-bg { padding-top: 72px; padding-bottom: 72px; } /* Tipografía: heredar la fuente del tema en TODO el bloque. Sin esto solo el

del título toma --font-heading (por la regla h1,h2,h3 del tema) y el resto (subtítulo, descripción, botón, privacy) cae al --font-body serif. */ .vto-section .hair-tryon-section__title, .vto-section .hair-tryon-section__subtitle { font-family: var(--font-heading, inherit); } .vto-section .hair-tryon-section__desc, .vto-section .hair-tryon-section__privacy, .vto-section .hair-tryon-section__cta { font-family: var(--font-heading, inherit); } /* Fondo de la sección driven por CSS vars (no inline background) para que el modo oscuro pueda sobreescribir. Light: --vto-bg si el admin lo setea; Dark: --vto-bg-dark (default #1E293B). Cielo usa .dark en ; otros temas pueden usar [data-theme]. */ .vto-section { background: var(--vto-bg, transparent); } .dark .vto-section, [data-theme="dark"] .vto-section { background: var(--vto-bg-dark, #1E293B); } /* El addon fuerza un fondo oscuro fijo en dark; por eso debe forzar también texto claro fijo. NO depender de --color-text del tema: en temas light-only (p.ej. olive-luxe) ese token no cambia y quedaba texto oscuro sobre fondo oscuro. */ .dark .vto-section .hair-tryon-section__title, [data-theme="dark"] .vto-section .hair-tryon-section__title { color: #F1F5F9; } .dark .vto-section .hair-tryon-section__subtitle, [data-theme="dark"] .vto-section .hair-tryon-section__subtitle { color: #CBD5E1; } .dark .vto-section .hair-tryon-section__desc, [data-theme="dark"] .vto-section .hair-tryon-section__desc { color: #94A3B8; } .dark .vto-section .hair-tryon-section__privacy, [data-theme="dark"] .vto-section .hair-tryon-section__privacy { color: #7C8AA0; } .dark .vto-section .hair-tryon-section__intro-icon, [data-theme="dark"] .vto-section .hair-tryon-section__intro-icon { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); } /* Cuando el admin setea un background claro, forzar texto oscuro para contraste. Solo en modo claro: en oscuro el texto sigue los tokens del tema. */ html:not(.dark):not([data-theme="dark"]) .vto-section--custom-bg .hair-tryon-section__title, html:not(.dark):not([data-theme="dark"]) .vto-section--custom-bg .hair-tryon-section__subtitle, html:not(.dark):not([data-theme="dark"]) .vto-section--custom-bg .hair-tryon-section__desc, html:not(.dark):not([data-theme="dark"]) .vto-section--custom-bg .hair-tryon-section__privacy { color: #1f2937; } html:not(.dark):not([data-theme="dark"]) .vto-section--custom-bg .hair-tryon-section__subtitle { color: #6b7280; } html:not(.dark):not([data-theme="dark"]) .vto-section--custom-bg .hair-tryon-section__desc { color: #6b7280; } html:not(.dark):not([data-theme="dark"]) .vto-section--custom-bg .hair-tryon-section__privacy { color: #cbd5e1; } .hair-tryon-section { display: flex; flex-direction: column; align-items: center; gap: 28px; } /* Intro card */ .hair-tryon-section__intro-icon { display: inline-flex; align-items: center; justify-content: center; width: 72px; height: 72px; background: #FDF2F8; border-radius: 20px; border: 1.5px solid #fce7f3; margin-bottom: 24px; } /* Con imagen propia: sin chip de fondo, la imagen manda. */ .hair-tryon-section__intro-icon--img { background: transparent; border-color: transparent; overflow: hidden; } .dark .vto-section .hair-tryon-section__intro-icon--img, [data-theme="dark"] .vto-section .hair-tryon-section__intro-icon--img { background: transparent; border-color: transparent; } .hair-tryon-section__intro-img { width: 100%; height: 100%; object-fit: contain; } .hair-tryon-section__title { font-size: clamp(22px, 4vw, 30px); font-weight: var(--fw-extra, 800); color: var(--color-text, #1f2937); margin: 0 0 12px; letter-spacing: -.3px; } .hair-tryon-section__subtitle { font-size: 15px; color: var(--color-text-light, #6b7280); margin: 0 0 10px; } .hair-tryon-section__desc { font-size: 15px; color: var(--color-text-muted, #64748b); margin: 0 0 32px; max-width: 400px; margin-left: auto; margin-right: auto; line-height: 1.6; } .hair-tryon-section__privacy { font-size: 12px; color: var(--color-border, #cbd5e1); margin: 22px 0 0; display: flex; align-items: center; justify-content: center; gap: 6px; } /* Swatches */ .hair-tryon-section__swatches { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; max-width: 720px; } .hair-tryon-section__swatch { display: flex; flex-direction: column; align-items: center; gap: 8px; background: none; border: 2px solid transparent; cursor: pointer; padding: 6px; border-radius: var(--radius-lg, 12px); transition: border-color .2s; } .hair-tryon-section__swatch:hover { border-color: var(--color-border, #e2e8f0); } .hair-tryon-section__swatch--active { border-color: var(--color-accent, #6366f1); } .hair-tryon-section__swatch-img { width: 64px; height: 64px; border-radius: 50%; overflow: hidden; box-shadow: 0 1px 4px rgba(0,0,0,.15); } .hair-tryon-section__swatch-img img { width: 100%; height: 100%; object-fit: cover; } .hair-tryon-section__swatch-dot { display: block; width: 64px; height: 64px; border-radius: 50%; box-shadow: 0 1px 4px rgba(0,0,0,.2); } .hair-tryon-section__swatch-label { font-size: 11px; color: var(--color-text-muted, #64748b); text-align: center; max-width: 72px; line-height: 1.3; } .hair-tryon-section__swatch--active .hair-tryon-section__swatch-label { color: var(--color-accent, #6366f1); font-weight: var(--fw-semibold, 600); } /* Intensity slider */ .hair-tryon-section__intensity { display: flex; flex-direction: column; gap: 6px; width: 100%; max-width: 300px; } .hair-tryon-section__intensity-label { display: flex; justify-content: space-between; font-size: 12px; color: var(--color-text-muted, #64748b); } .hair-tryon-section__slider { width: 100%; accent-color: var(--color-accent, #6366f1); } /* CTA */ .hair-tryon-section__btn { display: inline-flex; align-items: center; gap: 8px; } @media (max-width: 640px) { .hair-tryon-section__swatch-dot, .hair-tryon-section__swatch-img { width: 52px; height: 52px; } .hair-tryon-section__swatch-label { max-width: 60px; } }