/* ============================================================================
   millabikes — ajustes propios sobre Hummingbird 2.0.0

   Este fichero lo carga el core automáticamente con prioridad 1000, o sea el
   último (classes/controller/FrontController.php:976). Es la vía soportada
   para personalizar: no se pierde al actualizar el tema, a diferencia de tocar
   theme.css, que se regenera desde el SCSS.
   ============================================================================ */


/* ----------------------------------------------------------------------------
   Menú principal: darle su propia fila

   PROBLEMA
   La tienda tiene 7 categorías principales con nombres largos. Medido en
   Chrome a 1440 px (docker/tools/measure-header.mjs):

       espacio disponible en la fila del logo :  800 px
       necesita el menú en una sola línea     :  966 px
       faltan                                 :  166 px

   Así que se partía en dos líneas, con "Mantenimiento" y "Nutrición" colgando
   sueltas debajo.

   POR QUÉ ESTA SOLUCIÓN Y NO APRETAR EL MENÚ
   Recortando padding (8→4 px) y gap (8→4 px) solo se recuperan ~80 px de los
   166 que faltan. Para el resto habría que bajar la tipografía a 14 px o
   estrechar el buscador, y aun así quedaría al límite: basta con que añadan una
   categoría —o que alguien renombre una— para que vuelva a partirse.

   Dándole la fila entera pasa a disponer de 1320 px para 966: sobran 354 px,
   sitio para dos o tres categorías más sin volver a tocar nada. Y una fila de
   menú a todo lo ancho se lee como una decisión de diseño, no como un salto de
   línea accidental.

   Solo se aplica de xl (1200 px) hacia arriba: por debajo, Hummingbird oculta
   este menú (`d-none d-xl-block`) y usa el desplegable lateral del móvil.
---------------------------------------------------------------------------- */
@media (min-width: 1200px) {

  .header-bottom__row {
    flex-wrap: wrap;
  }

  .ps-mainmenu--desktop {
    /* Ocupa la fila completa. `order: 3` lo manda detrás del buscador, que
       lleva `order-2`; sin esto se colocaría entre el logo y el buscador. */
    flex: 0 0 100%;
    max-width: 100%;
    order: 3;
  }

  .ps-mainmenu__desktop {
    /* El contenedor es `display: flex` y este <nav> viene con `flex: 0 1 auto`,
       o sea que se encoge al ancho de su contenido en lugar de ocupar la fila:
       medido, se quedaba en 1014 px de los 1296 disponibles. Con `flex: 1 1
       auto` coge el ancho completo y el menú centrado dispone de todo el sitio. */
    flex: 1 1 auto;
    border-top: 1px solid rgba(0, 0, 0, .08);
  }

  .ps-mainmenu__tree {
    justify-content: center;
    /* Se deja en `wrap` a propósito. Con `nowrap`, el día que no quepa se
       desbordaría a lo ancho y aparecería scroll horizontal en toda la página
       —el fallo que ya sufrimos en el tema anterior—. Prefiero que, en el peor
       caso, vuelva a partirse en dos líneas centradas antes que romper la
       página entera. */
    flex-wrap: wrap;
  }

  /* La fila del logo ya no tiene que estirarse para acomodar dos líneas de
     menú, así que recupera una altura razonable. */
  .header-bottom__logo,
  .header-bottom__row > .order-2 {
    min-height: 0;
  }
}


/* ----------------------------------------------------------------------------
   Portada: separar el primer bloque del menú

   Hummingbird da por supuesto que arriba va el carrusel, que es una banda de
   imagen a todo el ancho y pega bien contra la navegación. Medido, el hueco del
   menú al primer bloque es de 0 px mientras que entre secciones hay 40 px
   (`.page-content--home` es `display: grid; gap: 2.5rem`).

   Sin carrusel, el primer bloque queda pegado al menú y se lee como un fallo de
   maquetación. Se le da el MISMO 2.5rem del `gap` en lugar de un valor a ojo,
   para que respete el ritmo vertical del tema.

   La condición `:has()` importa: si el cliente sube sus imágenes y el carrusel
   vuelve a ser el primer bloque, esta separación desaparece sola y la banda
   vuelve a quedar a ras del menú, que es como está diseñada.
---------------------------------------------------------------------------- */
.page-content--home:not(:has(> .ps-imageslider:first-child)) {
  padding-top: 2.5rem;
}


