/* ============================================================ HERNÁNDEZ & COMPANY — CAPA A · TOKENS DE MARCA ------------------------------------------------------------ Único lugar donde viven los valores de marca (color, tipografía, medidas). El resto del CSS del cliente (chrome.css, client.css) solo consume var(--hdz-*): nunca repite un hex. OJO — los tokens del theme base (--kw-brand, --kw-brand-dark) NO se redefinen aquí a propósito: los imprime DesignTokens desde el wizard (KuiraWeb → Puesta en marcha → Colores de marca). El child solo aporta el *default* de esa opción, en functions.php, para que el wizard siga mandando si el cliente cambia el color. ============================================================ */ :root { /* ── Paleta (diseño hdezco) ─────────────────────────────── */ --hdz-wine: #7A0F1B; /* marca · botones, links, hero */ --hdz-wine-dark: #5C0A13; /* hover del vino */ --hdz-gold: #B08948; /* acento · CTA secundario, subrayado*/ --hdz-gold-hover: #C69C57; /* hover del oro */ --hdz-gold-soft: #D9B678; /* oro sobre fondo oscuro (legible) */ --hdz-ink: #1A1614; /* texto y fondo del footer/topbar */ --hdz-cream: #FBF9F6; /* fondo de página */ --hdz-sand: #F4F0EA; /* superficie alterna */ --hdz-line: #EDE7DE; /* bordes suaves */ /* Tintes derivados — se calculan, no se hardcodean */ --hdz-ink-78: rgba(26, 22, 20, .78); /* nav en reposo */ --hdz-ink-60: rgba(26, 22, 20, .60); /* texto secundario */ --hdz-ink-10: rgba(26, 22, 20, .10); /* borde del header */ --hdz-on-dark: rgba(255, 255, 255, .72); --hdz-on-dark-82: rgba(255, 255, 255, .82); --hdz-on-dark-55: rgba(255, 255, 255, .55); --hdz-on-dark-22: rgba(255, 255, 255, .22); --hdz-on-dark-14: rgba(255, 255, 255, .14); /* ── Tipografía ─────────────────────────────────────────── */ --hdz-font-body: 'IBM Plex Sans', system-ui, Helvetica, Arial, sans-serif; --hdz-font-display: 'Source Serif 4', Georgia, 'Times New Roman', serif; /* ── Forma y medidas ────────────────────────────────────── */ --hdz-radius: 0px; /* el diseño es de esquina viva */ --hdz-container: 1600px; --hdz-gutter: 32px; --hdz-gutter-sm: 20px; /* ── Transiciones ───────────────────────────────────────── */ --hdz-t-fast: 160ms ease; --hdz-t-med: 240ms ease; } /* ── Base tipográfica ────────────────────────────────────── `html body` (0,0,2) gana al `body` del theme base sin !important, que se imprime después en el vía @vite. */ html body { background: var(--hdz-cream); color: var(--hdz-ink); font-family: var(--hdz-font-body); -webkit-font-smoothing: antialiased; } html body h1, html body h2, html body h3 { font-family: var(--hdz-font-display); font-weight: 600; letter-spacing: -.015em; text-wrap: pretty; } html body ::selection { background: var(--hdz-wine); color: #fff; } /* ── Contenedor común ──────────────────────────────────────── */ .hdz-container { max-width: var(--hdz-container); margin: 0 auto; padding-inline: var(--hdz-gutter); width: 100%; } @media (max-width: 640px) { .hdz-container { padding-inline: var(--hdz-gutter-sm); } } /* ── Contenido del editor ────────────────────────────────── Tipografía de cualquier texto que venga de Gutenberg: notas del blog, descripción de un taller, páginas. Vive aquí —con los demás primitivos compartidos— y no en la hoja de una sección, para que no se pierda si esa hoja se reescribe. */ .hdz-prose { font-size: 16.5px; line-height: 1.72; color: rgba(26, 22, 20, .78); } .hdz-prose > * { margin-block: 0 20px; } .hdz-prose > *:last-child { margin-bottom: 0; } .hdz-prose h2, .hdz-prose h3, .hdz-prose h4 { font-family: var(--hdz-font-display); color: var(--hdz-ink); margin-top: 36px; margin-bottom: 14px; line-height: 1.25; } .hdz-prose h2 { font-size: clamp(22px, 2.2vw, 26px); } .hdz-prose h3 { font-size: 20px; } .hdz-prose h4 { font-size: 17px; } .hdz-prose > *:first-child { margin-top: 0; } .hdz-prose a { color: var(--hdz-wine); border-bottom: 1px solid var(--hdz-gold); } .hdz-prose a:hover { color: var(--hdz-wine-dark); } /* El reset del theme base quita las viñetas a todo