/* =============================================================================
   Nexir · Theme — 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:
     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

   PERSONALIZAR UN CLIENTE: no se toca este fichero. O se instala el módulo
   `nxr_themeconfig` (colores desde el back office), o se redeclaran los tokens
   del bloque 1 en un CSS propio cargado después.
   ========================================================================== */

/* =============================================================================
   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 --- */
  --nxr-accent: #2ec4b6; /* teal Europa 3G */
  /* 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: 46, 196, 182;
  --nxr-accent-contrast: #ffffff;
  --nxr-accent-dark: color-mix(in srgb, var(--nxr-accent) 82%, #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: color-mix(in srgb, var(--nxr-accent) 10%, #fff);
  --nxr-accent-line: color-mix(in srgb, var(--nxr-accent) 28%, #fff);

  /* --- Texto y superficies --- */
  --nxr-ink: #111827;
  --nxr-ink-soft: #6b7280;
  --nxr-surface: #ffffff;
  --nxr-surface-alt: #f7f8fa;
  --nxr-line: #e5e7eb;

  /* --- 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 --- */
  --nxr-topbar-bg: var(--nxr-ink);
  --nxr-topbar-fg: #d1d5db;
  --nxr-header-bg: var(--nxr-surface);
  --nxr-header-fg: var(--nxr-ink);
  --nxr-menubar-bg: var(--nxr-surface-alt);
  --nxr-menubar-fg: var(--nxr-ink);

  /* --- Pie --- */
  --nxr-footer-bg: #0b1020;
  --nxr-footer-fg: #c7cbd6;
  --nxr-footer-heading: #ffffff;
  --nxr-footer-line: rgb(255 255 255 / 12%);

  /* --- Forma --- */
  --nxr-radius: 8px;
  --nxr-radius-sm: 4px;
  --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. */
  --nxr-font-body: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --nxr-font-heading: var(--nxr-font-body);
  --nxr-heading-weight: 700;
  --nxr-heading-tracking: -0.015em;

  /* --- 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. Se apaga poniéndola a 0 (lo hace nxr_themeconfig), sin que nadie
     tenga que escribir CSS que deshaga lo que hizo otro CSS. */
  --nxr-sticky-header: 1;
}

/* =============================================================================
   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);

  /* Los enlaces van al acento OSCURO, no al acento. --nxr-accent es un color de
     FONDO de marca y no tiene por qué ser legible como texto: con el lima
     #ccff00 da 1.18:1 sobre blanco, y aun con el teal de serie se quedaba en
     2.3:1 — por debajo de AA en los dos casos. --nxr-accent-dark es justo la
     variante pensada para texto. Bootstrap aplica el color de enlace con
     opacidad, o sea por rgba(), así que hace falta también su versión en
     canales; la calcula nxr_themeconfig y el fallback cubre que no esté. */
  --bs-link-color: var(--nxr-accent-dark);
  --bs-link-color-rgb: var(--nxr-accent-dark-rgb, var(--nxr-accent-rgb));
  --bs-link-hover-color: var(--nxr-ink);
  --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-border-color: var(--nxr-line);
  --bs-emphasis-color: var(--nxr-ink);

  /* Los fondos «suaves» de Bootstrap traen su propia escala de grises (#f8f9fa,
     #e9ecef), ajena a la paleta. Sin este puente se colaban por la puerta de
     atrás: las migas de pan de Hummingbird pintan su franja con
     `--bs-tertiary-bg` y salía el gris de Bootstrap, no la plata de marca.
     Los `*-rgb` hermanos se quedan como vienen a propósito: no hay token rgb de
     la superficie alterna y escribirlo a mano se desfasaría en silencio en
     cuanto el cliente cambiara la paleta desde el BO. */
  --bs-secondary-bg: var(--nxr-surface-alt);
  --bs-tertiary-bg: var(--nxr-surface-alt);

  /* `<code>` de Bootstrap va en rosa (#d63384) de fábrica. Aparece poco, pero
     aparece: la FAQ de la landing 6257 nombra así un fichero. */
  --bs-code-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-dark-rgb, 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);
}

/* 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: var(--e3g-text-14);
  padding-block: 0.4rem;
}

/* Todo el contenido, no sólo los <a>: ps_shoppingcart pinta el carrito vacío
   como <span> (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 de acento (lima pleno) y
   el texto es la tinta: aclararlo hacia el blanco lo mandaría a 1,18:1, o sea
   invisible, y oscurecerlo no se nota sobre 13,1:1. Con cualquier acento el
   subrayado funciona; el color, sólo con los oscuros. */
.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. Con 0,75rem los tres enlaces en
     negrita se leían como un bloque. */
  gap: 1.25rem;
}

.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;
}

/* 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;
}

.e3g-topbar__claims {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
  min-width: 0;
}

.e3g-topbar__claim {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 500;
  white-space: nowrap;
}

.e3g-topbar__icon {
  display: inline-flex;
  flex: 0 0 auto;
}

.e3g-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 acento todo es la misma tinta (ver §4.1 bis). */
.e3g-topbar__link {
  font-weight: 700;
  white-space: nowrap;
}

/* La barra en móvil. Desde el 2026-08-28 se ve también por debajo de md (antes
   era `d-none d-md-block`), y ahí no cabe entera: los dos reclamos miden 447 px
   y los dos enlaces 175 px, o sea 646 px, contra los ~358 px útiles de un
   viewport de 390. Se recorta a lo que cabe en vez de dejar que desborde —los
   textos llevan `white-space: nowrap`, así que no se parten, se salen.

   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: var(--e3g-text-12);
    padding-block: 0.35rem;
  }

  .header-top__inner,
  .header-top__right,
  .e3g-topbar__claims {
    gap: 0.75rem;
  }

  /* Se queda el primer reclamo, que es el argumento de venta; «Expertos en
     reparaciones de dispositivos» es el más largo de los dos y el que menos
     falta hace aquí (la home lo repite en su primera sección). */
  .e3g-topbar__claim:nth-child(2) {
    display: none;
  }
}

/* --- 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;
}

/* 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;
}

/* Hover en lima pleno, no en el acento suave: mismo gesto que la pastilla de
   las pestañas del menú, para que cuenta y carrito respondan igual que el resto
   de la cabecera. El texto va al token de contraste, que con un acento luminoso
   es tinta (con uno oscuro sería blanco), así que la regla sirve igual si algún
   día cambia el acento. */
.header-bottom .header-block__action-btn:hover {
  background: var(--nxr-accent);
  color: var(--nxr-accent-contrast);
}

/* Carrito CON productos: `ps_shoppingcart` le pone `header-block--active` y
   Hummingbird tiñe el icono de `--bs-primary` (@layer ps-components), que en el
   puente Bootstrap del theme cuelga del acento. O sea un carrito lima sobre la
   pastilla plata: 1,18:1, justo lo que prohíbe la regla de la paleta —el acento
   es color de FONDO, nunca de tinta (ver CLAUDE.md). Que haya algo dentro ya lo
   dice el contador, que sí es una pastilla de acento con área.

   Se corrige con `inherit`, no con un color fijo: así el icono sigue al botón
   en sus dos estados (tinta en reposo, `--nxr-accent-contrast` en hover) y no
   hay que tocarlo si algún día cambia el acento. Es el mismo remedio que con
   `--bs-heading-color` en las landings.

   Basta una declaración normal: `custom.css` va sin capa y gana a cualquier CSS
   en capa mientras no lleve `!important`. */
.header-bottom .header-block--active,
.header-bottom .header-block--active .header-block,
.header-bottom .header-block--active .header-block__icon {
  color: inherit;
}

/* El contador del carrito es una pastilla de acento: sobre el botón ya en lima
   desaparecería. En hover se invierte a tinta con el número en lima. */
.header-bottom .header-block__action-btn:hover .header-block__badge {
  background: var(--nxr-accent-contrast);
  color: var(--nxr-accent);
}