/* ----------------------------------------------------------------------------
   Desplegables: usar el ancho en vez de crecer a lo alto

   PROBLEMA
   El mega-menú de Hummingbird es de PESTAÑAS: la columna izquierda (col-sm-3)
   lista las subcategorías y el panel derecho (col-sm-9) muestra los hijos de la
   pestaña activa. Eso funciona cuando hay tercer nivel. Medido a 1440x900
   (docker/tools/measure-submenu.mjs):

     categoria      subcat  con 3er nivel  alto   ancho izq  panel derecho
     Accesorios       13          0        721px    336px    1008px VACIO
     Equipamiento     13          0        721px    336px    1008px VACIO
     Componentes       8          5        461px    336px    con contenido
     Mantenimiento     5          0        305px    336px    1008px VACIO

   O sea: de las seis categorias con desplegable, SOLO "Componentes" usa el
   panel derecho. En las otras cinco se desperdician 1008 px de ancho mientras
   la lista crece a lo alto hasta salirse de la pantalla, y las ultimas
   subcategorias quedan inalcanzables.

   SOLUCION
   Cuando NINGUN elemento tiene tercer nivel (`data-ps-has-child="true"`), el
   panel derecho no puede llegar a mostrar nada: se oculta y la lista pasa a
   ocupar el ancho completo en varias columnas. Los 13 elementos de Accesorios
   bajan de 721 px de alto a unas tres filas.

   Se usa `:has()` para no tener que sobreescribir la plantilla del modulo, que
   habria que mantener en cada actualizacion del tema.
---------------------------------------------------------------------------- */
@media (min-width: 576px) {

  .submenu__row:not(:has(.submenu__left-item[data-ps-has-child="true"])) .submenu__right {
    display: none;
  }

  .submenu__row:not(:has(.submenu__left-item[data-ps-has-child="true"])) .submenu__left {
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;

    /* `auto-fill` en vez de un numero fijo de columnas: se adapta al ancho de
       la pantalla y al numero de subcategorias, asi que sigue valiendo si
       añaden o quitan categorias. */
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    column-gap: 1.5rem;
    align-content: start;
  }

  /* Red de seguridad, independiente de lo anterior: por muy larga que sea la
     lista, el desplegable nunca debe crecer mas alla de la pantalla, porque
     entonces hay enlaces a los que no se puede llegar con el raton. Con esto,
     en el peor caso se hace scroll dentro del propio desplegable. */
  .js-sub-menu.submenu {
    max-height: calc(100vh - 12rem);
    overflow-y: auto;
  }
}


