/* BigTools — capa de tienda (mega menú, rubros, usos, cucardas, ficha técnica)
   Desarrollado por Mercado Inteligente CX - https://mercadointeligente.net/
   v39 — el encabezado ya no hace saltar el contenido */

/* ------------------------------------------------------------------ *
 * PALETA — manual de marca BigTools
 * Los hex salen medidos de los archivos de logo, no estimados:
 *   #2E3A48  azul BigTools (el del isologo)
 *   #98A5AD  gris azulado (fondo secundario del manual)
 * ------------------------------------------------------------------ */
:root{
  --micx-color:#2E3A48;        /* azul de marca */
  --micx-color-rgb:46,58,72;
  --micx-oscuro:#1B242E;       /* azul profundo — hover y fondos */
  --micx-acento:#98A5AD;       /* gris azulado */
  --micx-acento-rgb:152,165,173;
  --micx-negro:#141A21;
  --micx-gris:#F2F4F6;
  --micx-borde:#DDE2E7;
  --micx-texto-2:#5C6874;
}

/* ================================================================== *
 * 1. MEGA MENÚ
 *
 * Brasilia ya trae el desplegable a ancho completo con column-count:5.
 * No hace falta construirlo: hace falta que se lea. Acá se le pone
 * jerarquía (rubro = título, subcategoría = link) y la paleta.
 * ================================================================== */
.desktop-dropdown-container > .desktop-list-subitems{
  column-gap:34px;
  padding:30px 0 34px;
}

/* Cada rubro es una unidad: que no se parta entre dos columnas. */
.desktop-dropdown-container > .desktop-list-subitems > li{
  break-inside:avoid;
  -webkit-column-break-inside:avoid;
  page-break-inside:avoid;
  margin-bottom:26px;
}

/* Base: todo link del desplegable se lee como link navegable.
   Si el JS no llegara a correr, el menú queda como una lista prolija en
   columnas: degradado, no roto.

   El !important no es pereza: esta hoja es una capa encima de un tema de
   terceros, y Brasilia pinta estos links desde su propio SCSS. */
.desktop-dropdown-container .desktop-list-subitems a{
  display:block !important;
  font-size:13.5px !important; font-weight:400 !important; line-height:1.35 !important;
  letter-spacing:0 !important; text-transform:none !important;
  color:var(--micx-texto-2) !important;
  padding:5px 0 !important;
  transition:color .15s ease, padding-left .15s ease;
}
.desktop-dropdown-container .desktop-list-subitems a:hover{
  color:var(--micx-color) !important;
  padding-left:5px !important;
}

/* Título de columna = rubro.
 *
 * El nivel lo marca el JS leyendo la URL, no la posición en el HTML, y esa
 * es la única forma que sirve acá. En el desplegable un rubro sin
 * subcategorías (Hidrolavadoras) y una subcategoría (Sierras) son
 * exactamente la misma estructura: un <li> con un <a> y nada adentro. Por
 * posición quedarían iguales, y en la columna
 * "Generadores y Energía / Hidrolavadoras / Medición / Escaleras" parecería
 * que los tres últimos cuelgan del primero. La URL sí los distingue:
 * /hidrolavadoras/ tiene un segmento, /herramientas-electricas/sierras/ dos.
 *
 * De paso, esto queda bien tanto ahora (todo colgando de "Productos") como
 * cuando subas los rubros a la barra de arriba. */
.desktop-dropdown-container .desktop-list-subitems a[data-micx-nivel="1"]{
  font-size:12.5px !important; font-weight:800 !important;
  letter-spacing:.07em !important; text-transform:uppercase !important;
  color:var(--micx-color) !important;
  padding:0 0 9px !important; margin-bottom:9px !important;
  border-bottom:2px solid var(--micx-borde) !important;
  /* Se pisa el transition de la regla base a propósito. El JS marca el nivel
     después de que el CSS ya pintó el link con el color de subcategoría, así
     que animar `color` significa arrancar del gris. Lo único que cambia en
     hover acá es el borde: es lo único que vale la pena transicionar. */
  transition:border-color .15s ease !important;
}
.desktop-dropdown-container .desktop-list-subitems a[data-micx-nivel="1"]:hover{
  border-bottom-color:var(--micx-color) !important;
  padding-left:0 !important;
}

/* Tercer nivel, por si algún día vuelve una rama de tres. */
.desktop-dropdown-container .desktop-list-subitems a[data-micx-nivel="3"]{
  font-size:12.5px !important;
  color:var(--micx-acento) !important;
  padding:4px 0 4px 12px !important;
}

/* Miniaturas: el rubro la lleva más grande que la subcategoría, para que la
   columna siga leyéndose como jerarquía y no como 33 fotos iguales. */