.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: var(--e3g-text-12);
  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.1 bis Enlaces ------------------------------------------------------
   No hay regla aquí, y es a propósito: se probó teñir de lima el subrayado de
   los enlaces (tinta + subrayado de marca) y no funciona por dos motivos
   independientes, los dos comprobados sobre la página ya pintada.

   1. Técnico: en muchos enlaces la línea NO la dibuja el <a> — su
      `text-decoration-line` computa a `none` — sino un ancestro que declara
      `text-decoration: underline`. Una decoración heredada la pinta quien la
      declaró y con SU color, así que un `text-decoration-color` en el <a> no
      la toca.
   2. Visual: aunque se pintara, el lima sobre blanco da 1,18:1. Una línea de
      2 px con ese contraste no se ve.

   Los enlaces se distinguen con el subrayado normal, del color del texto. El
   lima se reserva a superficies con área —botones, pastillas, círculos,
   badges—, que es donde un acento luminoso rinde.
   -------------------------------------------------------------------------- */

/* --- 4.2 bis Cabecera de Europa 3G ----------------------------------------
   Acompaña a templates/_partials/header.tpl, que parte en dos la fila única de
   Hummingbird para reproducir la cabecera de la web antigua:

     fila 1  logo · buscador · cuenta · carrito
     fila 2  mega-menú

   Sin esa plantilla ninguna de estas reglas llega a aplicarse (las clases
   `e3g-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. */
.e3g-header__search {
  min-width: 0;
}

.e3g-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, como en la web antigua. */
.e3g-header__block .header-block__action-btn {
  width: auto;
  height: auto;
  min-height: 42px;
  padding-inline: 0.85rem;
  gap: 0.45rem;
}

.e3g-header__block .header-block__title {
  font-size: var(--e3g-text-14);
  font-weight: 700;
  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. */
.e3g-header__block .header-block__badge {
  position: static;
  inset: auto;
}

/* Con el carrito vacío el contador sería un «0» permanente. La web antigua
   escribe «Vacío»; aquí basta con no pintar nada (la clase `inactive` la pone
   ps_shoppingcart cuando products_count es 0).

   La regla cuelga de `.header-bottom` y NO de `.e3g-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;
}

/* La cabecera pegajosa la da YA el tema padre: Hummingbird declara
   `.header { position: sticky; top: 0; z-index: 1021 }` en su capa `ps-base`,
   así que el <header> entero — barra superior, fila del logo y menú — se queda
   arriba solo. El sticky propio del theme (clase `nxr-header-sticky` + el
   `.nxr-header-spacer` que inserta assets/js/custom.js) es por tanto redundante,
   y con la cabecera partida en dos filas además rompe: pasa a `fixed` sólo
   `.header-bottom`, deja la franja del menú suelta en su sitio y mete el
   espaciador de 84 px como hueco en blanco entre las dos.

   Se apaga con `NXR_THEME_STICKY = 0` en nxr_themeconfig (BO: NEXIR → Theme),
   que es quien emite `--nxr-sticky-header: 0` — ver
   scripts/seed-nxr-themeconfig.php. Aquí NO se declara el token: si se pusiera
   en este :root, el interruptor del back office quedaría mudo y confundiría a
   quien lo tocara.

   Efecto secundario bueno: el panel del mega-menú es `position: absolute`
   respecto al <header>, así que con el sticky nativo sigue desplegando bien con
   la cabecera pegada — con `.header-bottom` en `fixed` se quedaba descolgado. */

/* Fila 2: la franja del mega-menú.
   El panel desplegable YA NO sale a ancho completo: desde 2026-08-29 se ancla a
   su pestaña (`.nxr-mm-tab` en `position: relative`, más abajo). El contenedor y
   la barra siguen SIN `position` propio; el único elemento posicionado del menú
   es la pestaña. */
.e3g-header__nav {
  background: var(--nxr-menubar-bg);
  border-bottom: 1px solid var(--nxr-line);
}

/* Hover de las pestañas: pastilla lima con el texto en tinta.
   El módulo trae un subrayado de 2 px con el acento, que es lo correcto con un
   acento medio-oscuro; con el lima #ccff00 sobre el gris de la barra se queda
   en 1,08:1 y no se aprecia. Como pastilla el mismo color luce de lleno y el
   texto conserva 13,1:1, que es el sentido de un acento luminoso: hace de
   fondo, no de tinta. */
.e3g-header__nav .nxr-mm-tab-link:hover,
.e3g-header__nav .nxr-mm-tab-link:focus-visible,
.e3g-header__nav .nxr-mm-tab.is-open .nxr-mm-tab-link {
  background: var(--nxr-accent);
  color: var(--nxr-accent-contrast);
  border-radius: var(--nxr-radius);
}

/* Con la pastilla, el subrayado del módulo sobra: se solapan. */
.e3g-header__nav .nxr-mm-tab-link::after {
  display: none;
}

/* --- Iconos y flecha de las pestañas ------------------------------------- */
/* El marcado lo pone la copia de `megamenu.tpl` en
   themes/europa3gtheme/modules/nxr_megamenu/; el sprite, su `_iconos.tpl`. */

.e3g-header__nav .nxr-mm-tab-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  /* El menú, las pastillas y los enlaces del topbar conservan peso 700;
     Graphik lo resuelve con el corte Semibold autoalojado. */
  font-weight: 700;
}

/* El módulo da a la pestaña 0.9rem de padding lateral, calculado para una
   franja de solo texto. Con icono y flecha las nueve pestañas piden 120 px más
   de los que hay a 1440, así que aquí se aprieta a 0.6rem: la pastilla de hover
   sigue respirando y se recuperan ~86 px. Medido, no elegido — ver
   docs/megamenu.md §Iconos. */
@media (min-width: 1200px) {
  .e3g-header__nav .nxr-mm-tab-link {
    padding-inline: 0.6rem;
  }
}

/* Empresas añade una novena pestaña. A 1200 px, conservar espacio para el
   teléfono sin ensanchar la página ni ocultar los iconos del menú. */
@media (min-width: 1200px) and (max-width: 1279px) {
  .e3g-header__nav .nxr-mm-tab-link {
    padding-inline: 0.5rem;
  }
}

.e3g-mm-tab-icon {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  /* Apagado sobre la franja de plata: el rótulo manda, el icono acompaña. */
  color: var(--nxr-ink-soft);
}

/* Al abrir o pasar el ratón, el icono deja el gris y sigue al texto dentro de
   la pastilla lima: la pestaña entera responde como una pieza. */
.e3g-header__nav .nxr-mm-tab-link:hover .e3g-mm-tab-icon,
.e3g-header__nav .nxr-mm-tab-link:focus-visible .e3g-mm-tab-icon,
.e3g-header__nav .nxr-mm-tab.is-open .e3g-mm-tab-icon {
  color: inherit;
}

.e3g-mm-tab-caret {
  width: 11px;
  height: 11px;
  flex: 0 0 auto;
  margin-left: -0.1rem;
  opacity: 0.55;
  transition: transform 0.18s ease, opacity 0.18s ease;
}

.e3g-header__nav .nxr-mm-tab.is-open .e3g-mm-tab-caret {
  transform: rotate(180deg);
  opacity: 1;
}

/* La franja NO se parte NUNCA en dos líneas. Es la garantía dura: pase lo que
   pase con los anchos, las pestañas se quedan en una fila. (La fila que une la
   barra con el CTA del teléfono ya lleva `flex-nowrap` de Bootstrap.) */
/* El sprite FUERA DEL FLUJO. Es un `<svg>` con `width=0 height=0`, pero un SVG
   es un elemento *inline*: aunque no ocupe ancho ni alto, genera una LÍNEA en
   lo alto de `.nxr-mm`. Eran 24 px que empujaban la barra hacia abajo y
   engordaban la franja de 48 a 72 px, dejando el CTA del teléfono a una altura
   distinta de las pestañas: el header parecía tener dos alturas.

   `position: absolute` lo saca del flujo; `overflow: hidden` remata. NO vale
   `display: none`: hay motores que dejan de resolver los `<use>` que apuntan a
   un sprite oculto así.

   Esta regla ya estaba en el tema de sillasymesasdemadera, de donde vino el
   patrón, y al portarlo me traje la plantilla pero no la regla. No se nota
   midiendo anchos, filas ni desbordes —que es lo que estuve comprobando—:
   sólo mirando el ALTO de la cabecera. */