/* ============================================================================
   IDENTIDAD VISUAL
   ============================================================================

   DE DONDE SALE LA PALETA
   El logo es negro puro sobre blanco: se analizaron sus 31.680 pixeles y NO
   tiene ni uno cromatico. Asi que la marca no traia color y habia que elegirlo.
   No se ha inventado: en la tienda fisica el logo se acompana de verdes
   (hierba) con puntos de marron (tierra), predominando el verde, y los maillots
   del equipo ciclista son verde y negro.

   La paleta del tema anterior NO sirve de referencia: era el cian de fabrica de
   PrestaShop (#2FB5D2) con un boton #00ff00 y hover naranja, claramente pruebas
   y no una decision de marca. Lo unico que se conserva de ella es el blanco roto
   #FAF9F9 del fondo, que si era intencionado.

   POR QUE ESTE VERDE Y NO UN VERDE HIERBA VIVO
   Se midio el contraste WCAG de ocho verdes. Los vivos NO son usables:

       #57A128  verde hierba vivo    3.21:1   NO llega a AA
       #4C8C2B  verde hierba medio   4.12:1   NO llega a AA
       #42802A  verde cesped         4.82:1   AA
       #3A7230  verde campo          5.79:1   AA    <- elegido
       #2A5F2E  verde bosque oscuro  7.57:1   AAA   <- hover

   Con un verde vivo, ni los botones ni los enlaces cumplirian el minimo de
   4.5:1, asi que el vivo queda SOLO para decoracion que no transporta
   informacion (el filete bajo los titulos).

   REPARTO DE PAPELES
   Cada color significa una cosa y solo una, para que el usuario aprenda a
   leerlos:
       verde   -> "puedes actuar aqui": botones, enlaces, foco, seccion actual
       marron  -> "fijate en esto": ofertas y descuentos
       negro   -> texto y estructura, botones secundarios

   Esto tambien evita un choque semantico: si el verde de marca se usara tambien
   para "en stock", el cliente no distinguiria estado de accion. Por eso las
   etiquetas de stock se quedan en gris neutro.

   NO HACE FALTA !important. El tema declara capas de cascada
   (@layer vendors, bs-base, bs-components, ...) y en CSS el codigo SIN capa gana
   siempre al que esta en capas, independientemente de la especificidad. Este
   fichero no declara capa, asi que se impone limpiamente.
   ============================================================================ */

:root {
  --mb-ink:          #16130F;   /* negro del logo, con un punto calido  18.5:1 */
  --mb-green:        #3A7230;   /* accion                                5.8:1 */
  --mb-green-dark:   #2A5F2E;   /* accion, hover                         7.6:1 */
  --mb-green-vivid:  #57A128;   /* SOLO decorativo: no llega a AA               */
  --mb-earth:        #7A5C3E;   /* ofertas                               6.1:1 */
  --mb-surface:      #FAF9F8;   /* blanco roto heredado del tema anterior       */
  --mb-line:         #E6E1DB;   /* borde calido, mas suave que el gris de BS    */
  --mb-muted:        #6B625A;   /* texto secundario                      6.0:1 */

  /* Fichas de Bootstrap: cambiando estas se propaga a las 46 reglas del tema
     que usan var(--bs-primary) y var(--bs-link-color). */
  --bs-primary: var(--mb-green);
  --bs-primary-rgb: 58, 114, 48;
  --bs-primary-text-emphasis: var(--mb-green-dark);
  --bs-link-color: var(--mb-green);
  --bs-link-color-rgb: 58, 114, 48;
  --bs-link-hover-color: var(--mb-green-dark);
  --bs-focus-ring-color: rgba(58, 114, 48, .35);
  --bs-body-color: var(--mb-ink);
  --bs-border-color: var(--mb-line);
  --bs-blue: var(--mb-green);
}

/* Las 23 reglas del tema que llevan el azul A FUEGO (no por variable) viven
   dentro de variables con ambito de componente. Se redirigen aqui: es mas
   robusto que repintar cada propiedad suelta. */
.btn-primary {
  --bs-btn-bg: var(--mb-green);
  --bs-btn-border-color: var(--mb-green);
  --bs-btn-hover-bg: var(--mb-green-dark);
  --bs-btn-hover-border-color: var(--mb-green-dark);
  --bs-btn-active-bg: var(--mb-green-dark);
  --bs-btn-active-border-color: var(--mb-green-dark);
  --bs-btn-disabled-bg: var(--mb-green);
  --bs-btn-disabled-border-color: var(--mb-green);
  --bs-btn-focus-shadow-rgb: 58, 114, 48;
}

.btn-outline-primary {
  --bs-btn-color: var(--mb-green);
  --bs-btn-border-color: var(--mb-green);
  --bs-btn-hover-bg: var(--mb-green);
  --bs-btn-hover-border-color: var(--mb-green);
  --bs-btn-active-bg: var(--mb-green-dark);
  --bs-btn-active-border-color: var(--mb-green-dark);
  --bs-btn-disabled-color: var(--mb-green);
  --bs-btn-disabled-border-color: var(--mb-green);
  --bs-btn-focus-shadow-rgb: 58, 114, 48;
}

