/* ================================================================= HEADER ================================================================= */ /* OJO: este `sticky` **no es lo que pega la barra arriba** cuando la cabecera va montada con Bricks, y no se puede arreglar desde aquí. Un elemento pegajoso no puede salirse de la caja de su padre, y el árbol que monta Bricks es `#brx-header` (90 px) > `div.brxe-jri-header` (90 px) > `.jri-site-header` (90 px): el padre mide exactamente lo mismo, así que no hay ni un píxel de recorrido y la barra se va con el resto de la página. Lo que la pega es el ajuste **nativo** de la plantilla de cabecera de Bricks (`headerSticky` + `headerStickyOnScroll` en `_bricks_template_settings` de la 236012), que pone `position: sticky` en `#brx-header`, cuyo padre es el `` y sí tiene recorrido. Ver CLAUDE.md. Se queda declarado porque sirve fuera de Bricks: con el shortcode dentro de un contenedor alto, esto es lo único que hay. */ .jri-site-header { position: sticky; top: 0; z-index: 100; /* Blanca, como la franja del logo en drigo.pe. Con la cabecera en azul el logo —que es azul— se perdía sobre el fondo. La navegación conserva el azul de marca en sus pastillas. */ background: var(--white); color: var(--near-black); border-bottom: 1px solid var(--gray-150); } .jri-header-inner { display: flex; align-items: center; gap: var(--space-6); min-height: var(--header-h); padding-block: var(--space-3); } /* Logo y pastillas **no encogen**: entre 981 y 1300 px la fila va justa y el único que debe ceder es el buscador, que tiene sitio de sobra. Sin esto el ancho fijo del logo desbordaba su propio enlace. */ .jri-logo { flex: none; } /* Se acota la ALTURA, no la anchura. El logo de JR Implementos era apaisado, así que fijar `width: 240px` daba una franja baja. El de Drigo es casi cuadrado (216×150): a 240 px de ancho son **167 px de alto**, y con eso la cabecera se iba a 187 px en vez de los 90 del sistema. Acotando la altura, la cabecera manda sobre el logo y no al revés. */ .jri-logo img { height: 60px; width: auto; } .jri-main-nav { flex: none; } .jri-main-nav .jri-nav-list { display: flex; gap: var(--space-3); } /* Pastillas «Categorías» y «Marcas»: **dos enlaces y nada más**. No despliegan ningún panel al pasar por encima; lo que enseñaba el mega menú es justo lo que ya hay en el menú lateral. `min-width` fijo porque en el Figma las dos miden lo mismo (176 px): con solo relleno, «CATEGORÍAS» saldría bastante más ancha que «MARCAS» y la pareja se leería descuadrada. */ .jri-nav-link { display: flex; align-items: center; justify-content: center; min-width: 176px; height: 38px; padding: 0 22px; /* Sobre la barra blanca: pastilla perfilada en azul de marca. Antes era blanca sobre blanca —heredado de la cabecera negra de JRI— y no se veía. */ color: var(--brand-dark); font-weight: 700; font-size: 14px; letter-spacing: .3px; text-transform: uppercase; border: 1px solid var(--brand-dark); border-radius: var(--radius-pill); white-space: nowrap; transition: background .2s, color .2s, border-color .2s; } .jri-nav-link:hover { background: var(--brand-dark); border-color: var(--brand-dark); color: var(--white); } /* ---------------- Buscador ---------------- Píldora **gris sobre la barra blanca**, con la lupa dentro del mismo gris: en el Figma no hay botón amarillo. El campo y el botón son transparentes; el color lo pone el contenedor, así que no hay dos fondos que mantener a la par. */ .jri-search { flex: 0 1 460px; margin-left: auto; display: flex; align-items: center; height: 48px; background: var(--gray-100); border-radius: var(--radius-pill); overflow: hidden; max-width: 460px; } /* `line-height: 1` y altura fija en la píldora, no relleno vertical: el campo hereda del tema un interlineado de 60 px y la barra salía de 64 en vez de 48. Es el mismo tropiezo del «Enviar cotización» del checkout. */ .jri-search input { flex: 1; min-width: 0; align-self: stretch; border: none; outline: none; background: transparent; color: var(--near-black); padding: 0 4px 0 24px; font-size: 15px; line-height: 1; font-family: inherit; } /* Solo el marcador va en cursiva —es lo que marca el Figma—; lo que se escribe sale recto. `opacity: 1` porque Firefox lo baja por su cuenta y el gris quedaba casi invisible sobre el #444. */ .jri-search input::placeholder { color: var(--text-muted); font-style: italic; opacity: 1; } /* La «×» de limpiar de WebKit se pinta en oscuro: sobre el gris de la píldora no se ve. Se blanquea con el mismo recurso que los iconos del menú. */ .jri-search input::-webkit-search-cancel-button { filter: invert(1); opacity: .6; } .jri-search button { flex: none; border: none; background: transparent; color: var(--text-muted-2); padding: 0 22px; display: grid; place-items: center; cursor: pointer; } /* Azul de Drigo, el color que manda en la marca. (El amarillo que había aquí antes venía del sitio heredado, no de Drigo: su logo no lleva amarillo.) */ .jri-search button:hover { color: var(--brand-blue); } /* La lupa que abre el buscador en móvil. En escritorio el campo se ve entero, así que sobra. */ .jri-search-toggle { display: none; } .jri-search-btn { display: none; } /* ---------------- Acciones (lista de cotización) ---------------- */ .jri-header-actions { display: flex; align-items: center; gap: var(--space-5); } .jri-cart-link { position: relative; flex: none; color: var(--near-black); display: grid; place-items: center; transition: color .2s; } .jri-cart-link:hover { color: var(--brand-dark); } /* Círculo **blanco con el número en negro**, abajo a la derecha y montado sobre el portapapeles, como en el Figma. Antes era un punto amarillo de 16 px arriba a la derecha. El aro oscuro que lo separa del icono va con `box-shadow` y no con `border`: así el círculo mide lo que dice `width` y el hueco no depende de restarle el borde. El color del aro es el fondo de la barra. */ .jri-cart-count { position: absolute; right: -14px; bottom: -10px; width: 25px; height: 25px; border-radius: 50%; background: var(--brand-orange); color: var(--near-black); box-shadow: 0 0 0 3px var(--white); font-size: 13px; font-weight: 700; line-height: 1; display: grid; place-items: center; } /* Hamburguesa (a la izquierda del logo, visible en escritorio y en móvil) */ .jri-hamburger { display: flex; flex-direction: column; justify-content: center; gap: 5px; cursor: pointer; padding: 8px 0; flex: none; } /* Azul de marca. Era blanca, heredado de la cabecera negra de JR Implementos, y sobre la cabecera blanca de Drigo quedaba invisible. */ .jri-hamburger span { width: 27px; height: 3px; background: var(--brand-dark); border-radius: 2px; transition: .3s; } .jri-hamburger:hover span { background: var(--brand-orange-dark); } /* ================================================================= MENÚ LATERAL (drawer) — abre con la hamburguesa (CSS-only) ================================================================= */ .jri-drawer-toggle { display: none; } .jri-drawer-overlay { position: fixed; inset: 0; z-index: 900; background: rgba(0,0,0,.5); opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; } .jri-drawer { position: fixed; top: 0; left: 0; z-index: 950; width: 360px; max-width: 88vw; height: 100%; display: flex; flex-direction: column; /* Blanco, como la cabecera: el panel se lee como su prolongación. En azul el logo —que también es azul— se camuflaba contra el fondo. */ background: var(--white); color: var(--near-black); box-shadow: 2px 0 24px rgba(0,0,0,.35); transform: translateX(-100%); transition: transform .3s ease; overflow-y: auto; overscroll-behavior: contain; /* Scrollbar sutil (Firefox) */ scrollbar-width: thin; scrollbar-color: var(--gray-300) transparent; } /* Scrollbar sutil (Chromium/WebKit) */ .jri-drawer::-webkit-scrollbar { width: 6px; } .jri-drawer::-webkit-scrollbar-track { background: transparent; } .jri-drawer::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: 10px; } .jri-drawer::-webkit-scrollbar-thumb:hover { background: var(--text-muted); } .jri-drawer-toggle:checked ~ .jri-drawer-overlay { opacity: 1; visibility: visible; } .jri-drawer-toggle:checked ~ .jri-drawer { transform: translateX(0); } .jri-drawer-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-5); border-bottom: 1px solid var(--gray-150); } .jri-drawer-logo { width: 170px; height: auto; } .jri-drawer-close { cursor: pointer; font-size: 22px; line-height: 1; color: var(--near-black); padding: 4px 8px; } .jri-drawer-close:hover { color: var(--brand-orange-dark); } .jri-drawer-nav { padding: var(--space-2) var(--space-5) var(--space-7); } .jri-drawer-group { border-bottom: 1px solid var(--gray-150); } .jri-drawer-group > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; padding: var(--space-4) 0; font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; color: var(--near-black); } .jri-drawer-group > summary::-webkit-details-marker { display: none; } /* La flecha va en blanco, como el rótulo al que acompaña: en amarillo se leía como un acento y competía con él. */ .jri-drawer-group > summary::after { content: "⌄"; font-size: 15px; line-height: 1; color: var(--brand-dark); transition: transform .2s; } .jri-drawer-group[open] > summary::after { transform: rotate(180deg); } .jri-drawer-section { padding: var(--space-4) 0; border-bottom: 1px solid var(--gray-150); } .jri-drawer-section h4 { margin-bottom: var(--space-3); font-size: 14px; font-weight: 700; text-transform: uppercase; color: var(--brand-dark); } .jri-drawer-group ul, .jri-drawer-section ul { list-style: none; margin: 0; padding: 0 0 var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); } .jri-drawer-section ul { padding-bottom: 0; } .jri-drawer-group a, .jri-drawer-section a { color: var(--near-black); font-size: 14px; } /* «Teléfonos:» en blanco y en negrita, el número en gris suave. */ .jri-drawer-rotulo { font-weight: 700; color: var(--near-black); } .jri-drawer-valor { color: var(--text-muted-2); } .jri-drawer-section a:hover .jri-drawer-rotulo, .jri-drawer-section a:hover .jri-drawer-valor { color: var(--brand-orange-dark); } .jri-drawer-section ul { gap: var(--space-3); } .jri-drawer-group a:hover, .jri-drawer-section a:hover { color: var(--brand-orange-dark); } /* Botón ancho con el icono de cuadros, del mismo gris que las pastillas de arriba. Antes era un enlace amarillo suelto. */ .jri-drawer-all { display: flex; align-items: center; justify-content: center; gap: var(--space-3); width: 100%; margin: 2px 0 var(--space-4); padding: 14px var(--space-4); border-radius: var(--radius-lg); background: var(--gray-100); font-size: 14px; font-weight: 500; color: var(--brand-dark); transition: background .15s; } .jri-drawer-all:hover { background: var(--gray-150); color: var(--brand-dark); text-decoration: none; } .jri-drawer-all-ico { flex: none; } .jri-drawer-note { margin: var(--space-3) 0 0; font-size: 12px; color: var(--text-muted); } /* Tiles de Categorías / Marcas dentro del drawer (cuadros con imagen, estilo catálogo) */ .jri-drawer-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: var(--space-2) 0 var(--space-3); } /* Las pastillas de categoría van sobre el mismo gris del panel, un punto más claras, con el icono y el nombre en blanco. Las de marca **no**: sus logos son a color y necesitan fondo claro (más abajo). */ .jri-drawer-tile { display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; padding: 5px; background: var(--gray-100); border-radius: var(--radius-md); transition: transform .15s, box-shadow .15s; } .jri-drawer-tiles--cats .jri-drawer-tile { /* Sobre el #444 del panel da ≈ #575757, que es el gris del diseño. Se pone en blanco translúcido y no en un hex para que siga al fondo si cambia. */ background: var(--gray-100); padding: 10px; } .jri-drawer-tiles--cats .jri-drawer-tile:hover { background: var(--gray-150); } /* Los iconos son siluetas **#444444 sobre transparente** —el mismo gris del panel, así que sin esto se verían casi negros sobre gris—. `brightness(0)` las aplasta a negro puro y `invert(1)` las pasa a blanco, respetando el canal alfa. Es la vía que sirve para todo el juego sin retocar 13 ficheros. La imagen ocupa la pastilla entera porque **el nombre viene dentro del propio PNG**, dibujado bajo el pictograma. */ .jri-drawer-tiles--cats .jri-drawer-tile img { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: contain; /* Sin filtro. Ese `brightness(0) invert(1)` pintaba el icono de **blanco puro** para que se viera sobre el panel azul de JR Implementos; sobre el panel blanco de Drigo lo dejaba invisible. Y aquí no hace falta: las miniaturas de categoría de Drigo son fotos a color, no iconos monocromos. */ filter: none; } .jri-drawer-tile:hover { transform: translateY(-2px); box-shadow: 0 2px 10px rgba(3, 76, 144, .22); } .jri-drawer-tile img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; } /* ---------------- Pastillas de marca ---------------- Mismo gris que las de categoría, pero con el logo en blanco y el nombre escrito debajo (los logos de marca no lo llevan dentro). **Los logos no se pueden invertir sin más:** 24 de los 29 son JPG, o sea con fondo blanco opaco, y `brightness(0) invert(1)` dejaría el cuadro entero en blanco. La vía que funciona es pasarlos a gris, invertirlos —el fondo blanco se vuelve negro y el logo, claro— y mezclarlos en `screen`, que hace desaparecer el negro sobre el gris de la pastilla. El punto de brillo extra es para los logos de gris medio, que si no salen apagados. */ .jri-drawer-tiles--brands .jri-drawer-tile { flex-direction: column; justify-content: center; gap: 8px; aspect-ratio: auto; min-height: 96px; padding: 12px 8px; background: var(--gray-100); isolation: isolate; text-align: center; } .jri-drawer-tiles--brands .jri-drawer-tile:hover { background: var(--gray-150); } .jri-drawer-tiles--brands .jri-drawer-tile-ico { display: flex; align-items: center; justify-content: center; height: 40px; } .jri-drawer-tiles--brands .jri-drawer-tile img { max-height: 40px; max-width: 100%; width: auto; height: auto; object-fit: contain; } /* Solo las marcas **sin** logo blanco pasan por la conversión. Las que lo tienen se pintan tal cual, que siempre sale mejor que cualquier filtro. */ .jri-drawer-tile--convertir img { /* Sin conversión. Ese `invert` + `screen` servía para que un logo oscuro se leyera sobre el panel azul de JR Implementos; sobre el panel blanco de Drigo lavaba los logos hasta dejarlos casi invisibles. */ filter: none; mix-blend-mode: normal; } .jri-drawer-tile-nombre { display: block; font-size: 11px; font-weight: 600; line-height: 1.25; color: var(--near-black); } /* Te asesoramos: caja WhatsApp (borde punteado) + accesos tipo tarjeta */ .jri-drawer-wa { display: flex; align-items: center; gap: var(--space-3); margin: 0 0 var(--space-3); padding: 11px 16px; border: 1px dashed var(--gray-300); border-radius: var(--radius-lg); font-size: 13px; color: var(--text-muted-2); } .jri-drawer-wa-ico { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--brand-dark); color: var(--brand-dark); } /* `minmax(0, 1fr)` y no `1fr` a secas. `1fr` equivale a `minmax(auto, 1fr)`: si el contenido de una celda no cabe, la columna crece por encima de su parte y **el grid desborda su contenedor**. Aquí pasaba con «Libro de Reclamaciones»: las tres columnas sumaban 393 px dentro de un panel de 320, y la tercera se salía 53 px por la derecha. Con el mínimo en 0 las tres columnas se reparten a partes iguales y el texto parte de línea. */ .jri-drawer-help { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); } /* `hyphens` y no `overflow-wrap: anywhere`: «anywhere» parte por donde caiga y dejaba «COTIZACIÓ / N» o «FRECUENT / ES». Con guionado el navegador corta por sílaba y marca el corte —«RECLAMA-CIONES»—, que es lo que se espera leer. Funciona porque WordPress declara `lang="es-ES"` en el . `break-word` queda de red por si algún rótulo futuro no admite guionado. */ .jri-drawer-help-item { padding-inline: var(--space-1); hyphens: auto; overflow-wrap: break-word; } .jri-drawer-help-item { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); padding: var(--space-5) var(--space-2); /* Mismo gris que las pastillas de categoría. Antes era negro translúcido, que sobre el #444 salía bastante más oscuro que en el diseño. */ background: var(--gray-100); border-radius: var(--radius-lg); text-align: center; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; line-height: 1.25; color: var(--brand-dark); transition: background .2s, color .2s; } .jri-drawer-help-item:hover { background: var(--brand-dark); color: var(--white); } .jri-drawer-help-ico { color: var(--brand-dark); } .jri-drawer-help-item:hover .jri-drawer-help-ico { color: var(--brand-dark); } /* Contacto: redes sociales */ .jri-drawer-social { display: flex; gap: var(--space-3); margin-top: var(--space-4); } /* Círculo **blanco relleno** con el glifo recortado en el gris del panel, que es como está en el diseño. Antes era un círculo transparente con un filete blanco: se perdía sobre el fondo oscuro. */ .jri-drawer-social a { width: 34px; height: 34px; border-radius: 50%; border: 0; display: grid; place-items: center; background: var(--brand-dark); color: var(--white); transition: background .2s, color .2s; } .jri-drawer-social a:hover { background: var(--brand-orange); color: var(--near-black); } .jri-drawer-social svg { width: 18px; height: 18px; } /* ================================================================= MÓVIL Y TABLET La cabecera **nunca ha tenido reglas responsivas que se aplicaran**: las del diseño estático se escribieron sin el prefijo (`.header-inner`, `.logo`, `.search`, `.main-nav`), así que no alcanzaban a nada. De ahí que hasta ahora el buscador de 460 px y las dos pastillas siguieran en la fila en una pantalla de 390. ================================================================= */ /* Entre 981 y 1200 la fila va justa y el único que cede es el buscador: a 981 se quedaba en 166 px, con el marcador cortado a media palabra. Se recorta antes lo que no se lee —el aire entre piezas, el relleno de las pastillas y el logo— y el campo recupera unos 150. */ @media (max-width: 1200px) { .jri-header-inner { gap: var(--space-4); } .jri-logo img { height: 54px; } .jri-nav-link { min-width: 140px; padding: 0 16px; } } @media (max-width: 980px) { /* `--header-h` baja a 64 px en `base.css`: lo comparten el panel del catálogo y la columna del total, así que el token no puede vivir aquí. */ /* `wrap` para que el buscador pueda bajar a una segunda línea al abrirlo. */ .jri-header-inner { flex-wrap: wrap; gap: var(--space-4); } /* Las dos pastillas se van: sus destinos están en el menú lateral. */ .jri-main-nav { display: none; } .jri-logo img { height: 48px; } .jri-hamburger span { width: 22px; height: 2.5px; } .jri-hamburger { gap: 4px; } .jri-header-actions { margin-left: auto; gap: var(--space-5); } .jri-search-btn { display: grid; place-items: center; padding: 4px; cursor: pointer; color: var(--near-black); transition: color .2s; } .jri-search-btn:hover { color: var(--brand-dark); } /* El campo se pliega tras la lupa y ocupa una fila entera al abrirse. `order` lo manda al final aunque en el marcado vaya antes de las acciones. Se oculta con `display: none` y no fuera de la vista: si no, quedaría un campo de formulario enfocable con el tabulador que no se ve. */ .jri-search { order: 5; flex: 1 0 100%; max-width: none; margin: 0 0 var(--space-3); min-height: 44px; display: none; } .jri-search-toggle:checked ~ .jri-search { display: flex; } /* El contador **sobresale** del icono, y en móvil el margen del contenedor es de 16 px: sin recolocar, el círculo se pegaba al borde de la pantalla. Se desplaza el icono lo que sobresale el círculo, así que lo que queda a ras del margen es el grupo entero, que es como está en el Figma. */ .jri-cart-link { margin-right: 14px; } .jri-cart-count { box-shadow: 0 0 0 2px var(--white); } } @media (max-width: 500px) { .jri-header-inner { gap: var(--space-3); } /* Por debajo de ~348 px el logo a 160 no cabe junto a la hamburguesa, la lupa y el carrito, y la fila se partía en dos —la cabecera pasaba de 64 a 106 px en una pantalla de 320—. Con `min()` encoge **solo ahí**: a 360 y a 390 se queda en los 160 del Figma. */ .jri-logo img { height: 44px; } }