.e3g-mm-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.e3g-header__nav .nxr-mm-bar {
  /* Permitir nuevas filas cuando el usuario amplía sólo el texto. */
  flex-wrap: wrap;
  /* El módulo separa las pestañas 4 px, pensado para una franja sin iconos. Con
     ellos, a 1.200 px —el ancho más estrecho donde todavía hay barra, justo en
     el breakpoint `xl`— se desbordaban 6 px. Bajar a 2 px devuelve 16 y no se
     nota: quien separa las pestañas es el padding de cada enlace. */
  gap: 2px;
}

/* Iconos SIEMPRE visibles (decisión del cliente, 2026-08-29).
   Hubo antes dos intentos de condicionarlos —un `@media` con umbral de
   viewport y luego una medición en JS con ResizeObserver— y ninguno resolvió
   lo que el cliente veía en su pantalla. Se dejan fijos y el espacio se ajusta
   quitando iconos concretos del mapa de `megamenu.tpl`: hoy, el de «Contacto».
   Ver docs/megamenu.md §Iconos. */
.e3g-mm-tab-icon {
  display: block;
}

/* 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. */
.e3g-header__nav .nxr-mm {
  min-width: 0;
  padding-inline: 0;
}

/* --- Panel desplegable anclado a su pestaña ------------------------------ */
/* El módulo fuerza `position: static` en la pestaña a propósito, para que el
   panel se posicione contra el <header> y salga a ancho completo. Aquí se
   invierte esa decisión y SÓLO para la pestaña: la banda a ancho completo
   dejaba «Cursos» como 1.512 × 78 px de blanco con dos palabras dentro y la
   pestaña encendida a 850 px de distancia.

   ⚠️ SIN HUECO VERTICAL entre pestaña y panel. `megamenu.js` cierra en el
   `mouseleave` del <li> y sin retardo; hoy funciona porque el panel es
   descendiente del <li> y `mouseleave` respeta el árbol DOM, no la caja. Un
   `margin-top` sería zona no-hoverable: al cruzarla el ratón sale del <li> y el
   panel se cierra en la cara del usuario. La separación visual la da la punta,
   que es decorativa. */
@media (min-width: 1200px) {
  .e3g-header__nav .nxr-mm-tab {
    position: relative;
  }

  .e3g-header__nav .nxr-mm-panel {
    left: var(--e3g-mm-panel-offset, 0px);
    right: auto;
    top: 100%;
    width: auto;
    border: 1px solid var(--nxr-line);
    border-radius: var(--nxr-radius);
    overflow: visible;
  }

  /* El módulo mete un `.container` de Bootstrap dentro del panel, dimensionado
     para la banda a ancho completo. En un panel que mide lo que pide su
     contenido hay que neutralizarlo. */
  .e3g-header__nav .nxr-mm-panel > .container {
    width: auto;
    max-width: none;
    margin-inline: 0;
    padding-inline: 1.25rem;
  }

  /* Punta hacia la pestaña. Pseudo-elemento: no añade marcado y no participa en
     el hover (ver el aviso de arriba). */
  .e3g-header__nav .nxr-mm-panel::before {
    content: "";
    position: absolute;
    top: -6px;
    left: calc(1.5rem - var(--e3g-mm-panel-offset, 0px));
    width: 11px;
    height: 11px;
    background: var(--nxr-surface);
    border-left: 1px solid var(--nxr-line);
    border-top: 1px solid var(--nxr-line);
    transform: rotate(45deg);
  }

  /* Ancho por columna, fijo: el panel es `position: absolute` y su ancho sería
     el que le diera la gana al contenido. Con esto es previsible y las tres
     anchuras posibles se pueden medir. */
  .e3g-header__nav .e3g-mm-panel__body {
    --e3g-mm-col: 200px;
    --e3g-mm-gap: 2rem;
  }

  .e3g-header__nav .e3g-mm-cols--1 { --e3g-mm-links-width: var(--e3g-mm-col); width: var(--e3g-mm-links-width); }
  .e3g-header__nav .e3g-mm-cols--2 { --e3g-mm-links-width: calc(2 * var(--e3g-mm-col) + var(--e3g-mm-gap)); width: var(--e3g-mm-links-width); }
  .e3g-header__nav .e3g-mm-cols--3 { --e3g-mm-links-width: calc(3 * var(--e3g-mm-col) + 2 * var(--e3g-mm-gap)); width: var(--e3g-mm-links-width); }

  /* Cada tarjeta conserva el ancho y el orden de las columnas de su panel. */
  .e3g-header__nav .e3g-mm-panel__body--visual {
    --e3g-mm-feature-width: 236px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--e3g-mm-feature-width);
    gap: 24px;
    align-items: start;
    width: calc(var(--e3g-mm-links-width) + 24px + var(--e3g-mm-feature-width));
  }

  .e3g-header__nav .e3g-mm-feature {
    display: flex;
    flex-direction: column;
    margin-bottom: 1.25rem;
    overflow: hidden;
    border: 1px solid var(--nxr-line);
    border-radius: 12px;
    background: #f6f8f1;
    color: var(--nxr-ink);
    text-decoration: none;
  }

  .e3g-mm-feature__media { display: block; aspect-ratio: 1; overflow: hidden; background: #f3f4ef; }
  .e3g-mm-feature__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .e3g-mm-feature__copy { display: grid; gap: 10px; padding: 18px; }
  .e3g-mm-feature__title { font-size: var(--e3g-text-24); font-weight: 750; line-height: 1.12; letter-spacing: -.025em; }
  .e3g-mm-feature__text { color: var(--nxr-ink-soft); font-size: var(--e3g-text-14); line-height: 1.5; }
  .e3g-mm-feature__cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 44px;
    margin-top: 3px;
    padding: 10px 12px;
    border-radius: 7px;
    background: var(--nxr-accent, #ccff00);
    color: var(--nxr-ink);
    font-size: var(--e3g-text-14);
    font-weight: 700;
    line-height: 1.3;
  }
  .e3g-header__nav .e3g-mm-feature:hover { border-color: var(--nxr-ink); }
  .e3g-header__nav .e3g-mm-feature:focus-visible { outline: 2px solid var(--nxr-ink); outline-offset: 3px; }

  /* Con pocos enlaces, foto y texto en paralelo para no alargar el panel.
     custom.js decide por la altura real de la lista, incluidos los nietos. */
  .e3g-header__nav .e3g-mm-panel__body--compact {
    --e3g-mm-feature-width: 440px;
  }
  .e3g-header__nav .e3g-mm-panel__body--compact .e3g-mm-feature {
    display: grid;
    grid-template-columns: 184px minmax(0, 1fr);
    min-height: 184px;
  }
  .e3g-mm-panel__body--compact .e3g-mm-feature__media {
    aspect-ratio: auto;
    height: 100%;
  }
  .e3g-mm-panel__body--compact .e3g-mm-feature__copy {
    align-content: center;
  }

  /* Se mantiene `column-count` y no se pasa a grid: el flujo por columnas
     (rellenar la primera de arriba abajo y luego la segunda) es el orden de
     lectura que ya tenía el menú. Estos selectores son 0-2-0 y ganan al
     `column-count: 3` que el módulo aplica entre 1200 y 1400 px. */
  .e3g-header__nav .e3g-mm-cols--1 .nxr-mm-cols { column-count: 1; }
  .e3g-header__nav .e3g-mm-cols--2 .nxr-mm-cols { column-count: 2; }
  .e3g-header__nav .e3g-mm-cols--3 .nxr-mm-cols { column-count: 3; }
  .e3g-header__nav .nxr-mm-cols { column-gap: var(--e3g-mm-gap); }

  /* Entrada que no es una marca, separada del resto del panel.
     Hoy sólo «Recuperación de datos», el único servicio entre las quince marcas
     de «Móviles»: con el mismo tratamiento que sus vecinas se leía como una
     marca más hasta llegar al texto.

     La clase la pone la plantilla del tema comparando el ID DE CATEGORÍA
     (`$e3g_mm_servicios`), no el rótulo ni la posición: las dos formas fáciles
     fallan en silencio cuando alguien renombra la entrada desde el back office
     o mete otra marca detrás.

     `break-inside: avoid` para que la línea no se quede colgando al pie de una
     columna con su texto en la siguiente. */
  .e3g-header__nav .nxr-mm-cols .e3g-mm-servicio {
    margin-top: 0.6rem;
    padding-top: 0.6rem;
    border-top: 1px solid var(--nxr-line);
    break-inside: avoid;
  }

  /* Cabecera del panel (Tarea 5): todos abren igual, con «Ver todo» o con el
     rótulo como título si la pestaña es inerte (Móviles, Cursos). */
  .e3g-header__nav .e3g-mm-panel__head {
    padding-block: 1rem 0.75rem;
    border-bottom: 1px solid var(--nxr-line);
    margin-bottom: 0.75rem;
  }

  /* Tinta, no lima: sobre blanco el acento se queda en 1,18:1 y no se lee. La
     jerarquía la dan el peso y el tamaño. */
  /* `nowrap` para que la cabecera no se parta NUNCA, y con ella el ancho del
     panel pasa a ser el del más ancho de sus dos contenidos: las columnas o la
     frase. El panel es `position: absolute` con `width: auto`, así que se ajusta
     al contenido y crece solo lo que haga falta.

     Sin esto, «Ver todas las consolas →» pedía 201 px en un panel de una columna
     que da 200 útiles y caía a dos líneas: un solo píxel. «Ver otros
     dispositivos →» pide 192 y cabía, así que el defecto salía en una pestaña
     sola y parecía un capricho suyo. Recortar la frase habría tapado el síntoma
     hasta la siguiente frase larga. */
  .e3g-header__nav .e3g-mm-panel__all,
  .e3g-header__nav .e3g-mm-panel__title {
    display: inline-block;
    color: var(--nxr-accent-dark);
    font-size: var(--e3g-text-14);
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
  }

  .e3g-header__nav .e3g-mm-panel__all:hover,
  .e3g-header__nav .e3g-mm-panel__all:focus-visible {
    text-decoration: underline;
  }

  /* El módulo da al <ul> `padding: 1.5rem 0`. Con cabecera propia, el de arriba
     sobra. */
  .e3g-header__nav .nxr-mm-cols {
    padding-block: 0 1.25rem;
  }
}

