/* ════════════════════════════════════════════════════════════════════ TALLER — SERVICE TÉCNICO / REPARACIONES · "GRAFITO + SEÑAL" Oscuro SÓLIDO (no neón): acero / grafito (slate) + UN acento de señal ámbar industrial. Textura sutil de blueprint (grilla técnica + cruces de registro), bordes definidos, etiquetas en monoespaciada, tipografía display técnica y mecánica. Vibe taller de confianza, herramienta sólida y garantía. Único CSS de la familia → SOBREESCRIBE base + storefront. Scope: html[data-theme-family="taller"]. data-theme="taller" constante. DUAL MODE: dark (default) = grafito/acero · light = acero/blueprint claro. Toggle añade/quita .dark en . Server first-paint = dark (pixel-identical). ════════════════════════════════════════════════════════════════════ */ @import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@500;600;700&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500;600&display=swap'); /* ── (a) IDENTITY — mode-independent tokens ───────────────────────── */ :root, html[data-theme-family="taller"] { /* ── Acero (brand) + señal ámbar industrial (cta/acento) ── */ --steel: #4A5A70; --steel-2: #5E7088; --steel-soft: #9FB0C6; --signal: #F6A722; /* ámbar señal */ --signal-2: #FF8A1F; /* naranja industrial */ --brand: #8FA2BC; --brand-dark: #4A5A70; --brand-soft: #B6C4D8; --cta: #F6A722; --cta-hover: #FF8A1F; --cta-soft: rgba(246, 167, 34, .14); --accent: #F6A722; --whatsapp: #25D366; /* ── Radios técnicos: esquinas definidas, no redondeadas ── */ --r: 8px; --r-sm: 4px; --r-full: 9999px; --r-taller: 8px; --r-taller-lg: 12px; /* ── Tipografía: display técnico mecánico + sans de plano + mono ── */ --font-display: 'Rajdhani', 'Saira', system-ui, sans-serif; --font-body: 'IBM Plex Sans', system-ui, -apple-system, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, monospace; } /* ── (b) LIGHT SURFACES — acero/blueprint claro ───────────────────── */ html[data-theme-family="taller"]:not(.dark) { --bg: #F1F3F6; --bg-1: #FFFFFF; --bg-2: #E8EBF0; --bg-3: #DDE1E8; --line: rgba(74, 90, 112, .14); --text: #1A2130; --muted: #5A6B82; /* Firma: filo de señal sobre fondo claro */ --edge-signal: 0 0 0 1px rgba(246, 167, 34, .5), 0 8px 24px rgba(74, 90, 112, .18); --shadow-card: 0 1px 0 rgba(74, 90, 112, .10), 0 8px 24px rgba(74, 90, 112, .12); --shadow-pop: 0 2px 0 rgba(74, 90, 112, .12), 0 16px 40px rgba(74, 90, 112, .18); /* Hero: luz azul-acero suave con halo ámbar tenue */ --hero-grad: radial-gradient(ellipse 58% 56% at 76% 26%, rgba(246, 167, 34, .10) 0%, transparent 62%), radial-gradient(ellipse 56% 64% at 14% 80%, rgba(74, 90, 112, .14) 0%, transparent 66%), linear-gradient(180deg, #EDF0F4 0%, #F1F3F6 100%); /* Blueprint claro: retícula técnica sobre superficie helada */ --hero-wallpaper: linear-gradient(rgba(74, 90, 112, .06) 1px, transparent 1px) 0 0 / 100% 40px, linear-gradient(90deg, rgba(74, 90, 112, .06) 1px, transparent 1px) 0 0 / 40px 100%, linear-gradient(rgba(74, 90, 112, .10) 1px, transparent 1px) 0 0 / 100% 200px, linear-gradient(90deg, rgba(74, 90, 112, .10) 1px, transparent 1px) 0 0 / 200px 100%; } /* ── (c) DARK SURFACES — grafito/acero (verbatim, pixel-identical) ── */ html[data-theme-family="taller"].dark { --bg: #0C0F14; --bg-1: #11151C; --bg-2: #161B24; --bg-3: #1E2530; --line: rgba(176, 192, 214, .10); --text: #E7ECF3; --muted: #8794A6; /* Firma: filo de señal + sombra sólida (sin glow de color) */ --edge-signal: 0 0 0 1px rgba(246, 167, 34, .42), 0 10px 30px rgba(0, 0, 0, .5); --shadow-card: 0 2px 0 rgba(0, 0, 0, .35), 0 18px 44px rgba(0, 0, 0, .42); --shadow-pop: 0 2px 0 rgba(0, 0, 0, .4), 0 22px 54px rgba(0, 0, 0, .5); /* Atmósfera del hero: halo ámbar tenue + plano de acero */ --hero-grad: radial-gradient(ellipse 58% 56% at 76% 26%, rgba(246, 167, 34, .14) 0%, transparent 62%), radial-gradient(ellipse 56% 64% at 14% 80%, rgba(74, 90, 112, .26) 0%, transparent 66%), linear-gradient(180deg, #0E1218 0%, #0C0F14 100%); /* Blueprint oscuro: retícula técnica de líneas finas de acero */ --hero-wallpaper: linear-gradient(rgba(159, 176, 198, .055) 1px, transparent 1px) 0 0 / 100% 40px, linear-gradient(90deg, rgba(159, 176, 198, .055) 1px, transparent 1px) 0 0 / 40px 100%, linear-gradient(rgba(159, 176, 198, .10) 1px, transparent 1px) 0 0 / 100% 200px, linear-gradient(90deg, rgba(159, 176, 198, .10) 1px, transparent 1px) 0 0 / 200px 100%; } /* ════════════════════════════════════════════════════════════════════ FONDO GLOBAL — plano de acero + blueprint fijo desvaneciendo arriba. ════════════════════════════════════════════════════════════════════ */ html[data-theme-family="taller"] body { font-family: var(--font-body); background: radial-gradient(ellipse 72% 48% at 82% -6%, rgba(246, 167, 34, .07) 0%, transparent 56%), radial-gradient(ellipse 62% 52% at -6% 26%, rgba(74, 90, 112, .16) 0%, transparent 56%), var(--bg); background-attachment: fixed; color: var(--text); } html[data-theme-family="taller"]:not(.dark) body { background: radial-gradient(ellipse 72% 48% at 82% -6%, rgba(246, 167, 34, .05) 0%, transparent 56%), radial-gradient(ellipse 62% 52% at -6% 26%, rgba(74, 90, 112, .08) 0%, transparent 56%), var(--bg); } html[data-theme-family="taller"] body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; background: var(--hero-wallpaper); -webkit-mask-image: radial-gradient(ellipse 92% 72% at 50% 2%, #000 0%, transparent 80%); mask-image: radial-gradient(ellipse 92% 72% at 50% 2%, #000 0%, transparent 80%); opacity: .62; } html[data-theme-family="taller"] main { position: relative; z-index: 1; } /* ── Tipografía: títulos display mecánicos en mayúscula ── */ html[data-theme-family="taller"] .sf-title, html[data-theme-family="taller"] .sf-section-head h2, html[data-theme-family="taller"] .sf-despensa-h1 { font-family: var(--font-display); font-weight: 700; letter-spacing: .015em; text-transform: uppercase; line-height: 1.0; } html[data-theme-family="taller"] .sf-card h3, html[data-theme-family="taller"] .sf-quick-card h3, html[data-theme-family="taller"] .sf-benefit h3 { font-family: var(--font-display); font-weight: 600; letter-spacing: .02em; text-transform: uppercase; } html[data-theme-family="taller"] .sf-title .accent { color: var(--signal); } /* ════════════════════════════════════════════════════════════════════ TOPBAR — panel de acero, hairline ámbar inferior (cinta de señal) ════════════════════════════════════════════════════════════════════ */ html[data-theme-family="taller"] .topbar { background: color-mix(in oklab, var(--bg-1) 86%, transparent); border: 1px solid var(--line); border-radius: var(--r-taller-lg); box-shadow: 0 2px 22px color-mix(in oklab, var(--bg) 50%, transparent), inset 0 -2px 0 rgba(246, 167, 34, .55); } html[data-theme-family="taller"] .topbar.scrolled { background: color-mix(in oklab, var(--bg) 97%, transparent); border-color: color-mix(in oklab, var(--text) 20%, transparent); box-shadow: 0 10px 40px color-mix(in oklab, var(--bg) 66%, transparent), inset 0 -2px 0 rgba(246, 167, 34, .7); } html[data-theme-family="taller"] .brand-badge { border-radius: var(--r-taller) !important; background: linear-gradient(135deg, var(--steel-2), var(--steel)); border: 1px solid rgba(246, 167, 34, .5); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12); } html[data-theme-family="taller"] .brand-name { font-family: var(--font-display); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; } html[data-theme-family="taller"] .nav-link { border-radius: var(--r-taller) !important; font-family: var(--font-display); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; font-size: .82rem; color: var(--muted); } html[data-theme-family="taller"] .nav-link:hover { background: color-mix(in oklab, var(--text) 8%, transparent); color: var(--text); } html[data-theme-family="taller"] .nav-link-active { background: rgba(246, 167, 34, .12); color: var(--signal); border: 1px solid rgba(246, 167, 34, .42); box-shadow: none; } html[data-theme-family="taller"] .topbar-mode-btn { border-radius: var(--r-taller) !important; border: 1px solid var(--line); color: var(--muted); } html[data-theme-family="taller"] .topbar-mode-btn:hover { background: rgba(246, 167, 34, .1); color: var(--signal); border-color: rgba(246, 167, 34, .4); } /* ════════════════════════════════════════════════════════════════════ KICKER / CHIP — etiqueta de placa: mono, filo de acero, punto señal ════════════════════════════════════════════════════════════════════ */ html[data-theme-family="taller"] .sf-kicker, html[data-theme-family="taller"] .sf-section-kicker { font-family: var(--font-mono); letter-spacing: .12em; text-transform: uppercase; } html[data-theme-family="taller"] .sf-kicker { border-radius: var(--r-taller); background: color-mix(in oklab, var(--text) 6%, transparent); border: 1px solid color-mix(in oklab, var(--text) 22%, transparent); color: var(--muted); font-weight: 500; font-size: .72rem; } html[data-theme-family="taller"] .sf-section-kicker { color: var(--signal); font-weight: 500; } html[data-theme-family="taller"] .sf-kicker-dot { border-radius: 2px; /* cuadrado = lectura técnica, no LED */ background: var(--signal); box-shadow: 0 0 0 3px rgba(246, 167, 34, .18); animation: tlr-blink 2s steps(1, end) infinite; } @keyframes tlr-blink { 0%, 64% { opacity: 1; } 65%, 100% { opacity: .35; } } /* ════════════════════════════════════════════════════════════════════ HERO CENTRADO (perfil reparación) — placa de planos con cruces de registro en las esquinas (firma blueprint). ════════════════════════════════════════════════════════════════════ */ html[data-theme-family="taller"] .sf-hero-center { padding: 30px 0 36px; } html[data-theme-family="taller"] .sf-center-inner .sf-lead { color: var(--muted); } html[data-theme-family="taller"] .sf-title { font-size: clamp(2.2rem, 4.8vw, 4rem); } html[data-theme-family="taller"] .sf-panel { border-radius: var(--r-taller-lg); background: color-mix(in oklab, var(--bg-2) 62%, transparent); border: 1px solid var(--line); box-shadow: var(--shadow-card); } /* ── Escenario del hero (imagen del rubro) — marco de acero, sin glow ── */ html[data-theme-family="taller"] .sf-stage { border-radius: var(--r-taller-lg); border: 1px solid color-mix(in oklab, var(--text) 20%, transparent); box-shadow: var(--shadow-card); background: var(--bg-2); } html[data-theme-family="taller"] .sf-stage-overlay { border-radius: var(--r-taller); background: color-mix(in oklab, var(--bg) 86%, transparent); backdrop-filter: blur(12px); border: 1px solid color-mix(in oklab, var(--text) 20%, transparent); border-left: 3px solid var(--signal); } html[data-theme-family="taller"] .sf-stage-overlay strong { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .03em; font-weight: 700; } html[data-theme-family="taller"] .sf-stage-sub { font-family: var(--font-mono); font-size: .76rem; } html[data-theme-family="taller"] .sf-metric { border-radius: var(--r-taller); background: color-mix(in oklab, var(--bg-2) 50%, transparent); border: 1px solid color-mix(in oklab, var(--text) 16%, transparent); transition: border-color .2s, box-shadow .2s, transform .2s; } html[data-theme-family="taller"] .sf-metric:hover { border-color: rgba(246, 167, 34, .42); box-shadow: var(--edge-signal); transform: translateY(-2px); } html[data-theme-family="taller"] .sf-metric strong { font-family: var(--font-display); font-weight: 700; color: var(--signal); } /* ── Proof chips ── */ html[data-theme-family="taller"] .sf-proof { border-radius: var(--r-taller); background: color-mix(in oklab, var(--text) 5%, transparent); border: 1px solid color-mix(in oklab, var(--text) 14%, transparent); color: var(--muted); } html[data-theme-family="taller"] .sf-proof i { color: var(--signal); } /* ════════════════════════════════════════════════════════════════════ PANEL DE SEGUIMIENTO DE ORDEN — pieza estrella del rubro. Tablero técnico prominente: campo mono, placa de N° y botón de señal. ════════════════════════════════════════════════════════════════════ */ html[data-theme-family="taller"] .sf-track-hero { margin-top: 28px; border-radius: var(--r-taller-lg); background: color-mix(in oklab, var(--bg-2) 82%, transparent); border: 1px solid color-mix(in oklab, var(--text) 20%, transparent); box-shadow: var(--shadow-pop); position: relative; overflow: hidden; } /* Cinta de señal superior (safety tape) */ html[data-theme-family="taller"] .sf-track-hero::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: repeating-linear-gradient( -45deg, var(--signal) 0 10px, var(--bg) 10px 20px ); opacity: .9; } html[data-theme-family="taller"] .sf-track-hero-label { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .1em; font-size: .74rem; color: var(--signal); } html[data-theme-family="taller"] .sf-thr-hash { border-radius: var(--r-taller); background: rgba(246, 167, 34, .12); border: 1px solid rgba(246, 167, 34, .3); color: var(--signal); } html[data-theme-family="taller"] .sf-track-hero-row input { border-radius: var(--r-taller); background: color-mix(in oklab, var(--bg) 70%, transparent); border: 1px solid color-mix(in oklab, var(--text) 18%, transparent); color: var(--text); font-family: var(--font-mono); letter-spacing: .04em; } html[data-theme-family="taller"] .sf-track-hero-row input::placeholder { color: color-mix(in oklab, var(--muted) 70%, transparent); } html[data-theme-family="taller"] .sf-track-hero-row input:focus { border-color: var(--signal); box-shadow: 0 0 0 3px rgba(246, 167, 34, .18); } /* ════════════════════════════════════════════════════════════════════ PROCESO — los 5 pasos del flujo de reparación, claros y numerados. Conectados por una línea técnica; número en placa mono. ════════════════════════════════════════════════════════════════════ */ html[data-theme-family="taller"] .sf-process { gap: 14px; position: relative; } html[data-theme-family="taller"] .sf-process-step { border-radius: var(--r-taller-lg); background: color-mix(in oklab, var(--bg-1) 50%, transparent); border: 1px solid var(--line); border-top: 2px solid rgba(246, 167, 34, .28); transition: border-color .2s, box-shadow .2s, transform .2s; } html[data-theme-family="taller"] .sf-process-step:hover { border-color: color-mix(in oklab, var(--text) 30%, transparent); border-top-color: var(--signal); box-shadow: var(--edge-signal); transform: translateY(-3px); } html[data-theme-family="taller"] .sf-process-n { font-family: var(--font-mono); font-weight: 600; color: var(--signal); } html[data-theme-family="taller"] .sf-process-n::before { content: "0"; } html[data-theme-family="taller"] .sf-process-ic { border-radius: var(--r-taller); background: color-mix(in oklab, var(--text) 8%, transparent); border: 1px solid color-mix(in oklab, var(--text) 20%, transparent); color: var(--muted); } html[data-theme-family="taller"] .sf-process-step:hover .sf-process-ic { background: rgba(246, 167, 34, .14); border-color: rgba(246, 167, 34, .4); color: var(--signal); } html[data-theme-family="taller"] .sf-process-step strong { font-family: var(--font-display); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; font-size: .92rem; } /* ════════════════════════════════════════════════════════════════════ BOTONES — primario = señal ámbar sólido · secundario = filo de acero ════════════════════════════════════════════════════════════════════ */ html[data-theme-family="taller"] .sf-btn-primary, html[data-theme-family="taller"] .sf-btn-secondary, html[data-theme-family="taller"] .sf-chip-link { border-radius: var(--r-taller) !important; font-family: var(--font-display); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; } html[data-theme-family="taller"] .sf-btn-primary { background: linear-gradient(180deg, var(--signal) 0%, var(--signal-2) 100%); color: #14100A; border: 1px solid rgba(246, 167, 34, .7); box-shadow: 0 2px 0 rgba(120, 70, 0, .5), 0 12px 26px rgba(246, 167, 34, .26); } html[data-theme-family="taller"] .sf-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 2px 0 rgba(120, 70, 0, .5), 0 16px 34px rgba(255, 138, 31, .4); } html[data-theme-family="taller"] .sf-btn-secondary { background: color-mix(in oklab, var(--text) 12%, transparent); border: 1px solid color-mix(in oklab, var(--text) 44%, transparent); color: var(--text); } html[data-theme-family="taller"] .sf-btn-secondary:hover { background: color-mix(in oklab, var(--text) 12%, transparent); border-color: var(--muted); color: var(--text); } html[data-theme-family="taller"] .sf-chip-link { background: rgba(246, 167, 34, .1); border: 1px solid rgba(246, 167, 34, .3); color: var(--signal); } html[data-theme-family="taller"] .sf-chip-link:hover { background: rgba(246, 167, 34, .18); border-color: var(--signal); } /* ════════════════════════════════════════════════════════════════════ SECCIONES — encabezado con regla técnica de acero ════════════════════════════════════════════════════════════════════ */ html[data-theme-family="taller"] .sf-section-head { border-bottom: 1px solid var(--line); padding-bottom: 16px; } /* ════════════════════════════════════════════════════════════════════ CARDS DE SERVICIO / PRODUCTO — placa de acero, filo señal en hover ════════════════════════════════════════════════════════════════════ */ html[data-theme-family="taller"] .sf-card { border-radius: var(--r-taller-lg); background: color-mix(in oklab, var(--bg-1) 55%, transparent); border: 1px solid var(--line); box-shadow: var(--shadow-card); transition: transform .25s cubic-bezier(.4, 0, .2, 1), border-color .25s, box-shadow .25s; } html[data-theme-family="taller"] .sf-card:hover { transform: translateY(-5px); border-color: rgba(246, 167, 34, .45); box-shadow: var(--edge-signal), 0 26px 58px color-mix(in oklab, var(--bg) 50%, transparent); } html[data-theme-family="taller"] .sf-card-image { background: radial-gradient(circle at 50% 120%, rgba(74, 90, 112, .22), transparent 60%), var(--bg-2); } html[data-theme-family="taller"] .sf-card .price { font-family: var(--font-mono); font-weight: 600; letter-spacing: -.01em; color: var(--signal); } html[data-theme-family="taller"] .sf-price-side small { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .1em; font-size: .6rem; color: var(--muted); } /* ── Badges / tags: placa mono, filo de acero / señal ── */ html[data-theme-family="taller"] .sf-badge { border-radius: var(--r-taller); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .06em; font-size: .66rem; background: color-mix(in oklab, var(--bg) 84%, transparent); border: 1px solid color-mix(in oklab, var(--text) 30%, transparent); color: var(--muted); } html[data-theme-family="taller"] .sf-card-tag { border-radius: var(--r-taller); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .06em; background: linear-gradient(180deg, var(--signal), var(--signal-2)); color: #14100A; box-shadow: 0 2px 10px rgba(246, 167, 34, .4); } /* ════════════════════════════════════════════════════════════════════ QUICK / BENEFIT CARDS — tarjetas técnicas, icono en placa de acero ════════════════════════════════════════════════════════════════════ */ html[data-theme-family="taller"] .sf-quick-card, html[data-theme-family="taller"] .sf-benefit { border-radius: var(--r-taller-lg); background: color-mix(in oklab, var(--bg-1) 50%, transparent); border: 1px solid var(--line); transition: transform .22s, border-color .22s, box-shadow .22s; } html[data-theme-family="taller"] .sf-quick-card:hover, html[data-theme-family="taller"] .sf-benefit:hover { transform: translateY(-4px); border-color: rgba(246, 167, 34, .42); box-shadow: var(--edge-signal); } html[data-theme-family="taller"] .sf-quick-icon, html[data-theme-family="taller"] .sf-benefit-icon { border-radius: var(--r-taller); background: color-mix(in oklab, var(--text) 14%, transparent); border: 1px solid color-mix(in oklab, var(--text) 22%, transparent); color: var(--signal); } /* ════════════════════════════════════════════════════════════════════ PERFILES SECUNDARIOS — coherencia técnica en sus primitivas ════════════════════════════════════════════════════════════════════ */ html[data-theme-family="taller"] .sf-despensa-search, html[data-theme-family="taller"] .sf-list-row, html[data-theme-family="taller"] .sf-shelf-tile { border-radius: var(--r-taller-lg); border: 1px solid var(--line); background: color-mix(in oklab, var(--bg-1) 60%, transparent); } html[data-theme-family="taller"] .sf-list-row:hover, html[data-theme-family="taller"] .sf-shelf-tile:hover { border-color: var(--signal); box-shadow: var(--edge-signal); } html[data-theme-family="taller"] .sf-shelf-ic, html[data-theme-family="taller"] .sf-list-ic, html[data-theme-family="taller"] .sf-promo-ic { border-radius: var(--r-taller); background: color-mix(in oklab, var(--text) 16%, transparent); color: var(--signal); } html[data-theme-family="taller"] .sf-list-price { font-family: var(--font-mono); color: var(--signal); } html[data-theme-family="taller"] .sf-list-add, html[data-theme-family="taller"] .sf-promo-band .sf-wa-btn { border-radius: var(--r-taller); background: linear-gradient(180deg, var(--signal), var(--signal-2)); color: #14100A; } html[data-theme-family="taller"] .sf-promo-band { border-radius: var(--r-taller-lg); border: 1px solid rgba(246, 167, 34, .26); background: linear-gradient(120deg, rgba(246, 167, 34, .1), color-mix(in oklab, var(--bg-1) 70%, transparent)); } html[data-theme-family="taller"] .sf-dp-pill { border-radius: var(--r-taller); background: color-mix(in oklab, var(--text) 6%, transparent); border: 1px solid color-mix(in oklab, var(--text) 20%, transparent); } html[data-theme-family="taller"] .sf-dp-pill i, html[data-theme-family="taller"] .sf-despensa-kicker { color: var(--signal); } html[data-theme-family="taller"] .sf-editorial-img { border-radius: var(--r-taller-lg); border: 1px solid color-mix(in oklab, var(--text) 20%, transparent); box-shadow: var(--shadow-card); } html[data-theme-family="taller"] .sf-editorial-meta i { color: var(--signal); } /* ════════════════════════════════════════════════════════════════════ FOOTER — placa de acero con hairline ámbar ════════════════════════════════════════════════════════════════════ */ html[data-theme-family="taller"] footer { background: var(--bg-1) !important; border-top: 1px solid rgba(246, 167, 34, .22) !important; } html[data-theme-family="taller"] footer h4 { font-family: var(--font-display) !important; text-transform: uppercase; letter-spacing: .1em !important; color: var(--muted) !important; } /* ── Scrollbar de acero con tope de señal ── */ html[data-theme-family="taller"] ::-webkit-scrollbar { width: 10px; height: 10px; } html[data-theme-family="taller"] ::-webkit-scrollbar-track { background: var(--bg-1); } html[data-theme-family="taller"] ::-webkit-scrollbar-thumb { border-radius: var(--r-taller); background: var(--steel); border: 2px solid var(--bg-1); } html[data-theme-family="taller"] ::-webkit-scrollbar-thumb:hover { background: var(--signal); } /* ── Selección de texto ── */ html[data-theme-family="taller"] ::selection { background: rgba(246, 167, 34, .3); color: var(--text); } /* ════════════════════════════════════════════════════════════════════ CATALOG / MENU PERSONALITY — tarjetas técnicas con hairlines de blueprint, chips ámbar activos, títulos condensados en mayúsculas, sensación de número de pieza en mono para precios. ════════════════════════════════════════════════════════════════════ */ /* ── Catálogo: wrapper y cabecera ── */ html[data-theme-family="taller"] .cat-wrap { background: var(--bg); } html[data-theme-family="taller"] .cat-head { border-bottom: 1px solid var(--line); padding-bottom: 16px; } html[data-theme-family="taller"] .cat-eyebrow { font-family: var(--font-mono); letter-spacing: .12em; text-transform: uppercase; font-size: .72rem; color: var(--signal); } html[data-theme-family="taller"] .cat-title { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--text); } html[data-theme-family="taller"] .cat-sub { color: var(--muted); font-family: var(--font-body); } /* ── Toolbar: búsqueda y controles ── */ html[data-theme-family="taller"] .cat-toolbar { border: 1px solid var(--line); border-radius: var(--r-taller-lg); background: color-mix(in oklab, var(--bg-1) 80%, transparent); } html[data-theme-family="taller"] .cat-search input { background: color-mix(in oklab, var(--bg) 70%, transparent); border: 1px solid var(--line); border-radius: var(--r-taller); color: var(--text); font-family: var(--font-mono); letter-spacing: .02em; } html[data-theme-family="taller"] .cat-search input::placeholder { color: color-mix(in oklab, var(--muted) 70%, transparent); font-family: var(--font-mono); } html[data-theme-family="taller"] .cat-search input:focus { border-color: var(--signal); box-shadow: 0 0 0 3px rgba(246, 167, 34, .16); outline: none; } html[data-theme-family="taller"] .cat-view button { border-radius: var(--r-taller); border: 1px solid var(--line); color: var(--muted); background: transparent; transition: background .15s, color .15s, border-color .15s; } html[data-theme-family="taller"] .cat-view button:hover { background: color-mix(in oklab, var(--text) 8%, transparent); color: var(--text); } html[data-theme-family="taller"] .cat-view button.active { background: rgba(246, 167, 34, .14); border-color: rgba(246, 167, 34, .42); color: var(--signal); } /* ── Chips de filtro: estilo placa técnica ── */ html[data-theme-family="taller"] .cat-chip { border-radius: var(--r-taller); border: 1px solid var(--line); background: color-mix(in oklab, var(--bg-2) 80%, transparent); color: var(--muted); font-family: var(--font-display); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; font-size: .76rem; transition: background .15s, border-color .15s, color .15s; } html[data-theme-family="taller"] .cat-chip:hover { background: color-mix(in oklab, var(--text) 8%, transparent); border-color: color-mix(in oklab, var(--text) 28%, transparent); color: var(--text); } html[data-theme-family="taller"] .cat-chip.active { background: rgba(246, 167, 34, .14); border-color: rgba(246, 167, 34, .48); color: var(--signal); box-shadow: 0 0 0 1px rgba(246, 167, 34, .16); } html[data-theme-family="taller"] .cat-count { font-family: var(--font-mono); font-size: .72rem; color: var(--muted); letter-spacing: .04em; } /* ── Product cards: placa técnica con hairline blueprint ── */ html[data-theme-family="taller"] .cat-grid { gap: 14px; } html[data-theme-family="taller"] .pcard { border-radius: var(--r-taller-lg); background: var(--bg-1); border: 1px solid var(--line); box-shadow: var(--shadow-card); transition: transform .22s cubic-bezier(.4,0,.2,1), border-color .22s, box-shadow .22s; position: relative; overflow: hidden; } /* Hairline blueprint superior en cada pcard */ html[data-theme-family="taller"] .pcard::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: repeating-linear-gradient( 90deg, color-mix(in oklab, var(--text) 12%, transparent) 0 4px, transparent 4px 8px ); opacity: .7; transition: background .22s; } html[data-theme-family="taller"] .pcard:hover { transform: translateY(-4px); border-color: rgba(246, 167, 34, .48); box-shadow: var(--edge-signal); } html[data-theme-family="taller"] .pcard:hover::before { background: repeating-linear-gradient( 90deg, rgba(246, 167, 34, .55) 0 4px, transparent 4px 8px ); } html[data-theme-family="taller"] .pcard-img { border-bottom: 1px solid var(--line); background: var(--bg-2); } /* pcard-cat: override the hardcoded dark rgba in catalog.html */ html[data-theme-family="taller"] .pcard-cat { background: color-mix(in oklab, var(--bg) 82%, transparent) !important; color: var(--muted) !important; font-family: var(--font-mono); font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; border-radius: var(--r-taller); border: 1px solid var(--line); } html[data-theme-family="taller"] .pcard h3 { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--text); font-size: .92rem; line-height: 1.2; } html[data-theme-family="taller"] .pcard-desc { color: var(--muted); font-size: .83rem; line-height: 1.5; } /* Price: número de pieza en mono, ámbar */ html[data-theme-family="taller"] .pcard-price { font-family: var(--font-mono); font-weight: 600; color: var(--signal); letter-spacing: -.01em; font-size: 1.05rem; } html[data-theme-family="taller"] .pcard-more { border-radius: var(--r-taller); background: rgba(246, 167, 34, .1); border: 1px solid rgba(246, 167, 34, .32); color: var(--signal); font-family: var(--font-display); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-size: .8rem; transition: background .15s, box-shadow .15s; } html[data-theme-family="taller"] .pcard-more:hover { background: rgba(246, 167, 34, .18); box-shadow: 0 0 0 1px rgba(246, 167, 34, .42); } html[data-theme-family="taller"] .pcard-stock { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; } /* Stock badge overrides (hardcoded in catalog.html) */ html[data-theme-family="taller"] .s-ok { background: rgba(34, 197, 94, .14) !important; color: #16a34a !important; border: 1px solid rgba(34, 197, 94, .3) !important; } html[data-theme-family="taller"].dark .s-ok { background: rgba(34, 197, 94, .14) !important; color: #4ade80 !important; border: 1px solid rgba(34, 197, 94, .3) !important; } html[data-theme-family="taller"] .s-warn { background: rgba(246, 167, 34, .14) !important; color: #b45309 !important; border: 1px solid rgba(246, 167, 34, .3) !important; } html[data-theme-family="taller"].dark .s-warn { background: rgba(246, 167, 34, .14) !important; color: var(--signal) !important; border: 1px solid rgba(246, 167, 34, .3) !important; } html[data-theme-family="taller"] .s-bad { background: rgba(239, 68, 68, .12) !important; color: #dc2626 !important; border: 1px solid rgba(239, 68, 68, .28) !important; } html[data-theme-family="taller"].dark .s-bad { background: rgba(239, 68, 68, .14) !important; color: #f87171 !important; border: 1px solid rgba(239, 68, 68, .3) !important; } /* ── Empty state ── */ html[data-theme-family="taller"] .cat-empty { color: var(--muted); font-family: var(--font-mono); letter-spacing: .04em; } /* ── Product modal ── */ html[data-theme-family="taller"] .product-modal-card { border-radius: var(--r-taller-lg); background: var(--bg-1); border: 1px solid var(--line); box-shadow: var(--shadow-pop); } html[data-theme-family="taller"] .product-modal-media { border-radius: var(--r-taller); border: 1px solid var(--line); background: var(--bg-2); } html[data-theme-family="taller"] .product-modal-cat { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } html[data-theme-family="taller"] .product-modal-title { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: .02em; color: var(--text); } html[data-theme-family="taller"] .product-modal-price { font-family: var(--font-mono); font-weight: 600; color: var(--signal); font-size: 1.4rem; letter-spacing: -.01em; } html[data-theme-family="taller"] .product-modal-cart { border-radius: var(--r-taller); background: linear-gradient(180deg, var(--signal) 0%, var(--signal-2) 100%); color: #14100A; border: 1px solid rgba(246, 167, 34, .7); font-family: var(--font-display); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; box-shadow: 0 2px 0 rgba(120, 70, 0, .4), 0 8px 20px rgba(246, 167, 34, .24); transition: transform .15s, box-shadow .15s; } html[data-theme-family="taller"] .product-modal-cart:hover { transform: translateY(-1px); box-shadow: 0 2px 0 rgba(120, 70, 0, .4), 0 12px 28px rgba(255, 138, 31, .38); } html[data-theme-family="taller"] .product-modal-close { border-radius: var(--r-taller); border: 1px solid var(--line); background: color-mix(in oklab, var(--text) 6%, transparent); color: var(--muted); transition: background .15s, color .15s; } html[data-theme-family="taller"] .product-modal-close:hover { background: color-mix(in oklab, var(--text) 14%, transparent); color: var(--text); } /* ════════════════════════════════════════════════════════════════════ MENU PERSONALITY — misma firma técnica aunque el rubro no sea restaurante; usa las mismas hairlines y tokens. ════════════════════════════════════════════════════════════════════ */ html[data-theme-family="taller"] .menu-wrap { background: var(--bg); } html[data-theme-family="taller"] .menu-copy { background: color-mix(in oklab, var(--bg-1) 80%, transparent); border: 1px solid var(--line); border-radius: var(--r-taller-lg); } html[data-theme-family="taller"] .menu-title { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text); } html[data-theme-family="taller"] .menu-kicker { font-family: var(--font-mono); letter-spacing: .12em; text-transform: uppercase; font-size: .72rem; color: var(--signal); } html[data-theme-family="taller"] .menu-side { border-radius: var(--r-taller-lg); border: 1px solid var(--line); background: color-mix(in oklab, var(--bg-1) 70%, transparent); box-shadow: var(--shadow-card); } html[data-theme-family="taller"] .menu-pill { border-radius: var(--r-taller); background: rgba(246, 167, 34, .1); border: 1px solid rgba(246, 167, 34, .3); color: var(--signal); font-family: var(--font-mono); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; } html[data-theme-family="taller"] .menu-nav a { font-family: var(--font-display); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; font-size: .82rem; color: var(--muted); border-radius: var(--r-taller); transition: background .15s, color .15s; padding: 4px 10px; } html[data-theme-family="taller"] .menu-nav a:hover { background: color-mix(in oklab, var(--text) 8%, transparent); color: var(--text); } html[data-theme-family="taller"] .menu-section { border-top: 1px solid var(--line); padding-top: 16px; margin-top: 8px; } html[data-theme-family="taller"] .menu-section h2 { font-family: var(--font-mono); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; font-size: .74rem; color: var(--signal); } html[data-theme-family="taller"] .menu-item { border-radius: var(--r-taller-lg); background: var(--bg-1); border: 1px solid var(--line); box-shadow: var(--shadow-card); transition: transform .2s, border-color .2s, box-shadow .2s; } html[data-theme-family="taller"] .menu-item:hover { transform: translateY(-3px); border-color: rgba(246, 167, 34, .42); box-shadow: var(--edge-signal); } html[data-theme-family="taller"] .menu-img { border-radius: var(--r-taller); border: 1px solid var(--line); background: var(--bg-2); } html[data-theme-family="taller"] .menu-name { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; font-size: .9rem; color: var(--text); } html[data-theme-family="taller"] .menu-price { font-family: var(--font-mono); font-weight: 600; color: var(--signal); letter-spacing: -.01em; } html[data-theme-family="taller"] .menu-empty { color: var(--muted); font-family: var(--font-mono); letter-spacing: .04em; } /* ════════════════════════════════════════════════════════════════════ MOTION + RESPONSIVE ════════════════════════════════════════════════════════════════════ */ @media (prefers-reduced-motion: reduce) { html[data-theme-family="taller"] .sf-kicker-dot { animation: none; } html[data-theme-family="taller"] .pcard, html[data-theme-family="taller"] .pcard:hover, html[data-theme-family="taller"] .sf-card, html[data-theme-family="taller"] .sf-card:hover, html[data-theme-family="taller"] .menu-item, html[data-theme-family="taller"] .menu-item:hover { transform: none; transition: none; } } @media (max-width: 720px) { html[data-theme-family="taller"] .sf-title { font-size: clamp(2rem, 12vw, 3.2rem); } } /* ── Ficha de producto (.pd-*) — taller/blueprint, foco servicio (perfil taller) ── */ html[data-theme-family="taller"] .pd-media { aspect-ratio: 1; border-radius: var(--r-taller-lg); border: 1px solid var(--line); position: relative; } html[data-theme-family="taller"] .pd-media::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: repeating-linear-gradient(90deg, rgba(246,167,34,.5) 0 4px, transparent 4px 8px); opacity: .7; z-index: 1; } html[data-theme-family="taller"] .pd-title { font-family: var(--font-display); } html[data-theme-family="taller"] .pd-spec { border-radius: 10px; } html[data-theme-family="taller"] .pd-price { color: var(--cta, var(--brand)); } html[data-theme-family="taller"] .sf-variant-btn { border-radius: 8px; } html[data-theme-family="taller"] .sf-variant-btn.active { background: var(--brand); color: #fff; } /* === Contraste/legibilidad por perfil (WCAG, auto) === */ html[data-theme-family="taller"]:not(.dark) { --on-brand:#191919; --price:#996815; --brand-soft:#838E9C; } html[data-theme-family="taller"].dark { --on-brand:#191919; --price:#F6A722; } html[data-theme-family="taller"] .sf-variant-btn.active { color: var(--on-brand, #fff); } html[data-theme-family="taller"] .pd-price { color: var(--price, var(--cta, var(--brand))); } /* === Taller de ELECTRÓNICA por RAMA OPERATIVA (operational_branch) === Mecánica/refrigeración = look base (acero + ámbar + blueprint). Móviles y electrodomésticos = mismo formato, acento cian/tech + hairline tipo circuito, para que un service de celulares/equipos no lea "mecánica". Se activa por data-branch (la API expone operational_branch del tenant). */ html[data-theme-family="taller"][data-branch="moviles_celulares"], html[data-theme-family="taller"][data-branch="electrodomesticos"] { --brand: #2BA3C4; --brand-dark: #1B7E9B; --brand-soft: #6FD0E6; --cta: #22B8D6; --accent: #22B8D6; --signal: #22B8D6; --signal-2: #1B9FBE; --cta-soft: rgba(34,184,214,.14); } html[data-theme-family="taller"][data-branch="moviles_celulares"] .sf-btn-primary, html[data-theme-family="taller"][data-branch="electrodomesticos"] .sf-btn-primary { color: #04222B; border-color: rgba(34,184,214,.7); box-shadow: 0 2px 0 rgba(0,60,80,.4), 0 12px 26px rgba(34,184,214,.28); } html[data-theme-family="taller"][data-branch="moviles_celulares"]:not(.dark), html[data-theme-family="taller"][data-branch="electrodomesticos"]:not(.dark) { --price: #0E7C90; } html[data-theme-family="taller"][data-branch="moviles_celulares"].dark, html[data-theme-family="taller"][data-branch="electrodomesticos"].dark { --price: #3CD8EF; } html[data-theme-family="taller"][data-branch="moviles_celulares"] .pcard::before, html[data-theme-family="taller"][data-branch="moviles_celulares"] .pd-media::before, html[data-theme-family="taller"][data-branch="electrodomesticos"] .pcard::before, html[data-theme-family="taller"][data-branch="electrodomesticos"] .pd-media::before { background: repeating-linear-gradient(90deg, rgba(34,184,214,.55) 0 4px, transparent 4px 8px); } html[data-theme-family="taller"][data-branch="moviles_celulares"] .pcard:hover, html[data-theme-family="taller"][data-branch="electrodomesticos"] .pcard:hover { border-color: rgba(34,184,214,.5); } html[data-theme-family="taller"][data-branch="moviles_celulares"] .sf-slider-dot.is-active, html[data-theme-family="taller"][data-branch="electrodomesticos"] .sf-slider-dot.is-active { background: #22B8D6; }