Personalizador

Controles vivos

Abre esta página desde el Personalizador de WordPress. Al cambiar colores, fuente de títulos, grosor, corte de paneles, opacidades o brillo del botón, el laboratorio se actualiza en tiempo real.

Ruta

Apariencia → Personalizar → DDLA

Secciones disponibles

Identidad visual, colores globales, tipografías, navegación/header y componentes.

Variables afectadas

--ddla-*, incluyendo color, tipografía, paneles, cards y botón principal.

Sistema 01

Colores globales

Paleta base de Mystika. Los componentes deben consumir estas variables, no colores sueltos escritos a mano.

Abismo --ddla-bg-void Fondo raíz

Profundo --ddla-bg-deep Fondo principal

Dorado --ddla-gold Acento base

Dorado claro --ddla-gold-light Títulos

Zafiro profundo --ddla-blue-deep Profundidad y sombras

Zafiro principal --ddla-blue Acento estructural

Zafiro luminoso --ddla-blue-soft Brillos y bordes vivos

Zafiro claro --ddla-blue-light Texto e iluminación

Texto --ddla-text-main Lectura

Texto tenue --ddla-text-muted Secundario

Sistema 02

Tipografía

La tipografía ya no se limita al H1: el Personalizador permite definir fuente y grosor para cuerpo, menú y cada nivel H1-H6.

H1 / título ceremonial

Detrás de lo Aparente

--ddla-h1-font · --ddla-h1-weight

H2 · Archivo, consciencia y realidad

Texto de lectura con cuerpo principal. La interfaz debe ser mística, pero también legible, clara y serena.

--ddla-font-body · --ddla-body-weight

H3 · Cámara de símbolos

H4 · Registro operativo

H5 · Nota de sistema

H6 · Microjerarquía

--ddla-font-nav · --ddla-nav-weight · --ddla-nav-letter-spacing

H1-H6 configurablesMenú configurableTexto configurable

Sistema 03

Espaciado, fondos y superficies

Una sección ordena. Una superficie contiene. Un panel protagoniza. Una card resume.

Espaciado

Escala fluida basada en variables --ddla-space-*.

Superficie

Las superficies pueden tener fondo o borde. Las secciones, no.

Superficie zafiro

Útil para pruebas o bloques secundarios, sin esquinas redondeadas.

Componente 01

Botones Mystika

.ddla-button es el botón principal achaflanado. Puede ser áureo o zafiro, con icono opcional, en versión outline o en versión viva con brillo dinámico.

1. Estilo áureo

Dorado principal

Acceso al archivo

.ddla-button · .ddla-button--aureo · icon opcional

2. Estilo zafiro

Azul eléctrico

Acceso al archivo

.ddla-button--zafiro

3. Icono opcional

Con o sin símbolo

Sin icono

Acceso al archivo

Con icono

Acceso al archivo

'icon' => true · 'icon_svg' => '<svg>...</svg>'

4. Outline transparente

Solo borde y texto

Más información

.ddla-button--outline · transparente · combinable con .ddla-button--zafiro

5. Variante viva

Pulso sutil continuo

Acceso al archivo

.ddla-button--alive · para CTAs excepcionales

Componente 02

Paneles SVG premium

Panel base .ddla-panel con variantes áurea, zafiro, destacada, base y dinámica. El zafiro conserva el mismo interior que el áureo; solo cambia borde, halo y haz.

Familia áurea

Panel destacado

La cámara del archivo

Panel principal para bloques importantes. El borde dorado está dibujado con SVG, por eso el interior nunca se convierte en una placa dorada.

Áureo Estático SVG

Panel dinámico

El borde despierta

Un haz fino recorre el perímetro generando destellos discretos, como una interfaz viva y contenida.

Familia zafiro

Panel destacado

La cámara del archivo

Mismo fondo, mismo título dorado y misma lectura que el áureo. Solo cambia el borde: azul eléctrico con halo exterior.

Zafiro Mismo fondo Halo

Panel dinámico

El borde despierta

El haz azul recorre el perímetro con un brillo fino, sin gruesos ni líneas perseguidas.

.ddla-panel · .ddla-panel--aureo · .ddla-panel--zafiro · .ddla-panel--featured · .ddla-panel--base · .ddla-panel--dynamic

Componente 03

Cards SVG premium

Las cards heredan el lenguaje de los paneles: borde áureo/zafiro, fondo degradado translúcido y variante dinámica. Añaden zona de imagen destacada, badges y CTA.

Artículo Archivo

Círculo arcano

Cartografía Celeste

Mapas estelares y alineaciones que revelan patrones ocultos.

Explorar

Recurso Zafiro

Nodo zafiro

Memoria del sistema

Ficha para listados, recursos o contenidos relacionados dentro del archivo.

Abrir

Dinámica Premium

Card dinámica

Componente vivo

Una variante destacada con haz sutil en el perímetro para llamadas o contenidos especiales.

.ddla-card · .ddla-card--aureo · .ddla-card--zafiro · .ddla-card--dynamic · .ddla-card__media · .ddla-card__badge

Inventario

Assets y sistema

Este bloque queda preparado para ir registrando fondos, SVG, iconos, texturas, tipografías y futuros componentes.

CSS

assets/css/main.css, blog.css, single.css, page.css, lab.css

JS

assets/js/main.js sincroniza bordes SVG de paneles y cards. customizer-preview.js actualiza variables en vivo.

Componentes

template-parts/components contiene botón, panel y card.

Documentación

docs/REGISTRO-COMPONENTES.md y docs/LABORATORIO-MYSTIKA.md.