/* La misma separación de la entrada que no es marca, en el acordeón móvil.
   Va FUERA del `@media` de escritorio a propósito: el offcanvas sólo existe por
   debajo de 1200 px, así que acotarlo otra vez sería redundante, y la clase la
   pone la misma plantilla en las dos vistas.

   El color NO sale de `--nxr-line`: el fondo del panel del acordeón es
   `--nxr-surface-alt` y en esta paleta los dos son el mismo #e5e9ee, así que la
   línea desaparecería. Es la misma trampa que ya obligó a teñir la línea de la
   sublista del tercer nivel. */
.nxr-mm-acc-panel .e3g-mm-servicio {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid color-mix(in srgb, var(--nxr-ink-soft) 35%, transparent);
}

/* En móvil la franja se queda sólo con la hamburguesa; sin esto hereda el
   alto de una barra de pestañas vacía. */
@media (max-width: 1199.98px) {
  .e3g-header__nav {
    padding-block: 0.35rem;
  }
}

/* CTA del teléfono, al final de la franja del menú.
   Pastilla de TINTA con el número en lima, y no al revés: la franja del menú es
   plata y una pastilla lima sobre ella sería la misma pieza que el hover de las
   pestañas, justo al lado. Invertida se lee como lo que es —un botón, no una
   pestaña— y de paso reaparece el acento en la fila donde no lo hay. */
.e3g-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-contrast);
  color: var(--nxr-accent);
  font-weight: 700;
  font-size: var(--e3g-text-16);
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}

/* Hover invertido: el mismo par de colores al revés. Es el gesto que ya hacen
   el botón de acento y el badge del carrito en la fila de arriba. */
.e3g-header__cta:hover,
.e3g-header__cta:focus-visible {
  background: var(--nxr-accent);
  color: var(--nxr-accent-contrast);
  text-decoration: none;
}

.e3g-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, borde y relleno y se colapsa sola,
   porque no le queda ningún hijo visible.

   El CTA del teléfono desaparece en móvil (decisión del cliente, 2026-08-28).
   Por eso ya no hay aquí el `@media (max-width: 575.98px)` que dejaba el icono
   sin número: por debajo de md no hay CTA que encoger. */
.e3g-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) {
  .e3g-header__nav {
    padding-block: 0;
    background: none;
    border-bottom: 0;
  }

  .e3g-header__nav .nxr-mm-burger,
  .e3g-header__cta {
    display: none;
  }

  /* El logo baja de 56 a 42 px de alto (de 157 a 118 de ancho). Con la
     hamburguesa en esta fila son cinco piezas —hamburguesa, logo, lupa, cuenta
     y carrito— que a 56 px suman 349 y no caben en los 344 útiles de un
     viewport de 360: el carrito se iba a una segunda línea. Medido, no
     estimado; si se cambia el logo hay que volver a medir a 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-dark, #212529);
}

#_desktop_top_menu .top-menu .sub-menu a:hover {
  color: var(--nxr-accent-dark, #212529);
}

/* --- 4.4 Migas de pan ------------------------------------------------------ */
/* Hummingbird pinta este bloque con `var(--bs-tertiary-bg)`, que el puente
   `--bs-*` de §1 resuelve a la plata `#e5e9ee` — el MISMO valor que
   `--nxr-menubar-bg`. Resultado: la franja del menú y las migas se fundían en
   un único bloque gris de 92 px, sin separación visible entre la cabecera y el
   contenido. La plata se queda para el menú, que es el papel que le da la
   paleta, y las migas pasan a leerse como lo que son: la primera línea de la
   página. No se toca `--bs-tertiary-bg` en el puente, que lo usan más piezas de
   Bootstrap. */
.breadcrumb__wrapper {
  padding-block: 0.75rem;
  font-size: var(--e3g-text-14);
  background: var(--nxr-surface);
}

.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-dark, #212529);
  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: var(--e3g-text-16);
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
}

.product-miniature__title:hover {
  color: var(--nxr-accent-dark, #212529);
}

.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: var(--e3g-text-18);
  font-weight: 700;
}

.product-miniature__regular-price {
  color: var(--nxr-ink-soft);
  font-size: var(--e3g-text-14);
  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…) y los badges de nxr_badges, que se
   inyectan en el mismo contenedor .product-flags. */
.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 <li class="badge …">, no .product-flag.
   El :not(.nxr-badge) deja fuera a las de nxr_badges: ese módulo trae color
   propio por badge, configurable en el back office, y esta hoja carga después
   de la suya — sin la exclusión se lo comería. */
