/* * Asoc · probador de estética * * Cada preset es un selector de atributo: [data-paleta], [data-tipo], * [data-forma] y [data-fondo]. Puesto en cambia toda la página; * puesto en la muestra de una tarjeta, pinta solo esa muestra. Así cada * valor se define una sola vez. Las paletas pasan contraste AA. * * La combinación inicial (paleta actual-2, tipo afiche, fondo mosaico) sale * del flyer del Festival y la aprobó el cliente el 2026-09-27. */ /* 1 · Paletas */ /* 1.a · Del flyer (aprobada) */ [data-paleta="actual-2"] { --asoc-color-primary: #1E4B6E; --asoc-color-on-primary: #FFFFFF; --asoc-color-secondary: #B8322A; --asoc-color-ink: #1B2638; --asoc-color-ink-soft: #4A5468; --asoc-color-bg: #F6EEDC; --asoc-color-surface: #FFFFFF; } /* 1.b · Primer bosquejo */ [data-paleta="patio"] { --asoc-color-primary: #2E7D51; --asoc-color-on-primary: #FFFFFF; --asoc-color-secondary: #E4976C; --asoc-color-ink: #1F2A24; --asoc-color-ink-soft: #4A5850; --asoc-color-bg: #FBF8F2; --asoc-color-surface: #FFFFFF; } [data-paleta="tiza"] { --asoc-color-primary: #1F4E5A; --asoc-color-on-primary: #FFFFFF; --asoc-color-secondary: #F2C94C; --asoc-color-ink: #1B2428; --asoc-color-ink-soft: #46545A; --asoc-color-bg: #F4F1EA; --asoc-color-surface: #FFFFFF; } [data-paleta="kermes"] { --asoc-color-primary: #B83A2A; --asoc-color-on-primary: #FFFFFF; --asoc-color-secondary: #2A9D8F; --asoc-color-ink: #2B2021; --asoc-color-ink-soft: #5A4A4B; --asoc-color-bg: #FFF7EC; --asoc-color-surface: #FFFFFF; } [data-paleta="otono"] { --asoc-color-primary: #7A3E6B; --asoc-color-on-primary: #FFFFFF; --asoc-color-secondary: #D9A036; --asoc-color-ink: #2A2230; --asoc-color-ink-soft: #564C5C; --asoc-color-bg: #F7F2EE; --asoc-color-surface: #FFFFFF; } [data-paleta="fogon"] { --asoc-color-primary: #F4A259; --asoc-color-on-primary: #1D2A33; --asoc-color-secondary: #8CC5B8; --asoc-color-ink: #F1ECE2; --asoc-color-ink-soft: #C9C2B6; --asoc-color-bg: #1D2A33; --asoc-color-surface: #26363F; } /* 2 · Tipografías (las fuentes las carga probador.js) */ [data-tipo="afiche"] { --asoc-font-head: "Jost", system-ui, sans-serif; --asoc-font-body: "Jost", system-ui, sans-serif; } [data-tipo="ludica"] { --asoc-font-head: "Baloo 2", system-ui, sans-serif; --asoc-font-body: "Nunito", system-ui, sans-serif; } [data-tipo="editorial"] { --asoc-font-head: "Fraunces", Georgia, serif; --asoc-font-body: "Source Sans 3", system-ui, sans-serif; } [data-tipo="geometrica"] { --asoc-font-head: "Poppins", system-ui, sans-serif; --asoc-font-body: "Lato", system-ui, sans-serif; } [data-tipo="moderna"] { --asoc-font-head: "Space Grotesk", system-ui, sans-serif; --asoc-font-body: "Inter", system-ui, sans-serif; } /* 3 · Formas */ [data-forma="suave"] { --asoc-radio-tarjeta: 18px; --asoc-radio-boton: 14px; --asoc-borde: 0px; --asoc-sombra: 0 6px 18px rgb(0 0 0 / 0.08); } [data-forma="recta"] { --asoc-radio-tarjeta: 0px; --asoc-radio-boton: 0px; --asoc-borde: 2px; --asoc-sombra: none; } [data-forma="pastilla"] { --asoc-radio-tarjeta: 28px; --asoc-radio-boton: 999px; --asoc-borde: 0px; --asoc-sombra: 0 8px 22px rgb(0 0 0 / 0.1); } [data-forma="recorte"] { --asoc-radio-tarjeta: 6px 22px 8px 18px; --asoc-radio-boton: 4px 16px 6px 14px; --asoc-borde: 0px; --asoc-sombra: 4px 5px 0 color-mix(in srgb, var(--asoc-color-ink) 22%, transparent); } /* 4 · Fondos (cada uno fija dibujo, tamaño, posición y repetición) */ [data-fondo="liso"] { --asoc-fondo-dibujo: none; --asoc-fondo-tamano: auto; --asoc-fondo-posicion: 0 0; --asoc-fondo-repetir: repeat; } [data-fondo="confeti"] { --asoc-fondo-dibujo: radial-gradient(circle at 20% 30%, color-mix(in srgb, var(--asoc-color-secondary) 45%, transparent) 0 5px, transparent 6px), radial-gradient(circle at 70% 65%, color-mix(in srgb, var(--asoc-color-primary) 30%, transparent) 0 4px, transparent 5px), radial-gradient(circle at 45% 85%, color-mix(in srgb, var(--asoc-color-secondary) 30%, transparent) 0 3px, transparent 4px); --asoc-fondo-tamano: 72px 72px; --asoc-fondo-posicion: 0 0; --asoc-fondo-repetir: repeat; } [data-fondo="ondas"] { --asoc-fondo-dibujo: radial-gradient(circle at 50% 100%, transparent 16px, color-mix(in srgb, var(--asoc-color-secondary) 35%, transparent) 17px 19px, transparent 20px); --asoc-fondo-tamano: 40px 22px; --asoc-fondo-posicion: 0 0; --asoc-fondo-repetir: repeat; } [data-fondo="grilla"] { --asoc-fondo-dibujo: linear-gradient(color-mix(in srgb, var(--asoc-color-ink) 8%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--asoc-color-ink) 8%, transparent) 1px, transparent 1px); --asoc-fondo-tamano: 26px 26px; --asoc-fondo-posicion: 0 0; --asoc-fondo-repetir: repeat; } /* * Mosaico: la guarda de figuras en acuarela del flyer. No es un fondo CSS: * es un SVG (asoc_probador_mosaico_defs() en inc/probador.php) con degradé * por figura y un filtro que ablanda los bordes. Acá solo se prende la guarda * de la página y se fijan sus colores, que por defecto son los del afiche. */ [data-fondo="mosaico"] { --asoc-fondo-dibujo: none; --asoc-fondo-tamano: auto; --asoc-fondo-posicion: 0 0; --asoc-fondo-repetir: repeat; } .asoc-probador { --asoc-mosaico-violeta: #734D9E; --asoc-mosaico-naranja: #F0843C; --asoc-mosaico-amarillo: #FAD846; --asoc-mosaico-agua: #9ED4C4; --asoc-mosaico-azul: #7993D8; } .asoc-mosaico-defs { position: absolute; width: 0; height: 0; overflow: hidden; } .asoc-mosaico { display: block; width: 100%; height: 100%; } .asoc-mosaico--pagina { position: absolute; top: 0; left: 0; z-index: 0; display: none; height: 144px; pointer-events: none; } .asoc-probador[data-fondo="mosaico"] .asoc-mosaico--pagina { display: block; } /* Con Mosaico, el contenido arranca debajo de la guarda. */ .asoc-probador[data-fondo="mosaico"] .asoc-pagina { padding-top: 10rem; } /* 5 · Base */ .asoc-probador { /* La página empujada no puede generar scroll horizontal (también en iOS). */ overflow-x: hidden; --asoc-panel-ancho: clamp(180px, 50vw, 340px); --asoc-transicion: 0.45s cubic-bezier(0.2, 0.7, 0.2, 1); -webkit-text-size-adjust: 100%; } .asoc-probador *, .asoc-probador *::before, .asoc-probador *::after { box-sizing: border-box; } .asoc-probador body { margin: 0; overflow-x: hidden; overflow-x: clip; background-color: var(--asoc-color-bg); background-image: var(--asoc-fondo-dibujo); background-size: var(--asoc-fondo-tamano); background-position: var(--asoc-fondo-posicion); background-repeat: var(--asoc-fondo-repetir); color: var(--asoc-color-ink); font-family: var(--asoc-font-body); font-size: 1.0625rem; line-height: 1.6; transition: background-color var(--asoc-transicion), color var(--asoc-transicion); touch-action: pan-y; } .asoc-probador h1, .asoc-probador h2, .asoc-probador h3 { margin: 0 0 0.5em; font-family: var(--asoc-font-head); line-height: 1.15; } .asoc-probador h1 { font-size: clamp(2rem, 7vw, 2.75rem); } .asoc-probador h2 { font-size: 1.5rem; } .asoc-probador h3 { margin-top: 1.25rem; font-size: 1.125rem; } .asoc-probador p { margin: 0 0 1em; } .asoc-probador :focus-visible { outline: 3px solid var(--asoc-color-primary); outline-offset: 2px; } /* 6 · Página y empuje de los paneles */ .asoc-pagina { max-width: 560px; margin: 0 auto; /* Abajo deja lugar para las burbujas, que flotan sobre el final de la página. */ padding: 2rem 1.25rem calc(6.5rem + env(safe-area-inset-bottom, 0px)); position: relative; z-index: 1; transition: transform var(--asoc-transicion), padding-top var(--asoc-transicion); } .asoc-abierto-izquierda .asoc-pagina { transform: translateX(var(--asoc-panel-ancho)); } .asoc-abierto-derecha .asoc-pagina { transform: translateX(calc(-1 * var(--asoc-panel-ancho))); } .asoc-panel { position: fixed; top: 0; bottom: 0; z-index: 20; width: var(--asoc-panel-ancho); overflow-y: auto; padding: 1rem 0.75rem 2rem; background: var(--asoc-color-surface); color: var(--asoc-color-ink); transition: transform var(--asoc-transicion); } /* La sombra va solo con el panel abierto: cerrado, se colaba como una franja oscura en el borde. */ .asoc-panel--izquierda { left: 0; transform: translateX(-100%); } .asoc-panel--derecha { right: 0; transform: translateX(100%); } .asoc-abierto-izquierda .asoc-panel--izquierda { box-shadow: 1px 0 0 color-mix(in srgb, var(--asoc-color-ink) 12%, transparent), 6px 0 18px rgb(0 0 0 / 0.12); } .asoc-abierto-derecha .asoc-panel--derecha { box-shadow: -1px 0 0 color-mix(in srgb, var(--asoc-color-ink) 12%, transparent), -6px 0 18px rgb(0 0 0 / 0.12); } .asoc-abierto-izquierda .asoc-panel--izquierda, .asoc-abierto-derecha .asoc-panel--derecha { transform: none; } .asoc-panel__cabecera { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; } .asoc-panel__cabecera h2 { margin: 0; font-size: 1.125rem; } .asoc-panel__cerrar { width: 44px; height: 44px; border: 0; border-radius: 50%; background: color-mix(in srgb, var(--asoc-color-ink) 8%, transparent); color: var(--asoc-color-ink); font-size: 1.5rem; line-height: 1; cursor: pointer; } .asoc-panel__ayuda { margin-top: 0.5rem; color: var(--asoc-color-ink-soft); font-size: 0.9375rem; } .asoc-velo { position: fixed; inset: 0; z-index: 10; /* Transparente a propósito: solo captura el toque para cerrar, sin tapar el cambio. */ background: transparent; } .asoc-velo[hidden] { display: none; } /* 7 · Cabecera, barra y secciones */ .asoc-etiqueta { display: inline-block; padding: 0.25rem 0.75rem; border-radius: 999px; background: color-mix(in srgb, var(--asoc-color-secondary) 25%, var(--asoc-color-surface)); color: var(--asoc-color-ink); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; } .asoc-bajada { color: var(--asoc-color-ink-soft); } .asoc-barra { position: sticky; top: 0; z-index: 5; display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin: 1.25rem -1.25rem 0; padding: 0.75rem 1.25rem; background: color-mix(in srgb, var(--asoc-color-bg) 92%, transparent); backdrop-filter: blur(6px); } .asoc-seccion { margin-top: 1.5rem; padding: 1.25rem; border: var(--asoc-borde) solid var(--asoc-color-ink); border-radius: var(--asoc-radio-tarjeta); background: var(--asoc-color-surface); box-shadow: var(--asoc-sombra); } .asoc-seccion--nota { background: color-mix(in srgb, var(--asoc-color-secondary) 14%, var(--asoc-color-surface)); } .asoc-pasos { margin: 0; padding-left: 1.25rem; } .asoc-pasos li + li { margin-top: 0.5rem; } .asoc-pie { margin-top: 2rem; color: var(--asoc-color-ink-soft); font-size: 0.875rem; text-align: center; } /* 8 · Botones */ .asoc-boton { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0.75rem 1.25rem; border: 2px solid var(--asoc-color-primary); border-radius: var(--asoc-radio-boton); font: 700 1rem/1.2 var(--asoc-font-body); cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease, border-radius 0.2s ease; } .asoc-boton--primario { width: 100%; background: var(--asoc-color-primary); color: var(--asoc-color-on-primary); } .asoc-boton--secundario { background: var(--asoc-color-surface); color: var(--asoc-color-primary); } .asoc-boton--primario:hover { background: color-mix(in srgb, var(--asoc-color-primary) 85%, #000); } /* 9 · Enlaces de ejemplo y su aviso */ .asoc-enlaces { display: grid; gap: 0.75rem; margin: 0; padding: 0; list-style: none; } .asoc-enlace { position: relative; } .asoc-tip { position: absolute; left: 50%; bottom: calc(100% + 8px); z-index: 3; width: max-content; max-width: 90%; padding: 0.5rem 0.75rem; border-radius: 8px; background: var(--asoc-color-ink); color: var(--asoc-color-bg); font-size: 0.875rem; text-align: center; opacity: 0; pointer-events: none; transform: translate(-50%, 4px); transition: opacity 0.15s ease, transform 0.15s ease; } .asoc-enlace__boton:hover + .asoc-tip, .asoc-enlace__boton:focus-visible + .asoc-tip, .asoc-enlace.is-tip-abierto .asoc-tip { opacity: 1; transform: translate(-50%, 0); } /* 10 · Tarjetas de presets */ .asoc-cards { display: grid; gap: 0.75rem; margin: 1rem 0 0; padding: 0; list-style: none; } .asoc-cards--forma, .asoc-cards--fondo { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); } .asoc-card { display: flex; flex-direction: column; gap: 0.625rem; width: 100%; height: 100%; padding: 0.75rem; border: 2px solid color-mix(in srgb, var(--asoc-color-ink) 14%, transparent); border-radius: 14px; background: var(--asoc-color-surface); color: var(--asoc-color-ink); font: inherit; text-align: left; cursor: pointer; transition: border-color 0.2s ease, transform 0.2s ease; } .asoc-card:hover { transform: translateY(-2px); } .asoc-card[aria-pressed="true"] { border-color: var(--asoc-color-primary); box-shadow: 0 0 0 2px var(--asoc-color-primary); } .asoc-card__texto strong { display: block; font-family: var(--asoc-font-head); } .asoc-card__texto span { display: block; color: var(--asoc-color-ink-soft); font-size: 0.875rem; line-height: 1.4; } .asoc-card__muestra { display: flex; overflow: hidden; border-radius: 10px; } .asoc-muestra--paleta { height: 44px; } .asoc-muestra--paleta i { flex: 1; } .asoc-muestra--paleta i:nth-child(1) { background: var(--asoc-color-bg); } .asoc-muestra--paleta i:nth-child(2) { background: var(--asoc-color-surface); } .asoc-muestra--paleta i:nth-child(3) { background: var(--asoc-color-secondary); } .asoc-muestra--paleta i:nth-child(4) { background: var(--asoc-color-primary); } .asoc-muestra--paleta i:nth-child(5) { background: var(--asoc-color-ink); } .asoc-muestra--tipo { flex-direction: column; padding: 0.5rem 0.75rem; background: color-mix(in srgb, var(--asoc-color-ink) 5%, transparent); } .asoc-muestra--tipo b { font-family: var(--asoc-font-head); font-size: 2rem; line-height: 1.1; } .asoc-muestra--tipo small { font-family: var(--asoc-font-body); font-size: 0.9375rem; } .asoc-muestra--forma { align-items: center; gap: 0.5rem; height: 56px; padding: 0.5rem; background: color-mix(in srgb, var(--asoc-color-ink) 5%, transparent); } .asoc-muestra--forma i { flex: none; width: 40px; height: 40px; border: var(--asoc-borde) solid var(--asoc-color-ink); border-radius: var(--asoc-radio-tarjeta); background: var(--asoc-color-surface); box-shadow: var(--asoc-sombra); } .asoc-muestra--forma b { padding: 0.25rem 0.75rem; border-radius: var(--asoc-radio-boton); background: var(--asoc-color-primary); color: var(--asoc-color-on-primary); font-size: 0.8125rem; } .asoc-muestra--fondo { height: 56px; border: 1px solid color-mix(in srgb, var(--asoc-color-ink) 12%, transparent); background-color: var(--asoc-color-bg); background-image: var(--asoc-fondo-dibujo); background-size: var(--asoc-fondo-tamano); background-position: var(--asoc-fondo-posicion); background-repeat: var(--asoc-fondo-repetir); } /* 11 · Copiar combinación */ .asoc-estado { min-height: 1.6em; margin: 0.75rem 0 0; color: var(--asoc-color-ink-soft); font-size: 0.9375rem; } .asoc-enlace-manual { width: 100%; padding: 0.5rem; border: 1px solid var(--asoc-color-ink-soft); border-radius: 8px; background: var(--asoc-color-bg); color: var(--asoc-color-ink); font: inherit; } /* * 12 · Burbujas y globos de historieta * * Dos burbujas fijas abajo: Fondos a la izquierda y Formas a la derecha. * Cada una abre un globo con pico que apunta a su burbuja. El globo tapa * como máximo el 60 % de la pantalla para que el cambio se vea atrás. */ .asoc-burbujas { position: fixed; right: 0; bottom: 0; left: 0; z-index: 15; display: flex; justify-content: space-between; padding: 0 1rem calc(1rem + env(safe-area-inset-bottom, 0px)); pointer-events: none; transition: opacity 0.2s ease; } .asoc-burbuja { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 52px; padding: 0.625rem 1.125rem 0.625rem 0.875rem; border: 3px solid var(--asoc-color-ink); border-radius: 999px; background: var(--asoc-color-surface); color: var(--asoc-color-ink); font: 700 1rem/1 var(--asoc-font-body); box-shadow: 3px 4px 0 color-mix(in srgb, var(--asoc-color-ink) 30%, transparent); cursor: pointer; pointer-events: auto; transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease; } .asoc-burbuja:hover { transform: translateY(-2px); } .asoc-burbuja[aria-expanded="true"] { background: var(--asoc-color-primary); color: var(--asoc-color-on-primary); } /* Con un panel lateral abierto, las burbujas se apartan. */ .asoc-abierto-izquierda .asoc-burbujas, .asoc-abierto-derecha .asoc-burbujas { opacity: 0; pointer-events: none; } .asoc-abierto-izquierda .asoc-burbuja, .asoc-abierto-derecha .asoc-burbuja { pointer-events: none; } .asoc-globo { --asoc-globo-pico: 32px; position: fixed; bottom: calc(1rem + env(safe-area-inset-bottom, 0px) + 52px + 20px); z-index: 16; display: flex; flex-direction: column; width: min(calc(100vw - 2rem), 420px); max-height: min(60vh, 560px); padding: 0.875rem 0.875rem 1rem; border: 3px solid var(--asoc-color-ink); border-radius: 24px; background: var(--asoc-color-surface); color: var(--asoc-color-ink); box-shadow: 4px 5px 0 color-mix(in srgb, var(--asoc-color-ink) 25%, transparent); transform-origin: var(--asoc-globo-pico) calc(100% + 20px); animation: asoc-globo-entra 0.22s cubic-bezier(0.2, 0.7, 0.2, 1); } .asoc-globo[hidden] { display: none; } .asoc-globo--izquierda { left: 1rem; } .asoc-globo--derecha { right: 1rem; transform-origin: calc(100% - var(--asoc-globo-pico)) calc(100% + 20px); } /* El pico: un triángulo con borde (::before) y otro con relleno encima (::after). */ .asoc-globo::before, .asoc-globo::after { content: ""; position: absolute; top: 100%; width: 0; height: 0; border-style: solid; } .asoc-globo::before { border-width: 22px 14px 0 14px; border-color: var(--asoc-color-ink) transparent transparent transparent; } .asoc-globo::after { margin-top: -4px; border-width: 17px 9px 0 9px; border-color: var(--asoc-color-surface) transparent transparent transparent; } .asoc-globo--izquierda::before { left: calc(var(--asoc-globo-pico) - 14px); transform: skewX(-18deg); transform-origin: top; } .asoc-globo--izquierda::after { left: calc(var(--asoc-globo-pico) - 9px); transform: skewX(-18deg); transform-origin: top; } .asoc-globo--derecha::before { right: calc(var(--asoc-globo-pico) - 14px); transform: skewX(18deg); transform-origin: top; } .asoc-globo--derecha::after { right: calc(var(--asoc-globo-pico) - 9px); transform: skewX(18deg); transform-origin: top; } .asoc-globo__cabecera { display: flex; flex: none; align-items: center; justify-content: space-between; gap: 0.5rem; } .asoc-globo__cabecera h2 { margin: 0; font-size: 1.125rem; } .asoc-globo .asoc-panel__ayuda { flex: none; margin: 0.25rem 0 0; } .asoc-globo .asoc-cards { flex: 1 1 auto; grid-template-columns: 1fr 1fr; gap: 0.5rem; min-height: 0; margin-top: 0.75rem; overflow-y: auto; overscroll-behavior: contain; } .asoc-globo .asoc-card { gap: 0.5rem; padding: 0.5rem; } .asoc-globo .asoc-card__texto span { font-size: 0.8125rem; } @keyframes asoc-globo-entra { from { opacity: 0; transform: scale(0.85); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .asoc-globo { animation: none; } } @media (prefers-reduced-motion: reduce) { .asoc-probador * { transition: none !important; } }