.desktop-dropdown-container .desktop-list-subitems a.micx-con-mini{
  display:flex !important; align-items:center; gap:9px;
}
.micx-mini{
  flex:0 0 auto; width:22px; height:22px; border-radius:4px;
  background:#fff; border:1px solid var(--micx-borde); overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.micx-mini img{ width:100%; height:100%; object-fit:contain; mix-blend-mode:multiply; }

.desktop-dropdown-container .desktop-list-subitems a[data-micx-nivel="1"] .micx-mini{
  width:30px; height:30px; border-radius:5px;
}

/* Marcas dentro del mega menú.
 *
 * El contenedor del desplegable es un flex en `nowrap`, así que la fila de
 * marcas se metía como segunda columna a la derecha y quedaba encima de
 * MEDICIÓN, aplastada a 130px. Se le pide `wrap` al contenedor para que el
 * `flex-basis:100%` de abajo la mande al renglón siguiente, que es donde va.
 * Si el tema algún día deja de ser flex, `flex-wrap` se ignora solo. */
.desktop-dropdown-container{ flex-wrap:wrap !important; }

.micx-mega-marcas{
  display:flex; align-items:center; gap:10px;
  flex:0 0 100%; width:100%; clear:both;
  padding:16px 0 4px; margin-top:4px;
  border-top:1px solid var(--micx-borde);
}
.micx-mega-marcas-label{
  font-size:11.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase;
  color:var(--micx-acento); margin-right:4px;
}
.micx-mega-marca{
  display:inline-flex; align-items:center;
  padding:8px 16px; border-radius:4px;
  background:var(--micx-color); color:#fff !important;
  font-size:12.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  text-decoration:none !important;
  transition:background-color .18s ease;
}
.micx-mega-marca:hover{ background:var(--micx-oscuro); }

/* ================================================================== *
 * 1.b LOGO DEL ENCABEZADO
 *
 * Venía en 66x64 px porque el tema le pone `max-width:80%` además del tope
 * de alto. Sacando ese 80% llega a 82x80, que es el techo real de Brasilia.
 *
 * Pero el problema de fondo no es CSS: el archivo cargado es el logo
 * VERTICAL (640x622, casi cuadrado). A 80 px de alto ocupa 82 px de ancho y
 * se lee como un sello. El horizontal, con la misma altura, ocupa 188 px.
 * Cambiar el archivo rinde más del doble que cualquier regla de acá.
 * ================================================================== */
/* CORRECCIÓN: el tope de 80px no era del tema. Era la grilla del encabezado,
   que le daba a la columna del logo un ancho fijo de 82px. Soltando la
   grilla, el logo crece sin problema — medido: 115x112. */
.js-head-row{
  grid-template-columns:auto 1fr auto !important;
}
.js-head-row .js-logo-container{
  width:auto !important; max-width:none !important;
}
.js-head-row .logo-img{
  max-width:none !important; max-height:none !important;
  height:104px !important; width:auto !important;
}

/* --- Buscador ---
 *
 * Dos cosas que aprendí mirando el HTML del tema, y que la primera versión
 * de esto rompía:
 *
 * 1. El ícono de la lupa no es un <svg>: es un ::before con `mask-image` y
 *    el color sale de SU background-color. Pintar el botón de azul no lo
 *    pone blanco, hay que pintar el ::before.
 * 2. Hay DOS botones con la clase `.search-btn`: el de buscar y el de
 *    limpiar, que el tema deja en `display:none`. Mi regla les daba
 *    `display:flex` a los dos y por eso aparecía una X sobre la lupa.
 *    Por eso ahora todo apunta a `.search-submit-btn` y nada a `.search-btn`.
 */
.js-head-row .search-form{ position:relative; }
.js-head-row .search-input{
  height:52px !important;
  border-radius:999px !important;
  padding:0 62px 0 22px !important;
  background:#fff !important;
  border:1.5px solid var(--micx-borde) !important;
  font-size:15px !important;
  box-shadow:0 1px 2px rgba(var(--micx-color-rgb),.04);
  transition:border-color .2s ease, box-shadow .2s ease;
}
.js-head-row .search-input::placeholder{ color:var(--micx-acento) !important; }
.js-head-row .search-input:focus{
  border-color:var(--micx-color) !important;
  box-shadow:0 0 0 4px rgba(var(--micx-color-rgb),.10) !important;
  outline:none !important;
}

.js-head-row .search-submit-btn{
  position:absolute !important; top:50% !important; right:5px !important;
  transform:translateY(-50%) !important;
  width:42px !important; height:42px !important;
  border-radius:50% !important;
  /* `background-color` y no el atajo `background`: el atajo borraría la
     máscara si el tema algún día la pone como background-image. */
  background-color:var(--micx-color) !important;
  border:0 !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  transition:background-color .2s ease;
}
.js-head-row .search-submit-btn::before{
  background-color:#fff !important;
  width:18px !important; height:18px !important;
}
.js-head-row .search-submit-btn:hover{ background-color:var(--micx-oscuro) !important; }

/* El de limpiar lo maneja el tema. No se toca. */
.js-head-row .search-empty-btn{ display:none !important; }

/* --- Menú principal centrado --- */
.js-nav-desktop-list{
  display:flex !important;
  justify-content:center !important;
  align-items:center;
  gap:44px !important;
  flex-wrap:wrap;
}
.js-nav-desktop-list > li{ margin:0 !important; }
.js-nav-desktop-list .nav-list-link{
  letter-spacing:.08em !important;
}

@media (max-width:767px){
  .js-head-row .logo-img{ height:60px !important; }
  .js-head-row .search-input{ height:46px !important; padding-right:54px !important; }
  .js-head-row .search-submit-btn{ width:38px !important; height:38px !important; }
  .js-nav-desktop-list{ gap:24px !important; }
}

/* ================================================================== *
 * 1.c BANNERS DE CATEGORÍA: LAS 6 JUNTAS
 *
 * Tiendanube los pasa de a 4 y esconde el resto detrás de una flecha.
 * En escritorio pasan a una grilla de 6 y no queda nada que pasar; en
 * celular no entran, así que corren solos como los chips de uso.
 * ================================================================== */

/* --- Escritorio: las 6 en una fila --- */
@media (min-width:768px){
  [data-store="home-banner-categories"] .js-banner-grid{
    display:grid !important;
    grid-template-columns:repeat(6, minmax(0, 1fr)) !important;
    gap:12px !important;
    width:100% !important;
    /* El carrusel escribe su desplazamiento como `transform` en línea. El
       !important lo gana y lo deja quieto sin tener que apagar su JS. */
    transform:none !important;
  }
  [data-store="home-banner-categories"] .js-banner-item{
    width:auto !important; max-width:none !important; margin:0 !important;
  }
  /* Los clones son sólo para la cinta del celular. */
  [data-store="home-banner-categories"] .js-banner-item[aria-hidden="true"]{
    display:none !important;
  }
  /* Sin flechas ni puntos: ya no hay nada que pasar. */
  [data-store="home-banner-categories"] [class*="button-next"],
  [data-store="home-banner-categories"] [class*="button-prev"],
  [data-store="home-banner-categories"] .swiper-pagination{ display:none !important; }
}

/* --- Celular: cinta continua ---
 *
 * Acá NO va `transform:none !important`: una declaración !important le gana
 * a las animaciones, así que apagaría la cinta. Sin el !important, la
 * animación le gana sola al transform en línea del carrusel, que es
 * justo lo que hace falta.
 *
 * La separación va en `margin-right` de cada banner, como en los chips: con
 * `gap`, media cinta no coincide con una tanda y el bucle da un salto. */
@media (max-width:767px){
  [data-store="home-banner-categories"] .swiper-container,
  [data-store="home-banner-categories"] .js-swiper-banner{ overflow:hidden !important; }

  [data-store="home-banner-categories"] .js-banner-grid[data-micx="cinta"]{
    display:flex !important;
    width:max-content !important;
    animation:micx-banners-cinta 26s linear infinite;
  }
  [data-store="home-banner-categories"] .js-banner-grid[data-micx="cinta"] .js-banner-item{
    flex:0 0 auto !important;
    width:62vw !important; max-width:none !important;
    margin:0 12px 0 0 !important;
  }
  [data-store="home-banner-categories"] .js-swiper-banner:hover .js-banner-grid[data-micx="cinta"],
  [data-store="home-banner-categories"] .js-swiper-banner:focus-within .js-banner-grid[data-micx="cinta"]{
    animation-play-state:paused;
  }
  [data-store="home-banner-categories"] [class*="button-next"],
  [data-store="home-banner-categories"] [class*="button-prev"],
  [data-store="home-banner-categories"] .swiper-pagination{ display:none !important; }
}

@keyframes micx-banners-cinta{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}

@media (prefers-reduced-motion: reduce){
  [data-store="home-banner-categories"] .js-banner-grid[data-micx="cinta"]{
    animation:none !important;
  }
}

/* ================================================================== *
 * 1.d MOSAICO DE NOVEDADES
 *
 * Cuatro piezas en dos formas nada más: dos verticales 1:2 a la izquierda y
 * dos horizontales 2:1 apiladas a la derecha.
 *
 *   A  B  C  C
 *   A  B  D  D
 *
 * Dos formas nada más: las dos verticales de la izquierda en 1:2 y las dos
 * horizontales de la derecha en 2:1. La geometría cierra sola y ninguna
 * pieza se recorta.
 * ================================================================== */
@media (min-width:768px){
  [data-store="home-banner-news"] .js-banner-grid{
    display:grid !important;
    grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
    gap:14px !important;
    width:100% !important;
    transform:none !important;
  }
  [data-store="home-banner-news"] .js-banner-item{
    width:auto !important; max-width:none !important; margin:0 !important;
  }
  /* El orden importa: son las posiciones 1 a 4 tal como se cargan en el
     admin. 1 video · 2 vertical · 3 arriba derecha · 4 abajo derecha. */
  /* Sin `aspect-ratio` acá. Lo tenía y era el culpable de que las dos
     verticales quedaran pegadas: al pedirle 1:2 a una celda cuya altura ya
     estaba resuelta por las dos filas, el navegador le calculaba el ancho
     desde esa altura —281 px— y se desbordaba 14 px sobre la columna de al
     lado, tapando justo el espacio. Las filas ya salen bien solas del alto
     natural de las piezas 2:1 de la derecha. */
  [data-store="home-banner-news"] .js-banner-item:nth-child(1){
    grid-area:1 / 1 / 3 / 2;
  }
  [data-store="home-banner-news"] .js-banner-item:nth-child(2){ grid-area:1 / 2 / 3 / 3; }
  [data-store="home-banner-news"] .js-banner-item:nth-child(3){ grid-area:1 / 3 / 2 / 5; }
  [data-store="home-banner-news"] .js-banner-item:nth-child(4){ grid-area:2 / 3 / 3 / 5; }
  [data-store="home-banner-news"] .js-banner-item:nth-child(n+5){ display:none !important; }

  [data-store="home-banner-news"] [class*="button-next"],
  [data-store="home-banner-news"] [class*="button-prev"],
  [data-store="home-banner-news"] .swiper-pagination{ display:none !important; }
}

/* Cada pieza ocupa su celda entera. `cover` acá sí corresponde: las cuatro
   se van a producir con la proporción exacta de su celda, así que no hay
   nada que recortar — y si alguna viniera con otra medida, es preferible un
   recorte parejo a una franja vacía en el medio del mosaico. */
[data-store="home-banner-news"] .js-banner-item,
[data-store="home-banner-news"] .gallery-item-container,
[data-store="home-banner-news"] .gallery-link{
  height:100%; border-radius:14px; overflow:hidden; position:relative;
}
[data-store="home-banner-news"] .js-banner-item img{
  width:100% !important; height:100% !important;
  object-fit:cover !important; object-position:center !important;
}

/* El video se monta encima de la imagen del banner. `pointer-events:none`
   para que el clic siga siendo del link y no del video. */
.micx-video{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  pointer-events:none; z-index:1;
}

/* Movimiento al pasar, igual que en el resto del inicio.
 *
 * Va sobre `.js-banner-item` y no sobre el link: un banner sin link cargado
 * en el admin no tiene <a>, y ahí las reglas colgadas del link no se
 * aplicaban nunca. Sobre el item funcionan siempre, tenga link o no.
 *
 * El video entra en la misma regla que las imágenes: si no, la celda con
 * video era la única quieta de las cuatro. */
[data-store="home-banner-news"] .js-banner-item img,
[data-store="home-banner-news"] .micx-video{
  transition:scale .55s cubic-bezier(.2,.7,.3,1);
}
[data-store="home-banner-news"] .js-banner-item:hover img,
[data-store="home-banner-news"] .js-banner-item:hover .micx-video{ scale:1.05; }

[data-store="home-banner-news"] .js-banner-item::after{
  content:''; position:absolute; inset:0; z-index:3;
  border:3px solid var(--micx-color); border-radius:14px;
  opacity:0; transform:scale(.99);
  transition:opacity .22s ease, transform .3s cubic-bezier(.2,.7,.3,1);
  pointer-events:none;
}
[data-store="home-banner-news"] .js-banner-item:hover::after{ opacity:1; transform:scale(1); }

/* En celular el mosaico no tiene sentido: se apila de a una, en orden. */
@media (max-width:767px){
  [data-store="home-banner-news"] .js-banner-grid{
    display:grid !important; grid-template-columns:1fr !important;
    gap:12px !important; width:100% !important; transform:none !important;
  }
  [data-store="home-banner-news"] .js-banner-item{
    width:auto !important; margin:0 !important;
  }
}

@media (prefers-reduced-motion: reduce){
  [data-store="home-banner-news"] .js-banner-item img,
  [data-store="home-banner-news"] .js-banner-item:hover img,
  [data-store="home-banner-news"] .micx-video,
  [data-store="home-banner-news"] .js-banner-item:hover .micx-video{
    scale:1 !important; transition:none !important;
  }
}

/* ================================================================== *
 * 1.e ENCABEZADO COMPACTO AL SCROLLEAR
 *
 * La clase la pone el JS sobre el <html>. Sin ella no cambia nada, así que
 * si el JS no corriera el encabezado se comporta como siempre.
 *
 * Se esconde la barra del menú y se achica la fila del logo; el logo y el
 * buscador se quedan, que es lo que hace falta para seguir navegando.
 * ================================================================== */
/* El encabezado pasa a `fixed` y un separador guarda su lugar en el flujo.
   Ese par es lo que evita que el contenido salte al achicarse: un `sticky`
   sigue ocupando su altura, un `fixed` no ocupa nada, y el separador
   mantiene el hueco del tamaño original. */
.js-head-main.micx-head-fijo{
  position:fixed !important;
  top:0 !important; left:0 !important; right:0 !important;
  width:100% !important;
}
.micx-head-espacio{ width:100%; }

.js-nav-desktop-color-container{
  overflow:hidden;
  max-height:220px;
  transition:max-height .34s cubic-bezier(.2,.7,.3,1),
             opacity .2s ease;
}
html.micx-head-compacto .js-nav-desktop-color-container{
  max-height:0 !important;
  opacity:0;
  pointer-events:none;
}

/* La fila del logo se comprime. Las transiciones van acá y no en la regla
   compacta para que el movimiento sea igual de suave al achicar y al
   volver a agrandar. */
.js-head-row{
  transition:padding .3s cubic-bezier(.2,.7,.3,1);
}
.js-head-row .logo-img{
  transition:height .3s cubic-bezier(.2,.7,.3,1) !important;
}
.js-head-row .search-input{
  transition:height .3s cubic-bezier(.2,.7,.3,1),
             border-color .2s ease, box-shadow .2s ease !important;
}
.js-head-row .search-submit-btn{
  transition:width .3s cubic-bezier(.2,.7,.3,1),
             height .3s cubic-bezier(.2,.7,.3,1),
             background-color .2s ease !important;
}

html.micx-head-compacto .js-head-row{
  padding-top:8px !important; padding-bottom:8px !important;
}
html.micx-head-compacto .js-head-row .logo-img{ height:54px !important; }
html.micx-head-compacto .js-head-row .search-input{
  height:42px !important; padding-right:52px !important;
}
html.micx-head-compacto .js-head-row .search-submit-btn{
  width:34px !important; height:34px !important;
}
html.micx-head-compacto .js-head-row .search-submit-btn::before{
  width:15px !important; height:15px !important;
}

@media (prefers-reduced-motion: reduce){
  .js-nav-desktop-color-container,
  .js-head-row,
  .js-head-row .logo-img,
  .js-head-row .search-input,
  .js-head-row .search-submit-btn{ transition:none !important; }
}

/* ================================================================== *
 * 2. CUCARDAS Y PRECIOS
 * El % OFF, el precio tachado y "Envío gratis" ya los dibuja Brasilia
 * cuando el producto tiene precio promocional cargado. Acá sólo se les
 * da forma de cucarda; si no hay promo cargada, no aparece nada.
 * ================================================================== */
.product-labels .label,
.js-product-detail .label{
  display:inline-block;
  padding:5px 11px !important; border-radius:3px !important;
  font-size:11px !important; font-weight:800 !important;
  letter-spacing:.06em !important; text-transform:uppercase !important;
  line-height:1.2 !important;
  background:var(--micx-color) !important; color:#fff !important;
}
.product-labels .shipping-label,
.js-shipping-label-private{ background:#1F7A4D !important; }
.product-labels [data-store="product-item-label-stock"]{
  background:var(--micx-acento) !important; color:var(--micx-negro) !important;
}

/* Precio anterior tachado + porcentaje de descuento */
.price-compare,
.js-compare-price-display,
.js-compare-price{
  color:var(--micx-acento) !important;
  text-decoration:line-through;
  font-size:14px; font-weight:400;
}
.js-offer-percentage,
.js-prices-container .text-accent{ color:var(--micx-color) !important; }
.js-offer-percentage{ font-weight:800; }

/* ================================================================== *
 * 6.b BANNERS DE CATEGORÍA DEL INICIO
 *
 * Las piezas de marketing traen el nombre del rubro dibujado adentro, así
 * que acá NO se recorta en círculo: un círculo inscripto en un cuadrado, a
 * la altura donde está el texto, deja pasar el 71% del ancho — y el texto
 * ocupa cerca del 85%. Se cortaría siempre.
 *
 * Lo que sí se puede es redondear fuerte y sumarle el mismo movimiento que
 * tienen las tarjetas de producto, para que el inicio hable un solo idioma.
 * El zoom usa `scale` y no `transform`, por lo mismo de siempre: `transform`
 * pisaría cualquier posicionamiento que traiga el tema.
 * ================================================================== */
[data-store="home-banner-categories"] .js-home-banner a{
  position:relative; display:block;
  overflow:hidden; border-radius:24px;
}
[data-store="home-banner-categories"] .js-home-banner a img{
  transition:scale .55s cubic-bezier(.2,.7,.3,1);
}
[data-store="home-banner-categories"] .js-home-banner a:hover img{ scale:1.05; }

/* Marco hacia adentro, como en las tarjetas: afuera lo recorta el carrusel. */
[data-store="home-banner-categories"] .js-home-banner a::after{
  content:''; position:absolute; inset:0;
  border:3px solid var(--micx-color); border-radius:24px;
  opacity:0; transform:scale(.99);
  transition:opacity .22s ease, transform .3s cubic-bezier(.2,.7,.3,1);
  pointer-events:none;
}
[data-store="home-banner-categories"] .js-home-banner a:hover::after{
  opacity:1; transform:scale(1);
}

@media (max-width:575px){
  [data-store="home-banner-categories"] .js-home-banner a,
  [data-store="home-banner-categories"] .js-home-banner a::after{ border-radius:18px; }
}

@media (prefers-reduced-motion: reduce){
  [data-store="home-banner-categories"] .js-home-banner a img,
  [data-store="home-banner-categories"] .js-home-banner a:hover img{
    scale:1 !important; transition:none !important;
  }
}

/* ================================================================== *
 * 7. TARJETA DE PRODUCTO Y PÁGINA DE PRODUCTO
 * ================================================================== */

/* --- Marco al pasar el mouse ---
 *
 * El marco es un ::after y no un `border` del propio elemento: un borde real
 * empuja el layout dos píxeles al aparecer y la grilla entera tiembla. Así
 * se dibuja encima, sin ocupar espacio. `pointer-events:none` para que nunca
 * se coma el clic al producto.
 *
 * `inset:0` y nada de sombra ni de elevación: todo eso vive FUERA de la
 * tarjeta, y los carruseles ("Productos similares", "Destacados") recortan
 * lo que se sale de cada slide. El marco quedaba cortado del lado
 * izquierdo. Adentro no hay nada que recortar, y el efecto se sostiene con
 * el marco, el acercamiento de la foto y el nombre en azul. */
.js-item-product{ position:relative; }
.js-item-product::after{
  content:''; position:absolute; inset:0;
  border:2px solid var(--micx-color); border-radius:10px;
  opacity:0; transform:scale(.99);
  transition:opacity .22s ease, transform .3s cubic-bezier(.2,.7,.3,1);
  pointer-events:none;
}
.js-item-product:hover::after{ opacity:1; transform:scale(1); }
.js-item-product:hover .product-item-name{ color:var(--micx-color) !important; }

/* La foto se acerca apenas. El recorte va en el contenedor, no en la
   imagen, para que el zoom no se desborde por las esquinas.
 *
 * El acercamiento usa la propiedad `scale`, NO `transform: scale()`. No es
 * lo mismo y acá importa: Brasilia centra estas imágenes con
 * `transform: translateX(-50%)`, así que un `transform` propio le pisa el
 * centrado y la foto salta media imagen a la derecha, cortada. `scale` es
 * una propiedad aparte que se compone con el transform existente en vez de
 * reemplazarlo. Si un navegador viejo no la soporta, no hay zoom y la foto
 * queda quieta y bien puesta: se pierde el efecto, nunca el encuadre. */
.product-item-image-container{ overflow:hidden; border-radius:8px; }
.product-item-image-container img{
  transition:scale .5s cubic-bezier(.2,.7,.3,1);
}
.js-item-product:hover .product-item-image-container img{ scale:1.06; }

/* --- Todas las tarjetas alineadas ---
 *
 * Brasilia le da a cada foto SU proporción real, escrita en línea sobre una
 * caja interna: 126%, 100%, 77,6%, 112%. Como cada caja mide distinto, los
 * nombres y los precios caen a distinta altura. Medido en Destacados: 129 px
 * entre el más alto y el más bajo.
 *
 * Acá se reemplaza el sistema entero, no una pieza: caja cuadrada para todas
 * y la imagen ocupando la caja con `contain`. Esto último no es opcional —
 * al forzar el cuadrado, una foto apaisada se saldría de los costados y el
 * `overflow:hidden` del contenedor la recortaría. Con `contain` entra
 * completa y sobra blanco arriba y abajo, que es lo correcto para catálogo.
 *
 * Se pisan `left`, `width` y `transform` juntos a propósito: el tema centra
 * la foto con `left:50%` + `translateX(-50%)`, y tocar sólo una de las tres
 * deja la imagen corrida. O se reemplaza el sistema completo o no se toca.
 *
 * Verificado sobre la home: dispersión de 129 px a 0. */
.product-item-image-container > div[style*="padding-bottom"]{
  padding-bottom:100% !important;
}
.product-item-image-container img.img-absolute{
  top:0 !important; left:0 !important;
  width:100% !important; height:100% !important;
  max-width:100% !important; max-height:100% !important;
  transform:none !important;
  object-fit:contain !important;
}

/* El precio siempre abajo del todo, aunque un nombre ocupe una línea y el
   de al lado dos. */
.js-item-product{ height:100%; }
.product-item-information{ flex:1 1 auto; }
.product-item-information .product-item-price-container{ margin-top:auto; }

/* --- Precio en la grilla --- */
.product-item-price{
  font-size:19px !important; font-weight:800 !important;
  color:var(--micx-color) !important; line-height:1.15 !important;
}
.product-item-price-compare{
  font-size:13.5px !important; font-weight:400 !important;
  color:var(--micx-acento) !important; text-decoration:line-through;
}
.product-item-name{ font-weight:600 !important; transition:color .2s ease; }

/* --- Galería de la página de producto ---
 *
 * Acá estaba el hueco enorme entre la foto y la descripción, y no era un
 * margen: el carrusel es flex, así que toma la altura de la imagen más alta
 * de todas. En esta tienda hay publicaciones con 23 imágenes, alguna de
 * 1.683 px (las infografías verticales que vienen de Mercado Libre). La foto
 * visible medía 589 px y el contenedor 1.683: mil píxeles de blanco.
 *
 * Con un techo de altura y `contain`, la más alta deja de mandar. Lo
 * definitivo igual es recortar esas infografías desde el admin. */
/* El techo va en el contenedor y no en la imagen. La altura no la pone la
   foto: la pone un `padding-bottom:285%` escrito en línea sobre el link, el
   truco viejo de caja con proporción fija. Un `max-height` sobre la imagen
   no lo toca, y el `padding` tampoco responde a `max-height`. Al contenedor
   sí, y así la regla no puede fallar sea cual sea el armado de adentro.

   Medido en la ficha de la mini motosierra (23 imágenes): el bloque pasó de
   1.683 px a 740 y la descripción subió 943 px. */
.js-swiper-product{ max-height:640px !important; overflow:hidden !important; }
.js-swiper-product .swiper-wrapper{ max-height:640px !important; align-items:flex-start; }

/* Y además se normaliza la caja de cada slide, para que la foto entre
   completa en vez de quedar recortada por el techo de arriba. */
.js-swiper-product .js-product-slide-link{
  padding-bottom:0 !important; height:620px !important;
}
.js-swiper-product .js-product-slide-link img{ object-fit:contain !important; }

/* --- Precio y título de la página de producto --- */
.js-product-detail .js-price-display{
  font-size:40px !important; font-weight:800 !important;
  color:var(--micx-color) !important; line-height:1.05 !important;
}
.js-product-detail .js-compare-price-display{
  font-size:17px !important; color:var(--micx-acento) !important;
}
.js-product-detail .js-product-name{
  font-weight:800 !important; letter-spacing:-.2px;
}

/* Botón de compra en el azul de marca. Se listan las dos formas en que
   Brasilia lo nombra porque cambia según cómo esté configurada la tienda
   (agregar al carrito o comprar directo). */
.js-product-detail .js-addtocart,
.js-product-detail .js-prod-submit-form [type="submit"],
.js-product-detail .btn-primary{
  background-color:var(--micx-color) !important;
  border-color:var(--micx-color) !important;
  color:#fff !important;
  font-weight:700 !important; letter-spacing:.02em;
  transition:background-color .2s ease, transform .15s ease;
}
.js-product-detail .js-addtocart:hover,
.js-product-detail .js-prod-submit-form [type="submit"]:hover,
.js-product-detail .btn-primary:hover{
  background-color:var(--micx-oscuro) !important;
  border-color:var(--micx-oscuro) !important;
}

@media (max-width:575px){
  .js-swiper-product{ max-height:440px !important; }
  .js-swiper-product .swiper-wrapper{ max-height:440px !important; }
  .js-swiper-product .js-product-slide-link{ height:420px !important; }
  .js-product-detail .js-price-display{ font-size:32px !important; }
  .product-item-price{ font-size:17px !important; }
  .js-item-product::after{ border-radius:8px; }
}

@media (prefers-reduced-motion: reduce){
  .product-item-image-container img,
  .js-item-product:hover .product-item-image-container img{
    scale:1 !important; transition:none !important;
  }
}

/* ================================================================== *
 * 3. FICHA TÉCNICA EN SOLAPAS (página de producto)
 * ================================================================== */
.micx-solapas{ margin:0 0 24px; }
.micx-solapas *{ box-sizing:border-box; }

.micx-solapas-tabs{
  display:flex; gap:4px; flex-wrap:wrap;
  border-bottom:2px solid var(--micx-borde); margin-bottom:18px;
}
.micx-solapa{
  -webkit-appearance:none; appearance:none; border:0; cursor:pointer;
  font-family:inherit; font-size:14px; font-weight:700; line-height:1;
  padding:13px 22px; background:none; color:var(--micx-texto-2);
  border-bottom:3px solid transparent; margin-bottom:-2px;
  transition:color .2s ease, border-color .2s ease;
}
.micx-solapa:hover{ color:var(--micx-color); }
.micx-solapa.is-activa{ color:var(--micx-color); border-bottom-color:var(--micx-color); }
.micx-solapa:focus-visible{ outline:2px solid var(--micx-color); outline-offset:2px; }

/* Cuando hay una sola parte no se dibuja barra de solapas: un botón
   suelto que no lleva a ningún lado confunde más de lo que ayuda. */
.micx-solapas-titulo{
  font-size:14px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  color:var(--micx-color); padding-bottom:12px; margin-bottom:18px;
  border-bottom:2px solid var(--micx-borde);
}

.micx-panel[hidden]{ display:none; }
.micx-desc-texto{ font-size:15px; line-height:1.7; color:#374151; }

.micx-specs{ width:100%; border-collapse:collapse; font-size:14.5px; }
.micx-specs th, .micx-specs td{
  text-align:left; padding:11px 14px; border-bottom:1px solid var(--micx-borde); vertical-align:top;
}
.micx-specs th{ width:40%; font-weight:700; color:var(--micx-texto-2); }
.micx-specs td{ color:var(--micx-negro); }
/* Cebrado: en fichas de 19 filas ayuda a no perder el renglón. */
.micx-specs tr:nth-child(odd) th, .micx-specs tr:nth-child(odd) td{ background:var(--micx-gris); }
.micx-specs tr:last-child th, .micx-specs tr:last-child td{ border-bottom:0; }

.micx-specs-lista{ margin:14px 0 0; padding-left:20px; font-size:14.5px; line-height:1.65; color:#374151; }
.micx-specs-lista li{ margin-bottom:6px; }

@media (max-width:575px){
  .micx-solapa{ padding:12px 16px; font-size:13.5px; }
  .micx-specs th{ width:45%; }
  .micx-specs th, .micx-specs td{ padding:9px 10px; }
}

/* ================================================================== *
 * 4. SECCIONES DEL INICIO
 * ================================================================== */
.micx-seccion{ padding:42px 0 8px; }
.micx-seccion *{ box-sizing:border-box; }
.micx-seccion-head{ margin-bottom:24px; }
.micx-seccion-titulo{
  font-size:26px; line-height:1.15; font-weight:800; letter-spacing:-.4px;
  color:var(--micx-negro); margin:0;
}
.micx-seccion-bajada{ font-size:14.5px; color:var(--micx-texto-2); margin:7px 0 0; }

/* --- Rubros: una sola fila, sin tarjeta ---
 *
 * Antes era una grilla que envolvía: con 8 rubros quedaban 7 arriba y 1
 * abajo, solo. Ahora es una fila que no se parte nunca — en escritorio los
 * 8 entran, y en pantallas chicas se desliza con el dedo. La asimetría deja
 * de ser posible, no deja de notarse.
 *
 * También se fue el recuadro: el medallón redondo con la foto ya define la
 * pieza, y la caja alrededor sólo agregaba peso. */
.micx-rubros-grid{
  display:flex; gap:8px;
  /* Centrada cuando entran todos. Las dos líneas son a propósito: con
     `center` a secas, si no entran, el navegador recorta el primero y no hay
     forma de llegar a él. `safe center` centra sólo mientras alcance y se
     va a la izquierda cuando desborda. Los navegadores que no lo entienden
     descartan la segunda línea y se quedan con la primera. */
  justify-content:center;
  justify-content:safe center;
  overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  padding-bottom:4px;
  /* Que el primero y el último respiren contra el borde al deslizar. */
  margin-inline:-6px; padding-inline:6px;
}
.micx-rubros-grid::-webkit-scrollbar{ display:none; }

.micx-rubro{
  flex:0 0 auto; scroll-snap-align:start;
  display:flex; flex-direction:column; align-items:center; gap:14px;
  width:174px; padding:10px 6px; text-align:center;
  background:none; border:0; border-radius:10px;
  text-decoration:none !important; color:var(--micx-negro) !important;
  transition:transform .22s cubic-bezier(.2,.7,.3,1);
}
.micx-rubro:hover{ transform:translateY(-4px); }

.micx-rubro-ico{
  display:flex; align-items:center; justify-content:center; flex:0 0 auto;
  width:154px; height:154px; border-radius:50%;
  /* Blanco, no gris: la sección del inicio ya tiene fondo gris claro y un
     medallón del mismo color desaparece. */
  background:#fff; overflow:hidden;
  border:2px solid var(--micx-borde);
  transition:border-color .22s ease, box-shadow .22s ease, background-color .22s ease;
}
.micx-rubro-ico svg{ width:58px; height:58px; fill:var(--micx-color); }
.micx-rubro-ico img{
  width:100%; height:100%; object-fit:cover;
  /* Las fotos del catálogo vienen sobre blanco: el multiply las funde con el
     círculo gris en vez de dejar un cuadrado blanco adentro del redondel. */
  mix-blend-mode:multiply;
}
.micx-rubro:hover .micx-rubro-ico{
  border-color:var(--micx-color);
  box-shadow:0 8px 22px rgba(var(--micx-color-rgb),.20);
}
.micx-rubro:hover .micx-rubro-ico:not(.micx-rubro-ico-foto){ background:var(--micx-color); }
.micx-rubro:hover .micx-rubro-ico:not(.micx-rubro-ico-foto) svg{ fill:#fff; }

.micx-rubro-txt{ font-size:15px; font-weight:700; line-height:1.3; }

/* --- Buscá por uso --- */
.micx-usos{ padding-top:38px; }
.micx-usos-titulo{ font-size:22px; margin-bottom:20px; }
/* Carrusel continuo.
 *
 * La separación va en `margin-right` de cada chip y no en `gap` del
 * contenedor, y eso no es capricho: con `gap`, la mitad del ancho total no
 * coincide con el ancho de una tanda (sobra medio espacio) y el bucle da un
 * saltito en cada vuelta. Con el margen incluido en cada chip, media cinta
 * es exactamente una tanda y la costura no existe.
 *
 * Se frena al pasar el mouse y al entrar con el tabulador: un blanco que se
 * mueve es difícil de clickear, y sin eso el carrusel se vuelve un obstáculo
 * en vez de una ayuda. */
.micx-usos-fila{
  overflow:hidden;
  /* Los bordes se desvanecen para que los chips no aparezcan cortados de
     golpe contra el filo de la sección. */
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 44px, #000 calc(100% - 44px), transparent);
  mask-image:linear-gradient(90deg, transparent, #000 44px, #000 calc(100% - 44px), transparent);
}
.micx-usos-cinta{
  display:flex; width:max-content;
  animation:micx-usos-cinta 34s linear infinite;
}
.micx-usos-cinta > .micx-uso{ margin-right:14px; }

.micx-usos-fila:hover .micx-usos-cinta,
.micx-usos-fila:focus-within .micx-usos-cinta{ animation-play-state:paused; }

@keyframes micx-usos-cinta{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}

/* El ícono va en su propio medallón, como en la fila de rubros: es lo que
   hace que a este tamaño el chip se lea como pieza y no como un botón
   estirado. */
.micx-uso{
  display:inline-flex; align-items:center; gap:13px;
  padding:10px 26px 10px 10px; border-radius:99px;
  background:#fff; border:1.5px solid var(--micx-borde);
  font-size:16px; font-weight:700; line-height:1;
  text-decoration:none !important; color:var(--micx-negro) !important;
  transition:border-color .2s ease, box-shadow .2s ease, transform .2s cubic-bezier(.2,.7,.3,1);
}
.micx-uso-ico{
  display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto;
  width:46px; height:46px; border-radius:50%;
  background:var(--micx-gris);
  transition:background-color .2s ease;
}
.micx-uso-ico svg{ width:24px; height:24px; fill:var(--micx-color); transition:fill .2s ease; }
.micx-uso:hover{
  border-color:var(--micx-color);
  box-shadow:0 8px 20px rgba(var(--micx-color-rgb),.16);
  transform:translateY(-2px);
}
.micx-uso:hover .micx-uso-ico{ background:var(--micx-color); }
.micx-uso:hover .micx-uso-ico svg{ fill:#fff; }

@media (max-width:575px){
  .micx-seccion{ padding:30px 0 6px; }
  .micx-seccion-titulo{ font-size:21px; }
  .micx-rubros-grid{ justify-content:flex-start; }
  .micx-rubro{ width:126px; gap:11px; }
  .micx-rubro-ico{ width:112px; height:112px; }
  .micx-rubro-ico svg{ width:44px; height:44px; }
  .micx-rubro-txt{ font-size:13.5px; }
  .micx-usos-cinta{ animation-duration:26s; }
  .micx-usos-cinta > .micx-uso{ margin-right:10px; }
  .micx-uso{ padding:8px 18px 8px 8px; gap:10px; font-size:14px; }
  .micx-uso-ico{ width:38px; height:38px; }
  .micx-uso-ico svg{ width:20px; height:20px; }
}

/* ================================================================== *
 * 6. INTRO DE APERTURA
 *
 * Tapa de pantalla completa con el logo, una vez por sesión. El markup
 * está en layout.tpl como primer hijo del <body>, y quién la ve lo decide
 * un script en línea en el <head>: las dos cosas tienen que pasar antes
 * del primer pintado o se ve el destello que la intro venía a evitar.
 *
 * Se va sola por animación CSS, sin depender de ningún JS. Es deliberado:
 * una tapa fija a pantalla completa que se queda pegada no es un detalle
 * feo, es la tienda caída. Por las dudas, `micx-bigtools.js` la saca
 * igual a los 2,5 s como red.
 *
 * El logo es el mismo archivo que ya está subido al admin, pasado a blanco
 * con un filtro. La tinta del PNG es exactamente #2E3A48 sobre fondo
 * transparente, así que `brightness(0) invert(1)` lo deja blanco limpio,
 * sin recuadro y sin tener que producir una versión aparte.
 *
 * micx: atajo con techo conocido. La URL del logo está escrita acá abajo.
 * Si se cambia el logo desde el admin, la intro sigue mostrando el viejo:
 * hay que actualizar esta línea.
 * ================================================================== */
.micx-intro{
  position:fixed; inset:0; z-index:99999;
  display:flex; align-items:center; justify-content:center;
  background:var(--micx-color);
  animation:micx-intro-salida .55s ease 1.15s forwards;
}

@keyframes micx-intro-salida{
  to{ opacity:0; visibility:hidden; pointer-events:none; }
}

.micx-intro-logo{
  display:block;
  width:min(54vw, 430px); aspect-ratio:640 / 622;
  background:url('https://dcdn-us.mitiendanube.com/stores/007/914/667/themes/common/logo-2960880258399334428-1786392671-5820d4c01c8ca93b8b2d0b134b4e13aa1786392671-640-0.webp') center / contain no-repeat;
  filter:brightness(0) invert(1);
  opacity:0; transform:scale(.88);
  animation:micx-intro-logo .8s cubic-bezier(.2,.7,.3,1) forwards;
}

@keyframes micx-intro-logo{
  55%{ opacity:1; transform:scale(1); }
  100%{ opacity:1; transform:scale(1.05); }
}

/* Ya la vio en esta sesión. La clase la pone el script del <head>. */
html.micx-sin-intro .micx-intro{ display:none; }

/* Quien pidió menos movimiento no quiere una tapa animada tapándole la
   tienda: directamente no se dibuja. */
@media (prefers-reduced-motion: reduce){
  .micx-intro{ display:none; }
}

/* --- Firma de agencia al pie --- */
.micx-firma{
  margin-top:10px; text-align:center;
  font-size:12.5px; line-height:1.5; opacity:.75;
}
.micx-firma a{
  text-decoration:underline; text-underline-offset:2px;
  color:inherit !important;
}
.micx-firma a:hover{ opacity:1; }

/* ================================================================== *
 * 4.b BLOQUE INSTITUCIONAL Y FONDO DE DESTACADOS
 *
 * Las dos imágenes van por FTP a esta misma carpeta (`static/`), así que se
 * referencian relativas: el navegador las resuelve desde la ubicación de
 * esta hoja y no hay ninguna URL de CDN escrita a mano que se rompa el día
 * que cambie el dominio.
 * ================================================================== */

/* --- Institucional: franja azul, logo al costado, entrada al scrollear ---
 *
 * La sección venía como un texto centrado y chico en medio del blanco. Ahora
 * es una franja a todo el ancho en el azul de marca: es el único bloque de
 * la home que habla de la empresa y no de un producto, así que corta el
 * ritmo a propósito.
 *
 * La imagen del logo ya viene con fondo azul del mismo valor, así que se
 * funde con la franja y el isologo queda flotando. Por eso no lleva recuadro
 * ni borde: cualquier caja alrededor rompería ese efecto. */
[data-store="home-institutional-message"]{
  /* Repetido, no estirado. La pieza original no empalmaba (20 y 38 de
     diferencia entre bordes), pero midiendo el patrón encontré que se
     repite cada 415x274 px: recortado ahí, las costuras dan 3,8 y 0,5.
     Estirar una imagen de 1998px sobre una franja de 1900 la reventaba de
     escala; repetida a tamaño natural queda nítida.
     El azul de abajo es el respaldo si la imagen no carga. */
  background:var(--micx-color) url('micx-mosaico.jpg') repeat !important;
  background-size:340px auto !important;
  padding:64px 0 !important;
  margin-top:8px;
  color:#fff;
}
/* Velo detrás del texto.
 *
 * El mosaico quedó bien de intensidad para verse, pero un patrón de letras
 * blancas debajo de un texto blanco es lo peor que le podés dar a alguien
 * para leer: compiten con la misma forma y el mismo color.
 *
 * En vez de bajarle el mosaico en toda la franja —que era volver a lo tenue
 * de antes— se oscurece SÓLO el lado donde va el texto, con un degradado
 * que arranca transparente sobre la foto. Así el mosaico se sigue viendo
 * donde no molesta y desaparece donde estorba. */
[data-store="home-institutional-message"]{ position:relative; }
[data-store="home-institutional-message"]::before{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(90deg,
    rgba(var(--micx-color-rgb),0) 0%,
    rgba(var(--micx-color-rgb),.30) 36%,
    rgba(var(--micx-color-rgb),.88) 56%,
    rgba(var(--micx-color-rgb),.95) 100%);
}
[data-store="home-institutional-message"] .container{ position:relative; z-index:1; }

/* En celular se apila, así que el degradado va de arriba abajo: claro sobre
   la foto, cerrado sobre el texto. */
@media (max-width:767px){
  [data-store="home-institutional-message"]::before{
    background:linear-gradient(180deg,
      rgba(var(--micx-color-rgb),.15) 0%,
      rgba(var(--micx-color-rgb),.55) 42%,
      rgba(var(--micx-color-rgb),.94) 72%);
  }
}

[data-store="home-institutional-message"] h1,
[data-store="home-institutional-message"] h2,
[data-store="home-institutional-message"] h3,
[data-store="home-institutional-message"] h4{
  color:#fff !important;
  font-size:30px !important; line-height:1.15 !important;
  margin:0 0 14px !important;
  text-shadow:0 2px 14px rgba(10,14,20,.6);
}
[data-store="home-institutional-message"] p,
[data-store="home-institutional-message"] .micx-inst-texto{
  color:#fff !important;
  font-size:16.5px !important; line-height:1.65 !important;
  text-shadow:0 1px 10px rgba(10,14,20,.55);
}

.micx-inst{
  display:grid; gap:46px; align-items:center;
  grid-template-columns:minmax(0, 5fr) minmax(0, 6fr);
}
.micx-inst-sin-logo{ grid-template-columns:1fr; }

/* Ahora es una foto, no el logo sobre azul. Por eso lleva marco redondeado
   y una sombra: antes se fundía con la franja a propósito, una foto en
   cambio necesita separarse del fondo para no parecer un error de recorte. */
.micx-inst-logo{
  line-height:0; border-radius:18px; overflow:hidden;
  box-shadow:0 18px 44px rgba(0,0,0,.28);
}
.micx-inst-logo img{ width:100%; height:auto; display:block; }

.micx-inst-texto{ text-align:left; }
.micx-inst-texto > *{ margin-left:0 !important; margin-right:0 !important; }

/* La entrada. El logo llega desde la izquierda con una escala corta y el
   texto lo sigue 140 ms después: el escalonado es lo que la hace notar,
   más que la distancia recorrida.
   La clase la pone el JS al aparecer en pantalla; si no hay
   IntersectionObserver o el visitante pidió menos movimiento, se la pone de
   entrada y no se esconde nada nunca. */
.micx-inst .micx-inst-logo,
.micx-inst .micx-inst-texto{
  opacity:0;
  transition:opacity .8s ease, transform .9s cubic-bezier(.16,.84,.28,1);
}
.micx-inst .micx-inst-logo{ transform:translateX(-56px) scale(.94); }
.micx-inst .micx-inst-texto{ transform:translateX(38px); transition-delay:.14s; }
.micx-inst.micx-visible .micx-inst-logo,
.micx-inst.micx-visible .micx-inst-texto{ opacity:1; transform:none; }

@media (max-width:767px){
  [data-store="home-institutional-message"]{ padding:44px 0 !important; }
  [data-store="home-institutional-message"] h2,
  [data-store="home-institutional-message"] h3{ font-size:24px !important; }
  .micx-inst{ grid-template-columns:1fr; gap:28px; }
  .micx-inst-texto{ text-align:center; }
  .micx-inst .micx-inst-logo{ transform:translateY(24px) scale(.96); }
  .micx-inst .micx-inst-texto{ transform:translateY(20px); }
}

/* --- Destacados sobre el wallpaper de Klugan ---
 *
 * El fondo es casi negro, así que las tarjetas pasan a fondo blanco. Sin
 * eso, el nombre y el precio —que son texto oscuro— quedarían ilegibles.
 * El velo de arriba es para que la foto no le compita a los productos. */
[data-store="home-products-featured"]{
  position:relative;
  background:#0A0C0E url('micx-klugan-fondo.jpg') center / cover no-repeat;
  padding:44px 0 40px; margin-top:8px;
}
[data-store="home-products-featured"]::before{
  content:''; position:absolute; inset:0;
  background:rgba(10,12,14,.55);
  pointer-events:none;
}
[data-store="home-products-featured"] > *{ position:relative; z-index:1; }

[data-store="home-products-featured"] h1,
[data-store="home-products-featured"] h2,
[data-store="home-products-featured"] h3{ color:#fff !important; }

[data-store="home-products-featured"] .js-item-product{
  background:#fff; border-radius:12px; padding:12px 12px 16px;
}
[data-store="home-products-featured"] .js-item-product::after{ inset:0; border-radius:12px; }

/* Las flechas del carrusel, blancas sobre el fondo oscuro. */
[data-store="home-products-featured"] .js-swiper-featured-next svg,
[data-store="home-products-featured"] .js-swiper-featured-prev svg,
[data-store="home-products-featured"] .swiper-button-next svg,
[data-store="home-products-featured"] .swiper-button-prev svg{ fill:#fff; }

@media (max-width:575px){
  [data-store="home-products-featured"]{ padding:30px 0 26px; }
  .micx-inst-logo{ border-radius:12px; }
}

/* ================================================================== *
 * 4.c NEWSLETTER
 *
 * Venía como un título chico y un campo perdido en el medio del azul. Ahora
 * el texto tiene peso y detrás flotan unos sobres.
 *
 * Los sobres son decoración y se comportan como tal: los dibuja el JS con
 * aria-hidden, no reciben clics y no existen si el visitante pidió menos
 * movimiento. Nada del formulario depende de ellos.
 * ================================================================== */
[data-store="home-newsletter"]{ position:relative; overflow:hidden; }

[data-store="home-newsletter"] h1,
[data-store="home-newsletter"] h2,
[data-store="home-newsletter"] h3{
  font-size:32px !important; line-height:1.12 !important; margin-bottom:12px !important;
}
[data-store="home-newsletter"] p{
  font-size:17px !important; line-height:1.55 !important; opacity:.9;
}
[data-store="home-newsletter"] .container{ position:relative; z-index:1; }

/* El campo llevaba `border:0` y nada más, así que quedaba transparente sobre
   el azul: se veía el placeholder flotando sin caja. Va con fondo blanco. */
[data-store="home-newsletter"] input[type="email"],
[data-store="home-newsletter"] .form-control{
  height:54px !important; border-radius:999px 0 0 999px !important;
  padding-left:24px !important; font-size:15px !important;
  border:0 !important;
  background:#fff !important;
  color:var(--micx-negro) !important;
}
[data-store="home-newsletter"] input[type="email"]::placeholder,
[data-store="home-newsletter"] .form-control::placeholder{
  color:var(--micx-acento) !important;
}
[data-store="home-newsletter"] button,
[data-store="home-newsletter"] [type="submit"]{
  height:54px !important; border-radius:0 999px 999px 0 !important;
  padding:0 30px !important; font-weight:700 !important; font-size:15px !important;
  background:var(--micx-acento) !important; color:var(--micx-negro) !important;
  border:0 !important;
  transition:background-color .2s ease;
}
[data-store="home-newsletter"] button:hover,
[data-store="home-newsletter"] [type="submit"]:hover{ background:#fff !important; }

.micx-sobres{
  position:absolute; inset:0; z-index:0;
  pointer-events:none; overflow:hidden;
}
.micx-sobre{
  position:absolute; bottom:-70px;
  display:block; line-height:0;
  opacity:0;
  animation-name:micx-sobre-sube;
  animation-timing-function:linear;
  animation-iteration-count:infinite;
  animation-fill-mode:backwards;
}
.micx-sobre svg{ width:100%; height:auto; fill:currentColor; }
.micx-sobres{ color:rgba(255,255,255,.22); }

/* El recorrido va en píxeles y no en porcentaje.
   Un `translateY(%)` se mide contra el PROPIO elemento, no contra el
   contenedor: como cada sobre mide unos 20 px, con -135% viajaban 27 px y
   volvían. Por eso no se veía nada. En píxeles cruzan la franja entera. */
@keyframes micx-sobre-sube{
  0%{ transform:translateY(0) rotate(-12deg); opacity:0; }
  10%{ opacity:1; }
  85%{ opacity:1; }
  100%{ transform:translateY(-460px) rotate(14deg); opacity:0; }
}

@media (max-width:575px){
  [data-store="home-newsletter"] h2,
  [data-store="home-newsletter"] h3{ font-size:25px !important; }
  [data-store="home-newsletter"] p{ font-size:15.5px !important; }
}

@media (prefers-reduced-motion: reduce){
  .micx-sobres{ display:none; }
}

/* ================================================================== *
 * 4.d PÁGINA "QUIÉNES SOMOS"
 * ================================================================== */

/* La columna venía a 1108 px de ancho: más del doble de lo que el ojo
   sigue cómodo en un renglón. A 760 se lee mejor y de paso libera el
   margen donde entran las herramientas.
   El recuadro blanco además la despega del fondo gris y le da un borde
   claro contra el que apoyar las herramientas. */
.micx-quienes-texto{
  max-width:800px; margin:0 auto 8px;
  background:#fff;
  border:1px solid var(--micx-borde);
  border-radius:18px;
  padding:44px 52px 40px;
  box-shadow:0 14px 40px rgba(var(--micx-color-rgb),.07);
}
.micx-quienes-texto p{ font-size:16.5px; line-height:1.75; }
.micx-quienes-texto p:last-of-type{ margin-bottom:0; }

/* El título va centrado, con una regla corta debajo que lo separa del
   cuerpo.
   Ojo con el selector: el h1 NO cuelga del `.container`, está dentro de un
   <section class="page-header">. La primera versión de esto apuntaba a
   `.container > h1` y por eso no centraba nada. */
body.template-page .page-header{ text-align:center !important; }
body.template-page .page-header h1{
  text-align:center !important;
  max-width:800px; margin:0 auto 6px !important;
  font-size:34px !important; line-height:1.1 !important;
}
body.template-page .page-header h1::after{
  content:''; display:block;
  width:64px; height:3px; margin:16px auto 0;
  background:var(--micx-color); border-radius:2px;
}

/* La miga de pan también centrada, para que el bloque quede de una pieza. */
body.template-page .breadcrumbs,
body.template-page .js-breadcrumb,
body.template-page [class*="breadcrumb"]{ text-align:center !important; }

/* Columnas decorativas. Sólo existen si hay lugar: por debajo de 1200px de
   pantalla no se dibujan, porque amontonarlas contra el texto sería peor
   que no ponerlas. */
.micx-hm-col{ display:none; }

@media (min-width:1200px){
  .micx-hm-col{
    display:block; position:absolute; top:0; bottom:0; width:210px;
    pointer-events:none; z-index:0;
  }
  .micx-hm-izq{ left:0; }
  .micx-hm-der{ right:0; }

  .micx-hm{
    position:absolute; display:block; line-height:0;
    opacity:0; transform:translateY(26px) scale(.94);
    transition:opacity .8s ease, transform .9s cubic-bezier(.16,.84,.28,1);
  }
  .micx-hm.micx-visible{ opacity:1; transform:none; }
  .micx-hm-izq .micx-hm{ left:0; }
  .micx-hm-der .micx-hm{ right:0; }

  .micx-hm img{
    width:100%; height:auto; display:block;
    /* Sin `mix-blend-mode`: los archivos ya vienen con el fondo recortado.
       El multiply era un parche para fotos sobre blanco, y sobre estas
       ensuciaba los grises de las herramientas. */
    filter:drop-shadow(0 12px 22px rgba(var(--micx-color-rgb),.16));
  }
}

/* El texto por encima de las herramientas, siempre. */
.micx-quienes-texto{ position:relative; z-index:1; }

/* Cierre con el logo */
.micx-quienes-logo{
  margin:56px auto 8px; max-width:340px;
  opacity:0; transform:translateY(20px);
  transition:opacity .8s ease, transform .9s cubic-bezier(.16,.84,.28,1);
}
.micx-quienes-logo.micx-visible{ opacity:1; transform:none; }
.micx-quienes-logo img{ width:100%; height:auto; display:block; }

@media (max-width:575px){
  .micx-quienes-logo{ max-width:230px; margin-top:38px; }
  .micx-quienes-texto{ padding:26px 22px 24px; border-radius:14px; }
  .micx-quienes-texto p{ font-size:15.5px; }
  body.template-page .page-header h1{ font-size:26px !important; }
}

@media (prefers-reduced-motion: reduce){
  .micx-hm, .micx-quienes-logo{
    opacity:1 !important; transform:none !important; transition:none !important;
  }
}

/* ================================================================== *
 * 4.e VIDEO AMBIENTE EN LAS CATEGORÍAS
 *
 * Va fijo en el margen izquierdo, centrado en la ventana. El `left` se
 * calcula contra el ancho real de la ventana: lo que sobra a la izquierda
 * del contenido, menos el ancho del video. Así se acomoda solo en cualquier
 * pantalla ancha sin tener que escribir posiciones a mano.
 *
 * Los cortes de pantalla acompañan lo que hace el JS, que directamente no
 * crea el elemento por debajo de 1600 px. Doble llave: el que no lo va a
 * ver, tampoco lo descarga.
 * ================================================================== */
.micx-cat-video{
  display:none;
  position:fixed; z-index:5;
  top:50%; transform:translateY(-50%);
  /* `left` lo escribe el JS midiendo dónde arranca el contenido. Acá no va
     ningún número: la cuenta a mano fue justamente lo que hizo que el video
     se montara encima de los filtros. */
  border-radius:16px; overflow:hidden;
  box-shadow:0 22px 50px rgba(var(--micx-color-rgb),.20);
  opacity:0;
  animation:micx-cat-video-entra .9s ease .35s forwards;
}
.micx-cat-video video{
  display:block; width:100%; height:auto;
  /* Transparente y no azul: mientras el archivo carga, un fondo oscuro se
     ve como un rectángulo negro al costado del catálogo. */
  background:transparent;
  pointer-events:none;
}

/* Botón de cerrar. Es lo único de la pieza que recibe clics. */
.micx-cat-cerrar{
  position:absolute; top:10px; right:10px; z-index:2;
  width:30px; height:30px; padding:0;
  border:0; border-radius:50%;
  background:rgba(20,26,33,.55); color:#fff;
  font-size:19px; line-height:28px; font-family:inherit;
  cursor:pointer;
  opacity:0; transition:opacity .2s ease, background-color .2s ease;
}
.micx-cat-video:hover .micx-cat-cerrar,
.micx-cat-cerrar:focus-visible{ opacity:1; }
.micx-cat-cerrar:hover{ background:rgba(20,26,33,.85); }

@keyframes micx-cat-video-entra{
  from{ opacity:0; transform:translateY(-50%) translateX(-26px); }
  to{ opacity:1; transform:translateY(-50%) translateX(0); }
}

/* El ancho, la posición y hasta si se muestra o no lo resuelve el JS
   midiendo el hueco real. Acá no va ningún corte de pantalla: tener la
   decisión repartida entre el CSS y el JS fue lo que hizo que el video
   quedara encima de los filtros. */
.micx-cat-video{ display:block; }

/* Modo columna: cuando no hay margen libre, el video se cuelga debajo de
   los filtros y pasa a ser un bloque más de la página. */
.micx-cat-video.micx-cat-video-columna{
  position:static;
  transform:none;
  width:100% !important;
  margin:24px 0 8px;
  animation:none; opacity:1;
}
.micx-cat-video.micx-cat-video-columna .micx-cat-cerrar{ opacity:1; }

@media (prefers-reduced-motion: reduce){
  .micx-cat-video{ animation:none; opacity:1; }
}


/* ================================================================== *
 * 4.f CARRUSEL PRINCIPAL
 *
 * Todo por CSS, sin tocarle una línea al Swiper. La animación se cuelga de
 * `.swiper-slide-active`, que es la clase que el propio carrusel va moviendo
 * de slide en slide: cada vez que cambia, la animación arranca de nuevo sola.
 *
 * El acercamiento usa la propiedad `scale` y NO `transform: scale()`. El
 * carrusel escribe transforms para desplazarse; pisárselos sería romperle el
 * movimiento. `scale` es una propiedad aparte y se compone con lo que haya.
 * ================================================================== */
[data-store="home-slider"] .gallery-item-container{ overflow:hidden; }

[data-store="home-slider"] .swiper-slide img{
  will-change:scale;
}

/* Los slides impares entran acercándose y los pares alejándose. Alternar
   evita que se note el truco cuando el bucle vuelve a empezar. */
[data-store="home-slider"] .swiper-slide-active img{
  animation:micx-slider-acerca 9s ease-out forwards;
}
[data-store="home-slider"] .swiper-slide-active:nth-child(even) img{
  animation-name:micx-slider-aleja;
}

/* Nunca baja de 1: por debajo, con `cover`, aparecería el borde. */
@keyframes micx-slider-acerca{
  from{ scale:1.001; }
  to{ scale:1.085; }
}
@keyframes micx-slider-aleja{
  from{ scale:1.085; }
  to{ scale:1.001; }
}

/* Un velo al pie para que los puntos y el texto se lean también sobre las
   fotos claras. */
[data-store="home-slider"] .js-home-main-slider::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:120px;
  background:linear-gradient(180deg, rgba(10,14,20,0), rgba(10,14,20,.42));
  pointer-events:none; z-index:2;
}

/* Puntos convertidos en barritas: el activo se estira. */
[data-store="home-slider"] .swiper-pagination{ z-index:3; }
[data-store="home-slider"] .swiper-pagination-bullet{
  width:9px !important; height:9px !important;
  border-radius:99px !important;
  background:rgba(255,255,255,.55) !important;
  opacity:1 !important;
  margin:0 5px !important;
  transition:width .4s cubic-bezier(.2,.7,.3,1), background-color .3s ease;
}
[data-store="home-slider"] .swiper-pagination-bullet-active{
  width:32px !important;
  background:#fff !important;
}

/* Flechas: aparecen al acercar el mouse al carrusel.
   Se pinta el fondo del botón Y la tinta del ícono, porque Brasilia dibuja
   algunos íconos con máscara sobre un ::before y otros con <svg>. Cubrir
   las dos formas evita que quede una flecha invisible. */
[data-store="home-slider"] [class*="button-next"],
[data-store="home-slider"] [class*="button-prev"],
[data-store="home-slider"] [class*="slider-next"],
[data-store="home-slider"] [class*="slider-prev"]{
  width:50px !important; height:50px !important;
  border-radius:50% !important;
  background-color:rgba(20,26,33,.45) !important;
  border:0 !important;
  opacity:0;
  transition:opacity .3s ease, background-color .2s ease;
  z-index:3;
}
[data-store="home-slider"]:hover [class*="button-next"],
[data-store="home-slider"]:hover [class*="button-prev"],
[data-store="home-slider"]:hover [class*="slider-next"],
[data-store="home-slider"]:hover [class*="slider-prev"]{ opacity:1; }

[data-store="home-slider"] [class*="button-next"]:hover,
[data-store="home-slider"] [class*="button-prev"]:hover{
  background-color:var(--micx-color) !important;
}
[data-store="home-slider"] [class*="button-next"]::before,
[data-store="home-slider"] [class*="button-prev"]::before{ background-color:#fff !important; }
[data-store="home-slider"] [class*="button-next"] svg,
[data-store="home-slider"] [class*="button-prev"] svg{ fill:#fff !important; }

/* En pantallas táctiles no hay "acercar el mouse": las flechas se quedan. */
@media (hover:none){
  [data-store="home-slider"] [class*="button-next"],
  [data-store="home-slider"] [class*="button-prev"]{ opacity:1; }
}

@media (prefers-reduced-motion: reduce){
  [data-store="home-slider"] .swiper-slide-active img,
  [data-store="home-slider"] .swiper-slide-active:nth-child(even) img{
    animation:none !important; scale:1 !important;
  }
}

/* ================================================================== *
 * 4.g BANDA DE SERVICIOS
 *
 * Los íconos venían sueltos a 32px sobre el azul: correctos y sin peso.
 * Ahora van dentro de un medallón que se llena al pasar el mouse, y las
 * cuatro columnas entran una detrás de otra cuando la banda aparece.
 * ================================================================== */
[data-store="banner-services"] .js-informative-banner-container{
  opacity:0; transform:translateY(24px);
  transition:opacity .7s ease, transform .8s cubic-bezier(.16,.84,.28,1);
}
[data-store="banner-services"].micx-visible .js-informative-banner-container{
  opacity:1; transform:none;
}
/* El escalonado. 110 ms es suficiente para que se lea como secuencia sin
   que la última tarde en aparecer. */
[data-store="banner-services"].micx-visible .js-informative-banner-container:nth-child(2){ transition-delay:.11s; }
[data-store="banner-services"].micx-visible .js-informative-banner-container:nth-child(3){ transition-delay:.22s; }
[data-store="banner-services"].micx-visible .js-informative-banner-container:nth-child(4){ transition-delay:.33s; }

[data-store="banner-services"] [class*="js-informative-banner-icon"]{
  width:68px !important; height:68px !important;
  margin:0 auto 18px !important;
  display:flex !important; align-items:center; justify-content:center;
  border-radius:50%;
  background:rgba(255,255,255,.10);
  border:1.5px solid rgba(255,255,255,.20);
  transition:background-color .3s ease, border-color .3s ease,
             transform .3s cubic-bezier(.2,.7,.3,1);
}
[data-store="banner-services"] [class*="js-informative-banner-icon"] svg{
  width:30px !important; height:30px !important;
  transition:fill .3s ease;
}

/* Espacio para que el medallón pueda levantarse sin que el carrusel lo
   recorte por arriba. El `padding` agranda la zona visible y el `margin`
   negativo devuelve el bloque a su lugar, así nada se mueve de sitio. */
[data-store="banner-services"] .js-informative-banners{
  padding-top:14px !important;
  margin-top:-14px !important;
}
[data-store="banner-services"] .js-informative-banner-container:hover [class*="js-informative-banner-icon"]{
  background:#fff; border-color:#fff;
  transform:translateY(-5px);
}
/* La escala va en el ícono y no en el medallón: adentro del círculo no hay
   nada que recortar. */
[data-store="banner-services"] .js-informative-banner-container:hover [class*="js-informative-banner-icon"] svg{
  scale:1.08;
}
[data-store="banner-services"] .js-informative-banner-container:hover [class*="js-informative-banner-icon"] svg{
  fill:var(--micx-color) !important;
}

[data-store="banner-services"] .js-informative-banner-title{
  font-size:16px !important; font-weight:800 !important;
  letter-spacing:.01em; margin-bottom:8px !important;
}
[data-store="banner-services"] .js-informative-banner-description{
  font-size:14px !important; line-height:1.6 !important; opacity:.85;
  max-width:250px; margin-left:auto !important; margin-right:auto !important;
}

@media (max-width:575px){
  [data-store="banner-services"] [class*="js-informative-banner-icon"]{
    width:56px !important; height:56px !important;
  }
  [data-store="banner-services"] [class*="js-informative-banner-icon"] svg{
    width:25px !important; height:25px !important;
  }
}

@media (prefers-reduced-motion: reduce){
  [data-store="banner-services"] .js-informative-banner-container{
    opacity:1 !important; transform:none !important; transition:none !important;
  }
  [data-store="banner-services"] .js-informative-banner-container:hover [class*="js-informative-banner-icon"]{
    transform:none;
  }
  [data-store="banner-services"] .js-informative-banner-container:hover [class*="js-informative-banner-icon"] svg{
    scale:1;
  }
}

/* ================================================================== *
 * 5. APARICIÓN AL SCROLLEAR
 * La clase la pone el JS sólo sobre secciones que arrancan fuera de
 * pantalla, y sólo si el navegador soporta IntersectionObserver. Si algo
 * de eso falla, nunca se agrega `.micx-aparece` y todo queda visible: una
 * animación jamás puede ser el motivo por el que no se ve un producto.
 * ================================================================== */
.micx-aparece{
  opacity:0; transform:translateY(18px);
  transition:opacity .55s ease, transform .55s cubic-bezier(.2,.7,.3,1);
  will-change:opacity, transform;
}
.micx-aparece.micx-visible{ opacity:1; transform:none; will-change:auto; }

@media (prefers-reduced-motion: reduce){
  .micx-rubro, .micx-rubro:hover{ transform:none; transition:none; }
  .micx-uso:hover{ transform:none; }
  /* Sin movimiento automático: la cinta queda quieta y se desliza a mano. */
  .micx-usos-cinta{ animation:none; }
  .micx-usos-fila{ overflow-x:auto; -webkit-mask-image:none; mask-image:none; }
  .micx-aparece, .micx-aparece.micx-visible{
    opacity:1 !important; transform:none !important; transition:none !important;
  }
}