.product-flags > li:not(.nxr-badge) {
  padding: 0.2rem 0.55rem;
  border-radius: var(--nxr-radius-pill);
  background: var(--nxr-accent);
  color: var(--nxr-accent-contrast);
  font-size: var(--e3g-text-12);
  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 <h2>. Como el theme baja a <div> 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
   <h2>, así que los dos se ven idénticos. */
.section-title {
  font-family: var(--nxr-font-heading);
  font-size: var(--e3g-text-24);
  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: var(--e3g-text-32);
  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: var(--e3g-text-16);
}

.product-tabs .nav-tabs .nav-link.active {
  color: var(--nxr-accent-dark, #212529);
  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-dark, #212529);
  font-weight: 700;
}

/* =============================================================================
   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 <script> sueltos. En un
   contenedor grid, cada script ocupa su propia celda y arrastra otro row-gap:
   un hueco fantasma del que no hay ni rastro en el HTML visible. */
.page-content--home > script,
.page-content--home > link,
.page-content--home > style {
  display: none;
}

/* La barra de envío gratis (displayNxrFreeShipBar) va pegada al bloque que la
   precede, no separada como una sección más. */
.nxr-freeship {
  margin-top: 1rem;
}

/* El popup de nxr_popups se pinta al final del body; su z-index debe superar
   la cabecera sticky (1030) sin taparse con los modales de Bootstrap (1055). */
.nxr-popup__overlay,
.nxr-popup__bar {
  z-index: 1040;
}

/* El botón flotante de WhatsApp comparte esquina con el aviso de cookies de
   PrestaShop; se sube un poco para que no se solapen en móvil. */
@media (max-width: 767.98px) {
  .nxr-whatsapp__btn {
    bottom: 5rem;
  }
}

/* El aviso de fuera de horario («Te respondemos a partir de las 10:00») es un
   <span> DENTRO del enlace de WhatsApp, colgado encima del botón (hasta 220 px
   de ancho, 60vw en móvil). Al ser parte del enlace, un toque en él abría
   WhatsApp —y contaba como contacto— y robaba el toque a lo que tapaba: en las
   landings de portátil, el «Añadir al carrito». Es solo texto: los toques lo
   atraviesan y van a lo de debajo. Se sigue leyendo igual, y el botón redondo
   sigue siendo el enlace. Va aquí y no en el módulo porque nxr_whatsapp es una
   copia del almacén de la agencia. */
.nxr-whatsapp__notice {
  pointer-events: none;
}

/* Con el menú lateral del móvil abierto (nxr_megamenu), el botón (z-index
   99999) y su aviso quedaban por encima del fondo oscuro, y el aviso, encima
   del panel del menú. Mientras el menú esté abierto, el botón baja por debajo
   del fondo, como el resto de la página: queda atenuado y el panel lo tapa.
   Ojo, el menú y su fondo (1075 y 1070) viven DENTRO del <header>, que es
   sticky con z-index 1021 (Hummingbird) y forma su propio contexto de
   apilamiento: frente al botón, que cuelga del <body>, cuentan como 1021. Por
   eso 1020 y no 1069; con 1021 ganaría el botón, que va después en el HTML.
   Sin :has() (Chrome < 105, Safari < 15.4, Firefox < 121) la regla no aplica
   y se queda como antes: el botón encima del menú. */
body:has(#nxr-mm-offcanvas.is-open) .nxr-whatsapp__btn {
  z-index: 1020;
}

/* =============================================================================
   PÁGINA DE CONTACTO (/contactenos)
   -----------------------------------------------------------------------------
   Acompaña a templates/contact.tpl y a
   modules/contactform/views/templates/widget/contactform.tpl.

   Móvil primero: una sola columna con el FORMULARIO delante de las tarjetas
   (`order: -1`), y a partir de 992 px la rejilla de dos columnas del spec §4,
   con la información a la izquierda y el formulario a la derecha.

   Sólo tokens nexir, ni un hexadecimal. La regla de la paleta manda:
   `--nxr-accent` es color de FONDO (sobre blanco da 1,18:1) y dentro de él va
   `--nxr-accent-contrast`; para texto e iconos sobre fondo claro,
   `--nxr-accent-dark`. Los enlaces llevan además subrayado y peso propio para
   que sigan leyéndose como enlaces aunque `--nxr-accent-dark` se acerque al
   color de la tinta, que es lo que hace hoy la configuración de la tienda.
   ========================================================================== */

/* El layout de contacto es layout-left-column (lo fija theme.yml y el tema hijo
   no puede cambiarlo). contact.tpl vacía el bloque `left_column` entero, así
   que no queda ni el <div>; aquí sólo hay que devolverle el ancho al centro.
   Las clases de rejilla de Bootstrap (col-*) no llevan `!important` —eso es
   cosa de las utilidades—, así que desde fuera de las capas se pisan bien. */
#contact #center-column {
  flex: 0 0 100%;
  max-width: 100%;
  width: 100%;
}

.e3g-contact {
  max-width: 1180px;
  margin: 0 auto 3rem;
  padding: 0 0 0.5rem;
}

/* --- Hero --- */
.e3g-contact__head {
  text-align: center;
  margin-bottom: 2rem;
}

.e3g-contact__eyebrow {
  display: inline-block;
  margin-bottom: 0.75rem;
  padding: 0.3rem 0.9rem;
  border-radius: var(--nxr-radius-pill);
  background: var(--nxr-accent);
  color: var(--nxr-accent-contrast);
  font-size: var(--e3g-text-14);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.e3g-contact__title {
  font-family: var(--nxr-font-heading);
  font-size: var(--e3g-type-page);
  font-weight: var(--nxr-heading-weight);
  letter-spacing: var(--nxr-heading-tracking);
  line-height: 1.15;
  color: var(--nxr-ink);
  margin: 0 0 0.75rem;
}

.e3g-contact__lead {
  max-width: 40rem;
  margin: 0 auto;
  font-size: var(--e3g-text-16);
  line-height: 1.65;
  color: var(--nxr-ink-soft);
}

/* --- Rejilla --- */
.e3g-contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
}

.e3g-contact__info {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
}

/* --- Tarjetas --- */
.e3g-contact__card {
  display: flex;
  gap: 1rem;
  padding: 1.25rem;
  background: var(--nxr-surface);
  border: 1px solid var(--nxr-line);
  border-radius: var(--nxr-radius-lg);
  box-shadow: var(--nxr-shadow);
  transition: transform 0.15s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.e3g-contact__card:hover {
  transform: translateY(-2px);
  /* Neutro, no `--nxr-accent-line`: una línea fina en lima sobre blanco no se
     ve (está descartado en la nota de paleta del CLAUDE.md). */
  border-color: var(--nxr-ink-soft);
  box-shadow: var(--nxr-shadow-lg);
}

/* Hummingbird fija --bs-heading-color en h1..h6 con más especificidad que el
   `color` del contenedor; sin esto los títulos de tarjeta se van a su gris. */
.e3g-contact h1,
.e3g-contact h2,
.e3g-contact h3 {
  color: inherit;
}

.e3g-contact__icon {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--nxr-radius);
  background: var(--nxr-accent);
  color: var(--nxr-accent-contrast);
}

.e3g-contact__icon svg {
  width: 22px;
  height: 22px;
}

.e3g-contact__card-body {
  min-width: 0;
}

.e3g-contact__card-title {
  font-family: var(--nxr-font-heading);
  font-size: var(--e3g-text-16);
  font-weight: var(--nxr-heading-weight);
  letter-spacing: var(--nxr-heading-tracking);
  color: var(--nxr-ink);
  margin: 0 0 0.5rem;
}

.e3g-contact__addr {
  font-style: normal;
  font-size: var(--e3g-text-16);
  line-height: 1.55;
  color: var(--nxr-ink);
  margin: 0 0 0.9rem;
}

.e3g-contact__note {
  margin: 0.35rem 0 0;
  font-size: var(--e3g-text-14);
  color: var(--nxr-ink-soft);
}

.e3g-contact__subtitle {
  margin: 0 0 0.5rem;
  font-size: var(--e3g-text-14);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--nxr-ink-soft);
}

/* --- Cómo llegar --- */
.e3g-contact__how {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.e3g-contact__how li {
  display: flex;
  gap: 0.6rem;
  font-size: var(--e3g-text-14);
  line-height: 1.5;
  color: var(--nxr-ink-soft);
}

.e3g-contact__how strong {
  display: block;
  color: var(--nxr-ink);
  font-weight: 600;
}

.e3g-contact__how-icon {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--nxr-radius-sm);
  background: var(--nxr-surface-alt);
  color: var(--nxr-accent-dark);
}

.e3g-contact__how-icon svg {
  width: 16px;
  height: 16px;
}

/* --- Enlaces y llamadas a la acción --- */
.e3g-contact__link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.9rem;
  color: var(--nxr-accent-dark);
  font-weight: 600;
  font-size: var(--e3g-text-14);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.e3g-contact__link svg {
  width: 15px;
  height: 15px;
}

.e3g-contact__link:hover,
.e3g-contact__link:focus-visible {
  color: var(--nxr-ink);
}

.e3g-contact__big {
  display: inline-block;
  font-size: var(--e3g-text-20);
  font-weight: 700;
  color: var(--nxr-ink);
  text-decoration: none;
  word-break: break-word;
}

.e3g-contact__big:hover,
.e3g-contact__big:focus-visible {
  color: var(--nxr-ink);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* El botón de WhatsApp usa el acento de marca como fondo (con su contraste
   dentro) en vez del verde corporativo de WhatsApp: la regla del theme prohíbe
   hexadecimales de marca en esta hoja. */
.e3g-contact__wa {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.9rem;
  padding: 0.6rem 1.1rem;
  border-radius: var(--nxr-radius);
  background: var(--nxr-accent);
  color: var(--nxr-accent-contrast);
  font-size: var(--e3g-text-14);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.18s ease;
}

.e3g-contact__wa svg {
  width: 18px;
  height: 18px;
}

.e3g-contact__wa:hover,
.e3g-contact__wa:focus-visible {
  color: var(--nxr-accent-contrast);
  transform: translateY(-2px);
  box-shadow: var(--nxr-shadow);
}

/* --- Horario --- */
.e3g-contact__hours {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--e3g-text-16);
}

