/* ============================================================================= EL HEADER · una sola cabecera para TODA la web. Vive aparte de styles.css porque las 16 fichas de producto NO cargan la hoja grande de la landing (tienen su propio CSS incrustado, en Mont): si el header viviera allí, en las fichas saldría sin estilar. Aquí es un archivo pequeño que cargan todas las páginas, y así hay UNA cabecera de verdad y no tres pintadas a mano que se descuadran solas. Los tokens van con VALOR DE RESPALDO — var(--gold, #ffb500) — para que funcione tal cual en las páginas que no traen el :root de la landing. Donde sí está, manda el token. La tipografía se hereda a propósito: la landing habla en Poppins y las fichas en Mont, y el header habla el idioma de su página. Se edita AQUÍ. El HTML lo pinta tools/partes-web.mjs. ============================================================================= */ /* ---------- Header: se DISUELVE, no se separa con una línea ---------- El blur progresivo apila 6 capas de desenfoque creciente, cada una recortada en su banda con una máscara. Resultado: nítido abajo → muy borroso arriba, sin corte visible. Es la receta de iOS/Apple y es lo que hace que un header no parezca una barra pegada encima de la página. SIN border-bottom (Juan, 16-jul: "esa línea divisoria la odio"). */ .site-header { position: sticky; top: 0; z-index: 50; transition: transform .45s var(--ease, cubic-bezier(.16,1,.3,1)); } /* El blur SOLO existe si hay algo que difuminar. Arriba del todo no hay nada detrás del header, y encendido emborronaba el kicker del titular: se veía una mancha dorada bajo la barra (Juan, 16-jul: "tiene un error ese header"). */ .pblur { position: absolute; inset: 0 0 -30% 0; pointer-events: none; z-index: -1; opacity: 0; transition: opacity .35s var(--ease, cubic-bezier(.16,1,.3,1)); } .site-header.scrolled .pblur { opacity: 1; } /* Cada capa: opaca desde arriba hasta --o, y de ahí se funde hasta morir en --c. Siempre termina en `transparent` → ninguna capa deja canto. */ .pblur > div { position: absolute; inset: 0; backdrop-filter: blur(var(--b)); -webkit-backdrop-filter: blur(var(--b)); -webkit-mask-image: linear-gradient(to bottom, #000 var(--o), transparent var(--c)); mask-image: linear-gradient(to bottom, #000 var(--o), transparent var(--c)); } /* Un velo mínimo que oscurece SOLO lo justo para que el logo siempre se lea. La rampa NO es lineal a propósito. Un degradado de 2 paradas baja la opacidad a ritmo constante y el ojo lee ese final abrupto como un CANTO — se ve el borde del velo aunque técnicamente "termine en transparente" (Juan, 17-jul: "hace 2 saltos, va a trompicones"). Estas 17 paradas siguen una curva SMOOTHSTEP, cuya pendiente es cero en los dos extremos: el velo nace y muere sin que se note dónde. De paso, tantas paradas parten las bandas de color de 8 bits, que en oscuros se ven como escalones. */ .site-header::after { content: ""; position: absolute; inset: 0 0 -30% 0; z-index: -1; pointer-events: none; background: linear-gradient(to bottom, rgba(8,6,5,.720) 0%, rgba(8,6,5,.712) 6.2%, rgba(8,6,5,.689) 12.5%, rgba(8,6,5,.654) 18.8%, rgba(8,6,5,.607) 25%, rgba(8,6,5,.553) 31.2%, rgba(8,6,5,.492) 37.5%, rgba(8,6,5,.427) 43.8%, rgba(8,6,5,.360) 50%, rgba(8,6,5,.293) 56.2%, rgba(8,6,5,.228) 62.5%, rgba(8,6,5,.167) 68.8%, rgba(8,6,5,.112) 75%, rgba(8,6,5,.066) 81.2%, rgba(8,6,5,.031) 87.5%, rgba(8,6,5,.008) 93.8%, rgba(8,6,5,0) 100%); opacity: 0; transition: opacity .4s var(--ease, cubic-bezier(.16,1,.3,1)); } .site-header.scrolled::after { opacity: 1; } /* al bajar se aparta; al subir vuelve. El contenido manda sobre el crómo. */ .site-header.hidden { transform: translateY(-104%); } /* Logo CENTRADO (Juan, 17-jul). Con `space-between` y un solo hijo, el logo se pegaba a la izquierda — space-between reparte huecos ENTRE elementos, y con uno solo no hay nada que repartir. Con `center` manda el eje del centro. Y encaja con la web: la sección de Champions también se centró; el eje de la página es el centro, no el margen. */ /* Rejilla de 3 pistas con las laterales IGUALES (1fr · auto · 1fr): el logo cae en el eje exacto de la página pase lo que pase a los lados. Es lo que permite meter navegación sin romper la regla de Juan (17-jul: "el logo va centrado; no quiero cosas a los lados"). No hay UN lado con cosas: hay DOS, simétricos. */ .header__inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 72px; gap: clamp(20px, 3.1vw, 50px); } .brand { grid-column: 2; justify-self: center; } .brand img { height: 26px; width: auto; } /* ---------- Navegación: se ve desde el primer momento, y entra ---------- (Juan, 30-jul: "que no tenga que bajar para verlos, que se carguen con una animación, letra más fina y en dorado, y con algo más de separación para que sean más apple y pro") Estaban escondidos hasta que bajabas. Ya no: entran al cargar, saliendo del centro hacia fuera, y se quedan. El gesto sigue siendo el mismo — lo que cambia es que no hay que hacer nada para verlo. Dorado FINO y con aire: es la diferencia entre una barra de navegación y una cabecera de marca. El peso 400 con letter-spacing y separación amplia se lee como un rótulo, no como botones. */ .hnav { display: flex; align-items: center; gap: clamp(18px, 2.6vw, 40px); min-width: 0; } .hnav--a { grid-column: 1; justify-content: flex-end; } .hnav--b { grid-column: 3; justify-content: flex-start; } .hnav a { position: relative; display: inline-flex; align-items: center; height: 44px; font-size: 13px; font-weight: var(--fw-reg, 400); line-height: 1; letter-spacing: .015em; color: var(--gold, #ffb500); text-decoration: none; white-space: nowrap; transition: color .22s ease, transform .18s var(--ease, cubic-bezier(.16,1,.3,1)); /* Entra al cargar. `both` deja el estado final clavado, así que si el CSS llega tarde nunca se queda un enlace invisible. */ animation: navEntra .68s var(--ease, cubic-bezier(.16,1,.3,1)) both; } @keyframes navEntra { from { opacity: 0; transform: translateX(var(--dx, 0)); } to { opacity: 1; transform: none; } } .hnav--a a { --dx: 16px; } /* nacen pegados al logo y se separan */ .hnav--b a { --dx: -16px; } /* El más cercano al logo abre; el de fuera entra 90 ms después. Ese desfase es lo que hace que se lea como UN gesto y no como cuatro cosas encendiéndose. El retardo de arranque (.34s) deja que el logo se asiente primero: primero la marca, después las herramientas. */ .hnav--a a:nth-last-child(1) { animation-delay: .34s; } .hnav--a a:nth-last-child(2) { animation-delay: .43s; } .hnav--b a:nth-child(1) { animation-delay: .34s; } .hnav--b a:nth-child(2) { animation-delay: .43s; } /* El filete crece desde el CENTRO del enlace hacia sus dos extremos. Un subrayado que aparece entero es un interruptor; uno que crece es un gesto. */ .hnav a::after { /* El filete crece desde el centro con TRANSFORM, no moviendo left/right: animar esas dos obliga al navegador a recolocar la página en cada fotograma. Con scaleX el trabajo lo hace la tarjeta gráfica y no se mueve nada más. */ content: ""; position: absolute; left: 0; right: 0; bottom: 11px; height: 1px; background: currentColor; border-radius: 2px; opacity: 0; transform: scaleX(0); transform-origin: 50% 50%; transition: transform .3s var(--ease, cubic-bezier(.16,1,.3,1)), opacity .18s ease; } /* Al pasar por encima se ENCIENDE (oro claro), no cambia de familia de color. */ .hnav a:hover, .hnav a:focus-visible { color: var(--gold-2, #ffce5c); } .hnav a:hover::after, .hnav a:focus-visible::after { transform: scaleX(1); opacity: .9; } .hnav a:active { transform: translateY(1px); } /* La página en la que estás: no se disfraza de botón, solo se queda subrayada. */ .hnav a[aria-current="page"] { color: var(--gold-2, #ffce5c); } .hnav a[aria-current="page"]::after { transform: scaleX(1); opacity: .45; } /* ---------- Botón de menú (móvil) ---------- Dos trazos que se cruzan en aspa. Sin caja, sin píldora: el trazo ES el botón. */ .hmenu { grid-column: 3; justify-self: end; display: none; width: 44px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; position: relative; color: var(--cream, #f5efe3); } /* Dos trazos de 18px y 1px de grosor. Finos a propósito: un trazo grueso es un icono, uno fino es una marca. Al abrir, las dos líneas van al MISMO sitio y giran en sentidos opuestos — no se "convierten" en aspa, se cruzan. El press feedback (escala .92) hace que el botón se sienta físico. */ .hmenu i { position: absolute; left: 13px; width: 18px; height: 1px; border-radius: 1px; background: currentColor; /* El aspa se hace con transform, nunca animando `width`: cambiar el ancho recoloca la página en cada fotograma. Las dos barras miden lo mismo siempre y lo que cambia es su escala. */ transition: transform .52s var(--ease-fuera, cubic-bezier(.22,1,.28,1)); } .hmenu i:nth-child(1) { top: 20px; } .hmenu i:nth-child(2) { top: 25px; } /* Los dos a y=22.5 (el centro exacto entre 20 y 25) y giran ±45°. Como parten de sitios distintos, uno baja 2.5px y el otro sube 2.5px: el cruce cae clavado. */ body.menu-abierto .hmenu i:nth-child(1) { transform: translateY(2.5px) rotate(45deg); } body.menu-abierto .hmenu i:nth-child(2) { transform: translateY(-2.5px) rotate(-45deg); } .hmenu:active i { transform: scaleX(.86); } body.menu-abierto .hmenu:active i:nth-child(1) { transform: translateY(2.5px) rotate(45deg) scale(.88); } body.menu-abierto .hmenu:active i:nth-child(2) { transform: translateY(-2.5px) rotate(-45deg) scale(.88); } /* ---------- Panel de menú: la página se aparta y deja ver el índice ---------- Centrado, como el logo: el eje de esta web es el centro, y un índice alineado a la izquierda bajo un logo centrado deja la vista bailando entre dos ejes. El padding de arriba es mayor que el de abajo a propósito — compensa el header para que el bloque caiga en el centro ÓPTICO de la pantalla, no en el matemático. */ .hpanel { position: fixed; inset: 0; z-index: 49; display: flex; flex-direction: column; /* ANCLADO ARRIBA, no centrado (Juan, 30-jul: "mucho aire ahí"). Centrado en vertical, el bloque caía en mitad de la pantalla y dejaba un hueco enorme entre el logo y el primer enlace — 164 px de nada, medidos. El índice tiene que estar donde el pulgar ya está mirando: justo debajo de la cabecera. El aire que sobre, que sobre ABAJO. */ justify-content: flex-start; align-items: center; text-align: center; /* EL AIRE DE ARRIBA, IGUAL QUE EL DE ABAJO (Juan, 1-ago). Medido: había 79 px entre el logo y el primer enlace, y solo 26 entre el último y el eslogan. Con los dos huecos iguales el bloque se lee como una pieza cerrada, no como algo colgando de la cabecera. Los 46 px salen del punto medio de los dos. */ gap: 0; padding: clamp(64px, 11vh, 118px) var(--pad, 22px) 40px; /* El VELO y el DESENFOQUE son dos capas distintas a propósito. El desenfoque (::before) no se puede animar sin quemar la GPU —cada frame recalcularía el blur de la pantalla entera—, así que lo que se anima es su OPACIDAD, con el blur ya cocinado. Mismo efecto a la vista, coste de una transición normal. */ background: linear-gradient(180deg, rgba(8, 6, 5, .96), rgba(8, 6, 5, .84) 55%, rgba(8, 6, 5, .96)); opacity: 0; visibility: hidden; transition: opacity .3s var(--ease, cubic-bezier(.16,1,.3,1)), visibility .3s; } .hpanel::before { content: ""; position: absolute; inset: 0; z-index: -1; backdrop-filter: blur(30px) saturate(150%); -webkit-backdrop-filter: blur(30px) saturate(150%); opacity: 0; transition: opacity .44s var(--ease, cubic-bezier(.16,1,.3,1)); } body.menu-abierto .hpanel { opacity: 1; visibility: visible; transition-duration: .34s; } body.menu-abierto .hpanel::before { opacity: 1; } /* ── LOS ENLACES: entran ENFOCÁNDOSE ── No suben y ya: llegan desenfocados y se enfocan al llegar. Es el mismo gesto que usa la web en el titular del héroe y en la banda de logos, y es lo que hace que un menú parezca caro: el ojo lee "esto estaba viniendo", no "esto ha aparecido". El `scale` es minúsculo (.96) — se siente, no se ve. Solo se animan opacity, transform y filter, y una sola vez por apertura. */ .hpanel a { display: flex; align-items: center; justify-content: center; min-height: 52px; font-size: clamp(1.32rem, 6.2vw, 1.7rem); font-weight: var(--fw-semi, 600); letter-spacing: -.02em; color: var(--cream, #f5efe3); text-decoration: none; opacity: 0; transform: translateY(22px) scale(.96); filter: blur(7px); /* La SALIDA es más rápida que la entrada (.2s) y sin retardo: al cerrar, el usuario ya ha decidido y esperar molesta. Entrar es una invitación; salir, un trámite. */ transition: opacity .2s ease, transform .2s var(--ease, cubic-bezier(.16,1,.3,1)), filter .2s ease; will-change: opacity, transform, filter; } body.menu-abierto .hpanel a { opacity: 1; transform: none; filter: blur(0); transition: opacity .5s var(--ease, cubic-bezier(.16,1,.3,1)), transform .62s var(--ease, cubic-bezier(.16,1,.3,1)), filter .5s var(--ease, cubic-bezier(.16,1,.3,1)); } /* 55 ms entre uno y otro: por debajo se lee como un bloque, por encima se ve lento. El primero espera 80 ms a que el velo haya empezado a cerrarse. */ body.menu-abierto .hpanel a:nth-child(1) { transition-delay: .08s; } body.menu-abierto .hpanel a:nth-child(2) { transition-delay: .135s; } body.menu-abierto .hpanel a:nth-child(3) { transition-delay: .19s; } body.menu-abierto .hpanel a:nth-child(4) { transition-delay: .245s; } body.menu-abierto .hpanel a:nth-child(5) { transition-delay: .30s; } /* ── EL FILETE ── Una raya de 1px al 6% de opacidad entre enlace y enlace. Casi no se ve: su trabajo no es separar, es marcar el RITMO — que el ojo sepa que son cinco cosas iguales y no un bloque de texto. Es lo que hace Apple en sus listas. Ancho limitado a 62% y centrado: un filete de borde a borde sería una tabla. El del último enlace no se pinta (una lista no acaba en raya) y el del primero tampoco (arriba ya está el header). Entra CON su enlace y con el mismo retardo: si apareciera de golpe, se vería la rejilla antes que el contenido. */ .hpanel a + a::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 62%; max-width: 260px; height: 1px; background: currentColor; opacity: 0; transition: opacity .2s ease; } body.menu-abierto .hpanel a + a::before { opacity: .07; transition: opacity .5s var(--ease, cubic-bezier(.16,1,.3,1)); transition-delay: inherit; } .hpanel a { position: relative; } /* El dedo encima: el enlace se acerca un pelín. Feedback físico, sin color. */ .hpanel a:active { transform: scale(.97); transition-duration: .1s; } .hpanel a[aria-current="page"] { color: var(--gold, #ffb500); } /* La firma de la marca cierra el índice. No es un enlace: es el eslogan, y ver una frase de marca al final del menú se lee como una tarjeta de visita. */ .hpanel__pie { margin: 46px 0 0; font-size: 13px; font-weight: var(--fw-med, 500); letter-spacing: .015em; /* En DORADO (Juan, 1-ago). Es el eslogan de la marca, no un pie de página gris: en oro se lee como la firma que cierra el menú. */ color: var(--gold, #ffb500); opacity: 0; transform: translateY(16px); filter: blur(5px); transition: opacity .18s ease, transform .18s ease, filter .18s ease; } body.menu-abierto .hpanel__pie { opacity: 1; transform: none; filter: blur(0); transition-delay: .38s; transition: opacity .55s var(--ease, cubic-bezier(.16,1,.3,1)), transform .62s var(--ease, cubic-bezier(.16,1,.3,1)), filter .55s var(--ease, cubic-bezier(.16,1,.3,1)); } /* ── LA PÁGINA DE DETRÁS SE ALEJA ── Un 1,5% de escala hacia atrás mientras el menú está abierto. Es el gesto de iOS al abrir el centro de control: no es un panel encima de la página, es la página que da un paso atrás para dejar sitio. Se nota sin verse. */ body.menu-abierto main, body.menu-abierto .site-footer { transform: scale(.985); transform-origin: 50% 30%; transition: transform .6s var(--ease, cubic-bezier(.16,1,.3,1)); } main, .site-footer { transition: transform .4s var(--ease, cubic-bezier(.16,1,.3,1)); } /* ───────────────────────────────────────────────────────────────────────────── LA CABECERA EN MÓVIL · 13-sep-2026 (segunda vuelta, y esta es la buena) PRIMER INTENTO: idioma · logo · cuenta · menú, los cuatro en la fila. Se acabó el solape… pero el logo dejó de estar en el eje, porque el ala izquierda medía 48 px y la derecha 100. Juan: «desplazaste el logo del medio, eso no se puede hacer nunca». Tiene razón y es su regla de siempre. LO QUE ÉL DECIDIÓ, y resuelve las dos cosas a la vez: «el selector de idioma lo metes dentro de las tres rayas; las tres rayas a la izquierda y la cuenta a la derecha». Con DOS controles del MISMO ancho (44 px), uno a cada lado, el logo cae clavado en el centro — es la misma idea que ya estaba escrita aquí en julio: dos pistas laterales iguales, no `1fr auto 1fr`. [ ☰ ] BRIOX BAKER [ 👤 ] Y el idioma no desaparece: vive DENTRO del menú, que es donde se busca lo que no es de uso diario. ───────────────────────────────────────────────────────────────────────────── */ @media (max-width: 880px) { .hnav { display: none; } .header__inner { grid-template-columns: 44px minmax(0, 1fr) 44px; gap: 8px; } /* LAS TRES RAYAS, A LA IZQUIERDA */ .hmenu { display: inline-flex; grid-column: 1; grid-row: 1; justify-self: start; } .brand { grid-column: 2; grid-row: 1; justify-self: center; min-width: 0; } /* con `height:26px; width:auto` la imagen no puede encoger: hay que soltar el alto */ .brand img { width: auto; height: auto; max-width: 100%; max-height: 26px; } /* LA CUENTA, A LA DERECHA. Especificidad `.site-header .hcuenta` a propósito: su regla de escritorio la deja fuera del flujo y aquí tiene que entrar en la rejilla. */ .site-header .hcuenta { position: static; transform: none; right: auto; inset: auto; grid-column: 3; grid-row: 1; justify-self: end; } /* EL IDIOMA SE VA AL MENÚ: aquí arriba ya no cabe sin mover el logo del eje. */ .site-header .hidioma { display: none; } } @media (min-width: 881px) { .hpanel { display: none; } } @media (prefers-reduced-motion: reduce) { .site-header.hidden { transform: none; } .hnav a, .hpanel a, .hmenu i { transition-duration: .01ms; transform: none !important; } /* Sin animación de entrada, pero los enlaces SE VEN igual (opacity 1). */ .hnav a { animation: none; opacity: 1; } /* El menú abre y cierra igual, pero sin nada que se mueva ni se desenfoque: quien pide menos movimiento no puede quedarse sin poder navegar. */ .hpanel a, .hpanel__pie { filter: none !important; transform: none !important; transition: opacity .01ms !important; } body.menu-abierto .hpanel a, body.menu-abierto .hpanel__pie { opacity: 1; transition-delay: 0s !important; } body.menu-abierto main, body.menu-abierto .site-footer { transform: none; } .hpanel::before { transition: none; } } /* La caja del header. En la landing `.wrap` ya existe (1240px); aquí se repite ACOTADA al header para las páginas que no cargan styles.css. Al estar scoped, no puede pisar el .wrap del resto de la web. */ .site-header .wrap { width: 100%; max-width: var(--maxw, 1240px); margin-inline: auto; padding-inline: var(--pad, 22px); } /* 44px de alto MÍNIMO en el logo y en los enlaces del menú (3-ago). Medido en un iPhone: el logo era un blanco de 26 px de alto y el menú de 38 — por debajo de lo que mide la yema de un dedo, así que había que apuntar. El LOGO no crece: crece su zona de toque, con el dibujo centrado dentro. */ .site-header .brand { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; } .site-header .nav-big { display: inline-flex; align-items: center; min-height: 44px; } .site-header .brand img { display: block; } /* Las fichas pintan sus enlaces con subrayado al pasar; en el header manda el filete. */ .site-header a:hover, .hpanel a:hover { text-decoration: none; } /* ── LA CUENTA · la puerta al portal de pedidos (11-sep-2026) ─────────────── Juan: «añadir arriba a la derecha lo de cuenta» y, al verlo, «más para la derecha». Va pegada al borde, la última de la fila, con el selector de idioma a su izquierda: es la acción, y la acción vive donde acaba la vista. Fuera del flujo (absolute) por lo mismo que el selector: dentro del ala derecha ensanchaba una columna 1fr, y eso saca el logo del eje y genera scroll lateral. Se distingue por el ICONO, no por una caja de color: la pastilla translúcida con borde del mismo tono está prohibida en la casa. */ .hcuenta { position: absolute; right: clamp(10px, 1.4vw, 26px); top: 50%; z-index: 5; display: inline-flex; align-items: center; gap: .45rem; height: 44px; padding-inline: 4px; transform: translateY(-50%); font-size: 13px; font-weight: var(--fw-dato, 500); line-height: 1; letter-spacing: .015em; color: var(--gold, #ffb500); text-decoration: none; white-space: nowrap; transition: color .22s ease, opacity .22s ease; } .hcuenta svg { width: 17px; height: 17px; flex: none; } @media (hover: hover) { .hcuenta:hover { color: var(--cream, #f5efe3); } } .hcuenta:active { opacity: .8; } /* En móvil manda el pulgar: se queda el icono (el texto sigue en el DOM para quien lee la página) y se aparta del botón de menú, que vive en esa misma esquina. */ @media (max-width: 880px) { /* Ya no se aparta con un `right:` a mano: ahora tiene su propia pista en la rejilla (ver el bloque de arriba) y el hueco se lo reserva el navegador. */ .hcuenta { padding-inline: 4px; } .hcuenta span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .hcuenta svg { width: 20px; height: 20px; } } /* Cuando el portal ya sabe quién eres, «Cuenta» pasa a saludarte. Se enseña también en móvil: un nombre propio es la única etiqueta que merece quitarle sitio al pulgar, porque dice que estás dentro. */ .hcuenta--saluda span { position: static; width: auto; height: auto; clip-path: none; } /* ⚠️ EN MÓVIL, SOLO EL ICONO — TAMBIÉN CUANDO YA SABE TU NOMBRE (Juan, 13-sep-2026: «en la versión móvil le vas a quitar lo de hola Admin, le dejas solo el icono»). Antes el nombre se enseñaba también en el móvil con el argumento de que «dice que estás dentro»; ocupaba 90 px en una fila donde el logo pelea por el eje. El nombre se queda en el DOM para quien lee la página. */ @media (max-width: 880px) { .hcuenta--saluda span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } } /* ---------- Selector de idioma: DESPLEGABLE ---------- Juan, 13-sep-2026: «te dije que fuese un desplegable». Antes eran los cuatro enlaces en fila y, además, sin CSS ninguno: salían pegados — «ESENFRPT» — en 34 páginas y también en producción. Va con
/: abre y cierra SIN JavaScript, así que funciona aunque el JS falle o tarde. Y no es un