.dropdown-menu,
.dropdown-menu-dark { --bs-dropdown-link-active-bg: var(--mb-green); }
.list-group {
  --bs-list-group-active-bg: var(--mb-green);
  --bs-list-group-active-border-color: var(--mb-green);
}
.nav-pills   { --bs-nav-pills-link-active-bg: var(--mb-green); }
.pagination  { --bs-pagination-focus-box-shadow: 0 0 0 .25rem rgba(58,114,48,.25); }
.accordion   { --bs-accordion-btn-focus-box-shadow: 0 0 0 .25rem rgba(58,114,48,.25); }
.progress, .progress-stacked { --bs-progress-bar-bg: var(--mb-green); }


/* ----------------------------------------------------------------------------
   Foco visible: accesibilidad, no adorno

   Estas reglas del tema pintaban el halo de foco en azul con el color a fuego.
   Se repintan en verde. Se mantiene el halo GRUESO a proposito: quien navega con
   teclado necesita ver donde esta, y un foco tenue es una barrera real.
---------------------------------------------------------------------------- */
.form-control:focus,
.form-select:focus,
.form-check-input:focus,
.nav-link:focus-visible,
.search-filters__form-check--color .color:focus-visible,
.stars-selector:has(.stars-selector__input:focus-visible) {
  border-color: var(--mb-green);
  box-shadow: 0 0 0 .25rem rgba(58, 114, 48, .25);
}

.form-check-input:checked,
.form-check-input[type=checkbox]:indeterminate {
  background-color: var(--mb-green);
  border-color: var(--mb-green);
}

.form-range::-webkit-slider-thumb { background-color: var(--mb-green); }
.form-range::-moz-range-thumb     { background-color: var(--mb-green); }
.form-range:focus::-webkit-slider-thumb,
.form-range:focus::-moz-range-thumb { box-shadow: 0 0 0 .25rem rgba(58,114,48,.25); }

/* Anillo de foco general: doble borde (blanco dentro, verde fuera) para que se
   vea igual sobre fondo claro y sobre el pie oscuro. */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--mb-green);
  outline-offset: 2px;
  border-radius: 2px;
}
.footer a:focus-visible,
footer a:focus-visible { outline-color: #FFFFFF; }


/* ----------------------------------------------------------------------------
   Enlaces: nunca solo por color

   WCAG 1.4.1 pide que la informacion no dependa unicamente del color. Los
   enlaces dentro de texto corrido llevan subrayado; los de navegacion y fichas
   de producto no lo necesitan porque su posicion ya los identifica.
---------------------------------------------------------------------------- */
.page-content p a:not(.btn),
.cms-content a:not(.btn),
.ps-customtext a:not(.btn) {
  color: var(--mb-green);
  text-decoration: underline;
  text-underline-offset: .15em;
  text-decoration-thickness: 1px;
}
.page-content p a:not(.btn):hover,
.cms-content a:not(.btn):hover,
.ps-customtext a:not(.btn):hover {
  color: var(--mb-green-dark);
  text-decoration-thickness: 2px;
}


/* ----------------------------------------------------------------------------
   Menu: marcar donde estas

   El tema no distingue la categoria actual. Un filete verde bajo el elemento
   activo y en el hover da la referencia sin anadir ruido, y usa el mismo verde
   de accion que el resto de la interfaz.
---------------------------------------------------------------------------- */
@media (min-width: 1200px) {
  .ps-mainmenu__tree-link {
    position: relative;
    /* El borde reservado desde el principio evita que el texto se mueva 2px al
       pasar el raton, que es el tipico salto que delata un hover mal hecho. */
    border-bottom: 2px solid transparent;
  }
  .ps-mainmenu__tree-item:hover > .ps-mainmenu__tree-item-wrapper > .ps-mainmenu__tree-link,
  .ps-mainmenu__tree-link:focus-visible {
    border-bottom-color: var(--mb-green);
    color: var(--mb-green-dark);
  }
  .ps-mainmenu__tree-item.current > .ps-mainmenu__tree-item-wrapper > .ps-mainmenu__tree-link {
    border-bottom-color: var(--mb-ink);
    font-weight: 600;
  }
}


/* ----------------------------------------------------------------------------
   Titulos de seccion

   Antes eran 24px/600 sin ningun ancla visual, lo que hacia que la portada se
   leyera como una lista plana. Se les da peso y un filete corto en verde vivo:
   es el unico sitio donde ese verde puede usarse, porque es decoracion pura y
   no transporta informacion.
---------------------------------------------------------------------------- */
.section-title {
  font-size: 1.625rem;
  font-weight: 700;
  letter-spacing: -.015em;
  color: var(--mb-ink);
  padding-bottom: .6rem;
  margin-bottom: 1.4rem;
  position: relative;
}
.section-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 3rem;
  height: 3px;
  border-radius: 2px;
  background: var(--mb-green-vivid);
}


