/* ============================================================================ EKIPATE · MOTOR DE IDENTIDAD POR CLUB · PKG-EK-W1-03 ---------------------------------------------------------------------------- Dos colores por micrositio sobre paleta neutra fija, con derivación automática (color-mix) y contraste WCAG AA validado (fallback a neutro). Materializa D-145 / D-155. Generaliza el patrón html[data-accent] del provisional (UN acento, derivados a mano) → DOS colores, derivación sola. CONTRATO COMPLETO Y FRONTERA: docs/contrato-identidad-club.md (v1.0). Es la "superficie de personalización" — base del futuro MCP (D-157). ┌── PERSONALIZABLE (lo que EK-B3/B4 inyecta por club; ver §2 del contrato) ─┐ │ --ekp-club-primary principal (color CSS) OBLIGATORIA │ │ --ekp-club-secondary secundario (color CSS) OBLIGATORIA │ │ --ekp-club-on-primary texto sobre primary (precalc. WCAG en PHP) │ │ --ekp-club-on-secondary texto sobre secondary (precalc. WCAG) │ │ --ekp-club-primary-usable 1 | 0 (0 = fallback a neutro) │ │ --ekp-club-secondary-usable 1 | 0 │ └──────────────────────────────────────────────────────────────────────────┘ TODO lo demás (neutros, tipografía, escala, radios, transiciones y las derivadas --_ekp-c* de abajo) es ESTRUCTURAL e INTOCABLE. ============================================================================ */ /* ── DEFAULTS EKIPATE ──────────────────────────────────────────────────────── El "club por defecto" es Ekipate (cobre + verde). Si EK-B3 no inyecta nada, el micrositio luce la marca. on-* validados: cobre→negro 5.26:1 (¡blanco falla, 3.76:1!), verde→blanco 5.41:1. Ver tabla §6 del contrato. */ :root { --ekp-club-primary: var(--ekp-accent, #c96a2e); --ekp-club-secondary: var(--ekp-green, #1b7a34); --ekp-club-on-primary: #0a0a0a; /* cobre → texto oscuro */ --ekp-club-on-secondary: #ffffff; /* verde → texto claro */ --ekp-club-primary-usable: 1; --ekp-club-secondary-usable: 1; } /* ── DERIVACIÓN AUTOMÁTICA (Step 2) ────────────────────────────────────────── Solo color-mix sobre las 2 variables base — cero tonos definidos a mano. Se declara en :root (defaults) y en .ekp-club-scope (por club): las custom properties con var() se recomputan en el nivel donde se declaran, así cada scope deriva con SU color. */ :root, .ekp-club-scope { /* — PRINCIPAL — */ --_ekp-cp-hover: color-mix(in oklab, var(--ekp-club-primary), #000 14%); --_ekp-cp-soft: color-mix(in oklab, var(--ekp-club-primary) 14%, var(--ekp-surface-body, #f2f1ec)); --_ekp-cp-glow: color-mix(in srgb, var(--ekp-club-primary) 22%, transparent); --_ekp-cp-border: color-mix(in srgb, var(--ekp-club-primary) 38%, transparent); --_ekp-cp-on: var(--ekp-club-on-primary, #fff); /* — SECUNDARIO — */ --_ekp-cs-hover: color-mix(in oklab, var(--ekp-club-secondary), #000 14%); --_ekp-cs-soft: color-mix(in oklab, var(--ekp-club-secondary) 14%, var(--ekp-surface-body, #f2f1ec)); --_ekp-cs-glow: color-mix(in srgb, var(--ekp-club-secondary) 22%, transparent); --_ekp-cs-border: color-mix(in srgb, var(--ekp-club-secondary) 38%, transparent); --_ekp-cs-on: var(--ekp-club-on-secondary, #fff); /* — FONDO/TEXTO EFECTIVOS con fallback a neutro (Step 3, capa 3) — El flag -usable (1|0) mezcla el color con el neutro: 1 = color pleno; 0 = el color desaparece como fondo y entra el neutro legible. CSS puro, sin JS ni clases: cambiar el flag a 0 degrada el componente solo. */ --_ekp-cp-bg: color-mix(in srgb, var(--ekp-club-primary) calc(var(--ekp-club-primary-usable, 1) * 100%), var(--ekp-ink, #111)); --_ekp-cp-fg: color-mix(in srgb, var(--_ekp-cp-on) calc(var(--ekp-club-primary-usable, 1) * 100%), var(--ekp-bone, #efebe3)); --_ekp-cs-bg: color-mix(in srgb, var(--ekp-club-secondary) calc(var(--ekp-club-secondary-usable, 1) * 100%), var(--ekp-ink, #111)); --_ekp-cs-fg: color-mix(in srgb, var(--_ekp-cs-on) calc(var(--ekp-club-secondary-usable, 1) * 100%), var(--ekp-bone, #efebe3)); } /* ── CONTRASTE · capa 2: mejora progresiva (Step 3) ────────────────────────── Navegadores con contrast-color() (Baseline abr-2026: Chrome 147+, FF 146+, Safari 26+) eligen el texto on-color EN CSS, garantizando AA aunque el plugin no precalcule. Donde no existe, manda el precálculo PHP (--ekp-club-on-*). */ @supports (color: contrast-color(red)) { :root, .ekp-club-scope { --_ekp-cp-on: contrast-color(var(--ekp-club-primary)); --_ekp-cs-on: contrast-color(var(--ekp-club-secondary)); } } /* ── REMAPEO DE SCOPE (restyle, don't redraw) ──────────────────────────────── Dentro del micrositio, los acentos del SISTEMA apuntan a los colores del club: todo componente que ya usa --ekp-accent/--ekp-green respira el color del club sin reescribirlo. Es el html[data-accent] del provisional, ahora con 2 colores y contraste validado. */ .ekp-club-scope { --ekp-accent: var(--ekp-club-primary); --ekp-accent-hover: var(--_ekp-cp-hover); --ekp-accent-soft: var(--_ekp-cp-soft); --ekp-accent-glow: var(--_ekp-cp-glow); --ekp-green: var(--ekp-club-secondary); --ekp-green-hover: var(--_ekp-cs-hover); /* -- v1.1 · REMAPEO EXTENDIDO on-light (PKG-EK-W1-09 · step 1) ----------- Los componentes de tienda C/D/E beben EN DIRECTO de la escala --ekp-copper-* y de alias semanticos (--ekp-text-accent, --ekp-ctx-accent, etc.) declarados en :root y congelados en cobre: una custom property con var() se computa donde se declara y NO se re-resuelve en cascada. El remapeo v1.0 solo cubria --ekp-accent/--ekp-green, por eso el cuerpo de tienda quedaba cobre. Aqui re-resolvemos toda la familia de tokens-puente al color del club, apuntando a club-primary y a las derivadas --_ekp-c* ya calculadas. NO se reescribe color-mix ni las 3 capas de contraste; el bloque vive solo bajo .ekp-club-scope, asi que el generico Ekipate (fuera del scope) permanece en cobre. */ --ekp-copper-500: var(--ekp-club-primary); --ekp-copper-600: var(--_ekp-cp-hover); --ekp-copper-700: color-mix(in oklab, var(--ekp-club-primary), #000 26%); --ekp-copper-glow: var(--_ekp-cp-glow); --ekp-text-accent: var(--ekp-club-primary); --ekp-border-accent: var(--_ekp-cp-border); --ekp-accent-contrast: var(--_ekp-cp-on); --ekp-focus-ring: var(--ekp-club-primary); --ekp-ctx-accent: var(--ekp-club-primary); /* registro on-light (cuerpo) */ --ekp-glow-accent: 0 0 0 1px color-mix(in srgb, var(--ekp-club-primary) 40%, transparent), 0 8px 28px -8px color-mix(in srgb, var(--ekp-club-primary) 45%, transparent); --ekp-glow-accent-sm: 0 4px 16px -6px color-mix(in srgb, var(--ekp-club-primary) 50%, transparent); /* -- v1.1 · registro ON-DARK del club (chrome) · AA garantizado (step 2, A2) - Acento del club para TEXTO sobre chrome oscuro (--ekp-ink-900). El primary crudo de un club saturado no siempre alcanza AA sobre negro (Gallarta #d00f2a da 3.57:1, FALLA): se aclara hacia blanco lo minimo para superar AA >= 4.5:1 preservando el tono (Gallarta -> ~#e05756, 5.34:1 medido, sigue rojo). Aclarado FIJO (CSS puro, sin condicional): inocuo para los ya conformes; un primary casi-negro se cierra VIENDO en G. Red de seguridad: el default generico --ekp-accent-on-dark (#e8965a, 5.26:1) queda INTACTO fuera del scope. El registro chrome de --ekp-ctx-* (ekp-store-components) ya consume --ekp-accent-on-dark, asi que el chrome del club hereda este on-dark sin reescribir ese registro. */ --_ekp-cp-on-dark: color-mix(in oklab, var(--ekp-club-primary) 80%, #fff); --ekp-accent-on-dark: var(--_ekp-cp-on-dark); } /* ============================================================================ COMPONENTES DE MICROSITIO (materialización visual de los 2 colores) Mínimos y enfocados a demostrar la identidad; se reutilizan en el chrome del micrositio (Fase 3). Todos consumen SOLO las variables del club/derivadas. ============================================================================ */ /* — Etiqueta superior (eyebrow) — */ .ekp-club-eyebrow { display: inline-block; font-family: var(--font-sans); font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ekp-club-primary); } /* — Botón principal (solid) — respira el color con texto on-color y fallback — */ .ekp-club-btn { display: inline-flex; align-items: center; gap: .5em; padding: .85em 1.6em; font-family: var(--font-sans); font-size: .95rem; font-weight: 600; line-height: 1; letter-spacing: .01em; border: 1px solid transparent; border-radius: var(--r-sm, 2px); background: var(--_ekp-cp-bg); color: var(--_ekp-cp-fg); cursor: pointer; transition: background var(--t-fast, 180ms ease), box-shadow var(--t-med, 240ms ease), transform var(--t-fast, 180ms ease); } .ekp-club-btn:hover { background: color-mix(in oklab, var(--_ekp-cp-bg), #000 12%); box-shadow: 0 8px 28px var(--_ekp-cp-glow); transform: translateY(-1px); } .ekp-club-btn:focus-visible { outline: 2px solid var(--ekp-club-primary); outline-offset: 2px; } /* — Botón secundario (outline) — el color como detalle, fondo neutro — */ .ekp-club-btn--outline { background: transparent; color: var(--ekp-club-primary); border-color: var(--_ekp-cp-border); } .ekp-club-btn--outline:hover { background: var(--_ekp-cp-soft); box-shadow: none; transform: translateY(-1px); } /* — Botón sobre el secundario — */ .ekp-club-btn--secondary { background: var(--_ekp-cs-bg); color: var(--_ekp-cs-fg); } .ekp-club-btn--secondary:hover { background: color-mix(in oklab, var(--_ekp-cs-bg), #000 12%); box-shadow: 0 8px 28px var(--_ekp-cs-glow); } /* — Cabecera del micrositio — fondo en el secundario, acentos en el principal — (para Gallarta: banda negra con detalle rojo; para Ekipate: verde + cobre) */ .ekp-club-header { position: relative; padding: var(--space-lg, 2.5rem) var(--space-lg, 2.5rem) var(--space-md, 1.5rem); background: var(--_ekp-cs-bg); color: var(--_ekp-cs-fg); border-radius: var(--r-lg, 8px) var(--r-lg, 8px) 0 0; overflow: hidden; } .ekp-club-header::after { /* filete del color principal */ content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--ekp-club-primary); } .ekp-club-header__name { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: clamp(1.6rem, 3vw, 2.4rem); line-height: 1.05; letter-spacing: -.01em; } .ekp-club-header__meta { margin-top: .35rem; font-family: var(--font-sans); font-size: .9rem; opacity: .82; } /* — Tarjeta de producto — hairline editorial, precio y hover en el color — */ .ekp-club-card { display: flex; flex-direction: column; background: var(--ekp-surface-body, #f2f1ec); border: 1px solid var(--ekp-line, #d9d3c6); border-radius: var(--r-md, 4px); overflow: hidden; transition: border-color var(--t-med, 240ms ease), box-shadow var(--t-med, 240ms ease), transform var(--t-med, 240ms ease); } .ekp-club-card:hover { border-color: var(--_ekp-cp-border); box-shadow: 0 12px 40px var(--_ekp-cp-glow); transform: translateY(-2px); } .ekp-club-card__media { aspect-ratio: 1 / 1; background: var(--_ekp-cp-soft); display: grid; place-items: center; color: var(--ekp-club-primary); font-family: var(--font-display); font-size: 2rem; } .ekp-club-card__body { padding: var(--space-sm, 1rem); display: flex; flex-direction: column; gap: .5rem; } .ekp-club-card__title { margin: 0; font-family: var(--font-sans); font-size: .98rem; font-weight: 600; color: var(--ekp-ink, #111); } .ekp-club-card__price { font-family: var(--font-sans); font-size: 1.05rem; font-weight: 700; font-variant-numeric: tabular-nums; /* precios que no "bailan" */ color: var(--ekp-club-primary); } /* — Chips de talla — borde hairline, hover teñido del club — */ .ekp-club-chip { display: inline-grid; place-items: center; min-width: 2.4em; padding: .4em .6em; font-family: var(--font-sans); font-size: .82rem; font-weight: 600; color: var(--ekp-ink, #111); background: transparent; border: 1px solid var(--ekp-line, #d9d3c6); border-radius: var(--r-sm, 2px); cursor: pointer; transition: border-color var(--t-fast, 180ms ease), background var(--t-fast, 180ms ease), color var(--t-fast, 180ms ease); } .ekp-club-chip:hover { border-color: var(--ekp-club-primary); background: var(--_ekp-cp-soft); } .ekp-club-chip[aria-pressed="true"], .ekp-club-chip.is-selected { background: var(--_ekp-cp-bg); color: var(--_ekp-cp-fg); border-color: transparent; }