.e3g-contact__hours li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.4rem 0;
  border-bottom: 1px dashed var(--nxr-line);
  color: var(--nxr-ink-soft);
}

.e3g-contact__hours li:last-child {
  border-bottom: 0;
}

.e3g-contact__hours strong {
  color: var(--nxr-ink);
  font-weight: 600;
}

.e3g-contact__closed {
  color: var(--nxr-sale);
}

/* --- Mapa bajo demanda ---
   Hasta que no se pulsa el botón aquí no hay iframe, así que el primer render
   de la página no hace ni una petición a Google. El iframe lo inserta
   assets/js/custom.js leyendo `data-map-src`. */
.e3g-contact__map {
  border: 1px solid var(--nxr-line);
  border-radius: var(--nxr-radius-lg);
  overflow: hidden;
  background: var(--nxr-surface-alt);
}

.e3g-contact__map-placeholder {
  min-height: 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 1.75rem 1.25rem;
  text-align: center;
}

.e3g-contact__map-icon {
  display: flex;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: var(--nxr-radius-pill);
  background: var(--nxr-surface);
  border: 1px solid var(--nxr-line);
  color: var(--nxr-accent-dark);
}

.e3g-contact__map-icon svg {
  width: 24px;
  height: 24px;
}

.e3g-contact__map-text {
  margin: 0;
  max-width: 26rem;
  font-size: var(--e3g-text-14);
  line-height: 1.5;
  color: var(--nxr-ink-soft);
}

/* El disparador es un <a> a Google Maps, no un <button>: sin JavaScript sigue
   llevando a alguna parte en vez de quedarse inerte. Con JavaScript, custom.js
   corta la navegación y monta el iframe aquí mismo. */
.e3g-contact__map-btn {
  display: inline-block;
  padding: 0.6rem 1.3rem;
  border: 0;
  border-radius: var(--nxr-radius);
  background: var(--nxr-accent);
  color: var(--nxr-accent-contrast);
  font-size: var(--e3g-text-14);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.18s ease;
}

.e3g-contact__map-btn:hover,
.e3g-contact__map-btn:focus-visible {
  color: var(--nxr-accent-contrast);
  transform: translateY(-2px);
  box-shadow: var(--nxr-shadow);
}

/* El iframe recibe el foco al insertarse (assets/js/custom.js): sin este
   `outline` el salto de foco sería invisible para quien navega con teclado. */
.e3g-contact__map iframe:focus-visible {
  outline: 2px solid var(--nxr-ink);
  outline-offset: -2px;
}

.e3g-contact__map iframe {
  display: block;
  width: 100%;
  height: 280px;
  border: 0;
}

/* --- Formulario --- */
.e3g-contact__form {
  /* En móvil el formulario va DELANTE de las tarjetas: quien llega desde el
     móvil viene a escribir, no a leer la dirección. A partir de 992 px vuelve a
     su sitio (`order: 0`), a la derecha de la información. */
  order: -1;
  background: var(--nxr-surface);
  border: 1px solid var(--nxr-line);
  border-radius: var(--nxr-radius-lg);
  padding: 1.5rem 1.25rem;
  box-shadow: var(--nxr-shadow);
}

.e3g-contact__form .contact-form,
.e3g-contact__form .form-fields {
  margin: 0;
}

.e3g-contact-form__title {
  font-family: var(--nxr-font-heading);
  font-size: var(--e3g-text-24);
  font-weight: var(--nxr-heading-weight);
  letter-spacing: var(--nxr-heading-tracking);
  color: var(--nxr-ink);
  margin: 0 0 0.35rem;
}

.e3g-contact-form__hint {
  font-size: var(--e3g-text-16);
  line-height: 1.55;
  color: var(--nxr-ink-soft);
  margin: 0 0 1.35rem;
}

.e3g-contact__form .form-label {
  font-weight: 600;
  color: var(--nxr-ink);
}

/* El widget de Turnstile va fuera de .buttons-wrapper (flex-row) para tener su
   propia línea; aquí sólo se le da aire. */
.e3g-contact__form .nxr-antispam-widget {
  margin-bottom: 1rem;
}

/* --- Tira de ventajas --- */
.e3g-contact__perks {
  list-style: none;
  margin: 2rem 0 0;
  padding: 1.25rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.9rem;
  background: var(--nxr-surface-alt);
  border: 1px solid var(--nxr-line);
  border-radius: var(--nxr-radius-lg);
}

.e3g-contact__perk {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-size: var(--e3g-text-16);
  font-weight: 600;
  color: var(--nxr-ink);
}

.e3g-contact__perk-icon {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--nxr-radius-pill);
  background: var(--nxr-accent);
  color: var(--nxr-accent-contrast);
}

.e3g-contact__perk-icon svg {
  width: 18px;
  height: 18px;
}

/* --- Tira de ventajas en dos columnas ---
   Único punto de corte propio de este bloque, y el resto de custom.css sólo
   maneja 992 px y 1199.98 px. No es un descuido: la tira son cuatro textos
   cortos y desde 576 px caben dos por fila, así que plegar esto al breakpoint de
   992 dejaría cuatro filas apiladas en TODA la franja de tableta, que es donde
   más se nota el hueco. Los ajustes de relleno de las tarjetas y del formulario
   sí se plegaron a 992, que es donde de verdad hacen falta. */
@media (min-width: 576px) {
  .e3g-contact__perks {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem 1.5rem;
    padding: 1.5rem;
  }
}

/* --- Escritorio: las dos columnas del spec §4 --- */
@media (min-width: 992px) {
  .e3g-contact__head {
    margin-bottom: 2.5rem;
  }

  .e3g-contact__card {
    padding: 1.4rem 1.5rem;
  }

  .e3g-contact__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: 1.75rem;
    align-items: start;
  }

  /* En escritorio vuelve a su sitio: información a la izquierda, formulario a
     la derecha. */
  .e3g-contact__form {
    order: 0;
    padding: 1.85rem 1.75rem 1.6rem;
  }

  .e3g-contact__perks {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 2.5rem;
  }

  .e3g-contact__perk {
    flex-direction: column;
    text-align: center;
    gap: 0.6rem;
  }
}

/* =============================================================================
   PIE (FOOTER) DE EUROPA 3G
   -----------------------------------------------------------------------------
   Acompaña a `templates/_partials/footer.tpl` y a las tres plantillas de módulo
   copiadas al tema (`modules/ps_linklist`, `modules/ps_customeraccountlinks`,
   `modules/ps_socialfollow`).

   Cuatro franjas: llamada a la acción (fondo de acento), cuerpo oscuro con las
   columnas, distintivos (arbitraje de consumo + RGPD) y copyright.

   Colores: todo sale de los tokens. El pie usa `--nxr-footer-bg` (#212529),
   `--nxr-footer-fg` (#e5e9ee) y `--nxr-footer-heading` (#fff), que hoy pone
   `nxr_themeconfig` con la paleta de marca. El acento (lima #ccff00) aparece
   SOLO como superficie —la franja de CTA, el subrayado de los títulos, el
   hover de las redes—: nunca como texto ni como línea fina sobre claro
   (ver CLAUDE.md, «la regla que hay que respetar al escribir CSS nuevo»).
   Sobre el fondo oscuro del pie el lima da 13:1, así que ahí sí puede ser
   texto; aun así se reserva para fondos, por coherencia.
   ========================================================================== */

.e3g-footer {
  --e3g-footer-gap: clamp(1.75rem, 3vw, 2.75rem);
  --e3g-footer-hairline: rgb(255 255 255 / 12%);
  margin-top: clamp(2rem, 5vw, 3.5rem);
}

/* --- 1. Franja de llamada a la acción --------------------------------------
   Es lo único del pie con fondo de marca. El texto va en tinta
   (--nxr-accent-contrast), que es lo que exige la paleta sobre el lima. */
.e3g-footer__cta {
  background: var(--nxr-accent);
  color: var(--nxr-accent-contrast);
  padding-block: 1.25rem;
}

