/* ============================================================================= Sillas y Mesas de Madera — hoja del child theme ============================================================================= PrestaShop registra este fichero como `theme-custom` con priority 1000, así que carga SIEMPRE después del `theme.css` de Hummingbird. Además, Hummingbird envuelve todo su CSS en capas en cascada: @layer vendors, bs-base, bs-components, bs-custom-components, ps-base, ps-components, ps-pages, ps-modules, utilities; El CSS sin capa gana a cualquier CSS en capa, sea cual sea la especificidad. Por eso aquí NO hace falta ni un solo `!important` ni selectores inflados: basta con escribir la regla fuera de `@layer` y ya manda. Estructura del fichero: 0. Tipografía — Figtree autoalojada (los titulares; el cuerpo es Inter) 1. Tokens — la única capa donde hay colores literales 2. Puente Bootstrap — mapea los tokens a las variables --bs-* 3. Base — tipografía, contenedores, foco accesible 4. Componentes — cabecera, tarjeta de producto, footer, breadcrumb… 5. Módulos Nexir — ritmo vertical de los bloques nxr_* de la home Esta hoja SÍ lleva la marca: es el tema del cliente, no el tema base. La paleta del bloque 1 es la de la web anterior (tema Panda) leída de su CSS y de la configuración `STSN_*` de producción — negro y salvia #7caead sobre grises claros — con dos correcciones: · el salvia pasa a token decorativo (`--sm-sage`) y NO a acento. Sobre blanco da 2,5:1 y sobre él sólo se lee texto oscuro: como color de botones y precios no llega a AA por ningún lado. Se usa donde estaba en la web vieja (bandas, iconos, subrayado del menú), que es lo que se ve. · los grises neutros (#f2f2f2) viran a crema cálida. Es una tienda de muebles de madera: el neutro frío peleaba con la fotografía. ========================================================================== */ /* ============================================================================= 0. TIPOGRAFÍA AUTOALOJADA ----------------------------------------------------------------------------- Figtree es la tipografía de los titulares. Sustituye a Vollkorn —la serif de la web anterior— el 2026-08-30, por decisión del cliente: su contraste alto y sus remates finos daban un aire de libro decimonónico que chocaba con el Inter del cuerpo y con el tono limpio del resto de la tienda. Va servida desde el propio tema, igual que iba Vollkorn: sin petición a un tercero, sin aviso de RGPD que dar y sin el salto de layout de la hoja externa. Pesa 30 KB contra los 84 KB de Vollkorn. Es una fuente VARIABLE: un solo fichero por subconjunto cubre de 400 a 900 y el navegador interpola. Los `unicode-range` son los de Google tal cual: sin ellos el navegador se baja el latin-ext aunque la página sea toda ASCII. ⚠️ El formato se declara `woff2` a secas, NO `woff2-variations` como estaba escrito para Vollkorn: aquel valor salió de un borrador de la especificación que ya no existe, y un navegador que no lo reconozca descarta la fuente entera y cae al fallback sin dar ningún error. Es lo que sirve Google. ========================================================================== */ @font-face { font-family: Figtree; font-style: normal; font-weight: 400 900; font-display: swap; src: url("../fonts/figtree-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: Figtree; font-style: normal; font-weight: 400 900; font-display: swap; src: url("../fonts/figtree-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ============================================================================= 1. TOKENS ----------------------------------------------------------------------------- Único sitio del theme con colores literales. Los valores por defecto son neutros a propósito: el theme no impone marca, la recibe. Los tres primeros (--nxr-accent, --nxr-accent-contrast, --nxr-accent-dark) son el contrato compartido con los 26 módulos nxr_*, que los consumen con fallback propio. Al declararlos aquí, todos viran a la vez. ========================================================================== */ :root { /* --- Acento de marca --- El negro de la web anterior (`STSN_MENU_COLOR`, `STSN_FOOTER_PRIMARY_COLOR` y `STSN_S_TITLE_BLOCK_COLOR` valían todos #000000), con el matiz verde del salvia de marca para que no cante junto a las bandas. */ --nxr-accent: #1f2422; /* Los mismos canales del acento en formato `R, G, B`. Bootstrap construye con él los rgba() de sus utilidades (.text-primary, .bg-primary…) y CSS no sabe descomponer un hex, así que hay que darlo aparte. Mantener sincronizado con --nxr-accent; nxr_themeconfig lo calcula solo. */ --nxr-accent-rgb: 31, 36, 34; --nxr-accent-contrast: #ffffff; --nxr-accent-dark: color-mix(in srgb, var(--nxr-accent) 80%, #000); /* Texto sobre `--nxr-accent-dark`. Parece redundante con `--nxr-accent-contrast` y NO lo es: ese token dice qué se lee sobre el ACENTO, y el theme lo estaba reutilizando también sobre el acento oscuro, dando por hecho que los dos tienen una luminosidad parecida. Con un acento medio-oscuro (el teal de serie) se cumple; con uno LUMINOSO no, y los dos tokens colapsan en el mismo valor. Pasó de verdad: con el lima de Europa 3G, `--nxr-accent-dark` y `--nxr-accent-contrast` valen los dos `#212529`, así que el hover de `.btn-primary` era tinta sobre tinta —contraste 1:1— y el texto de «Añadir al carrito» y «Finalizar compra» DESAPARECÍA al pasar el ratón. `nxr_themeconfig` lo calcula por luminancia cuando no se configura. */ --nxr-accent-dark-contrast: #ffffff; --nxr-accent-soft: var(--nxr-surface-alt); --nxr-accent-line: var(--nxr-line); /* --- Texto y superficies --- */ --nxr-ink: var(--nxr-accent); --nxr-ink-soft: #626a67; --nxr-surface: #ffffff; /* Crema, no el #f2f2f2 de la web vieja: el gris frío apagaba las fotos de madera, que es prácticamente todo el catálogo. */ --nxr-surface-alt: #f1f2ee; /* El filete NO puede ser el mismo valor que la superficie —están a distancia 25 y hacen trabajos opuestos: un fondo tiene que ser imperceptible sobre el blanco (1,12:1) y un borde tiene que percibirse—, pero sí puede salir de ella. Al 93% da exactamente el `#e2e4e0` de antes: cero cambio a la vista, un literal menos, y el filete queda atado al neutro para siempre. */ --nxr-line: color-mix(in srgb, var(--nxr-surface-alt) 93%, var(--nxr-ink)); /* --- Salvia de marca --- El #7caead de la web anterior: fondo de la banda de newsletter, color de los iconos de la home y subrayado del menú al pasar el ratón (`STSN_MENU_BOTTOM_BORDER_HOVER_COLOR`) y, desde el rediseño de la cabecera, fondo de la barra superior. Decorativo: sobre él sólo se lee texto OSCURO —la tinta o `--sm-sage-ink`—, nunca blanco (2,5:1). No se toca `--nxr-accent` con él (ver cabecera del fichero). */ --sm-sage: #7caead; --sm-sage-rgb: 124, 174, 173; --sm-sage-ink: var(--nxr-ink); --sm-sage-soft: var(--nxr-surface-alt); /* --- Semánticos --- */ /* El precio va al acento OSCURO, no al acento. Es texto sobre fondo claro, y ahí el acento no llega a AA con ningún valor luminoso: con el lima #ccff00 de Europa 3G da 1,18:1 (invisible) y con el teal #2ec4b6 de serie, 2,3:1 (tampoco pasa). Un precio es el dato que más se mira de una tarjeta: no puede depender de que el cliente elija un acento oscuro. Lo consumen la tarjeta de producto (§4.5) y la ficha (§4.6). */ --nxr-price: var(--nxr-accent-dark); --nxr-sale: #b91c1c; --nxr-success: #15803d; --nxr-warning: #b45309; /* Los mismos tres en canales `R, G, B`. Bootstrap pinta sus utilidades de color semántico con `rgba(var(--bs-*-rgb), …)` y CSS no sabe descomponer un hex, igual que pasa con el acento. Mantener sincronizado con los tres de arriba; el de rebaja lo recalcula `nxr_themeconfig` cuando se configura. */ --nxr-sale-rgb: 185, 28, 28; --nxr-success-rgb: 21, 128, 61; --nxr-warning-rgb: 180, 83, 9; /* --- Cabecera --- */ /* La barra superior es la ÚNICA franja de color de la cabecera, y es salvia: es el color que la web anterior repartía por toda la página (banda de newsletter, iconos, subrayado del menú) y aquí se concentra donde rinde. Es el único sitio donde el salvia lleva texto encima, y por eso el texto es la tinta y no el blanco: #1f2422 sobre #7caead da 6,3:1 (AA de sobra), mientras que el blanco se queda en 2,5:1. Ver la nota de `--sm-sage`. */ --nxr-topbar-bg: var(--sm-sage); --nxr-topbar-fg: var(--nxr-ink); --nxr-header-bg: var(--nxr-surface); --nxr-header-fg: var(--nxr-ink); --nxr-menubar-bg: var(--nxr-surface); --nxr-menubar-fg: var(--nxr-ink); /* --- Pie --- */ --nxr-footer-bg: var(--nxr-accent); /* Salvia pálido, no un gris. Era `#c3cfcd`: un literal suelto heredado, el único color de la paleta que no salía de ningún sitio, con la saturación al 11% —un gris con un recuerdo de verde— y a 9,84:1 sobre el fondo, cuando los títulos que tiene justo encima van a 15,75. Ese salto era lo que lo hacía parecer apagado. Derivado del salvia queda en 24% de saturación (la misma del salvia) y 12,77:1, y deja de ser un color propio: la paleta baja a nueve. */ --nxr-footer-fg: color-mix(in srgb, #fff 74%, var(--sm-sage)); --nxr-footer-heading: #ffffff; --nxr-footer-line: rgb(255 255 255 / 12%); /* --- Forma --- */ /* Dos radios y sólo dos: 8 px para controles y tarjetas, 16 px para los bloques grandes (banda de la home, tarjetas de categoría, modales). */ --nxr-radius: 8px; --nxr-radius-sm: 8px; --nxr-radius-lg: 16px; --nxr-radius-pill: 999px; --nxr-shadow: 0 1px 2px rgb(17 24 39 / 6%), 0 4px 16px rgb(17 24 39 / 6%); --nxr-shadow-lg: 0 8px 32px rgb(17 24 39 / 12%); --nxr-container: 1280px; /* --- Tipografía --- */ /* Inter viene autoalojada con Hummingbird: sin CDN externo, sin RGPD. Figtree, la de los titulares, se autoaloja igual (§0), no se tira de fonts.googleapis.com como hacía el tema Panda. Las dos son sans, así que el contraste entre titular y cuerpo NO lo da la forma de la letra sino el peso y el tamaño: si algún día se sube el cuerpo de peso o se baja el de los titulares, los dos papeles se confunden. */ --nxr-font-body: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --nxr-font-heading: Figtree, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --nxr-heading-weight: 600; --nxr-heading-tracking: -0.005em; /* --- Ritmo vertical de las secciones de la home --- Lo consume el `row-gap` del grid de la home. Se queda corto a propósito: varios módulos (brandslider, newsletter, customtext) traen ya 32-48 px de padding vertical propio, que se suma a esta separación. */ --nxr-section-gap: clamp(1.75rem, 3vw, 2.75rem); /* --- Interruptores que lee el JS --- assets/js/custom.js consulta esta property antes de montar la cabecera pegajosa, sin que nadie tenga que escribir CSS que deshaga lo que hizo otro CSS. El JS trata «ausente o distinto de 0» como ENCENDIDO. Va a 0 y NO es cosmético: la cabecera de esta tienda son tres franjas y Hummingbird ya declara `.header { position: sticky }` para el
entero, así que se quedan arriba solas. El sticky del tema pasa a `fixed` sólo `.header-bottom`, lo que suelta la franja del menú de sus dos compañeras y mete el espaciador como hueco en blanco entre ellas. Lo escribía `nxr_themeconfig` desde el back office; al desinstalarse ese módulo (ver `scripts/php/limpiar-modulos.php`) el 0 vive aquí, que es el único sitio que queda. Si alguien lo sube a 1, la cabecera se rompe. */ --nxr-sticky-header: 0; } /* ============================================================================= 2. PUENTE A BOOTSTRAP ----------------------------------------------------------------------------- Bootstrap 5.3 expone casi todo como custom properties, pero unos pocos componentes traen el azul de Hummingbird (#0b69f6) compilado a hex. La lista de abajo es exactamente esa: se obtuvo grepeando el hex en theme.css, no de memoria. Si se actualiza Hummingbird conviene rehacer el grep. ========================================================================== */ :root, [data-bs-theme="light"] { --bs-primary: var(--nxr-accent); --bs-primary-rgb: var(--nxr-accent-rgb); --bs-primary-text-emphasis: var(--nxr-accent-dark); --bs-primary-bg-subtle: var(--nxr-accent-soft); --bs-primary-border-subtle: var(--nxr-accent-line); --bs-link-color: var(--nxr-accent); --bs-link-color-rgb: var(--nxr-accent-rgb); --bs-link-hover-color: var(--nxr-accent-dark); --bs-focus-ring-color: color-mix(in srgb, var(--nxr-accent) 25%, transparent); --bs-body-color: var(--nxr-ink); --bs-body-bg: var(--nxr-surface); --bs-secondary-color: var(--nxr-ink-soft); --bs-secondary-bg: var(--nxr-surface-alt); --bs-tertiary-bg: var(--nxr-surface-alt); --bs-heading-color: var(--nxr-ink); --bs-border-color: var(--nxr-line); --bs-emphasis-color: var(--nxr-ink); --bs-border-radius: var(--nxr-radius); --bs-border-radius-sm: var(--nxr-radius-sm); --bs-border-radius-lg: var(--nxr-radius-lg); --bs-border-radius-pill: var(--nxr-radius-pill); --bs-body-font-family: var(--nxr-font-body); } /* Las utilidades de Bootstrap (.text-primary, .bg-primary…) ya se derivan de --bs-primary-rgb, así que viran solas con el bloque de arriba. La única excepción es el hover de .link-primary, que Bootstrap compila a hex. Y esa excepción NO se puede arreglar desde fuera de las capas: en las declaraciones `!important` el orden de la cascada se invierte y el CSS sin capa pasa a ser el más débil de todos. Hay que entrar en la misma capa `utilities` y ganar por orden de aparición. */ @layer utilities { .link-primary:hover, .link-primary:focus { color: rgba(var(--nxr-accent-rgb), var(--bs-link-opacity, 1)) !important; } } /* --- Botones --- */ .btn-primary { --bs-btn-bg: var(--nxr-accent); --bs-btn-border-color: var(--nxr-accent); --bs-btn-color: var(--nxr-accent-contrast); /* En hover y en activo el FONDO pasa a `--nxr-accent-dark`, así que el texto tiene que ser el que contrasta con ÉSE, no el que contrasta con el acento. Ver la nota de `--nxr-accent-dark-contrast` en el bloque 1: con un acento luminoso los dos tokens colapsan y el botón se quedaba sin texto visible. */ --bs-btn-hover-bg: var(--nxr-accent-dark); --bs-btn-hover-border-color: var(--nxr-accent-dark); --bs-btn-hover-color: var(--nxr-accent-dark-contrast); --bs-btn-active-bg: var(--nxr-accent-dark); --bs-btn-active-border-color: var(--nxr-accent-dark); --bs-btn-active-color: var(--nxr-accent-dark-contrast); --bs-btn-disabled-bg: var(--nxr-accent); --bs-btn-disabled-border-color: var(--nxr-accent); --bs-btn-disabled-color: var(--nxr-accent-contrast); } /* El botón fantasma es, en reposo, TEXTO Y UNA LÍNEA DE 1 px sobre fondo claro: los dos usos que el acento no puede cubrir. Con el lima da 1,18:1 —el botón sencillamente no se ve— y con el teal de serie, 2,3:1. Por eso el reposo va en acento oscuro y el acento aparece sólo al pasar por encima, que es cuando se convierte en FONDO y tiene área. Mismo criterio que la pastilla de hover del mega-menú (§4.3) y que el subrayado descartado de la paleta. El estado deshabilitado va en tinta suave: en acento oscuro se confundía con el botón activo, y un botón que no se puede pulsar tiene que parecerlo. */ .btn-outline-primary { --bs-btn-color: var(--nxr-accent-dark); --bs-btn-border-color: var(--nxr-accent-dark); --bs-btn-hover-bg: var(--nxr-accent); --bs-btn-hover-border-color: var(--nxr-accent); --bs-btn-hover-color: var(--nxr-accent-contrast); --bs-btn-active-bg: var(--nxr-accent); --bs-btn-active-border-color: var(--nxr-accent); --bs-btn-active-color: var(--nxr-accent-contrast); --bs-btn-disabled-color: var(--nxr-ink-soft); --bs-btn-disabled-border-color: var(--nxr-line); } .btn { --bs-btn-border-radius: var(--nxr-radius); font-weight: 600; transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease; } /* --- Formularios --- */ .form-control, .form-select { border-radius: var(--nxr-radius-sm); } .form-control:focus, .form-select:focus, .form-check-input:focus, .nav-link:focus-visible { border-color: var(--nxr-accent-line); box-shadow: 0 0 0 0.25rem var(--bs-focus-ring-color); } .form-check-input:checked, .form-check-input[type="checkbox"]:indeterminate { background-color: var(--nxr-accent); border-color: var(--nxr-accent); } .form-range::-webkit-slider-thumb { background-color: var(--nxr-accent); } .form-range::-moz-range-thumb { background-color: var(--nxr-accent); } /* --- Otros componentes con el azul compilado --- */ .dropdown-menu, .dropdown-menu-dark { --bs-dropdown-link-active-bg: var(--nxr-accent); --bs-dropdown-link-active-color: var(--nxr-accent-contrast); --bs-dropdown-border-radius: var(--nxr-radius); } /* Colores semánticos. Sin este bloque conviven DOS juegos que no coinciden: el theme declara `--nxr-sale` / `--nxr-success` / `--nxr-warning` y los usa en los `.alert-*`, mientras que `.text-danger`, `.link-danger`, `.btn-danger`, `.badge.bg-success` y compañía seguían con los de Hummingbird. Se notaba: su rojo es `#ff4657`, que sobre blanco da **3,16:1** y no pasa AA para texto normal — el «Eliminar» de las tarjetas de dirección del checkout, por ejemplo. Con `--nxr-sale` (#e11d48 en Europa 3G) sube a 4,8:1. Los `-rgb` van aparte porque Bootstrap aplica opacidad por `rgba()`; los emite `nxr_themeconfig` para el de rebaja y salen del bloque 1 para los otros dos. */ :root, [data-bs-theme="light"] { --bs-danger: var(--nxr-sale); --bs-danger-rgb: var(--nxr-sale-rgb); --bs-success: var(--nxr-success); --bs-success-rgb: var(--nxr-success-rgb); --bs-warning: var(--nxr-warning); --bs-warning-rgb: var(--nxr-warning-rgb); } .list-group { --bs-list-group-active-bg: var(--nxr-accent); --bs-list-group-active-border-color: var(--nxr-accent); --bs-list-group-active-color: var(--nxr-accent-contrast); } .nav-pills { --bs-nav-pills-link-active-bg: var(--nxr-accent); --bs-nav-pills-link-active-color: var(--nxr-accent-contrast); } .progress, .progress-stacked { --bs-progress-bar-bg: var(--nxr-accent); } .accordion { --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem var(--bs-focus-ring-color); /* El rótulo de la sección abierta va en acento OSCURO sobre el fondo suave. En acento se leía lima sobre lima pálido (~1,1:1): al desplegar un acordeón el título DESAPARECÍA, justo cuando más se necesita. Lo destapan a la vez el cupón del carrito y los filtros por facetas. */ --bs-accordion-active-color: var(--nxr-accent-dark); --bs-accordion-active-bg: var(--nxr-accent-soft); } .btn-close { --bs-btn-close-focus-shadow: 0 0 0 0.25rem var(--bs-focus-ring-color); } .pagination { --bs-pagination-active-bg: var(--nxr-accent); --bs-pagination-active-border-color: var(--nxr-accent); --bs-pagination-active-color: var(--nxr-accent-contrast); --bs-pagination-focus-box-shadow: 0 0 0 0.25rem var(--bs-focus-ring-color); } /* ============================================================================= 3. BASE ========================================================================== */ body { font-family: var(--nxr-font-body); color: var(--nxr-ink); background-color: var(--nxr-surface); -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: var(--nxr-font-heading); font-weight: var(--nxr-heading-weight); letter-spacing: var(--nxr-heading-tracking); color: var(--nxr-ink); } /* Contenedor un poco más ancho que el de Bootstrap: las rejillas de 4 productos respiran mejor y las imágenes de catálogo (720 px) no se quedan cortas. */ .container, .container-md, .container-lg, .container-xl { max-width: var(--nxr-container); } /* El margen lateral de la tienda en móvil: 16 px, no 12. Los 12 px son el `--bs-gutter-x: 1.5rem` que Bootstrap trae de fábrica, y nadie los había ajustado. En escritorio da igual —con `max-width: 1280px` sobra aire por los lados—, pero en una pantalla de 390 px son 12 px de nada: los párrafos largos van de borde a borde. Se nota sobre todo en el texto SEO al pie de categoría y en el pie de la web, que es donde hay columnas enteras de prosa. 16 px es lo que usan iOS, Material y prácticamente cualquier tienda; 20 empezaba a comerse el ancho de las fichas de producto, que en móvil ya van a dos columnas de 155 px. Basta con tocar el `.container` porque **las tres plantillas cuelgan de él por caminos distintos que acaban en el mismo sitio**: la portada lo aplica directamente (`.nxr-home.container`), la ficha también (`.columns-container.container`), y la categoría lo hereda por el rodeo de Bootstrap —el `.container` empuja 16, la `.row` resta 12 con su margen negativo y la `.col` vuelve a sumar 12—, que da los mismos 16 px. Verificado en las cuatro páginas después del cambio, no supuesto. No se toca `--bs-gutter-x`: esa variable la usan también las `.row` para el hueco entre columnas, y aunque hoy cada `.row` la redeclara (`.row` trae la suya, y las de este tema van con `gx-2`), cambiarla en el contenedor sería apuntar a la separación entre columnas para mover el margen de la página. Se escribe el relleno y ya está. */ @media (max-width: 767.98px) { .container, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl, .container-fluid { padding-inline: 1rem; } } /* Foco visible y consistente en toda la tienda (WCAG 2.4.7 y 2.4.11). Hummingbird lo deja al navegador en varios sitios y con fondos oscuros desaparece. Van DOS anillos, y no es un adorno: el indicador de foco tiene que contrastar 3:1 con lo que tenga al lado, y ninguno de los dos colores lo consigue solo. El anillo interior es el acento oscuro —tinta— que se ve sobre la página blanca pero se pierde en la barra superior de lima, en el pie negro y en cualquier bloque de acento; el halo exterior es el acento, que se ve justamente ahí y desaparece sobre claro. Con los dos, siempre hay uno que contrasta, sea cual sea el fondo. Antes era un solo anillo en `--nxr-accent`: sobre el blanco de la tienda daba 1,18:1, o sea que quien navega con teclado no sabía dónde estaba. Es el mismo error que la regla de oro de la paleta describe para el texto, aplicado a una línea de 2 px. */ a:focus-visible, button:focus-visible, [tabindex]:focus-visible, summary:focus-visible { outline: 2px solid var(--nxr-accent-dark); outline-offset: 2px; box-shadow: 0 0 0 5px rgb(var(--nxr-accent-rgb) / 55%); border-radius: var(--nxr-radius-sm); } /* El salto al ancla no debe esconder el contenido bajo la cabecera sticky. */ :target { scroll-margin-top: 6rem; } /* Las imágenes de catálogo nunca deben desbordar su columna. */ img { max-width: 100%; height: auto; } /* El enlace «saltar al contenido» lo trae ya Hummingbird (a.skip-link); aquí sólo se le da el color de la marca, en vez de duplicarlo. */ .skip-link { background: var(--nxr-accent); color: var(--nxr-accent-contrast); } /* ============================================================================= 4. COMPONENTES ========================================================================== */ /* --- 4.1 Barra superior (displayNav1 / displayNav2) ----------------------- */ .header-top { background: var(--nxr-topbar-bg); color: var(--nxr-topbar-fg); font-size: 0.8125rem; padding-block: 0.4rem; } /* Todo el contenido, no sólo los : ps_shoppingcart pinta el carrito vacío como (no como enlace) y sus iconos Material heredaban --nxr-ink, o sea casi negro sobre fondo casi negro. */ .header-top a, .header-top button, .header-top .btn-link, .header-top .dropdown-toggle, .header-top .header-block__action-btn, .header-top .header-block__icon, .header-top .header-block__title { color: var(--nxr-topbar-fg); text-decoration: none; } /* El hover NO cambia de color, subraya. La barra es salvia y el texto es la tinta: aclararlo hacia el blanco lo mandaría a 2,5:1, o sea casi ilegible, y oscurecerlo no se nota sobre 6,3:1. */ .header-top a:hover, .header-top button:hover, .header-top .dropdown-toggle:hover { text-decoration: underline; } .header-top__right { display: flex; justify-content: flex-end; align-items: center; /* Mismo hueco que entre los reclamos del otro extremo, para que las dos mitades de la barra tengan el mismo ritmo. */ gap: 1.25rem; } /* Reclamos (izq) y enlaces (der) a los dos extremos. Era una `.row` de dos columnas fijas (col-md-4 / col-md-8) y ahora es flex: los reclamos miden lo que miden y los enlaces se pegan al borde, sin que un texto más largo se parta contra un límite de columna que no le corresponde. */ .header-top__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; } .sm-topbar__claims { display: flex; align-items: center; gap: 1.25rem; margin: 0; padding: 0; list-style: none; min-width: 0; } .sm-topbar__claim { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 500; white-space: nowrap; } .sm-topbar__icon { display: inline-flex; flex: 0 0 auto; } .sm-topbar__icon svg { width: 15px; height: 15px; } /* Los enlaces se distinguen del texto plano por el PESO, no por el color: sobre la barra de salvia todo es la misma tinta. */ .sm-topbar__link { font-weight: 600; white-space: nowrap; } /* La barra en móvil: los dos reclamos y el enlace no caben en un viewport de 390 px —los textos llevan `white-space: nowrap`, así que no se parten, se salen—, de modo que se recorta a lo que cabe. Quien toque los textos, que vuelva a medir, y que mida los HIJOS: con `justify-content: space-between` el `scrollWidth` del contenedor iguala siempre a su ancho y da «no desborda» aunque desborde. */ @media (max-width: 767.98px) { .header-top { font-size: 0.75rem; padding-block: 0.35rem; } .header-top__inner, .header-top__right, .sm-topbar__claims { gap: 0.75rem; } /* Se queda el primero, que es el argumento de venta de la marca; el conteo de modelos lo dice ya el propio catálogo. */ .sm-topbar__claim:nth-child(2) { display: none; } } .header-top .header-block { display: inline-flex; align-items: center; } /* El badge del carrito se posiciona en absoluto: necesita un ancestro posicionado también aquí, no sólo en la cabecera principal. */ .header-top .header-block__action-btn { position: relative; display: inline-flex; align-items: center; gap: 0.35rem; } /* --- 4.2 Cabecera principal ----------------------------------------------- */ .header-bottom { background: var(--nxr-header-bg); color: var(--nxr-header-fg); border-bottom: 1px solid var(--nxr-line); padding-block: 0.85rem; } .header-bottom__logo img { max-height: 56px; width: auto; } /* La home mete el logo dentro de un

por SEO; que no herede el tamaño. */ .header-bottom__h1 { font-size: inherit; line-height: 0; margin: 0; } /* Iconos de cuenta/carrito: círculo neutro, badge con el acento. Acotado a .header-bottom a propósito: ps_customersignin y ps_shoppingcart también se pintan en la barra superior (displayNav2), y allí el círculo de 42 px no cabe — se montaba encima del selector de moneda. */ .header-bottom .header-block__action-btn { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: var(--nxr-radius-pill); background: var(--nxr-surface-alt); color: var(--nxr-ink); position: relative; text-decoration: none; transition: background-color 0.15s ease; } .header-bottom .header-block__action-btn:hover { background: var(--nxr-accent-soft); color: var(--nxr-accent-dark); } .header-block__badge { position: absolute; top: -2px; inset-inline-end: -2px; min-width: 19px; height: 19px; padding-inline: 4px; border-radius: var(--nxr-radius-pill); background: var(--nxr-accent); color: var(--nxr-accent-contrast); font-size: 0.6875rem; font-weight: 700; line-height: 19px; text-align: center; } /* Cabecera pegajosa. La clase la pone assets/js/nxr-theme.js; sin JS la cabecera se comporta como siempre, así que no hay dependencia dura. */ .nxr-header-sticky .header-bottom { position: fixed; top: 0; inset-inline: 0; z-index: 1030; box-shadow: var(--nxr-shadow); padding-block: 0.5rem; } .nxr-header-sticky .header-bottom__logo img { max-height: 40px; } /* Reserva el hueco que deja la cabecera al pasar a fixed: sin esto la página pega un salto justo al cruzar el umbral. La altura la escribe el JS. */ .nxr-header-spacer { display: none; } .nxr-header-sticky .nxr-header-spacer { display: block; } /* --- 4.2 bis Cabecera de Sillas y Mesas ----------------------------------- Acompaña a templates/_partials/header.tpl, que parte en dos la fila única de Hummingbird: fila 1 logo · buscador · cuenta · carrito fila 2 mega-menú · CTA de teléfono Sin esa plantilla ninguna de estas reglas llega a aplicarse (las clases `sm-header__*` sólo existen allí y en el ps_searchbar.tpl del child). -------------------------------------------------------------------------- */ /* El buscador ocupa el hueco libre entre el logo y los iconos. `.ps-searchbar` trae `min-width: 19rem` de Hummingbird: dentro de una columna flexible eso le impide encogerse y desborda la fila en pantallas medias. */ .sm-header__search { min-width: 0; } .sm-header__search .ps-searchbar { width: 100%; min-width: 0; max-width: 42rem; margin-block: 0; } /* Cuenta y carrito. La regla de .header-bottom los pinta como un círculo de 42 px, que es lo correcto para los marcadores de móvil (sólo icono) pero recorta el rótulo en escritorio: aquí el botón crece para llevar icono y texto en línea. */ .sm-header__block .header-block__action-btn { width: auto; height: auto; min-height: 42px; padding-inline: 0.85rem; gap: 0.45rem; } .sm-header__block .header-block__title { font-size: 0.875rem; font-weight: 600; line-height: 1; white-space: nowrap; } /* El contador del carrito. En el botón redondo va en absoluto sobre el icono, pero aquí el botón lleva rótulo y ese anclaje lo dejaría flotando en medio del texto: pasa a ser una pastilla en línea, detrás de «Carrito». Anclarlo al icono no es opción — el badge es hermano suyo, no hijo, así que habría que colocarlo con medidas fijas del icono y del padding. */ .sm-header__block .header-block__badge { position: static; inset: auto; } /* Carrito CON productos: `ps_shoppingcart` le pone `header-block--active` y Hummingbird tiñe el icono de `--bs-primary`, que aquí es el acento oscuro sobre la pastilla crema. Se deja seguir al botón con `inherit` para que en hover cambie con él en vez de quedarse fijo. */ .header-bottom .header-block--active, .header-bottom .header-block--active .header-block, .header-bottom .header-block--active .header-block__icon { color: inherit; } /* Con el carrito vacío el contador sería un «0» permanente. La clase `inactive` la pone ps_shoppingcart cuando products_count es 0. La regla cuelga de `.header-bottom` y NO de `.sm-header__block`, que sería lo natural en esta sección: en móvil el JS responsive de Hummingbird MUEVE el bloque real de ps_shoppingcart dentro de `#_mobile_ps_shoppingcart`, que no lleva esa clase — y ahí volvía a aparecer el «0». El `{if}` de la plantilla sólo cubre el marcador de posición, o sea el rato entre el HTML y el swap. */ .header-bottom .inactive .header-block__badge { display: none; } /* Fila 2: la franja del mega-menú. OJO: nada de `position` aquí ni en el contenedor. El panel desplegable de nxr_megamenu es `position: absolute` respecto al
para salir a ancho completo; cualquier ancestro posicionado por el medio se lo recortaría al ancho de la pestaña (está documentado en la cabecera de megamenu.css). */ .sm-header__nav { background: var(--nxr-menubar-bg); border-top: 1px solid var(--nxr-line); border-bottom: 1px solid var(--nxr-line); } /* El subrayado de las pestañas en salvia, que es exactamente lo que hacía la web anterior (`STSN_MENU_BOTTOM_BORDER_HOVER_COLOR`). El módulo lo pinta con el acento; aquí el acento es casi negro y la línea no se distinguía del texto. A 3 px el salvia sobre blanco se lee de sobra como decoración —no lleva texto encima, así que la regla de contraste no aplica. */ .sm-header__nav .nxr-mm-tab-link::after { background: var(--sm-sage); height: 3px; /* A plomo con el `padding-inline` de la pestaña, que aquí es más apretado que el del resto del tema (más abajo). El módulo lo posiciona con el suyo (0,9rem): si se toca uno, hay que mover el otro. */ left: 0.5rem; right: 0.5rem; } /* La barra del menú va pegada a los bordes de la franja: el padding lo ponen los propios enlaces (.nxr-mm-tab-link), que así tienen toda la altura de la franja como zona de click. */ .sm-header__nav .nxr-mm { padding-inline: 0; } /* Icono y flecha de cada pestaña. El icono repite el de su panel (o el de la categoría a la que enlaza), y la flecha marca cuáles despliegan: hasta ahora sólo se sabía pasando el ratón por encima. Los dos son SVG del mismo sprite que ya carga el panel (`_iconos.tpl`), así que no añaden ni una petición ni un dibujo nuevo al HTML: sólo la referencia. `flex: 0 0 auto` en ambos: `.nxr-mm-tab-link` es flex y sin eso los SVG se comprimen antes que el texto, que es justo al revés de lo que interesa. */ .sm-header__nav .nxr-mm-tab-link { gap: 0.35rem; } .sm-mm-tab-icon { width: 15px; height: 15px; flex: 0 0 auto; color: var(--nxr-ink-soft); } /* Los iconos SÓLO a partir de 1400 px. Entre 1200 —donde arranca el menú de escritorio— y 1400, las nueve pestañas con icono piden 1.108 px y la franja da 1.025: se parten en dos líneas, que es justo lo que se arregló acortando los rótulos. Sin ellos sobran más de 100 px. Se esconde el icono y no la flecha porque la flecha es información —dice qué pestaña despliega— y el icono es decoración. */ @media (max-width: 1399.98px) { .sm-mm-tab-icon { display: none; } } /* Al abrir o pasar el ratón, el icono deja su salvia y sigue al texto: la pestaña entera responde como una pieza. */ .sm-header__nav .nxr-mm-tab-link:hover .sm-mm-tab-icon, .sm-header__nav .nxr-mm-tab-link:focus-visible .sm-mm-tab-icon, .sm-header__nav .nxr-mm-tab.is-open .sm-mm-tab-icon { color: inherit; } .sm-mm-tab-caret { width: 11px; height: 11px; flex: 0 0 auto; opacity: 0.5; transition: transform 0.18s ease; } .sm-header__nav .nxr-mm-tab.is-open .sm-mm-tab-caret { transform: rotate(180deg); opacity: 1; } /* Las nueve pestañas del cliente NO caben en una línea junto al CTA: piden 1.496 px y en una ventana de 1.440 quedan 1.105. Envuelven (§6.1) y ocupan dos líneas, así que se alinean a la IZQUIERDA —a plomo con el logo de la fila de arriba— en vez de centradas: con el CTA anclado a la derecha, una segunda línea centrada se lee como un renglón suelto. Si algún día el menú baja de siete entradas, esto no estorba: con una sola línea, alineado a la izquierda es exactamente lo mismo que sin envolver. */ .sm-header__nav .nxr-mm-bar { justify-content: flex-start; } /* Y se aprieta cada pestaña un poco más que en el resto del tema: aquí compiten con el CTA y con los iconos por el ancho de la franja. El subrayado del hover está posicionado con los mismos valores que el padding: si se cambia uno, hay que mover el otro (§6.1). */ .sm-header__nav .nxr-mm-tab-link { padding-inline: 0.5rem; } /* Entre md y xl la franja se queda sólo con la hamburguesa del módulo y el CTA; sin esto hereda el alto de una barra de pestañas vacía. */ @media (max-width: 1199.98px) { .sm-header__nav { padding-block: 0.35rem; } } /* CTA del teléfono, al final de la franja del menú. Pastilla de acento con el número en blanco: es el único botón de la cabecera y tiene que leerse como tal, no como una pestaña más. El salvia no sirve aquí —sobre él el blanco da 2,5:1— y ya tiene su sitio en la barra de arriba. */ .sm-header__cta { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.4rem 1rem; border-radius: var(--nxr-radius-pill); background: var(--nxr-accent); color: var(--nxr-accent-contrast); font-weight: 700; font-size: 0.9375rem; line-height: 1.2; white-space: nowrap; text-decoration: none; transition: background-color 0.15s ease, color 0.15s ease; } /* Mismo gesto que el botón primario del tema: en hover el fondo va al acento oscuro y el texto al token que le corresponde. */ .sm-header__cta:hover, .sm-header__cta:focus-visible { background: var(--nxr-accent-dark); color: var(--nxr-accent-dark-contrast); text-decoration: none; } .sm-header__cta-icon { width: 16px; height: 16px; flex: 0 0 auto; } /* Móvil: la hamburguesa sube a la fila del logo y la franja del menú se vacía. El botón lo pinta header.tpl con la clase del módulo (`.nxr-mm-burger`), así que hereda sus 44×44 y sus tres barras; megamenu.js enlaza todas las que encuentra en el documento, de modo que abre el mismo offcanvas. La del módulo se esconde aquí. La franja NO se puede quitar con `display: none`: dentro vive `#nxr-mm-offcanvas`, que es `position: fixed` pero deja de pintarse si un ancestro está oculto. Se le quitan fondo, bordes y relleno y se colapsa sola, porque no le queda ningún hijo visible. */ .sm-header__burger { /* Las tres barras miden 22 px dentro de un botón de 44: sin esto el logo arranca con 11 px de aire de más respecto al borde del contenedor. */ margin-inline-start: -0.6rem; } @media (max-width: 767.98px) { .sm-header__nav { padding-block: 0; background: none; border-top: 0; border-bottom: 0; } .sm-header__nav .nxr-mm-burger, .sm-header__cta { display: none; } /* Con la hamburguesa en esta fila son cinco piezas —hamburguesa, logo, lupa, cuenta y carrito—: el logo baja de 56 px de alto para que quepan todas en un viewport de 360. */ .header-bottom__logo img { max-height: 42px; } } /* --- 4.3 Menú principal (ps_mainmenu) ------------------------------------- */ .header-nav-full-width, #_desktop_top_menu { background: var(--nxr-menubar-bg); } #_desktop_top_menu .top-menu > li > a { color: var(--nxr-menubar-fg); font-weight: 600; text-decoration: none; } #_desktop_top_menu .top-menu > li > a:hover, #_desktop_top_menu .top-menu > li.sfHoverForce > a { color: var(--nxr-accent); } #_desktop_top_menu .top-menu .sub-menu a:hover { color: var(--nxr-accent); } /* --- 4.4 Migas de pan ------------------------------------------------------ */ .breadcrumb__wrapper { padding-block: 0.75rem; font-size: 0.8125rem; } .breadcrumb { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0; padding: 0; list-style: none; } .breadcrumb-item + .breadcrumb-item::before { content: "›"; color: var(--nxr-ink-soft); padding-inline-end: 0.35rem; } .breadcrumb-link { color: var(--nxr-ink-soft); text-decoration: none; } .breadcrumb-link:hover { color: var(--nxr-accent); text-decoration: underline; } .breadcrumb-item:last-child { color: var(--nxr-ink); font-weight: 600; } /* --- 4.5 Tarjeta de producto ---------------------------------------------- */ .product-miniature__inner { height: 100%; display: flex; flex-direction: column; background: var(--nxr-surface); border: 1px solid var(--nxr-line); border-radius: var(--nxr-radius-lg); overflow: hidden; transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease; } .product-miniature__inner:hover { border-color: var(--nxr-accent-line); box-shadow: var(--nxr-shadow); transform: translateY(-2px); } @media (prefers-reduced-motion: reduce) { .product-miniature__inner, .product-miniature__inner:hover { transform: none; transition: none; } } /* Fondo blanco y no el alterno: las fotos de catálogo suelen venir recortadas sobre blanco y el gris dibujaba un marco alrededor de cada una. */ .product-miniature__top { position: relative; background: var(--nxr-surface); } .product-miniature__bottom { display: flex; flex-direction: column; flex: 1 1 auto; gap: 0.75rem; padding: 0.9rem 1rem 1rem; } .product-miniature__infos { flex: 1 1 auto; display: flex; flex-direction: column; gap: 0.4rem; } /* Título a dos líneas fijas: así los precios quedan alineados en toda la fila aunque los nombres tengan longitudes muy distintas. */ .product-miniature__title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.8em; color: var(--nxr-ink); font-size: 0.9375rem; font-weight: 600; line-height: 1.4; text-decoration: none; } .product-miniature__title:hover { color: var(--nxr-accent); } .product-miniature__prices { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.5rem; margin-top: auto; } .product-miniature__price { color: var(--nxr-price); font-size: 1.125rem; font-weight: 700; } .product-miniature__regular-price { color: var(--nxr-ink-soft); font-size: 0.875rem; text-decoration: line-through; } /* El botón de compra a ancho completo, pero SIN arrastrar los del selector de cantidad: son .btn también, y al estirarlos el grupo se apilaba en vertical y la tarjeta crecía hasta 124 px de alto. */ .product-miniature__actions > .btn, .product-miniature__form > .btn, .product-miniature__details { width: 100%; } .product-miniature__form { display: flex; align-items: center; gap: 0.5rem; } .product-miniature__form .quantity-button { flex: 0 0 auto; } .product-miniature__add { flex: 1 1 auto; } /* Etiquetas de producto (rebaja, novedad…). */ .product-flags { position: absolute; top: 0.6rem; inset-inline-start: 0.6rem; z-index: 2; display: flex; flex-direction: column; gap: 0.35rem; margin: 0; padding: 0; list-style: none; pointer-events: none; } /* Hummingbird pinta cada etiqueta como
  • , no .product-flag. El `.badge` del selector no es decorativo: el padre pinta con `.product-flags .badge` (0,2,0) y hace falta empatar en clases para ganarle. Un `.product-flags > li` a secas (0,1,1) perdería y las etiquetas volverían al azul de Bootstrap. */ .product-flags > li.badge { padding: 0.2rem 0.55rem; border-radius: var(--nxr-radius-pill); background: var(--nxr-accent); color: var(--nxr-accent-contrast); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; line-height: 1.5; } .product-flags > li.discount, .product-flags > li.on-sale, .product-flags > li[class*="discount-"] { background: var(--nxr-sale); color: #fff; } /* PrestaShop emite el tipo con GUION BAJO (`out_of_stock`, ProductLazyArray:760), no con guion: la regla anterior decía `.out-of-stock` y no casaba con nada, así que un producto agotado llevaba la pastilla de acento igual que una novedad. `used` y `refurbished` (:266-286) comparten el gris: son estados del artículo, no un reclamo, y en lima competían con el precio. */ .product-flags > li.out_of_stock, .product-flags > li.used, .product-flags > li.refurbished { background: var(--nxr-ink-soft); color: #fff; } /* Título de sección. En Hummingbird `.section-title` sólo aporta el margen: el tamaño y el grosor los heredaba de ser un

    . Como el theme baja a
    los títulos que no describen el producto («Comentarios», «otros productos de la misma categoría» — ver templates/modules/), hay que fijarlos aquí o esos bloques se quedarían con el texto del cuerpo. Vale igual para los que siguen siendo

    , así que los dos se ven idénticos. */ .section-title { font-family: var(--nxr-font-heading); font-size: 1.5rem; font-weight: var(--nxr-heading-weight); letter-spacing: var(--nxr-heading-tracking); line-height: 1.25; color: var(--nxr-ink); } /* --- 4.6 Ficha de producto ------------------------------------------------- */ .product__prices .current-price-value, .product-prices .current-price-value { color: var(--nxr-price); font-size: 1.75rem; font-weight: 700; } .product__prices .regular-price, .product-prices .regular-price { color: var(--nxr-ink-soft); text-decoration: line-through; } .product-add-to-cart .btn-add-to-cart { padding-block: 0.7rem; font-size: 1rem; } .product-tabs .nav-tabs .nav-link.active { color: var(--nxr-accent); border-bottom-color: var(--nxr-accent); } /* --- 4.7 Listado de categoría ---------------------------------------------- */ .products { --bs-gutter-x: 1.25rem; --bs-gutter-y: 1.25rem; } @media (min-width: 992px) { /* 4 por fila en escritorio; Hummingbird trae 3. */ .products > .js-product, .products > .product { flex: 0 0 auto; width: 25%; } } .search-filters, .facet { border-radius: var(--nxr-radius); } .search-filters__title, .facet__title { color: var(--nxr-ink); font-weight: 700; } /* --- 4.8 Checkout ---------------------------------------------------------- Hummingbird pinta el paso activo con un gris muy oscuro fijo (#212529), que no dice nada. Con el acento se ve de un vistazo por dónde va la compra. */ .checkout-steps__step--current .checkout-steps__number, .checkout-steps__step--reachable.checkout-steps__step--current .checkout-steps__number { background: var(--nxr-accent); color: var(--nxr-accent-contrast); } .checkout-steps__step--current .checkout-steps__btn { color: var(--nxr-accent); font-weight: 700; } /* --- 4.9 Pie de página ----------------------------------------------------- El pie entero lo pinta `templates/_partials/footer.tpl`, que sustituye al de Hummingbird. Son cuatro franjas: __cta reclamo sobre salvia, con el teléfono y «pedir presupuesto» __main cuerpo oscuro: marca+redes y cuatro columnas __trust garantías de marca y medios de pago __bottom copyright y enlaces legales Colores: todo sale de los tokens del bloque 1. El cuerpo usa `--nxr-footer-bg` (= el acento, #23302e), `--nxr-footer-fg` (#c3cfcd) y `--nxr-footer-heading` (#fff). El salvia aparece SOLO como superficie —el fondo de la franja de llamada a la acción, el trazo bajo cada título de columna, el relleno de los iconos sociales al pasar por encima—, nunca como texto sobre claro: sobre blanco da 2,5:1 (ver la nota de `--sm-sage`). La rejilla la lleva este CSS y no las columnas de Bootstrap de cada módulo: `ps_linklist` emite sus bloques con `col-md-6 col-lg-3` propias y, si mandaran ellas, el ancho del pie dependería de cuántas columnas de enlaces tenga configuradas el cliente. Por eso hay copia de sus plantillas en `modules/` (las `col-*` son utilidades con `!important` dentro de `@layer utilities` y desde aquí no se pueden pisar). ========================================================================== */ .sm-foot { --sm-foot-gap: clamp(1.75rem, 3vw, 2.75rem); margin-top: var(--nxr-section-gap); } /* --- 1. Franja de llamada a la acción -------------------------------------- Es la única franja de color del pie, y es la misma salvia de la barra superior de la cabecera: el pie cierra con el color con el que abre la página. El texto va en la tinta —#1f2422 sobre #7caead da 6,3:1—, nunca en blanco. */ .sm-foot__cta { background: var(--sm-sage); color: var(--nxr-ink); padding-block: 1.25rem; } .sm-foot__cta-inner { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; } @media (width >= 62em) { .sm-foot__cta-inner { flex-direction: row; align-items: center; justify-content: space-between; gap: 2rem; } } .sm-foot__cta-text { margin: 0; font-family: var(--nxr-font-heading); font-weight: 600; font-size: 1.125rem; line-height: 1.35; max-width: 52ch; } .sm-foot__cta-actions { display: flex; flex-wrap: wrap; gap: 0.625rem; } /* El botón sólido es el acento con el texto en blanco: sobre salvia, un botón claro no se despegaría del fondo. El fantasma invierte los dos. */ .sm-foot__cta-btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.65rem 1.25rem; border: 2px solid var(--nxr-accent); border-radius: var(--nxr-radius-pill); background: var(--nxr-accent); color: var(--nxr-accent-contrast); font-weight: 600; font-size: 0.95rem; line-height: 1; text-decoration: none; white-space: nowrap; transition: background-color 0.15s ease, color 0.15s ease; } .sm-foot__cta-btn svg { width: 18px; height: 18px; flex: none; } .sm-foot__cta-btn:hover, .sm-foot__cta-btn:focus-visible { background: transparent; color: var(--nxr-accent); } .sm-foot__cta-btn--ghost { background: transparent; color: var(--nxr-accent); } .sm-foot__cta-btn--ghost:hover, .sm-foot__cta-btn--ghost:focus-visible { background: var(--nxr-accent); color: var(--nxr-accent-contrast); } /* --- 2. Cuerpo -------------------------------------------------------------- */ .sm-foot__before, .sm-foot__main { background: var(--nxr-footer-bg); color: var(--nxr-footer-fg); } .sm-foot__before { padding-block: 1.5rem; border-bottom: 1px solid var(--nxr-footer-line); } .sm-foot__main { padding-block: clamp(2rem, 4vw, 3rem) clamp(1.5rem, 3vw, 2.25rem); } /* Móvil: una sola columna, con los bloques plegados en acordeón. Tableta: la marca a lo ancho y las tres columnas debajo (2 + 1). Escritorio: la marca a la izquierda y las tres a su derecha. Son TRES desde el 2026-09-01, cuando se quitó «Tu cuenta» del pie: si algún día se reactiva `ps_customeraccountlinks`, este `repeat(3, …)` hay que volver a subirlo a 4 o la cuarta columna se irá a una fila nueva. */ .sm-foot__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 var(--sm-foot-gap); } @media (width >= 48em) { .sm-foot__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sm-foot__brand { grid-column: 1 / -1; } } @media (width >= 62em) { .sm-foot__grid { grid-template-columns: minmax(0, 19rem) repeat(3, minmax(0, 1fr)); } .sm-foot__brand { grid-column: auto; } } /* --- La columna de marca --- */ .sm-foot__brand { padding-block: 0.5rem 1.5rem; } .sm-foot__logo { display: inline-block; margin-bottom: 1.15rem; } .sm-foot__logo img { width: auto; height: 52px; } .sm-foot__claim { margin: 0 0 1.15rem; font-size: 0.9rem; line-height: 1.65; max-width: 40ch; } /* Redes sociales: círculo con filete, que se rellena de salvia al pasar. El icono pasa entonces a la tinta, que es lo único que se lee sobre salvia. */ .sm-foot__social ul { gap: 0.5rem; } .sm-foot__social a { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0 !important; /* la plantilla del módulo trae `p-2` de Bootstrap */ border: 1px solid var(--nxr-footer-line); border-radius: 50%; color: var(--nxr-footer-fg); transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .sm-foot__social a:hover, .sm-foot__social a:focus-visible { background: var(--sm-sage); border-color: var(--sm-sage); color: var(--nxr-ink); } /* --- Bloques de columnas (ps_linklist, tu cuenta, la tienda) --- */ .sm-foot__block { padding-block: 0.35rem; border-top: 1px solid var(--nxr-footer-line); } @media (width >= 48em) { /* Fuera el acordeón: de tableta para arriba los bloques quedan abiertos. Hummingbird hace lo mismo con `.footer-block__content.collapse`, pero esa regla mira SUS clases y aquí las hemos renombrado; sin esto las cuatro columnas salen con el título y la lista en `display: none`. Gana por ir sin capa, no hace falta `!important`. */ .sm-foot__block-content.collapse { display: block; } /* El filete de arriba sobra: separa el título de su propia lista en vez de separar bloques. El subrayado de salvia hace ya de marca de columna. */ .sm-foot__block { border-top: 0; } } .sm-foot__block-title { position: relative; margin: 0; padding-block: 0.85rem; color: var(--nxr-footer-heading); font-weight: 600; font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase; } .sm-foot__block-title a { color: inherit; text-decoration: none; } /* El trazo de salvia bajo el título: sólo de escritorio para arriba, porque en móvil el título es el tirador del acordeón y el filete ya lo delimita. */ @media (width >= 48em) { .sm-foot__block-title { padding-block: 0 0.9rem; margin-bottom: 0.35rem; } .sm-foot__block-title::after { content: ""; position: absolute; inset-block-end: 0; inset-inline-start: 0; width: 2rem; height: 2px; background: var(--sm-sage); } } /* Botón de acordeón (sólo móvil): ocupa el ancho del título para que se pueda pulsar en cualquier punto, sin `.stretched-link` (que se sale del bloque). */ .sm-foot__toggle { position: absolute; inset: 0; display: flex; align-items: center; justify-content: flex-end; width: 100%; padding: 0; border: 0; background: none; color: inherit; } .sm-foot__toggle i { font-size: 1.5rem; transition: transform 0.2s ease; } .sm-foot__toggle:not(.collapsed) i { transform: rotate(180deg); } .sm-foot__block-content { padding-bottom: 1rem; } .sm-foot__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.55rem; } .sm-foot__list a, .sm-foot__contact a, .sm-foot__store-link { color: var(--nxr-footer-fg); font-size: 0.9rem; text-decoration: none; } .sm-foot__list a:hover, .sm-foot__list a:focus-visible, .sm-foot__contact a:hover, .sm-foot__contact a:focus-visible { color: var(--nxr-footer-heading); text-decoration: underline; } /* --- Columna «La tienda» --- */ .sm-foot__contact { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.85rem; font-size: 0.9rem; line-height: 1.5; } .sm-foot__contact li { display: flex; gap: 0.65rem; align-items: flex-start; } .sm-foot__contact-icon { flex: none; display: inline-flex; width: 20px; height: 20px; margin-top: 0.1rem; color: var(--sm-sage); } .sm-foot__contact-icon svg { width: 100%; height: 100%; } .sm-foot__addr { margin: 0; font-style: normal; } .sm-foot__muted { color: color-mix(in srgb, var(--nxr-footer-fg) 72%, var(--nxr-footer-bg)); } .sm-foot__store-link { display: inline-block; margin-top: 1rem; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; } .sm-foot__store-link:hover, .sm-foot__store-link:focus-visible { color: var(--nxr-footer-heading); } /* Cajones para lo que se enganche mañana a los hooks del pie. */ .sm-foot__extra, .sm-foot__after { border-top: 1px solid var(--nxr-footer-line); padding-top: 1.5rem; margin-top: 1.5rem; } /* --- 3. Garantías y medios de pago ------------------------------------------ Tarjeta bancaria (Visa y Mastercard), PayPal, Bizum y transferencia, según la revisión del cliente del 2026-09-11. */ .sm-foot__trust { background: var(--nxr-footer-bg); color: var(--nxr-footer-fg); border-top: 1px solid var(--nxr-footer-line); padding-block: 1.35rem; } .sm-foot__trust-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem 2rem; } .sm-foot__promises { display: flex; flex-wrap: wrap; gap: 1rem 2rem; margin: 0; padding: 0; list-style: none; font-size: 0.85rem; line-height: 1.45; } .sm-foot__promises li { display: flex; align-items: center; gap: 0.7rem; } .sm-foot__promises strong { color: var(--nxr-footer-heading); font-weight: 600; } .sm-foot__promise-icon { flex: none; display: inline-flex; width: 26px; height: 26px; color: var(--sm-sage); } .sm-foot__promise-icon svg { width: 100%; height: 100%; } .sm-foot__payments { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; } .sm-foot__payments-label { color: var(--nxr-footer-fg); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; } /* Las marcas de tarjeta son logotipos de color: van sobre tarjeta blanca, que es como se reproducen bien y como esperan sus guías de marca. */ .sm-foot__pay { display: inline-flex; align-items: center; justify-content: center; min-width: 3.25rem; height: 1.75rem; padding-inline: 0.55rem; border-radius: var(--nxr-radius-sm); background: #fff; color: #1a1f71; /* el azul de Visa: el SVG pinta con currentColor */ } .sm-foot__pay svg { height: 0.9rem; width: auto; } .sm-foot__pay img { display: block; width: auto; height: 1.1rem; max-width: 5rem; object-fit: contain; } /* El wordmark oficial es blanco; sobre esta pastilla se reproduce en negro. */ .sm-foot__pay--paypal img { height: 1.5rem; filter: brightness(0); } .sm-foot__pay--card { gap: 0.5rem; } .sm-foot__pay--bank { color: var(--nxr-ink); } .sm-foot__pay--bank svg { height: 1.3rem; } /* --- 4. Copyright ------------------------------------------------------------ */ .sm-foot__bottom { background: var(--nxr-accent-dark); color: color-mix(in srgb, var(--nxr-footer-fg) 78%, var(--nxr-accent-dark)); padding-block: 1rem; font-size: 0.8125rem; } .sm-foot__bottom-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1.5rem; } .sm-foot__legal { margin: 0; } .sm-foot__legal-links { display: flex; flex-wrap: wrap; gap: 0.35rem 1.25rem; margin: 0; padding: 0; list-style: none; } /* Hueco para el botón flotante de WhatsApp (`nxr_whatsapp`), que es `position: fixed` en la esquina inferior derecha y taparía el último enlace. Sólo de escritorio para arriba: en móvil los enlaces van en su propia línea, debajo del copyright y a la izquierda, y ese hueco sólo serviría para partir la lista en tres renglones. */ @media (width >= 62em) { .sm-foot__legal-links { padding-inline-end: 4.5rem; } } .sm-foot__legal-links a { color: inherit; text-decoration: none; } .sm-foot__legal-links a:hover, .sm-foot__legal-links a:focus-visible { color: var(--nxr-footer-heading); text-decoration: underline; } /* Franjas del pie que se quedan sin contenido. La plantilla decide si pintarlas con `{if $smarty.capture.…}`, y esa captura no viene vacía aunque no haya nada que enseñar: los módulos que no pintan dejan igualmente sus comentarios HTML de apertura y cierre. El resultado es una banda de color con su padding y cero contenido (se vio al desactivar ps_emailsubscription: ps_socialfollow sin redes configuradas dejaba 56 px de franja vacía). Hoy vuelve a hacer falta con `blockreassurance`, que está enganchado a los dos hooks del pie pero trae `PSR_HOOK_FOOTER = 0`. `:empty` no sirve —hay nodos de texto y comentarios—; `:not(:has(*))` mira si queda algún hijo ELEMENTO, que es la pregunta real. */ .sm-foot__before:not(:has(*)), .sm-foot__extra:not(:has(*)), .sm-foot__after:not(:has(*)) { display: none; } /* ============================================================================= 5. MÓDULOS NEXIR ----------------------------------------------------------------------------- Los módulos nxr_* traen su propio CSS y consumen los tokens de arriba, así que aquí sólo se resuelve lo que un módulo no puede saber por su cuenta: el ritmo vertical entre bloques de la home y el ancho de sus contenedores. ========================================================================== */ /* La home va contenida (ver templates/index.tpl). Varios módulos traen su propio .container dentro del bloque; anidado en el de la home sumaría otro ancho máximo y otro padding, y esos bloques saldrían más estrechos que el resto. Aquí se neutralizan: manda el contenedor de la home. */ .nxr-home .container, .nxr-home .container-md, .nxr-home .container-lg, .nxr-home .container-xl { max-width: none; width: 100%; padding-inline: 0; } /* Escotilla para el bloque que sí deba ir a sangre (un slider de cabecera, por ejemplo). El margen negativo se calcula desde el ancho real del contenedor, así que funciona con cualquier valor de --nxr-container. */ .nxr-home > .nxr-bleed { width: 100vw; margin-inline: calc(50% - 50vw); } /* Hummingbird ya monta la home como un grid de una columna con su propio `gap`, así que la separación entre bloques se ajusta AHÍ. Antes esto añadía un `margin-top` a cada hijo y el resultado era la suma de los dos (40 px de gap + 72 px de margen = 112 px entre bloque y bloque). Un solo mecanismo: el row-gap del grid. */ .page-content--home { row-gap: var(--nxr-section-gap); padding-block-start: 1.75rem; } .page-content--home > * { margin-block: 0; } /* Los módulos cuelgan de displayHome su marcado Y sus