/* ═══════════════════════════════════════════════════════════ BRIDGE + GLOBALES · Danviler S.A. ─────────────────────────────────────────────────────────── Traduce la paleta "Tierra trabajada" a los tokens que consume el Motor tema-cero (header/footer universales) y resuelve las 3 piezas de integración del one-pager: 1) tokens de marca → --color-* / --font-* del motor 2) header minimal: ocultar el hamburger (one-pager) + logo en blanco sobre el hero 3) vars del header/footer del motor (paleta + tipografía) Cero inline. Las reglas que deben ganarle al header.css del motor (que vive en @layer components) van SIN layer · en CSS Cascade Layers lo unlayered gana a lo layered. Paleta "Tierra trabajada" (prueba aprobada por Germán): labranza #33402E · ocre #C18A3D · papel #F4F0E6 · tinta #1B1A15 · piedra #6F6A5E · hueso #FBFAF6 ═══════════════════════════════════════════════════════════ */ :root { /* ── Paleta de marca (vars propias del child · usadas en home.css) ── */ --dv-labranza: #33402e; --dv-ocre: #c18a3d; --dv-ocre-claro: #e8c98e; --dv-papel: #f4f0e6; --dv-tinta: #1b1a15; --dv-piedra: #6f6a5e; --dv-hueso: #fbfaf6; --dv-linea: rgba(27, 26, 21, 0.14); /* ── Tokens del motor (header/footer universales) ── El motor define estos tokens en INGLÉS en su style.css con su paleta default (bone/graphite/terracota/Gilroy). El child los repinta acá con la paleta "Tierra trabajada". */ --color-bone: #fbfaf6; --color-bg: #f4f0e6; --color-bg-soft: #eae3d2; --color-graphite: #1b1a15; --color-text: #1b1a15; --color-text-soft: #5c5849; /* AA sobre papel y bg-soft */ --color-accent: #c18a3d; --color-line: rgba(27, 26, 21, 0.14); --color-stone: #6f6a5e; /* ── Tipografía (autohospedada · ver fonts.css) ── */ --font-display: 'Bitter', Georgia, 'Times New Roman', serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-text: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* ── Easing canónico #512 ── */ --ease-premium: cubic-bezier(0.16, 1, 0.3, 1); --dur-slow: 600ms; --dur-hover: 320ms; /* ═══ Header del motor · one-pager con hero foto ═══ Transparente sobre el hero → al scrollear toma banda labranza translúcida + blur. El texto/logo van en hueso siempre. */ --tema-header-h: 80px; --tema-header-bg: transparent; --tema-header-color: var(--dv-hueso); --tema-header-scrolled-bg: rgba(51, 64, 46, 0.95); --tema-header-scrolled-color: var(--dv-hueso); --tema-header-blur: blur(20px) saturate(140%); --tema-header-rule: color-mix(in oklab, currentColor 18%, transparent); --tema-header-font-display: var(--font-display); --tema-header-link-hover-color: var(--dv-ocre-claro); --tema-header-link-hover-opacity: 1; /* Lang switcher del header · hueso, hover ocre claro */ --tema-idiomas-color: var(--dv-hueso); --tema-idiomas-hover-color: var(--dv-ocre-claro); --tema-idiomas-hover-opacity: 1; } /* ─────────────────────────────────────────────────────────── Header minimal one-pager · ocultar el trigger del menú. El sitio es una sola página → no hay navegación. Ocultamos solo el BOTÓN (no la columna): la columna start se mantiene como track vacío (1fr) para que el brand quede matemáticamente centrado en el grid de 3 columnas del motor. El overlay queda inerte (aria-hidden) y sin botón que lo abra. Unlayered → gana al header.css del motor (@layer components). ─────────────────────────────────────────────────────────── */ .tema-header__menu-btn { display: none; } /* Logo del header en BLANCO sobre el hero / banda labranza. brightness(0) → silueta negra · invert(1) → blanca · preserva el alpha del PNG. El logo del FOOTER queda en sus colores naturales (footer claro), por eso el filtro es SOLO del header. */ .tema-header__brand--logo img, .tema-header__brand--logo .custom-logo { filter: brightness(0) invert(1); } /* Idioma activo del switcher · ocre claro (el motor deja el activo a criterio del child). */ .tema-header__lang .tema-lang-item.is-active a { color: var(--dv-ocre-claro); } /* ─────────────────────────────────────────────────────────── CTA del header a la IZQUIERDA · WhatsApp plano (2.2.0). El motor renderiza el CTA en la columna end; el JS del child (header-enhance.js) lo MUEVE a la columna start. Acá lo dejamos editorial y limpio: sin caja, sin círculo, hover ocre. El tap-area de 44px lo aporta el motor (min-block/inline-size) · no lo pisamos. Unlayered → gana al header.css del motor (@layer components). Sin JS → el CTA queda a la derecha (default del motor) · no rompe. ─────────────────────────────────────────────────────────── */ .tema-header__inner { width: 90%; max-width: none; padding-inline: 0; } .tema-header__cta { gap: 0.55em; padding-block: 0; background: transparent; border: 0; border-radius: 0; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 600; transition: color 0.3s ease; } .tema-header__cta:hover { color: var(--dv-ocre-claro); } .tema-header__cta-icon { display: inline-flex; align-items: center; border: 0; } .tema-header__cta-icon svg { width: 20px; height: 20px; } /* ─────────────────────────────────────────────────────────── FOOTER · directorio de contacto en TEXTO (2.2.0). El motor renderiza el directorio solo-ícono; el JS del child (header-enhance.js) le agrega etiqueta + valor a cada ítem y marca el