.e3g-footer__cta-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}

.e3g-footer__cta-text {
  margin: 0;
  font-weight: 600;
  font-size: var(--e3g-text-18);
  line-height: 1.35;
  max-width: 46ch;
}

.e3g-footer__cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
}

.e3g-footer__cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.15rem;
  border: 2px solid var(--nxr-accent-contrast);
  border-radius: var(--nxr-radius-pill);
  background: var(--nxr-accent-contrast);
  color: #fff;
  font-weight: 600;
  font-size: var(--e3g-text-16);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.e3g-footer__cta-btn svg {
  width: 18px;
  height: 18px;
  flex: none;
}

.e3g-footer__cta-btn:hover,
.e3g-footer__cta-btn:focus-visible {
  background: transparent;
  color: var(--nxr-accent-contrast);
}

.e3g-footer__cta-btn--ghost {
  background: transparent;
  color: var(--nxr-accent-contrast);
}

.e3g-footer__cta-btn--ghost:hover,
.e3g-footer__cta-btn--ghost:focus-visible {
  background: var(--nxr-accent-contrast);
  color: #fff;
}

/* --- Mini taller del pie: SVG propio; el JS sólo controla cuándo se mueve. --- */
.e3g-workshop {
  background: var(--nxr-footer-bg);
  color: var(--nxr-footer-fg);
}

.e3g-workshop__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  align-items: center;
  gap: 2rem;
  padding-block: .75rem;
  border-bottom: 1px solid var(--e3g-footer-hairline);
}

.e3g-workshop__caption {
  max-width: 18ch;
  margin: 0;
  color: var(--nxr-footer-heading);
  font-size: var(--e3g-text-24, 1.5rem);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.025em;
}

.e3g-workshop__scene { min-width: 0; overflow: hidden; }
.e3g-workshop__drawing { display: block; width: 100%; height: auto; }
.e3g-workshop__muted { stroke: var(--nxr-ink-soft); }
.e3g-workshop__surface { fill: var(--nxr-footer-bg); }
.e3g-workshop__lamp { fill: var(--nxr-surface-alt); stroke: var(--nxr-surface-alt); }
.e3g-workshop__broken-screen { fill: var(--nxr-surface-alt); }
.e3g-workshop__screen { fill: var(--nxr-accent); clip-path: inset(0); }
.e3g-workshop__emitter { fill: var(--nxr-ink-soft); }
.e3g-workshop__led { fill: var(--nxr-accent); }
.e3g-workshop__scan { fill: var(--nxr-surface); visibility: hidden; }
.e3g-workshop__ink,
.e3g-workshop__check,
.e3g-workshop__crack { stroke: var(--nxr-ink); }
.e3g-workshop__phone { transform: translateX(304px); }
.e3g-workshop__check { stroke-dasharray: 1; stroke-dashoffset: 0; }
.e3g-workshop__spark { visibility: hidden; }

.e3g-workshop__toggle {
  position: absolute;
  right: .75rem;
  bottom: .25rem;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 10px;
  color: var(--nxr-footer-fg);
  background: var(--nxr-footer-bg);
  border: 0;
  border-radius: 4px;
}

.e3g-workshop__toggle[hidden] { display: none; }
.e3g-workshop__toggle svg { width: 20px; height: 20px; }
.e3g-workshop__toggle:hover { color: var(--nxr-footer-bg); background: var(--nxr-surface-alt); }
.e3g-workshop__toggle:focus-visible { outline: 2px solid var(--nxr-footer-fg); outline-offset: 2px; }
.e3g-workshop__play-icon,
.e3g-workshop__toggle[aria-pressed="true"] .e3g-workshop__pause-icon { display: none; }
.e3g-workshop__toggle[aria-pressed="true"] .e3g-workshop__play-icon { display: block; }

/* Un reloj compartido sincroniza el barrido, la pantalla y los tres testigos.
   El 20% final deja descansar la escena entre una reparación y la siguiente. */
.e3g-workshop.is-ready .e3g-workshop__motion {
  animation-duration: 12s;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
  animation-play-state: paused;
}
.e3g-workshop.is-running .e3g-workshop__motion { animation-play-state: running; }
.e3g-workshop.is-ready .e3g-workshop__phone { animation-name: e3g-workshop-phone; }
.e3g-workshop.is-ready .e3g-workshop__screen { animation-name: e3g-workshop-screen; animation-timing-function: linear; }
.e3g-workshop.is-ready .e3g-workshop__scan { animation-name: e3g-workshop-scan; animation-timing-function: linear; }
.e3g-workshop.is-ready .e3g-workshop__emitter { animation-name: e3g-workshop-emitter; animation-timing-function: step-end; }
.e3g-workshop.is-ready .e3g-workshop__led--1 { animation-name: e3g-workshop-led-one; animation-timing-function: step-end; }
.e3g-workshop.is-ready .e3g-workshop__led--2 { animation-name: e3g-workshop-led-two; animation-timing-function: step-end; }
.e3g-workshop.is-ready .e3g-workshop__led--3 { animation-name: e3g-workshop-led-three; animation-timing-function: step-end; }
.e3g-workshop.is-ready .e3g-workshop__check { animation-name: e3g-workshop-check; }
.e3g-workshop.is-ready .e3g-workshop__spark { animation-name: e3g-workshop-spark; }

@keyframes e3g-workshop-phone {
  0%, 4% { transform: translateX(-64px); }
  25%, 64% { transform: translateX(304px); }
  80%, 100% { transform: translateX(730px); }
}
@keyframes e3g-workshop-screen {
  0%, 31% { clip-path: inset(0 0 100% 0); }
  51%, 100% { clip-path: inset(0); }
}
@keyframes e3g-workshop-scan {
  0%, 30.99% { visibility: hidden; transform: translateY(0); }
  31% { visibility: visible; transform: translateY(0); }
  51% { visibility: visible; transform: translateY(67px); }
  51.01%, 100% { visibility: hidden; transform: translateY(67px); }
}
@keyframes e3g-workshop-emitter {
  0% { fill: var(--nxr-ink-soft); }
  29% { fill: var(--nxr-accent); }
  53%, 100% { fill: var(--nxr-ink-soft); }
}
@keyframes e3g-workshop-led-one {
  0%, 82%, 100% { fill: var(--nxr-ink-soft); }
  31% { fill: var(--nxr-accent); }
}
@keyframes e3g-workshop-led-two {
  0%, 82%, 100% { fill: var(--nxr-ink-soft); }
  41% { fill: var(--nxr-accent); }
}
@keyframes e3g-workshop-led-three {
  0%, 82%, 100% { fill: var(--nxr-ink-soft); }
  51% { fill: var(--nxr-accent); }
}
@keyframes e3g-workshop-check {
  0%, 52% { stroke-dashoffset: 1; }
  57%, 100% { stroke-dashoffset: 0; }
}
@keyframes e3g-workshop-spark {
  0%, 52% { visibility: hidden; stroke-dasharray: 0 12; }
  53%, 55% { visibility: visible; stroke-dasharray: 8 12; }
  59%, 100% { visibility: hidden; stroke-dasharray: 0 12; }
}

@media (max-width: 767.98px) {
  .e3g-workshop__inner { grid-template-columns: minmax(0, 1fr); gap: .25rem; padding-top: 1.5rem; }
  .e3g-workshop__caption { max-width: min(22ch, calc(100% - 3rem)); font-size: var(--e3g-text-20, 1.25rem); }
  .e3g-workshop__drawing { width: 140%; max-width: none; margin-left: -20%; }
  .e3g-workshop__toggle { top: 1.25rem; bottom: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .e3g-workshop.is-ready .e3g-workshop__motion { animation: none; }
  .e3g-workshop__toggle { display: none; }
}

/* --- 2. Cuerpo -------------------------------------------------------------- */
.e3g-footer__before,
.e3g-footer__main {
  background: var(--nxr-footer-bg);
  color: var(--nxr-footer-fg);
}

.e3g-footer__before {
  padding-block: 1.5rem;
  border-bottom: 1px solid var(--e3g-footer-hairline);
}

.e3g-footer__main {
  padding-block: clamp(2rem, 4vw, 3rem) clamp(1.5rem, 3vw, 2.25rem);
}

.e3g-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0 var(--e3g-footer-gap);
}