/* ----------------------------------------------------------------------------
   Fichas de producto

   Estaban completamente planas: sin borde, sin radio, sin sombra y con fondo
   transparente, asi que los productos no se leian como objetos separados ni
   parecian pulsables. Se les da cuerpo con lo minimo.
---------------------------------------------------------------------------- */
.product-miniature__inner {
  background: #FFFFFF;
  border: 1px solid var(--mb-line);
  border-radius: .5rem;                     /* el mismo --bs-border-radius del tema */
  padding: .75rem;
  height: 100%;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.product-miniature:hover .product-miniature__inner {
  border-color: var(--mb-green);
  box-shadow: 0 6px 18px rgba(22, 19, 15, .10);
  /* Se mueve la tarjeta, no se escala: un `scale` reescala tambien la imagen y
     la deja borrosa un instante en cada hover. */
  transform: translateY(-2px);
}
.product-miniature__title {
  color: var(--mb-ink);
  font-weight: 600;
  text-decoration: none;
}
.product-miniature:hover .product-miniature__title { color: var(--mb-green-dark); }


/* ----------------------------------------------------------------------------
   Precios y etiquetas

   El descuento va en MARRON y no en verde: el verde esta reservado a "puedes
   actuar aqui" (botones, enlaces) y mezclarlo con "fijate en esto" haria que
   ninguno de los dos signifique nada.

   Las etiquetas de stock se quedan en gris neutro por lo mismo: si "en stock"
   fuera verde de marca, el usuario no sabria si es un estado o algo pulsable.
---------------------------------------------------------------------------- */
.product-miniature__price {
  color: var(--mb-ink);
  font-weight: 700;
  font-size: 1.0625rem;
}
.product-miniature__regular-price {
  color: var(--mb-muted);              /* 6.0:1; el gris del tema no llegaba a AA */
  font-weight: 400;
}
.badge.discount {
  background-color: var(--mb-earth);
  color: #FFFFFF;
  font-weight: 600;
}
/* Estas dos NO se pueden repintar directamente. El tema las fuerza con:
 *
 *   .product-flags .badge:not(.discount), .text-bg-primary {
 *     background-color: RGBA(var(--bs-primary-rgb), ...) !important;
 *     color: #fff !important;
 *   }
 *
 * y esa regla vive en la capa `bs-base`. Con !important el orden de las capas se
 * INVIERTE: gana la capa mas temprana y lo que esta sin capa pasa a ser lo mas
 * debil, asi que aqui no basta con estar fuera de capa (ni siquiera anadiendo
 * !important, que seguiria perdiendo).
 *
 * En lugar de pelear, se cambia el VALOR que resuelve su propia regla: las
 * variables CSS se resuelven en el elemento, asi que redefinir --bs-primary-rgb
 * aqui hace que su background !important pinte el color que queremos. Sin
 * !important por nuestra parte y sin tocar plantillas.
 *
 * Su regla tambien fuerza `color: #fff`, que no se puede redirigir por variable.
 * Por eso ambos fondos son OSCUROS: con texto blanco obligatorio, un fondo claro
 * seria ilegible. */
.badge.new {
  --bs-primary-rgb: 22, 19, 15;          /* negro del logo, blanco encima 18.5:1 */
  font-weight: 600;
}
.badge.out_of_stock {
  /* Gris neutro a proposito: si "sin stock" fuera verde de marca, el usuario no
     distinguiria un estado de algo pulsable. */
  --bs-primary-rgb: 107, 98, 90;         /* blanco encima 6.0:1 */
  font-weight: 500;
}


/* ----------------------------------------------------------------------------
   Pie en dos franjas de marron

   ESTRUCTURA
   <footer class="footer">              <- franja B, marron muy oscuro
     <div class="footer__before">       <- franja A, marron claro
       .ps-socialfollow  +  .ps-emailsubscription
     ...columnas de enlaces...

   POR QUE LA FRANJA A ES CLARA Y NO UN MARRON MEDIO
   La idea inicial era dos marrones oscuros, uno algo mas claro que el otro. Los
   numeros lo descartan:

     boton verde #3A7230 sobre marron medio #6B4F35 ...... 1.30:1  invisible
     el mismo boton sobre #7A5C3E ......................... 1.06:1  invisible
     separacion entre #6B4F35 y el pie #2B2521 ........... 2.01:1  se funden

   Con dos marrones oscuros el boton "Suscribirse" desaparece y las dos franjas
   se leen como una sola masa. Con la franja A CLARA se resuelve todo:

     texto negro sobre #D4C0A0 .......................... 10.45:1  AAA
     boton verde sobre #D4C0A0 ........................... 3.26:1  cumple 1.4.11
     iconos sociales verdes sobre #D4C0A0 ................ 3.26:1  visibles
     separacion #D4C0A0 vs pie #2B2521 ................... 8.53:1  inequivoca

   Por debajo de #C9AE8E el boton baja de 3:1 y dejaria de cumplir 1.4.11, asi
   que este tono esta cerca del limite de lo que se puede oscurecer.

   Se mantiene la intencion —el pie entero en marrones, dos tonos, uno mucho mas
   apagado— pero con el contraste invertido en la franja de arriba.
---------------------------------------------------------------------------- */
:root {
  --mb-kraft: #D4C0A0;    /* franja A: marron claro tostado            */
  --mb-bark:  #2B2521;    /* franja B: marron muy apagado, casi tierra */
}

.footer.footer__before { background: var(--mb-kraft); }

/* La franja del boletin lleva la utilidad `bg-body-tertiary`, y las utilidades
   de Bootstrap son !important dentro de capa: la misma trampa que las etiquetas
   de producto. Se resuelve igual, cambiando el valor que resuelve SU regla en
   lugar de intentar pisarla. */
.ps-emailsubscription {
  --bs-tertiary-bg-rgb: 212, 192, 160;
}

.footer,
footer.footer { background: var(--mb-bark); }

/* Texto de la franja clara: negro, no blanco. */
.footer.footer__before,
.footer.footer__before p,
.footer.footer__before .h3 { color: var(--mb-ink); }

/* CORRECCION de un fallo propio: antes esto era `.footer h3, .footer .h3`, y el
   titulo del boletin es un <p class="h3 col-lg-4">. Lo pintaba de BLANCO sobre
   fondo claro: 1.07:1, practicamente ilegible. Los encabezados de columna usan
   su propia clase, que es la que habia que apuntar. */
.footer-block__title { color: #FFFFFF; }

/* Enlaces del pie oscuro: en tono claro y calido. El verde de marca sobre este
   fondo daria 2.0:1, ilegible, asi que aqui NO se usa el color de accion. */
.footer .footer-block a,
.footer .ps-contactinfo,
.footer .ps-contactinfo a { color: var(--mb-kraft); }
.footer .footer-block a:hover { color: #FFFFFF; text-decoration: underline; }


/* ----------------------------------------------------------------------------
   Respetar a quien pide menos movimiento

   Sin esto, las transiciones de las fichas afectan a personas con trastornos
   vestibulares. Es una linea y es obligatorio.
---------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .product-miniature__inner { transition: none; }
  .product-miniature:hover .product-miniature__inner { transform: none; }
}


/* ----------------------------------------------------------------------------
   Copyright: menos aire y sin aspecto de enlace

   Medido: del enlace mas bajo del pie ("Tiendas") al copyright habia 40 px, de
   los cuales 32 eran `padding-top` del propio bloque. Se reduce a 16.

   El color pasa a un tono apagado: ya no es un enlace y no debe competir con los
   de las columnas, que van en el marron claro.
---------------------------------------------------------------------------- */
.footer .copyright {
  padding-top: 1rem;
  color: #9A8F82;                    /* sobre #2B2521 -> 4.77:1, cumple AA justo */
  font-size: .875rem;
}


/* ----------------------------------------------------------------------------
   Barra inferior: medios de pago · copyright · redes sociales

   Reproduce la disposicion que la tienda tenia en PS8 (tema classicblinders):
   los sellos de pago a la izquierda, el copyright al centro y las redes al final
   de todo a la derecha, en una sola linea.

   POR QUE ESTA REJILLA Y NO space-between
   Con `justify-content: space-between` el copyright NO queda centrado en la
   pagina, sino centrado en el hueco que le dejan los dos extremos, y los extremos
   miden distinto (5 sellos frente a 2 iconos). El texto aparece descentrado y se
   mueve si manana se anade una red o se quita un sello.

   Con tres columnas de rejilla iguales, la del medio esta centrada respecto al
   pie y no depende del contenido de las otras dos.

   El texto tenia `text-align: center` heredado del tema; se fija por columna para
   que los extremos no lo arrastren.
---------------------------------------------------------------------------- */
.footer__bottom {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: .75rem 1.5rem;
}

.footer__copy {
  grid-column: 2;
  margin: 0;
  text-align: center;
}

/* --- Sellos de pago --- */
.footer__payment {
  grid-column: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Los SVG de origen son SOLO el logotipo, sin fondo: en PS8 la tarjeta blanca la
   ponia el CSS. Se reproduce aqui. Hace falta ademas por contraste: el azul de
   Visa sobre el marron #2B2521 queda en 2.4:1 y se pierde. */
.footer__payment li {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 3.25rem;
  padding: .3rem .45rem;
  background: #FFFFFF;
  border-radius: .3rem;
}

.footer__payment img {
  display: block;
  width: auto;
  height: 1.15rem;
}

/* --- Redes sociales --- */
.footer__social {
  grid-column: 3;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .25rem;
}

.footer__social-label {
  white-space: nowrap;               /* "¡Síguenos!" nunca parte en dos lineas */
  margin-right: .25rem;
}

/* Los iconos son SVG con `fill="currentColor"`, asi que basta el color del texto.
   En marron claro sobre el pie oscuro: 8.5:1. El verde de marca daria 2.0:1 y
   seria ilegible, el mismo motivo por el que los enlaces del pie no lo usan. */
.footer .footer__social a {
  display: inline-flex;
  color: var(--mb-kraft);
}
.footer .footer__social a:hover { color: #FFFFFF; }

/* --- Movil y tableta ---
   Por debajo de md las tres piezas no caben en una linea. Se apilan centradas y
   en el mismo orden visual que en escritorio: pagos, copyright, redes. */
@media (max-width: 767.98px) {
  .footer__bottom {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 1rem;
  }
  .footer__payment,
  .footer__copy,
  .footer__social { grid-column: 1; }
  .footer__payment { justify-content: center; }
  .footer__social  { justify-content: center; }
}

/* El hueco restante hasta el copyright son los 40 px de `margin-bottom` de cada
   .footer-block. Ese margen SI hace falta por debajo de lg: las columnas son
   `col-md-6 col-lg-3`, o sea que en tableta se apilan en 2x2 y el margen las
   separa entre filas. Solo se reduce a partir de lg, donde las cuatro caben en
   una unica fila y ese margen no separa nada: solo empuja el copyright. */
@media (min-width: 992px) {
  .footer .footer-block { margin-bottom: 1.25rem; }
}