/* ========================================================================== FASE H1 — VARIANTES DE HEADER (plantilla default / chrome del CMS) -------------------------------------------------------------------------- Variantes PREDISEÑADAS del header, seleccionables desde el administrador. · Se aplican SOLO al chrome por defecto (#header-principal). Las plantillas con su propio site-header (p. ej. industrial-cms) NO se ven afectadas. · TODO color/tipografía/espaciado proviene de los Design Tokens --tpl-* (Fase T). Aquí NO se define ninguna paleta nueva ni CSS "arbitrario": son composiciones fijas, activadas por [data-variant] / [data-behavior]. · 'classic' = baseline: NO tiene reglas aquí → se pinta idéntico a hoy. · Se carga DESPUÉS de main.css; la especificidad de #header-principal[...] gana a las reglas base sin usar !important (salvo donde se indica). ========================================================================== */ /* ── COMPORTAMIENTO (position) ────────────────────────────────────────────── El baseline del CMS es position:fixed (regla `header{position:fixed}` de main.css). 'fixed' se declara explícito por claridad; 'sticky'/'normal' lo sobrescriben. */ /* La clase de comportamiento se pone en el (hb-fixed | hb-sticky | hb-normal) para poder coordinar el topbar (hermano del header) y el padding del body. · FIXED (por defecto): NO se toca nada aquí → lo gobierna main.css (topbar fijo arriba + header fijo debajo en top:36px). Ambos siempre visibles. · STICKY: topbar y header pasan a FLUJO normal; el header se pega arriba (position:sticky top:0). Al hacer scroll el topbar se va y el header queda. · NORMAL: topbar y header en flujo; todo se desplaza con la página. Se excluye 'modern' (píldora flotante con posición propia). */ /* STICKY */ body.hb-sticky, body.hb-sticky.has-topbar { padding-top: 0 !important; } body.hb-sticky .topbar { position: static; } body.hb-sticky #header-principal:not([data-variant="modern"]) { position: -webkit-sticky; position: sticky; top: 0; left: auto; width: 100%; } /* NORMAL */ body.hb-normal, body.hb-normal.has-topbar { padding-top: 0 !important; } body.hb-normal .topbar { position: static; } body.hb-normal #header-principal:not([data-variant="modern"]) { position: static; width: 100%; } /* ── VARIANTES TRANSPARENTES SOBRE EL HERO ─────────────────────────────────── Las variantes 'transparent' y 'modern' llevan fondo transparente y deben SUPERPONERSE al hero (no flotar sobre una franja blanca). Para ello, en escritorio se elimina el espacio superior que el body reserva para el header, de modo que el hero suba hasta el borde y el header quede encima. */ @media (min-width: 1024px) { body.hv-transparent, body.hv-modern { padding-top: 0 !important; } } /* ── TAMAÑO DEL LOGO (dentro de límites, RESPONSIVO) ───────────────────────── 'md' = baseline (sin regla). Los tamaños escalan por breakpoint para que en móvil el logo NUNCA desborde la altura del header (85px) y en escritorio pueda ser claramente más grande. Corrige "logo enorme en móvil / pequeño en PC". */ /* Tamaños con SALTOS claros entre sm/md/lg (antes md y lg apenas se distinguían). Alturas de visualización (alto del logo): móvil 30/46/62 · tablet 36/56/78 · escritorio 42/66/90. Estas cifras coinciden con las "dimensiones recomendadas" que muestra el configurador. */ #header-principal[data-logo="sm"] .logo .logo-img { max-height: 30px; } #header-principal[data-logo="md"] .logo .logo-img { max-height: 46px; } #header-principal[data-logo="lg"] .logo .logo-img { max-height: 62px; } @media (min-width: 768px) { #header-principal[data-logo="sm"] .logo .logo-img { max-height: 36px; } #header-principal[data-logo="md"] .logo .logo-img { max-height: 56px; } #header-principal[data-logo="lg"] .logo .logo-img { max-height: 78px; } } @media (min-width: 1024px) { #header-principal[data-logo="sm"] .logo .logo-img { max-height: 42px; } #header-principal[data-logo="md"] .logo .logo-img { max-height: 66px; } #header-principal[data-logo="lg"] .logo .logo-img { max-height: 90px; } } /* ── ANCHO DEL HEADER (avanzado, acotado) ─────────────────────────────────── 'normal' = baseline (sin regla). */ #header-principal[data-maxwidth="wide"] .contenedor { max-width: 1400px; } /* Ancho completo con LÍMITE: el header ocupa todo el ancho, pero el contenido interno se acota a 1600px, centrado, con 32px de padding lateral. */ #header-principal[data-maxwidth="full"] .contenedor { width: 100%; max-width: 1600px; margin-inline: auto; padding-inline: 32px; } /* Ancho completo (escritorio): logo a la IZQUIERDA; menú y botón agrupados a la DERECHA (el margen automático del logo empuja el resto hacia la derecha). */ @media (min-width: 1024px) { #header-principal[data-maxwidth="full"] .flex-nav .logo { margin-right: auto; } #header-principal[data-maxwidth="full"] .flex-nav .cta-header { margin-left: 1.5rem; } } /* La BARRA SUPERIOR (topbar) alinea su contenido al MISMO ancho que el header (según el ajuste de ancho). La clase hmw-* la pone header.php en el . */ body.hmw-wide .topbar .contenedor { max-width: 1400px; } body.hmw-full .topbar .contenedor { width: 100%; max-width: 1600px; margin-inline: auto; padding-inline: 32px; } /* ── TOPBAR EN MÓVIL: una sola línea (altura fija 36px) ────────────────────── El header por defecto se ancla en top:36px; si el topbar ocupa 2 líneas (~56px) tapaba el logo y el botón de menú. Se fuerza una sola fila con elipsis para que el topbar mida siempre 36px y no solape el header. (En ≥768px ya era 1 fila.) */ @media (max-width: 767.98px) { body.has-topbar .topbar { height: 36px; min-height: 36px; padding-top: 0; padding-bottom: 0; overflow: hidden; } body.has-topbar .topbar-contenido { flex-direction: row; justify-content: center; gap: 0.85rem; min-height: 36px; flex-wrap: nowrap; } body.has-topbar .topbar-izq, body.has-topbar .topbar-der { min-width: 0; } body.has-topbar .topbar-izq span, body.has-topbar .topbar-der span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } } /* ══════════════════════════════════════════════════════════════════════════ VARIANTES Las composiciones de escritorio se aplican a partir de 1024px para no tocar el menú móvil (off-canvas) que ya gestiona main.css. ══════════════════════════════════════════════════════════════════════════ */ /* ── MINIMAL ── logo y tipografía compactos, sin borde. Se conserva la ALTURA del header (no se reduce) para que el contenido quede CENTRADO verticalmente y coincida con el espacio que reserva el body (evita la franja blanca debajo). */ @media (min-width: 1024px) { #header-principal[data-variant="minimal"] { border-bottom-color: transparent; box-shadow: none; } #header-principal[data-variant="minimal"] .flex-nav { align-items: center; } #header-principal[data-variant="minimal"] .logo .logo-img { max-height: 40px; } #header-principal[data-variant="minimal"] .menu-navegacion { gap: 1.25rem; } #header-principal[data-variant="minimal"] .menu-navegacion a { font-size: 0.95rem; } } /* ── CENTERED ── logo centrado arriba, navegación centrada debajo. */ @media (min-width: 1024px) { #header-principal[data-variant="centered"] { height: auto; } #header-principal[data-variant="centered"] .flex-nav { flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; padding-block: 0.85rem; } #header-principal[data-variant="centered"] .logo { order: 1; } #header-principal[data-variant="centered"] .menu-navegacion { order: 2; justify-content: center; } #header-principal[data-variant="centered"] .cta-header { order: 3; } /* El botón hamburguesa no interviene en escritorio (oculto por main.css). */ } /* ── TRANSPARENT ── transparente sobre el hero; sólido al hacer scroll (reutiliza .header-active que ya añade main.js). Texto claro por defecto, oscuro al volverse sólido. Solo escritorio: en móvil el menú es panel claro. */ @media (min-width: 1024px) { #header-principal[data-variant="transparent"] { background: transparent; border-bottom-color: transparent; box-shadow: none; } #header-principal[data-variant="transparent"] .menu-navegacion a, #header-principal[data-variant="transparent"] .logo span, #header-principal[data-variant="transparent"] .cta-header a { color: var(--color-white, #ffffff); } #header-principal[data-variant="transparent"].header-active { background: rgba(255, 255, 255, 0.92); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-bottom-color: rgba(0, 0, 0, 0.06); } #header-principal[data-variant="transparent"].header-active .menu-navegacion a, #header-principal[data-variant="transparent"].header-active .logo span { color: #111827; /* [E9] literal a proposito: ver nota al final */ } } /* ── MODERN ── header "flotante" tipo píldora: separado del borde, con radio, sombra y desenfoque. Consume tokens de radio/sombra/borde. */ @media (min-width: 1024px) { #header-principal[data-variant="modern"] { top: 1rem; left: 50%; transform: translateX(-50%); width: min(1200px, calc(100% - 2rem)); height: 66px; border-radius: var(--radius-full, 999px); /* Fondo SIEMPRE transparente (en reposo y al hacer scroll). */ background: transparent; border: 1px solid rgba(255, 255, 255, 0.28); box-shadow: none; } #header-principal[data-variant="modern"].header-active { height: 66px; background: transparent; border-color: rgba(0, 0, 0, 0.10); } body.has-topbar #header-principal[data-variant="modern"] { top: calc(36px + 1rem); } /* Texto CLARO sobre el hero; OSCURO al desplazar (sobre contenido claro), para mantener contraste con el fondo transparente. */ #header-principal[data-variant="modern"] .menu-navegacion a, #header-principal[data-variant="modern"] .logo span { color: var(--color-white, #ffffff); } #header-principal[data-variant="modern"].header-active .menu-navegacion a, #header-principal[data-variant="modern"].header-active .logo span { color: #111827; /* [E9] literal a proposito: ver nota al final */ } /* Menú CENTRADO: logo a la izquierda, menú al centro, CTA a la derecha (grid de 3 columnas; el botón hamburguesa va oculto en escritorio). */ #header-principal[data-variant="modern"] .flex-nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding-inline: 1.5rem; } #header-principal[data-variant="modern"] .logo { justify-self: start; } #header-principal[data-variant="modern"] .menu-navegacion { justify-self: center; } #header-principal[data-variant="modern"] .cta-header { justify-self: end; } } /* ═══════════════════════════════════════════════════════════════════ [E9 2026-09-11] Sobre los tokens de este archivo ------------------------------------------------------------------- Aquí se leían tres tokens del namespace --tpl-*: --tpl-white, --tpl-text y --tpl-radius-full. NINGUNO de los tres lo definía nadie —ni main.css, ni header.php, ni ninguna plantilla—, así que en la práctica SIEMPRE se usaba el valor de reserva. Eran colores fijos disfrazados de token. E9 deja un solo namespace público, --color-*. Se convierten los dos que tienen equivalente EXACTO y se deja el tercero como está: --tpl-white → --color-white (#ffffff en los dos: sin cambio) --tpl-radius-full → --radius-full (999px → 9999px: los dos dan una píldora completa en cualquier elemento real) --tpl-text → SE QUEDA con su literal #111827. El token más parecido, --color-text, vale #1f2937: cambiarlo alteraría el color del logotipo en las variantes 'transparent' y 'modern'. Es el color del CHROME, que es territorio de E8; allí se decide, con su propia verificación. E9 unifica, no rediseña. ═══════════════════════════════════════════════════════════════════ */