/* La columna de marca */
.e3g-footer__brand {
  padding-block: 0.5rem 1.5rem;
}

.e3g-footer__logo {
  display: inline-block;
  margin-bottom: 1rem;
}

.e3g-footer__logo img {
  width: auto;
  height: 42px;
}

.e3g-footer__claim {
  margin: 0 0 1.15rem;
  font-size: var(--e3g-text-14);
  line-height: 1.6;
  max-width: 38ch;
  color: var(--nxr-footer-fg);
}

/* Redes sociales: círculo con borde, que se rellena de acento al pasar. */
.e3g-footer__social ul {
  gap: 0.5rem;
}

.e3g-footer__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(--e3g-footer-hairline);
  border-radius: 50%;
  color: var(--nxr-footer-fg);
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.e3g-footer__social a:hover,
.e3g-footer__social a:focus-visible {
  background: var(--nxr-accent);
  border-color: var(--nxr-accent);
  color: var(--nxr-accent-contrast);
}

/* --- Bloques de enlaces (ps_linklist, la tienda) --- */
.e3g-footer__block {
  padding-block: 0.35rem;
  border-top: 1px solid var(--e3g-footer-hairline);
}

.e3g-footer__block-title {
  position: relative;
  margin: 0;
  padding-block: 0.85rem;
  color: var(--nxr-footer-heading);
  font-weight: 600;
  font-size: var(--e3g-text-14);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.e3g-footer__block-title a {
  color: inherit;
  text-decoration: none;
}

/* Botón de acordeón (solo móvil): ocupa el ancho del título para que se pueda
   pulsar en cualquier punto, sin `.stretched-link` (que se sale del bloque). */
.e3g-footer__toggle {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
}

.e3g-footer__toggle i {
  font-size: var(--e3g-text-24);
  transition: transform 0.2s ease;
}

.e3g-footer__toggle:not(.collapsed) i {
  transform: rotate(180deg);
}

.e3g-footer__block-content {
  padding-bottom: 1rem;
}

.e3g-footer__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.55rem;
}

.e3g-footer__list a,
.e3g-footer__contact a,
.e3g-footer__store-link {
  color: var(--nxr-footer-fg);
  font-size: var(--e3g-text-14);
  text-decoration: none;
}

.e3g-footer__list a:hover,
.e3g-footer__list a:focus-visible,
.e3g-footer__contact a:hover,
.e3g-footer__contact a:focus-visible {
  color: var(--nxr-footer-heading);
  text-decoration: underline;
}

/* --- Columna «La tienda» --- */
.e3g-footer__contact {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.85rem;
  font-size: var(--e3g-text-14);
  line-height: 1.5;
}

.e3g-footer__contact li {
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
}

/* El correo no debe ensanchar la última columna del pie en tablet. */
.e3g-footer__contact li > :last-child {
  min-width: 0;
  overflow-wrap: anywhere;
}

.e3g-footer__contact-icon {
  flex: none;
  display: inline-flex;
  width: 20px;
  height: 20px;
  margin-top: 0.1rem;
  color: var(--nxr-footer-heading);
  opacity: 0.75;
}

.e3g-footer__contact-icon svg {
  width: 100%;
  height: 100%;
}

.e3g-footer__addr {
  margin: 0;
  font-style: normal;
}

.e3g-footer__muted {
  color: var(--nxr-footer-fg);
  opacity: 0.7;
}

.e3g-footer__store-link {
  display: inline-block;
  margin-top: 1rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.e3g-footer__store-link:hover,
.e3g-footer__store-link:focus-visible {
  color: var(--nxr-footer-heading);
}

/* --- 3. Distintivos y medios de pago ---------------------------------------- */
.e3g-footer__trust {
  background: var(--nxr-footer-bg);
  border-top: 1px solid var(--e3g-footer-hairline);
  padding-block: 1.35rem;
}

.e3g-footer__trust-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem 2rem;
  /* Todo a la izquierda, distintivos y medios de pago seguidos: la esquina
     inferior derecha la ocupan el botón flotante de WhatsApp (`nxr_whatsapp`)
     y su globo de aviso, que taparían cualquier cosa que se ponga ahí. */
  justify-content: flex-start;
}

.e3g-footer__seals {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

/* Los dos sellos son imágenes con fondo blanco (el del Sistema Arbitral de
   Consumo es un JPG y no tiene transparencia), así que van sobre una tarjeta
   blanca en vez de recortados contra el negro. */
.e3g-footer__seal {
  display: block;
  background: #fff;
  border-radius: var(--nxr-radius-sm);
  padding: 0.35rem;
  width: auto;
}

.e3g-footer__seal--sac {
  height: 104px;
}

.e3g-footer__seal--rgpd {
  height: 52px;
}

.e3g-footer__seal-link {
  display: inline-block;
  line-height: 0;
}

.e3g-footer__payments {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--nxr-footer-fg);
}

.e3g-footer__payments-label {
  font-size: var(--e3g-text-14);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.8;
}

.e3g-footer__pay {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  min-width: 46px;
  padding: 0 0.5rem;
  border-radius: var(--nxr-radius-sm);
  background: #fff;
  color: #1a1f71; /* azul Visa: el SVG hereda el color del contenedor */
}

.e3g-footer__pay svg {
  height: 15px;
  width: auto;
}

.e3g-footer__pay--text {
  color: var(--nxr-ink);
  font-size: var(--e3g-text-14);
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* --- 4. Copyright ----------------------------------------------------------- */
.e3g-footer__bottom {
  background: var(--nxr-footer-bg);
  border-top: 1px solid var(--e3g-footer-hairline);
  padding-block: 0.95rem;
  font-size: var(--e3g-text-14);
}

.e3g-footer__bottom-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1.25rem;
  color: var(--nxr-footer-fg);
}

.e3g-footer__copyright {
  margin: 0;
  opacity: 0.85;
}

.e3g-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.e3g-footer__credit {
  margin: 0;
}

.e3g-footer__legal a,
.e3g-footer__credit a {
  color: var(--nxr-footer-fg);
  text-decoration: none;
}

.e3g-footer__legal a:hover,
.e3g-footer__legal a:focus-visible,
.e3g-footer__credit a:hover,
.e3g-footer__credit a:focus-visible {
  color: var(--nxr-footer-heading);
  text-decoration: underline;
}

/* --- 5. A partir de tableta ------------------------------------------------- */
@media (min-width: 768px) {
  /* Fuera el acordeón: los bloques quedan abiertos y sin la línea de
     separación que los ordenaba en móvil. Igual que hace Hummingbird con
     `.footer-block__content.collapse`; aquí gana por ir sin capa. */
  .e3g-footer__block-content.collapse {
    display: block;
  }

  .e3g-footer__block {
    border-top: 0;
    padding-block: 0;
  }

  .e3g-footer__block-title {
    padding-block: 0 0.9rem;
  }

  /* El subrayado de acento: un trazo corto bajo cada título. Es superficie,
     no línea de texto, y sobre el pie oscuro se lee de sobra. */
  .e3g-footer__block-title::after {
    content: "";
    display: block;
    width: 26px;
    height: 3px;
    margin-top: 0.55rem;
    border-radius: 2px;
    background: var(--nxr-accent);
  }

  .e3g-footer__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: 1.5rem;
  }

  .e3g-footer__brand {
    grid-column: 1 / -1;
    padding-bottom: 1.75rem;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid var(--e3g-footer-hairline);
  }

  .e3g-footer__cta-inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
  }

  .e3g-footer__cta-text {
    margin-inline-end: auto;
  }
}

@media (min-width: 992px) {
  /* Marca a la izquierda y las tres columnas de enlaces a su derecha. */
  .e3g-footer__grid {
    grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
    row-gap: 0;
  }

  .e3g-footer__brand {
    grid-column: auto;
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: 0;
    padding-inline-end: 1.5rem;
  }
}

/* El texto ampliado debe reordenar el pie sin forzar el ancho de la página. */
.e3g-footer__cta-actions { min-width: 0; max-width: 100%; }
.e3g-footer__cta-btn { max-width: 100%; white-space: normal; line-height: 1.5; overflow-wrap: anywhere; }
.e3g-footer__payments { flex-wrap: wrap; min-width: 0; }