/* =====================================================================
   AUTOCLICK - capa visual "Shard" (tema Brasilia / Tiendanube)
   Lenguaje sacado de los banners de la tienda: fragmentos triangulares
   amarillo/negro/blanco, esquinas cortadas, bordes en diagonal, titulos
   Chakra Petch en mayusculas con marcador amarillo.
   Se carga despues de micx-home.css. No toca el SCSS del tema.
   Prefijo: ac-. Amarillo sobre negro, negro sobre amarillo: nunca blanco
   sobre amarillo ni amarillo sobre blanco.
   ===================================================================== */

/* ---------------------------------------------------------------------
   0. Tokens
   --------------------------------------------------------------------- */
:root {
  --ac-y: #ffcb00;          /* acento de la tienda */
  --ac-y-hot: #ffd500;      /* solo fragmentos grandes (como en los banners) */
  --ac-k: #000;
  --ac-ink: #000;
  --ac-w: #fff;
  --ac-paper: #f3f3f1;
  --ac-line: rgba(0, 0, 0, .14);
  --ac-mute: #555;
  --ac-cut: 12px;
  --ac-cut-lg: 18px;
  --ac-slant: clamp(18px, 5.5vw, 80px);   /* ~3,1 grados */
  --ac-head: "Chakra Petch", var(--heading-font, sans-serif);
  --ac-ease: cubic-bezier(.2, .7, .2, 1);
  --ac-fast: .22s;
  --ac-mid: .45s;
  --ac-slow: .75s;
  --ac-slide-delay: 6000ms;
  --ac-head-h: 0px;

  /* Colores del tema que ponian texto blanco sobre amarillo */
  --label-foreground: #000;
  --banner-services-foreground: #000;
  --header-badge-background: #ffcb00;
  --header-badge-foreground: #000;
}

/* ---------------------------------------------------------------------
   1. Piezas del lenguaje
   --------------------------------------------------------------------- */
.ac-sr {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Chip de etiqueta: contorno inclinado, como las pastillas de dirección de los banners */
.ac-chip {
  display: inline-block;
  margin: 0 0 12px;
  padding: 5px 14px;
  font-family: var(--ac-head);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ac-ink);
  background: transparent;
  border: 2px solid currentColor;
  transform: skewX(-12deg);
  text-decoration: none;
}
.ac-chip--dark { color: var(--ac-y); }
a.ac-chip:hover, a.ac-chip:focus-visible { background: var(--ac-y); color: var(--ac-ink); border-color: var(--ac-ink); }

/* Titulos */
.ac-title {
  margin: 0 0 18px;
  font-family: var(--ac-head);
  font-weight: 700;
  font-size: clamp(26px, 3.4vw, 44px);
  line-height: 1.02;
  letter-spacing: -.01em;
  text-transform: uppercase;
  color: var(--ac-ink);
}
.ac-title--light { color: var(--ac-w); }

/* Marcador: bloque amarillo detras de una palabra (texto negro) */
.ac-mark, mark.ac-mark {
  position: relative;
  z-index: 0;
  padding: 0 .12em;
  color: var(--ac-ink);
  background: none;
  white-space: nowrap;
}
.ac-mark::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: .08em -.02em .02em;
  background: var(--ac-y);
  transform: skewX(-12deg);
}

/* Botones: esquinas cortadas y barrido amarillo en diagonal al pasar */
.ac-btn {
  --c: 10px;
  position: relative;
  z-index: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 50px;
  padding: 0 26px;
  font-family: var(--ac-head);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none !important;
  border: 0;
  cursor: pointer;
  overflow: hidden;
  clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c));
  transition: color var(--ac-fast) ease;
}
.ac-btn svg { width: 20px; height: 20px; fill: currentColor; flex: none; }
.ac-btn::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 -20%;
  background: var(--ac-y);
  transform: skewX(-20deg);
  translate: -115% 0;
  transition: translate var(--ac-mid) var(--ac-ease);
}
.ac-btn:hover::before, .ac-btn:focus-visible::before { translate: 0 0; }
.ac-btn--dark { background: var(--ac-ink); color: var(--ac-w) !important; }
.ac-btn--dark:hover, .ac-btn--dark:focus-visible { color: var(--ac-ink) !important; }
.ac-btn--light { background: var(--ac-w); color: var(--ac-ink) !important; }
.ac-btn--ghost { background: transparent; color: var(--ac-ink); box-shadow: inset 0 0 0 2px var(--ac-ink); min-height: 42px; font-size: 13px; }

.ac-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--ac-head); font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--ac-y) !important; text-decoration: none !important;
}
.ac-link::after { content: ""; width: 18px; height: 2px; background: currentColor; transition: width var(--ac-fast) ease; }
.ac-link:hover::after { width: 30px; }

/* Fragmentos (paginas propias): triangulos con clip-path, sin imagenes */
.ac-shard {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  background: var(--ac-y-hot);
  transition: translate 1.1s var(--ac-ease), opacity 1.1s ease, rotate 1.1s var(--ac-ease);
}
.ac-js .ac-shard { opacity: 0; translate: -40px 30px; rotate: -8deg; }
.ac-js .is-shards-in .ac-shard, .ac-js .ac-shard.is-in { opacity: 1; translate: 0 0; rotate: 0deg; }

/* ---------------------------------------------------------------------
   2. Arreglos de color del tema
   --------------------------------------------------------------------- */
.text-accent { color: var(--ac-ink); }
.footer-colors .text-accent, .ac-band--dark .text-accent { color: var(--ac-y); }
.label, .label.label-accent { color: var(--ac-ink); fill: var(--ac-ink); }

/* Etiqueta de envio: negro sobre amarillo, corte en diagonal */
.shipping-label, .js-shipping-label-private {
  background: var(--ac-y) !important;
  color: var(--ac-ink) !important;
  font-family: var(--ac-head);
  font-weight: 700;
  letter-spacing: .03em;
  border-radius: 0 !important;
  clip-path: polygon(0 0, 100% 0, calc(100% - 7px) 100%, 0 100%);
  padding-right: 12px !important;
}

/* Boton principal del tema (Agregar al carrito, "Ver más" de los modulos) */
.btn-primary, .js-addtocart.btn-primary {
  position: relative;
  z-index: 0;
  overflow: hidden;
  background-color: var(--ac-ink) !important;
  color: var(--ac-w) !important;
  fill: var(--ac-w) !important;
  border: 0 !important;
  border-radius: 0 !important;
  font-family: var(--ac-head);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  transition: color var(--ac-fast) ease;
}
.btn-primary::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 -20%;
  background: var(--ac-y);
  transform: skewX(-20deg);
  translate: -115% 0;
  transition: translate var(--ac-mid) var(--ac-ease);
}
.btn-primary:hover, .btn-primary:focus-visible { color: var(--ac-ink) !important; fill: var(--ac-ink) !important; }
.btn-primary:hover::before, .btn-primary:focus-visible::before { translate: 0 0; }
/* Un <input> no tiene ::before: el barrido se reemplaza por fondo amarillo */
input.btn-primary { transition: background-color var(--ac-fast) ease, color var(--ac-fast) ease; }
input.btn-primary:hover, input.btn-primary:focus-visible { background-color: var(--ac-y) !important; }

/* ---------------------------------------------------------------------
   3. Header "Shard" (v2): mismo marcado del tema, solo estilo.
      Fila de arriba: logo grande a la izquierda, buscador largo con
      esquinas cortadas, utilidades en cuadros negros. Abajo: barra negra
      de menu. Al scrollear (.compress del tema) todo se achica.
      El archivo del logo tiene ~16% de aire arriba y abajo y ~19% a los
      costados: se compensa con margenes negativos.
   --------------------------------------------------------------------- */
:root {
  --header-desktop-nav-background: #000;
  --header-desktop-nav-foreground: #fff;
  --header-search-btn-background: #ffcb00;
  --header-search-btn-foreground: #000;
  --ac-logo-h: 93px;       /* marca visible ~64 px */
  --ac-logo-h-sm: 52px;    /* comprimido: marca ~36 px */
}
.head-main { transition: box-shadow var(--ac-mid) ease; }
.head-main.compress { box-shadow: 0 3px 0 var(--ac-y); }
.head-main .head-row { transition: padding var(--ac-mid) var(--ac-ease); }
.head-main .badge {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  font-family: var(--ac-head);
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  color: var(--ac-ink) !important;
  background: var(--ac-y) !important;
  border: 0 !important;
  border-radius: 0 !important;
  clip-path: polygon(3px 0, 100% 0, calc(100% - 3px) 100%, 0 100%);
}

/* Buscador: borde negro de 2 px con esquinas cortadas (el borde es el fondo
   negro del contenedor; el input va 2 px adentro) y boton amarillo */
.head-main .search-form .form-group {
  --c: 12px;
  padding: 2px;
  background: var(--ac-ink);
  clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c));
}
.head-main .search-form .search-input {
  height: 44px;
  padding-left: 18px;
  padding-right: 70px;
  border: 0 !important;
  border-radius: 0 !important;
  font-size: 15px;
  clip-path: polygon(11px 0, 100% 0, 100% calc(100% - 11px), calc(100% - 11px) 100%, 0 100%, 0 11px);
  transition: height var(--ac-mid) var(--ac-ease);
}
.head-main .search-form .search-input:focus { outline: none; box-shadow: inset 0 -3px 0 var(--ac-y); }
.head-main .search-submit-btn {
  top: 2px !important;
  right: 2px !important;
  height: calc(100% - 4px) !important;
  width: 60px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0 !important;
  background: var(--ac-y) !important;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 11px), calc(100% - 11px) 100%, 0 100%);
  transition: background var(--ac-fast) ease;
}
.head-main .search-submit-btn:before { width: 20px; height: 20px; color: var(--ac-ink) !important; }
.head-main .search-submit-btn:hover, .head-main .search-submit-btn:focus-visible { background: var(--ac-y-hot) !important; }
.head-main .search-empty-btn { right: 66px; }

/* Menu de escritorio: barra negra, textos blancos */
.head-main .nav-desktop-container.nav-desktop-colors { position: relative; background: var(--ac-ink); }
.head-main .nav-desktop-list > .nav-main-item,
.head-main .nav-desktop-list > .nav-main-item > .nav-item-container {
  font-family: var(--ac-head);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.head-main .nav-desktop-list > .nav-main-item > .nav-list-link,
.head-main .nav-desktop-list > .nav-main-item > .nav-item-container > .nav-list-link {
  position: relative;
  z-index: 0;
  display: inline-block;
  padding: 4px 0;
  color: var(--ac-w) !important;
}
/* Subrayado inclinado amarillo: crece al pasar y queda en la pagina actual */
.head-main .nav-desktop-list > .nav-main-item > .nav-list-link::after,
.head-main .nav-desktop-list > .nav-main-item > .nav-item-container > .nav-list-link::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 100%; height: 3px;
  background: var(--ac-y);
  transform: skewX(-20deg) scaleX(0);
  transform-origin: 0 50%;
  transition: transform var(--ac-mid) var(--ac-ease);
}
.head-main .nav-desktop-list > .nav-main-item:hover > .nav-list-link::after,
.head-main .nav-desktop-list > .nav-main-item:hover > .nav-item-container > .nav-list-link::after,
.head-main .nav-desktop-list > .nav-main-item > .nav-list-link:focus-visible::after,
.head-main .nav-desktop-list > .nav-main-item > .nav-item-container > .nav-list-link:focus-visible::after,
.head-main .nav-desktop-list > .nav-main-item > .nav-list-link.selected::after,
.head-main .nav-desktop-list > .nav-main-item > .nav-item-container > .nav-list-link.selected::after { transform: skewX(-20deg) scaleX(1); }
/* PRODUCTOS (y un link suelto a /productos/): chip amarillo inclinado con texto negro */
.head-main .nav-desktop-list > .nav-main-item > a.nav-list-link[href$="/productos/"],
.head-main .nav-desktop-list > .ac-nav-products > .nav-item-container > .ac-nav-products__link {
  padding: 4px 12px;
  color: var(--ac-ink) !important;
}
.head-main .nav-desktop-list > .nav-main-item > a.nav-list-link[href$="/productos/"]::before,
.head-main .nav-desktop-list > .ac-nav-products > .nav-item-container > .ac-nav-products__link::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: var(--ac-y);
  transform: skewX(-12deg);
  transition: background var(--ac-fast) ease;
}
.head-main .nav-desktop-list > .nav-main-item > a.nav-list-link[href$="/productos/"]::after,
.head-main .nav-desktop-list > .ac-nav-products > .nav-item-container > .ac-nav-products__link::after { display: none; }
.head-main .nav-desktop-list > .nav-main-item:hover > a.nav-list-link[href$="/productos/"]::before,
.head-main .nav-desktop-list > .ac-nav-products:hover > .nav-item-container > .ac-nav-products__link::before,
.head-main .nav-desktop-list > .ac-nav-products.is-open > .nav-item-container > .ac-nav-products__link::before { background: var(--ac-w); }
/* Fragmento fino amarillo en el extremo derecho de la barra */
.head-main .nav-desktop-container.nav-desktop-colors::after {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 70px;
  background: var(--ac-y);
  clip-path: polygon(62% 0, 100% 0, 100% 100%, 40% 100%);
  pointer-events: none;
}
@media (max-width: 1399px) { .head-main .nav-desktop-container.nav-desktop-colors::after { width: 26px; } }

/* Desplegables: panel negro, borde amarillo arriba, esquina cortada */
.head-main .desktop-dropdown {
  background: var(--ac-k) !important;
  border-top: 3px solid var(--ac-y) !important;
  border-bottom: 0 !important;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 28px), calc(100% - 28px) 100%, 0 100%);
  font-family: var(--ac-head);
}
.head-main .desktop-dropdown a,
.head-main .nav-desktop-container.nav-desktop-colors .desktop-dropdown a {
  position: relative;
  color: var(--ac-w) !important;
  text-transform: none;
  font-weight: 400;
  transition: color var(--ac-fast) ease;
}
.head-main .desktop-dropdown .item-with-subitems > .nav-item-container > a,
.head-main .desktop-dropdown .desktop-list-subitems > .nav-item > a { font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.head-main .desktop-dropdown a::before {
  content: "";
  position: absolute;
  left: -14px; top: 50%;
  width: 8px; height: 8px;
  margin-top: -4px;
  background: var(--ac-y);
  transform: skewX(-12deg) scaleX(0);
  transform-origin: 0 50%;
  transition: transform var(--ac-fast) var(--ac-ease);
}
.head-main .desktop-dropdown a:hover, .head-main .desktop-dropdown a:focus-visible { color: var(--ac-y) !important; }
.head-main .desktop-dropdown a:hover::before, .head-main .desktop-dropdown a:focus-visible::before { transform: skewX(-12deg) scaleX(1); }

@media (min-width: 768px) {
  .head-main .head-row { padding-top: 12px !important; padding-bottom: 12px !important; }
  /* Logo: 93 px de archivo = ~64 px de marca, pegado al borde izquierdo */
  .head-main .logo-container { line-height: 0; }
  .head-main .logo-img, .head-main .logo-img.logo-big {
    height: var(--ac-logo-h);
    width: auto;
    max-height: none !important;
    max-width: none !important;
    margin: calc(var(--ac-logo-h) * -.157) 0 calc(var(--ac-logo-h) * -.157) calc(var(--ac-logo-h) * -.47);
    transition: height var(--ac-mid) var(--ac-ease), margin var(--ac-mid) var(--ac-ease) !important;
  }
  .head-main.compress .logo-img, .head-main.compress .logo-img.logo-big {
    height: var(--ac-logo-h-sm);
    margin: calc(var(--ac-logo-h-sm) * -.157) 0 calc(var(--ac-logo-h-sm) * -.157) calc(var(--ac-logo-h-sm) * -.47);
  }
  /* Buscador largo: ocupa el medio */
  .head-main .search-container { max-width: none; min-width: 0; margin: 0 28px 0 32px; }
  /* Utilidades: cuadros negros con esquina cortada, iconos amarillos */
  .head-main .utilities-container { grid-column-gap: 22px; }
  .head-main .utility-icon-md-colors {
    width: 40px; height: 40px;
    border-radius: 0;
    background: linear-gradient(315deg, transparent 0 9px, var(--ac-ink) 9.5px);
    transition: width var(--ac-mid) var(--ac-ease), height var(--ac-mid) var(--ac-ease);
  }
  .head-main .utility-icon-md-colors svg { fill: var(--ac-y) !important; font-size: 19px; }
  .head-main .header-icon-big { position: relative; }
  .head-main .header-icon-big .badge.d-md-none {
    display: inline-block !important;
    position: absolute;
    top: -7px; right: -9px; left: auto; bottom: auto;
    margin: 0;
    transform: none;
  }
  /* Textos de las utilidades: todos iguales (mismo peso, mayusculas, una linea) */
  .head-main .utility-text {
    display: flex !important;
    grid-auto-flow: column;
    align-items: baseline;
    column-gap: 5px;
    white-space: nowrap;
    font-family: var(--ac-head);
    font-size: 12px;
    line-height: 1.2;
    letter-spacing: .03em;
    text-transform: uppercase;
  }
  .head-main .utility-text, .head-main .utility-text * { font-weight: 700 !important; color: var(--ac-ink); }
  .head-main .utility-text a { text-decoration: none; }
  .head-main .utility-text a:hover { box-shadow: inset 0 -3px 0 var(--ac-y); }
  .head-main .js-cart-widget-total::before { content: "·"; margin-right: 5px; }
  /* Menu */
  .head-main .nav-desktop-list > .nav-main-item {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
    font-size: 13px;
    transition: padding var(--ac-mid) var(--ac-ease);
  }
  /* Comprimido */
  .head-main.compress .head-row { padding-top: 6px !important; padding-bottom: 6px !important; }
  .head-main.compress .search-form .search-input { height: 36px; }
  .head-main.compress .utility-icon-md-colors { width: 34px; height: 34px; }
  .head-main.compress .nav-desktop-list > .nav-main-item { padding-top: 7px !important; padding-bottom: 7px !important; }
}
@media (max-width: 767px) {
  .head-main .search-form .search-input { height: 42px; }
  .head-main.compress .head-row { padding-top: 8px !important; padding-bottom: 8px !important; }
  .head-main.compress .logo-img, .head-main.compress .logo-big { max-height: 32px; }
  .head-main.compress .search-container { margin-top: 8px !important; }
  .head-main.compress .search-form .search-input { height: 38px; }
}
/* PRODUCTOS: megapanel negro (snipplets/navigation/ac-megapanel.tpl).
   Izquierda la columna de familias, derecha la familia activa en columnas. */
.ac-nav-products__link { display: inline-flex !important; align-items: center; gap: 7px; }
.ac-nav-products__caret {
  width: 10px; height: 7px;
  fill: none !important; stroke: currentColor; stroke-width: 2;
  transition: rotate var(--ac-fast) ease;
}
.ac-nav-products.is-open .ac-nav-products__caret { rotate: 180deg; }
.ac-mega {
  position: fixed;
  top: 100%;
  left: 0;
  z-index: 20;
  width: 100%;
  color: var(--ac-w);
  background: var(--ac-ink);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 28px), calc(100% - 28px) 100%, 0 100%);
  text-transform: none;
  letter-spacing: 0;
  white-space: normal;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  translate: 0 -6px;
  transition: opacity var(--ac-fast) ease, translate var(--ac-fast) var(--ac-ease), visibility 0s linear var(--ac-fast);
}
/* Borde de arriba amarillo con las puntas cortadas */
.ac-mega::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 5px;
  background: var(--ac-y);
  clip-path: polygon(0 0, 100% 0, calc(100% - 6px) 100%, 6px 100%);
}
.ac-nav-products.is-open > .ac-mega,
html:not(.ac-js) .ac-nav-products:hover > .ac-mega,
html:not(.ac-js) .ac-nav-products:focus-within > .ac-mega {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  translate: 0 0;
  transition-delay: 0s;
}
.ac-mega__inner { padding-top: 26px; padding-bottom: 22px; }
.ac-mega__body {
  position: relative;
  height: min(480px, calc(100vh - var(--ac-head-h, 140px) - 120px));
  min-height: 260px;
}
.ac-mega__rail {
  width: 270px;
  height: 100%;
  margin: 0;
  padding: 0 14px 0 0;
  list-style: none;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--ac-y) #222;
  border-right: 1px solid #262626;
}
.ac-mega__fam { position: static; margin: 0; padding: 0; }
.head-main .ac-mega a { text-transform: none; }
/* El tema baja la opacidad de todo link al pasar (a:hover .8): en el panel negro apagaba el amarillo */
.head-main .ac-mega a:hover, .head-main .ac-mega a:focus, .head-main .nav-desktop-list > .nav-main-item a:hover, .head-main .utility-text a:hover { opacity: 1; }
.head-main .ac-mega .ac-mega__fam-link {
  position: relative;
  z-index: 0;
  display: block;
  padding: 7px 12px 7px 14px;
  font-family: var(--ac-head);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ac-w) !important;
  text-decoration: none;
}
.head-main .ac-mega .ac-mega__fam-link::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 1px 4px;
  background: var(--ac-y);
  transform: skewX(-12deg) scaleX(0);
  transform-origin: 0 50%;
  transition: transform var(--ac-fast) var(--ac-ease);
}
.head-main .ac-mega .ac-mega__fam.is-active > .ac-mega__fam-link,
.head-main .ac-mega .ac-mega__fam-link:focus-visible { color: var(--ac-ink) !important; outline: none; }
.head-main .ac-mega .ac-mega__fam.is-active > .ac-mega__fam-link::before,
.head-main .ac-mega .ac-mega__fam-link:focus-visible::before { transform: skewX(-12deg) scaleX(1); }
/* Panel de la familia: ocupa la derecha */
.ac-mega__pane {
  position: absolute;
  top: 0; bottom: 0;
  left: 300px; right: 0;
  display: none;
  overflow-y: auto;
  padding-right: 8px;
  scrollbar-width: thin;
  scrollbar-color: var(--ac-y) #222;
}
.ac-mega__fam.is-active > .ac-mega__pane { display: block; }
html:not(.ac-js) .ac-mega__fam:hover > .ac-mega__pane,
html:not(.ac-js) .ac-mega__fam:focus-within > .ac-mega__pane { display: block; z-index: 1; background: var(--ac-ink); }
.ac-mega__pane-title {
  margin: 0 0 14px;
  font-family: var(--ac-head);
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  color: var(--ac-w);
}
.ac-mega__cols { column-count: 3; column-gap: 34px; margin: 0 0 16px; padding: 0; list-style: none; }
@media (min-width: 1400px) { .ac-mega__cols { column-count: 4; } }
.ac-mega__col { break-inside: avoid; margin: 0 0 14px; }
.head-main .ac-mega .ac-mega__link,
.head-main .ac-mega .ac-mega__sublink,
.head-main .ac-mega .ac-mega__all,
.head-main .ac-mega .ac-mega__suball a {
  position: relative;
  display: inline-block;
  font-family: var(--body-font, Sora, sans-serif);
  text-decoration: none;
  transition: color var(--ac-fast) ease;
}
.head-main .ac-mega .ac-mega__link { font-size: 14px; font-weight: 700; line-height: 1.3; color: rgba(255, 255, 255, .88) !important; }
.ac-mega__sub { margin: 5px 0 0; padding: 0 0 0 10px; list-style: none; border-left: 1px solid #2c2c2c; }
.ac-mega__sub .ac-mega__sub { margin-top: 3px; }
.ac-mega__sub li { margin: 2px 0; }
.ac-mega__sub .ac-mega__more { display: none; }
.head-main .ac-mega .ac-mega__sublink { font-size: 12.5px; line-height: 1.3; color: #9b9b9b !important; }
.head-main .ac-mega .ac-mega__suball a,
.head-main .ac-mega .ac-mega__all { font-size: 12.5px; font-weight: 700; color: var(--ac-y) !important; }
.head-main .ac-mega .ac-mega__suball a::after,
.head-main .ac-mega .ac-mega__all::after { content: " \2192"; }
/* Marcador amarillo inclinado al pasar */
.head-main .ac-mega .ac-mega__link::before,
.head-main .ac-mega .ac-mega__sublink::before {
  content: "";
  position: absolute;
  left: -12px; top: .5em;
  width: 7px; height: 7px;
  background: var(--ac-y);
  transform: skewX(-12deg) scaleX(0);
  transform-origin: 0 50%;
  transition: transform var(--ac-fast) var(--ac-ease);
}
.head-main .ac-mega .ac-mega__link:hover, .head-main .ac-mega .ac-mega__link:focus-visible,
.head-main .ac-mega .ac-mega__sublink:hover, .head-main .ac-mega .ac-mega__sublink:focus-visible { color: var(--ac-w) !important; outline: none; }
.head-main .ac-mega .ac-mega__link:hover::before, .head-main .ac-mega .ac-mega__link:focus-visible::before,
.head-main .ac-mega .ac-mega__sublink:hover::before, .head-main .ac-mega .ac-mega__sublink:focus-visible::before { transform: skewX(-12deg) scaleX(1); }
.ac-mega__foot { display: flex; justify-content: flex-start; padding-top: 18px; margin-top: 16px; border-top: 1px solid #262626; }
.head-main .ac-mega .ac-btn--y { min-height: 46px; padding: 0 24px; font-size: 14px; color: var(--ac-ink) !important; background: var(--ac-y); text-transform: uppercase; }
.head-main .ac-mega .ac-btn--y::before { background: var(--ac-w); }

/* Menu del celular: PRODUCTOS y sus familias como acordeones */
.ac-acc-nav > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; }
.ac-acc-nav > summary::-webkit-details-marker { display: none; }
.ac-acc-nav > summary .nav-list-arrow { transition: rotate var(--ac-fast) ease; }
.ac-acc-nav[open] > summary .nav-list-arrow { rotate: 90deg; }
.ac-acc-nav[open] > summary { font-weight: 700; box-shadow: inset 4px 0 0 var(--ac-y); }
.ac-acc-nav__body { padding-left: 12px; border-left: 2px solid var(--ac-y); }
.ac-acc-nav .nav-list-link { box-sizing: border-box; }
#nav-hamburger .modal-body { overflow-x: hidden; }
.ac-nav-acc-root > .ac-acc-nav > summary { font-family: var(--ac-head); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
@media (prefers-reduced-motion: reduce) {
  .ac-mega, .ac-mega * { transition: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .head-main, .head-main *, .head-main *::before, .head-main *::after { transition: none !important; }
}

/* ---------------------------------------------------------------------
   4. Slider: paginacion como barras de progreso y Ken Burns suave
   --------------------------------------------------------------------- */
[data-store="home-slider"] .swiper-slide { overflow: hidden; }
[data-store="home-slider"] .swiper-pagination { display: flex; justify-content: center; gap: 6px; }
[data-store="home-slider"] .swiper-pagination-bullet {
  position: relative;
  width: 34px !important;
  height: 5px !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: rgba(0, 0, 0, .22) !important;
  opacity: 1 !important;
  overflow: hidden;
  transform: skewX(-20deg);
}
[data-store="home-slider"] .swiper-pagination-bullet::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ac-ink);
  transform-origin: 0 50%;
  transform: scaleX(0);
}
[data-store="home-slider"] .swiper-pagination-bullet-active::after { background: var(--ac-y); transform: scaleX(1); }
[data-store="home-slider"] .swiper-pagination-bullet-active { background: var(--ac-ink) !important; }
.ac-slider-auto [data-store="home-slider"] .swiper-pagination-bullet-active.ac-run::after {
  animation: ac-fill var(--ac-slide-delay) linear both;
}
@keyframes ac-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.ac-slider-auto [data-store="home-slider"] .swiper-slide-active .slider-image {
  animation: ac-kenburns calc(var(--ac-slide-delay) + 1500ms) ease-out both;
  transform-origin: 60% 50%;
}
@keyframes ac-kenburns { from { scale: 1; } to { scale: 1.045; } }

/* ---------------------------------------------------------------------
   4b. Slider de banners en video (snipplets/home/ac-video-slider.tpl)
   Poster siempre debajo; el video aparece cuando empieza a reproducirse.
   --------------------------------------------------------------------- */
.ac-vs { position: relative; }
.ac-vs__track {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1580 / 720;
  background: var(--ac-ink);
}
@media (max-width: 767px) { .ac-vs__track { aspect-ratio: 820 / 1000; } }
.ac-vs__slide {
  position: absolute;
  inset: 0;
  display: block;
  opacity: 0;
  visibility: hidden;
  transition: opacity .6s ease, visibility 0s linear .6s;
}
.ac-vs__slide.is-active { z-index: 1; opacity: 1; visibility: visible; transition-delay: 0s; }
.ac-vs__poster, .ac-vs__poster img, .ac-vs__video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ac-vs__video { opacity: 0; transition: opacity .35s ease; pointer-events: none; }
.ac-vs__video.is-playing { opacity: 1; }
.ac-vs__slide:focus-visible { outline: 4px solid var(--ac-y); outline-offset: -4px; }
/* Flechas: cuadros negros con esquina cortada */
.ac-vs__nav {
  position: absolute;
  top: calc(50% - 30px);
  z-index: 2;
  display: none;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 0;
  color: var(--ac-y);
  fill: var(--ac-y);
  background: var(--ac-ink);
  cursor: pointer;
  opacity: .85;
  transition: opacity var(--ac-fast) ease, background var(--ac-fast) ease;
}
.ac-vs__nav svg { fill: var(--ac-y); font-size: 18px; }
.ac-vs__nav--prev { left: 16px; clip-path: polygon(0 0, 100% 0, 100% 100%, 10px 100%, 0 calc(100% - 10px)); }
.ac-vs__nav--next { right: 16px; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%); }
.ac-vs__nav:hover, .ac-vs__nav:focus-visible { opacity: 1; background: #222; }
@media (min-width: 768px) { .ac-vs__nav { display: inline-flex; } }
.ac-vs__dots { position: relative; padding: 14px 0 6px; }
.ac-vs__dots .swiper-pagination-bullet { cursor: pointer; }
.ac-vs.is-paused .swiper-pagination-bullet::after { animation-play-state: paused !important; }

/* Banners de categorias: video sobre la imagen del admin */
.ac-tile-host { position: relative; display: block; overflow: hidden; }
.ac-tile-video {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  pointer-events: none;
  transform-origin: 50% 50%;
  transition: opacity .4s ease, scale var(--ac-slow) var(--ac-ease);
}
.ac-tile-video.is-playing { opacity: 1; }
[data-store="home-banner-categories"] .js-banner-item:hover .ac-tile-video { scale: 1.06; }
/* Modulo imagen + texto: la imagen va envuelta para poner el video encima */
.ac-mod-media { position: relative; display: block; overflow: hidden; }
.ac-mod-media > .textbanner-image { display: block; }
[data-store="home-image-text-module"] .gallery-link:hover .ac-tile-video { scale: 1.03; }

@media (prefers-reduced-motion: reduce) {
  .ac-vs__slide, .ac-vs__video, .ac-tile-video { transition: none !important; }
}

/* ---------------------------------------------------------------------
   5. micx: buscador y "LOS MEJORES PRECIOS" con el mismo idioma (solo CSS)
   --------------------------------------------------------------------- */
.micx-buscador .micx-tab {
  border-radius: 0 !important;
  transform: skewX(-12deg);
  font-family: var(--ac-head);
  letter-spacing: .04em;
}
.micx-buscador .micx-panel {
  border-radius: 0 !important;
  clip-path: polygon(var(--ac-cut-lg) 0, 100% 0, 100% calc(100% - var(--ac-cut-lg)), calc(100% - var(--ac-cut-lg)) 100%, 0 100%, 0 var(--ac-cut-lg));
}
.micx-buscador .micx-panel-titulo { font-family: var(--ac-head); letter-spacing: .02em; }
.micx-buscador select, .micx-buscador input { border-radius: 0 !important; }
.micx-buscador .micx-buscar {
  border-radius: 0 !important;
  font-family: var(--ac-head);
  text-transform: uppercase;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}
.micx-ofertas {
  position: relative;
  clip-path: polygon(0 var(--ac-slant), 100% 0, 100% 100%, 0 100%);
  padding-top: calc(var(--ac-slant) + 8px) !important;
}
.micx-ofertas .micx-ofertas-titulo { font-family: var(--ac-head); text-transform: uppercase; }
.micx-ofertas .micx-kicker { display: inline-block; padding: 4px 12px; border: 2px solid var(--ac-y); transform: skewX(-12deg); }
.micx-ofertas .micx-card {
  border-radius: 0 !important;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);
}
.micx-ofertas .micx-card-off { border-radius: 0 !important; transform: skewX(-12deg); }
.micx-ofertas .micx-btn, .micx-ofertas .micx-card-cta {
  border-radius: 0 !important;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}
.micx-ofertas .micx-nav { border-radius: 0 !important; }

/* ---------------------------------------------------------------------
   6. Marcas: gris a color al pasar, marco con esquina cortada amarilla
   --------------------------------------------------------------------- */
.section-brands-home .swiper-slide .gallery-item-container {
  position: relative;
  padding: 10px;
  background: linear-gradient(315deg, transparent 0 10px, var(--ac-w) 10.5px);
  box-shadow: inset 0 0 0 1px transparent;
  transition: background var(--ac-fast) ease;
}
.section-brands-home .brand-image {
  filter: grayscale(1);
  opacity: .72;
  transition: filter var(--ac-mid) ease, opacity var(--ac-mid) ease, scale var(--ac-mid) var(--ac-ease);
}
.section-brands-home .swiper-slide:hover .brand-image { filter: none; opacity: 1; scale: 1.04; }
.section-brands-home .swiper-slide:hover .gallery-item-container {
  background: linear-gradient(315deg, var(--ac-y) 0 14px, var(--ac-w) 14.5px);
}
@media (hover: none) { .section-brands-home .brand-image { filter: none; opacity: 1; } }

/* ---------------------------------------------------------------------
   7. Tarjetas de producto (solo estilo: el marcado es el del tema)
   --------------------------------------------------------------------- */
/* Arreglo del desborde en celular: las columnas "1fr" no bajaban de su
   ancho minimo (precio + "% OFF" en una fila sin corte = 189 px). */
.grid > * { min-width: 0; }
.product-item-price-container {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 8px;
  row-gap: 2px;
}
.product-item-price-container > .product-item-price-compare { flex: 0 0 100%; }
.product-item-discount { min-width: 0 !important; margin-left: 0 !important; }

.js-item-product.product-item {
  --ac-corner: var(--ac-w);
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 8px 8px 16px;
  background: linear-gradient(315deg, var(--ac-corner) 0 11px, var(--ac-paper) 11.5px) !important;
  transition: translate var(--ac-mid) var(--ac-ease), --ac-corner var(--ac-fast) ease;
}
.js-item-product.product-item:hover { --ac-corner: var(--ac-y); translate: 0 -3px; }
.js-item-product .product-item-image-container { background: var(--ac-w); }
.js-item-product .product-item-image {
  transform-origin: 50% 50%;
  transition: scale var(--ac-slow) var(--ac-ease), opacity var(--ac-mid) ease;
}
/* El tema centra la foto con left:50% + translateX(-50%): el scale se aplica
   despues del transform, asi que el origen va en el borde izquierdo de la caja
   sin trasladar (que es el centro de la foto ya trasladada). */
.js-item-product .product-item-image.img-absolute-centered { transform-origin: 0 50%; }
@media (hover: hover) {
  .js-item-product:hover .product-item-image { scale: 1.07; }
}
.js-item-product .product-item-information { flex: 1 1 auto; padding-left: 4px; padding-right: 4px; }
.js-item-product .product-item-name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  min-height: 2.5em;
  line-height: 1.25;
  font-size: 14px;
}
.js-item-product .product-item-price {
  font-family: var(--ac-head);
  font-size: 21px;
  letter-spacing: -.01em;
  line-height: 1.1;
}
.js-item-product .product-item-price-compare { color: var(--ac-mute); font-size: 12px; }
/* "% OFF": chip negro inclinado con texto amarillo */
.product-item-discount, .js-item-product .product-item-discount.text-accent {
  display: inline-block;
  padding: 2px 8px;
  font-family: var(--ac-head);
  font-size: 12px !important;
  font-weight: 700;
  color: var(--ac-y) !important;
  background: var(--ac-ink);
  transform: skewX(-12deg);
  transform-origin: 0 50%;
}
/* Cuotas: chip solo cuando hay cuotas */
.js-item-product .custom-installments:not(:has(.product-installments)) { display: none; }
.js-item-product .custom-installments .product-installments {
  display: inline-block;
  margin-top: 4px;
  padding: 2px 7px;
  font-size: 11px;
  line-height: 1.35;
  box-shadow: inset 0 0 0 1px var(--ac-line);
  background: var(--ac-w);
}
.js-item-product .custom-installments .installment-no-interest { box-shadow: inset 3px 0 0 var(--ac-y), inset 0 0 0 1px var(--ac-line); }
.js-item-product .labels .label { border-radius: 0; }
.js-item-product .text-stock, .js-item-product [class*="stock"] { color: var(--ac-ink); }

/* "Pop" del precio al entrar la tarjeta */
.ac-js .ac-reveal.is-in .product-item-price { animation: ac-pop .5s var(--ac-ease) both; animation-delay: calc(var(--ac-delay, 0ms) + 350ms); }
@keyframes ac-pop { 0% { scale: .86; } 60% { scale: 1.06; } 100% { scale: 1; } }

/* Titulo de destacados con barra amarilla inclinada */
.js-products-featured-title, .section-featured-home h2 {
  position: relative;
  font-family: var(--ac-head);
  text-transform: uppercase;
  padding-bottom: 12px;
}
.js-products-featured-title::after, .section-featured-home h2::after {
  content: "";
  position: absolute;
  left: 2px; bottom: 0;
  width: 72px; height: 6px;
  background: var(--ac-y);
  transform: skewX(-12deg);
}

/* ---------------------------------------------------------------------
   8. Banners de categorias: zoom con scale y leve inclinacion (mouse)
   --------------------------------------------------------------------- */
[data-store="home-banner-categories"] .js-banner-item .gallery-item-container {
  overflow: hidden;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%);
}
[data-store="home-banner-categories"] .textbanner-image {
  transform-origin: 50% 50%;
  transition: scale var(--ac-slow) var(--ac-ease), rotate var(--ac-slow) var(--ac-ease) !important;
}
[data-store="home-banner-categories"] .js-banner-item:hover .textbanner-image { scale: 1.06; }
/* Inclinacion con el mouse (solo puntero fino; la calcula el JS) */
@media (hover: hover) and (pointer: fine) {
  [data-store="home-banner-categories"] .js-banner-item .gallery-item-container { transition: transform .35s var(--ac-ease); }
  /* Solo mientras el mouse esta encima: sin capas 3D permanentes */
  [data-store="home-banner-categories"] .js-banner-item.ac-tilting .gallery-item-container {
    transform: perspective(900px) rotateX(var(--ac-rx, 0deg)) rotateY(var(--ac-ry, 0deg));
  }
}

/* ---------------------------------------------------------------------
   9. Banda de servicios: texto negro sobre amarillo, iconos en cuadros
      negros con esquina cortada, un fragmento que se mueve
   --------------------------------------------------------------------- */
.section-informative-banners-color {
  position: relative;
  overflow: hidden;
  background: var(--ac-y) !important;
  color: var(--ac-ink) !important;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--ac-slant)), 0 100%);
  padding-bottom: var(--ac-slant);
}
.section-informative-banners-color .js-informative-banners-container { position: relative; z-index: 1; }
.section-informative-banners-color h3 {
  color: var(--ac-ink) !important;
  font-family: var(--ac-head);
  font-size: 16px;
  letter-spacing: .03em;
}
.section-informative-banners-color [class*="js-informative-banner-icon"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  background: var(--ac-ink);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  transition: rotate var(--ac-mid) var(--ac-ease);
}
.section-informative-banners-color [class*="js-informative-banner-icon"] svg { fill: var(--ac-y) !important; width: 26px; height: 26px; }
.section-informative-banners-color .js-informative-banner-container:hover [class*="js-informative-banner-icon"] { rotate: -6deg; }
.section-informative-banners-color .swiper-pagination-bullet { border-color: var(--ac-ink) !important; }
.section-informative-banners-color .swiper-pagination-bullet-active { background: var(--ac-ink) !important; }
.section-informative-banners-color::before,
.section-informative-banners-color::after {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
}
.section-informative-banners-color::before {
  right: 4%; top: -20%;
  width: 260px; height: 160%;
  background: rgba(0, 0, 0, .08);
  clip-path: polygon(40% 0, 100% 0, 0 100%);
  animation: ac-drift 14s ease-in-out infinite alternate;
}
.section-informative-banners-color::after {
  left: 0; bottom: 0;
  width: 150px; height: 90px;
  background: var(--ac-ink);
  clip-path: polygon(0 30%, 100% 100%, 0 100%);
  opacity: .9;
}
@keyframes ac-drift { from { translate: 0 0; rotate: 0deg; } to { translate: -120px 10px; rotate: 4deg; } }

/* ---------------------------------------------------------------------
   10. Video: se colapsa solo si no hay reproductor (lo decide el JS)
   --------------------------------------------------------------------- */
.section-video-home.ac-video-empty { display: none; }

/* ---------------------------------------------------------------------
   11. Modulo imagen + texto
   --------------------------------------------------------------------- */
[data-store="home-image-text-module"] .gallery-title {
  font-family: var(--ac-head);
  text-transform: uppercase;
  position: relative;
  display: inline-block;
}
[data-store="home-image-text-module"] .gallery-title::after {
  content: "";
  display: block;
  width: 56px; height: 6px;
  margin: 10px auto 0;
  background: var(--ac-y);
  transform: skewX(-12deg);
}
[data-store="home-image-text-module"] .textbanner-image { transition: scale var(--ac-slow) var(--ac-ease) !important; }
[data-store="home-image-text-module"] .gallery-link:hover .textbanner-image { scale: 1.03; }

/* ---------------------------------------------------------------------
   12. Newsletter: banda negra con fragmentos amarillos
   --------------------------------------------------------------------- */
.section-newsletter-home {
  position: relative;
  overflow: hidden;
  margin-top: 24px;
  background: var(--ac-k);
  clip-path: polygon(0 var(--ac-slant), 100% 0, 100% 100%, 0 100%);
  padding-top: calc(var(--ac-slant) + 24px) !important;
  padding-bottom: 40px !important;
}
.section-newsletter-home .section-newsletter-home-colors,
.section-newsletter-home .home-background-container { background: transparent !important; color: var(--ac-w) !important; }
.section-newsletter-home .js-home-newsletter { position: relative; z-index: 1; }
.section-newsletter-home .newsletter { text-align: center; }
.section-newsletter-home .js-home-newsletter-title {
  font-family: var(--ac-head);
  font-size: clamp(38px, 7vw, 88px) !important;
  line-height: .95;
  letter-spacing: -.01em;
  text-transform: uppercase;
  color: var(--ac-w) !important;
}
.section-newsletter-home .js-home-newsletter-text { color: rgba(255, 255, 255, .82) !important; max-width: 560px; margin-left: auto !important; margin-right: auto !important; }
.section-newsletter-home form { max-width: 560px; margin-left: auto; margin-right: auto; }
.section-newsletter-home .input-append {
  display: flex;
  align-items: stretch;
  background: var(--ac-w);
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
}
.section-newsletter-home .input-append .form-group { flex: 1 1 auto; margin: 0; }
.section-newsletter-home .input-append .form-control {
  height: 56px;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--ac-w) !important;
  color: var(--ac-ink) !important;
  padding-left: 22px;
  font-size: 16px;
}
.section-newsletter-home .input-append .btn {
  position: relative;
  flex: none;
  height: 56px;
  min-width: 130px;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--ac-y) !important;
  color: var(--ac-ink) !important;
  font-family: var(--ac-head);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  clip-path: polygon(14px 0, 100% 0, 100% 100%, 0 100%);
  transition: background var(--ac-fast) ease;
}
.section-newsletter-home .input-append .btn:hover, .section-newsletter-home .input-append .btn:focus-visible { background: var(--ac-y-hot) !important; }
.section-newsletter-home .alert { border-radius: 0; }
.section-newsletter-home::before,
.section-newsletter-home::after {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  background: var(--ac-y-hot);
}
.section-newsletter-home::before {
  left: -40px; bottom: -10px;
  width: 280px; height: 200px;
  clip-path: polygon(0 20%, 100% 100%, 0 100%);
}
.section-newsletter-home::after {
  right: 6%; top: calc(var(--ac-slant) + 10px);
  width: 120px; height: 120px;
  clip-path: polygon(100% 0, 100% 100%, 0 0);
  opacity: .95;
}
@media (max-width: 767px) {
  .section-newsletter-home::after { right: 0; top: calc(var(--ac-slant) - 4px); width: 56px; height: 56px; }
  .section-newsletter-home::before { width: 160px; height: 110px; }
}
.ac-js .section-newsletter-home:not(.ac-in)::before { translate: -60px 40px; opacity: 0; }
.ac-js .section-newsletter-home:not(.ac-in)::after { translate: 40px -30px; opacity: 0; }
.section-newsletter-home::before, .section-newsletter-home::after { transition: translate 1.1s var(--ac-ease), opacity 1.1s ease; }

/* ---------------------------------------------------------------------
   13. Pie: borde superior en diagonal y un fragmento
   --------------------------------------------------------------------- */
footer.js-footer { position: relative; }
footer.js-footer::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -1px;
  height: 26px;
  background: var(--ac-y);
  clip-path: polygon(0 0, 38% 0, 34% 100%, 0 0);
  pointer-events: none;
}
.template-home footer.js-footer::before { display: none; }

/* ---------------------------------------------------------------------
   14. Producto: caja de compra
   --------------------------------------------------------------------- */
.js-product-detail .js-price-display {
  font-family: var(--ac-head) !important;
  font-size: clamp(34px, 3.4vw, 44px) !important;
  font-weight: 700 !important;
  letter-spacing: -.015em;
  line-height: 1;
}
.js-product-detail .js-price-container .d-flex > span.text-accent {
  display: inline-block;
  padding: 3px 10px;
  font-family: var(--ac-head) !important;
  font-weight: 700;
  color: var(--ac-y) !important;
  background: var(--ac-ink);
  transform: skewX(-12deg);
}
.js-product-detail .js-price-container .price-compare { color: var(--ac-mute); }
.js-product-detail .js-saved-money-message .text-accent { color: var(--ac-ink) !important; }
.js-product-detail .js-offer-saved-money { font-weight: 700; }
/* Cuotas: caja solo si hay cuotas */
.js-product-detail .js-max-installments-container:has(.product-installments) {
  display: inline-block;
  padding: 8px 14px 8px 16px;
  background: var(--ac-paper);
  box-shadow: inset 4px 0 0 var(--ac-ink);
}
.js-product-detail .js-max-installments-container:has(.installment-no-interest) { box-shadow: inset 4px 0 0 var(--ac-y); }
.js-product-detail .product-installment-value { font-weight: 700; }
/* Linea de envio gratis del tema + retiro gratis */
.js-product-detail .js-free-shipping-minimum-message .text-accent,
.ac-perk strong {
  color: var(--ac-ink) !important;
  font-weight: 700;
  background: linear-gradient(transparent 55%, var(--ac-y) 55%);
}
.ac-perks { display: grid; gap: 8px; margin: 0 0 18px; padding: 0; list-style: none; }
.ac-perk { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.35; }
.ac-perk svg { flex: none; width: 22px; height: 22px; fill: none; stroke: var(--ac-ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.js-product-detail .text-stock { color: var(--ac-ink); font-weight: 700; }
/* Boton de WhatsApp que agrega micx: mismo idioma, sin duplicarlo */
.micx-wa-btn {
  position: relative;
  z-index: 0;
  overflow: hidden;
  border-radius: 0 !important;
  border: 0 !important;
  box-shadow: inset 0 0 0 2px var(--ac-ink) !important;
  color: var(--ac-ink) !important;
  background: var(--ac-w) !important;
  font-family: var(--ac-head);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}
.micx-wa-btn svg { fill: #1faa53 !important; }
.micx-wa-btn::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 -20%;
  background: var(--ac-y);
  transform: skewX(-20deg);
  translate: -115% 0;
  transition: translate var(--ac-mid) var(--ac-ease);
}
.micx-wa-btn:hover::before, .micx-wa-btn:focus-visible::before { translate: 0 0; }
/* Ficha de micx: esquinas rectas como el resto */
.micx-ficha { border-radius: 0 !important; }
.micx-ficha .micx-chip { border-radius: 0 !important; }

/* ---------------------------------------------------------------------
   15. Producto: ficha (datos, compatibilidad) y acordeones
   --------------------------------------------------------------------- */
.ac-sheet { margin: 8px 0 24px; }
.ac-sheet__slot:empty { display: none; }
.ac-sheet__lead { font-size: 17px; line-height: 1.45; margin-bottom: 18px; }
.ac-sheet__block { margin: 0 0 26px; }
.ac-sheet__title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 12px;
  font-family: var(--ac-head);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.ac-sheet__title::before {
  content: "";
  width: 14px; height: 14px;
  background: var(--ac-y);
  clip-path: polygon(0 0, 100% 0, 0 100%);
  box-shadow: none;
}
.ac-sheet__count {
  margin-left: auto;
  padding: 2px 10px;
  font-size: 12px;
  color: var(--ac-y);
  background: var(--ac-ink);
  transform: skewX(-12deg);
}
.ac-specs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 1px;
  margin: 0;
  padding: 1px;
  background: var(--ac-ink);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--ac-cut)), calc(100% - var(--ac-cut)) 100%, 0 100%);
}
.ac-spec { margin: 0; padding: 12px 14px; background: var(--ac-w); min-width: 0; }
.ac-spec dt {
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ac-mute);
}
.ac-spec dd { margin: 0; font-family: var(--ac-head); font-size: 17px; font-weight: 700; overflow-wrap: anywhere; }
.ac-spec--key { background: var(--ac-y); }
.ac-spec--key dt { color: var(--ac-ink); }
.ac-compat { width: 100%; border-collapse: collapse; font-size: 14px; }
.ac-compat th {
  padding: 10px 12px;
  text-align: left;
  font-family: var(--ac-head);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ac-y);
  background: var(--ac-ink);
}
.ac-compat td { padding: 10px 12px; border-bottom: 1px solid var(--ac-line); vertical-align: top; }
.ac-compat tbody tr:nth-child(even) td { background: var(--ac-paper); }
.ac-compat td:first-child { font-weight: 700; }
.ac-compat tr.ac-more-row[hidden] { display: none; }
.ac-compat-more { margin-top: 10px; }
.ac-sheet__note { margin: 10px 0 0; font-size: 13px; color: var(--ac-mute); }
.ac-sheet__note a { color: var(--ac-ink); font-weight: 700; }
@media (max-width: 575px) {
  .ac-compat thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
  .ac-compat, .ac-compat tbody, .ac-compat tr, .ac-compat td { display: block; width: 100%; }
  .ac-compat tr { padding: 10px 12px; border-left: 4px solid var(--ac-y); margin-bottom: 8px; background: var(--ac-paper); }
  .ac-compat tbody tr:nth-child(even) td { background: transparent; }
  .ac-compat td { padding: 2px 0; border: 0; }
  .ac-compat td[data-label]:not(:first-child)::before { content: attr(data-label) ": "; font-weight: 700; font-size: 12px; color: var(--ac-mute); }
}
.ac-desc-empty { display: none !important; }

/* Acordeon: item con esquina cortada, numero en chip amarillo, abierto en negro */
.ac-acc {
  --c: 12px;
  margin: 0 0 8px;
  background: var(--ac-paper);
  clip-path: polygon(0 0, calc(100% - var(--c)) 0, 100% var(--c), 100% 100%, 0 100%);
  transition: background var(--ac-fast) ease, color var(--ac-fast) ease;
}
.ac-acc__sum {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px 14px 14px;
  cursor: pointer;
  list-style: none;
  font-weight: 700;
  line-height: 1.3;
}
.ac-acc__sum::-webkit-details-marker { display: none; }
.ac-acc__sum:focus-visible { outline: 3px solid var(--ac-y); outline-offset: -3px; }
.ac-acc__n {
  flex: none;
  min-width: 38px;
  padding: 3px 6px;
  text-align: center;
  font-family: var(--ac-head);
  font-size: 13px;
  color: var(--ac-ink);
  background: var(--ac-y);
  transform: skewX(-12deg);
}
.ac-acc__q { flex: 1 1 auto; }
.ac-acc__ico { position: relative; flex: none; width: 16px; height: 16px; }
.ac-acc__ico::before, .ac-acc__ico::after {
  content: "";
  position: absolute;
  left: 0; top: 7px;
  width: 16px; height: 2px;
  background: currentColor;
  transition: rotate var(--ac-mid) var(--ac-ease);
}
.ac-acc__ico::after { rotate: 90deg; }
.ac-acc[open] { background: var(--ac-ink); color: var(--ac-w); }
.ac-acc[open] .ac-acc__ico::after { rotate: 0deg; }
.ac-acc__sum:hover .ac-acc__n { background: var(--ac-y-hot); }
.ac-acc__body { padding: 0 18px 16px 66px; color: inherit; }
.ac-acc__body p { margin: 0 0 8px; line-height: 1.55; }
.ac-acc[open] .ac-acc__body a { color: var(--ac-y); font-weight: 700; }
.ac-acc__body a { color: var(--ac-ink); font-weight: 700; }
.ac-acc__links { display: flex; flex-wrap: wrap; gap: 16px; }
.ac-acc[open] .ac-acc__body { animation: ac-acc-in var(--ac-mid) var(--ac-ease) both; }
@keyframes ac-acc-in { from { opacity: 0; translate: 0 -6px; } to { opacity: 1; translate: 0 0; } }
@media (max-width: 575px) { .ac-acc__body { padding-left: 18px; } }

/* ---------------------------------------------------------------------
   16. Paginas propias: Quiénes somos y Preguntas frecuentes
   --------------------------------------------------------------------- */
.ac-page { overflow: hidden; }
.ac-page .breadcrumbs, .ac-page .breadcrumbs a, .ac-page .breadcrumbs .crumb { color: rgba(255, 255, 255, .7); }
.ac-page .breadcrumbs .crumb.active { color: var(--ac-y); }

.ac-hero {
  position: relative;
  overflow: hidden;
  padding: 26px 0 calc(var(--ac-slant) + 64px);
  color: var(--ac-w);
  background: var(--ac-k);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--ac-slant)), 0 100%);
}
.ac-hero__inner { position: relative; z-index: 2; }
.ac-hero__title {
  margin: 0 0 14px;
  font-family: var(--ac-head);
  font-size: clamp(40px, 6.4vw, 84px);
  font-weight: 700;
  line-height: .95;
  letter-spacing: -.02em;
  text-transform: uppercase;
  color: var(--ac-w);
}
.ac-hero__tagline {
  margin: 0 0 14px;
  font-family: var(--ac-head);
  font-size: clamp(20px, 2.3vw, 28px);
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--ac-w);
}
.ac-hero__lead { max-width: 620px; margin: 0; font-size: 16px; line-height: 1.6; color: rgba(255, 255, 255, .82); }
.ac-hero__word {
  position: absolute;
  z-index: 1;
  right: -2vw;
  bottom: calc(var(--ac-slant) - 2vw);
  margin: 0;
  font-family: var(--ac-head);
  font-size: clamp(90px, 19vw, 300px);
  font-weight: 700;
  line-height: .8;
  letter-spacing: -.03em;
  color: transparent;
  -webkit-text-stroke: 2px rgba(255, 203, 0, .28);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}
.ac-hero__grid { display: grid; gap: 28px; align-items: center; margin-top: 18px; }
@media (min-width: 992px) { .ac-hero__grid { grid-template-columns: 1.5fr 1fr; } }
.ac-hero__logo { display: flex; justify-content: flex-start; }
@media (min-width: 992px) { .ac-hero__logo { justify-content: center; } }
.ac-hero__logo img, .ac-hero__logo-img { mix-blend-mode: lighten; display: block; width: min(320px, 70vw) !important; height: auto !important; max-height: none !important; }
.ac-hero__logo-plate { padding: 22px 26px; background: var(--ac-y); clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px); }
.ac-hero__logo-plate h1 { display: none; }
.ac-hero--about .ac-hero__logo { position: relative; }
.ac-hero--about .ac-hero__logo::before {
  content: "";
  position: absolute;
  inset: -10% 8%;
  z-index: -1;
  background: var(--ac-y);
  opacity: .12;
  clip-path: polygon(50% 0, 100% 100%, 0 70%);
}
.ac-hero .ac-shard--a { top: 0; right: 0; width: 30vw; max-width: 420px; height: 130px; clip-path: polygon(0 0, 100% 0, 100% 100%); }
.ac-hero .ac-shard--b { top: 150px; right: 0; width: 120px; height: 170px; clip-path: polygon(100% 0, 100% 100%, 0 50%); background: var(--ac-w); opacity: .9; }
.ac-hero .ac-shard--c { bottom: calc(var(--ac-slant) + 4px); right: 30%; width: 80px; height: 80px; clip-path: polygon(0 100%, 100% 0, 100% 100%); }
.ac-hero .ac-shard--d { top: 58%; left: -20px; width: 70px; height: 110px; clip-path: polygon(0 0, 100% 50%, 0 100%); background: var(--ac-w); }
.ac-js .is-shards-in .ac-shard--b, .ac-js .is-shards-in .ac-shard--d { opacity: .85; }
@media (max-width: 767px) {
  .ac-hero .ac-shard--b { width: 70px; height: 100px; top: 10px; }
  .ac-hero .ac-shard--c { left: 70%; width: 60px; height: 60px; }
  .ac-hero .ac-shard--a { height: 60px; }
}

.ac-band { position: relative; padding: 64px 0; }
.ac-band--dark { background: var(--ac-k); color: var(--ac-w); }
.ac-head { margin-bottom: 26px; }
.ac-about__content { padding: 32px 0 0; }

/* Cifras */
.ac-nums { position: relative; z-index: 3; margin-top: calc(var(--ac-slant) * -.6); }
.ac-nums__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px;
}
@media (min-width: 768px) { .ac-nums__row { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ac-num {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px 18px 20px;
  background: var(--ac-y);
  color: var(--ac-ink);
  min-width: 0;
}
.ac-num:nth-child(even) { background: var(--ac-w); box-shadow: inset 0 0 0 2px var(--ac-ink); }
.ac-num:first-child { clip-path: polygon(14px 0, 100% 0, 100% 100%, 0 100%, 0 14px); }
.ac-num:last-child { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%); }
.ac-num__value { font-family: var(--ac-head); font-size: clamp(30px, 4vw, 50px); font-weight: 700; line-height: 1; }
.ac-num__value--text { font-size: clamp(22px, 2.6vw, 32px); padding-top: .25em; }
.ac-num__label { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }

/* Que hacemos: categorias */
.ac-cats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 30px;
  padding: 0;
  list-style: none;
}
@media (min-width: 768px) { .ac-cats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ac-cat {
  --ac-corner: transparent;
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  min-height: 108px;
  height: 100%;
  padding: 16px;
  color: var(--ac-ink) !important;
  text-decoration: none !important;
  background: linear-gradient(315deg, var(--ac-corner) 0 13px, var(--ac-paper) 13.5px);
  transition: background var(--ac-fast) ease, color var(--ac-fast) ease, translate var(--ac-mid) var(--ac-ease);
  overflow: hidden;
}
.ac-cat::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 46px; height: 46px;
  background: var(--ac-ink);
  clip-path: polygon(0 0, 100% 0, 0 100%);
  transition: background var(--ac-fast) ease, width var(--ac-mid) var(--ac-ease), height var(--ac-mid) var(--ac-ease);
}
.ac-cat__name { position: relative; font-family: var(--ac-head); font-size: 18px; font-weight: 700; line-height: 1.1; text-transform: uppercase; }
.ac-cat__go { position: relative; flex: none; width: 22px; height: 2px; margin-bottom: 8px; background: currentColor; }
.ac-cat__go::after { content: ""; position: absolute; right: 0; top: -4px; width: 10px; height: 10px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; rotate: 45deg; }
.ac-cat:hover, .ac-cat:focus-visible { --ac-corner: var(--ac-y); background: linear-gradient(315deg, var(--ac-y) 0 13px, var(--ac-ink) 13.5px); color: var(--ac-w) !important; translate: 0 -3px; }
.ac-cat:hover::before, .ac-cat:focus-visible::before { background: var(--ac-y); width: 64px; height: 64px; }
.ac-brands { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.ac-brands__label { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ac-mute); }
.ac-brands__list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ac-brands__list a {
  display: inline-block;
  padding: 6px 12px;
  font-family: var(--ac-head);
  font-weight: 700;
  color: var(--ac-ink) !important;
  text-decoration: none !important;
  box-shadow: inset 0 0 0 1px var(--ac-line);
  transition: background var(--ac-fast) ease, box-shadow var(--ac-fast) ease;
}
.ac-brands__list a:hover { background: var(--ac-y); box-shadow: inset 0 0 0 1px var(--ac-ink); }

/* Mosaico de productos */
.ac-mosaic-band { padding: 12px 0 64px; }
.ac-mosaic {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 768px) {
  .ac-mosaic { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ac-mosaic--n6, .ac-mosaic--n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* Con 5 fotos: una grande y cuatro chicas llenan dos filas justas */
  .ac-mosaic--n5 .ac-mosaic__item:first-child { grid-column: span 2; grid-row: span 2; }
}
.ac-mosaic__link {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--ac-w);
  box-shadow: inset 0 0 0 1px var(--ac-line);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%);
}
.ac-mosaic__link img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 8%;
  transform-origin: 50% 50%;
  transition: scale var(--ac-slow) var(--ac-ease);
}
.ac-mosaic__link:hover img { scale: 1.07; }
.ac-mosaic__link::after {
  content: "";
  position: absolute;
  right: 0; bottom: 0;
  width: 0; height: 0;
  background: var(--ac-y);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  transition: width var(--ac-mid) var(--ac-ease), height var(--ac-mid) var(--ac-ease);
}
.ac-mosaic__link:hover::after { width: 60px; height: 60px; }
.ac-mosaic__name {
  position: absolute;
  left: 0; right: 30px; bottom: 0;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--ac-w);
  background: var(--ac-ink);
  translate: 0 101%;
  transition: translate var(--ac-mid) var(--ac-ease);
}
.ac-mosaic__link:hover .ac-mosaic__name, .ac-mosaic__link:focus-visible .ac-mosaic__name { translate: 0 0; }
@media (hover: none) { .ac-mosaic__name { translate: 0 0; font-size: 11px; } }

/* Como comprar */
.ac-steps-band { clip-path: polygon(0 var(--ac-slant), 100% 0, 100% calc(100% - var(--ac-slant)), 0 100%); padding: calc(var(--ac-slant) + 40px) 0 calc(var(--ac-slant) + 40px); overflow: hidden; }
.ac-steps-band .ac-shard--e { right: -30px; top: 30%; width: 240px; height: 240px; clip-path: polygon(100% 0, 100% 100%, 0 100%); opacity: .95; }
.ac-steps {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 2px;
  margin: 0 0 26px;
  padding: 0;
  list-style: none;
  counter-reset: none;
}
@media (min-width: 768px) { .ac-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .ac-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ac-step { padding: 22px 20px 24px; background: #161616; min-width: 0; box-shadow: inset 0 3px 0 var(--ac-y); }
.ac-step__n {
  display: inline-block;
  margin-bottom: 14px;
  padding: 3px 10px;
  font-family: var(--ac-head);
  font-weight: 700;
  color: var(--ac-ink);
  background: var(--ac-y);
  transform: skewX(-12deg);
}
.ac-step__title { margin: 0 0 8px; font-family: var(--ac-head); font-size: 20px; font-weight: 700; line-height: 1.1; text-transform: uppercase; color: var(--ac-w); }
.ac-step__text { margin: 0; font-size: 14px; line-height: 1.55; color: rgba(255, 255, 255, .8); }

/* Contacto */
.ac-contact__grid { display: grid; gap: 24px; align-items: stretch; }
@media (min-width: 992px) { .ac-contact__grid { grid-template-columns: 1.4fr 1fr; } }
.ac-contact__list { display: grid; gap: 0; margin: 0 0 14px; padding: 0; list-style: none; }
.ac-contact__list li { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--ac-line); }
.ac-contact__list a { color: var(--ac-ink); font-weight: 700; overflow-wrap: anywhere; }
.ac-contact__k { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ac-mute); padding-top: 3px; }
.ac-contact__note { margin: 0; font-size: 14px; color: var(--ac-mute); }
.ac-contact__hours { display: grid; gap: 10px; align-content: center; }
.ac-hours {
  display: grid;
  gap: 4px;
  padding: 20px 22px;
  background: var(--ac-ink);
  color: var(--ac-w);
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
}
.ac-hours:nth-child(2) { background: var(--ac-y); color: var(--ac-ink); }
.ac-hours__k { font-family: var(--ac-head); font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.ac-hours:first-child .ac-hours__k { color: var(--ac-y); }
.ac-hours__v { font-family: var(--ac-head); font-size: 22px; font-weight: 700; line-height: 1.15; }

/* Cierre */
.ac-cta {
  position: relative;
  overflow: hidden;
  padding: calc(var(--ac-slant) + 36px) 0 56px;
  background: var(--ac-y);
  clip-path: polygon(0 0, 100% var(--ac-slant), 100% 100%, 0 100%);
  text-align: center;
}
.ac-cta__inner { position: relative; z-index: 1; }
.ac-cta__title { margin: 0; font-family: var(--ac-head); font-size: clamp(34px, 5.6vw, 72px); font-weight: 700; line-height: .95; text-transform: uppercase; color: var(--ac-ink); }
.ac-cta__text { margin: 6px 0 24px; font-family: var(--ac-head); font-size: clamp(18px, 2.2vw, 26px); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.ac-cta__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.ac-cta .ac-btn--light::before { background: var(--ac-ink); }
.ac-cta .ac-btn--light:hover { color: var(--ac-y) !important; }
.ac-cta .ac-btn--dark::before { background: var(--ac-w); }
.ac-cta .ac-shard--f { left: 0; top: 0; width: 200px; height: 100%; background: var(--ac-ink); clip-path: polygon(0 20%, 60% 100%, 0 100%); }
.ac-cta .ac-shard--g { right: 0; top: 0; width: 260px; height: 100%; background: var(--ac-w); clip-path: polygon(100% 30%, 100% 100%, 40% 100%); opacity: .7; }

/* FAQ */
.ac-hero--faq { padding-bottom: calc(var(--ac-slant) + 36px); }
.ac-search {
  position: relative;
  display: flex;
  align-items: center;
  max-width: 620px;
  margin-top: 22px;
  background: var(--ac-w);
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
}
.ac-search svg { position: absolute; left: 18px; width: 22px; height: 22px; fill: none; stroke: var(--ac-ink); stroke-width: 2; pointer-events: none; }
.ac-search input {
  width: 100%;
  height: 58px;
  padding: 0 18px 0 54px;
  border: 0;
  border-radius: 0;
  font-size: 16px;
  color: var(--ac-ink);
  background: transparent;
  box-shadow: inset 0 -4px 0 transparent;
  transition: box-shadow var(--ac-fast) ease;
}
.ac-search input:focus { outline: none; box-shadow: inset 0 -4px 0 var(--ac-y); }
.ac-faq__wrap { padding-top: 30px; padding-bottom: 64px; }
.ac-faq__layout { display: grid; gap: 30px; }
@media (min-width: 992px) { .ac-faq__layout { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; } }
.ac-faq__tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.ac-faq__index { display: flex; flex-wrap: wrap; gap: 8px 10px; }
.ac-faq__index .ac-chip { margin: 0; }
.ac-faq__empty { padding: 16px 18px; background: var(--ac-paper); box-shadow: inset 4px 0 0 var(--ac-y); }
.ac-faq__group { margin: 0 0 34px; scroll-margin-top: calc(var(--ac-head-h) + 16px); }
.ac-faq__group[hidden] { display: none; }
.ac-faq__group-title { font-size: clamp(24px, 2.6vw, 32px); }
.ac-faq__group-title span { position: relative; z-index: 0; }
.ac-faq__group-title span::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: -4px; right: -8px; bottom: .05em;
  height: .36em;
  background: var(--ac-y);
  transform: skewX(-12deg);
}
.ac-faq .ac-acc { scroll-margin-top: calc(var(--ac-head-h) + 16px); }
.ac-faq .ac-acc[hidden] { display: none; }
.ac-faq__side { position: relative; }
@media (min-width: 992px) { .ac-faq__side { position: sticky; top: calc(var(--ac-head-h) + 20px); } }
.ac-help {
  position: relative;
  overflow: hidden;
  padding: 26px 24px 24px;
  background: var(--ac-y);
  color: var(--ac-ink);
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%);
}
.ac-help > * { position: relative; z-index: 1; }
.ac-help .ac-shard--help { z-index: 0; right: -10px; bottom: -10px; width: 140px; height: 120px; background: var(--ac-ink); opacity: .1; clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.ac-help__title { margin: 0; font-family: var(--ac-head); font-size: 28px; font-weight: 700; line-height: 1; text-transform: uppercase; }
.ac-help__text { margin: 6px 0 18px; font-weight: 700; }
.ac-help .ac-btn { width: 100%; }
.ac-help .ac-btn--dark::before { background: var(--ac-w); }
.ac-help__lines { margin: 18px 0 0; padding: 0; list-style: none; font-size: 14px; }
.ac-help__lines li { padding: 6px 0; border-top: 1px solid rgba(0, 0, 0, .18); }
.ac-help__lines a { color: var(--ac-ink); font-weight: 700; }

/* ---------------------------------------------------------------------
   17. Aparicion: barrido en diagonal + 14 px, escalonado
   (la clase ac-reveal la pone el JS; sin JS todo se ve)
   --------------------------------------------------------------------- */
.ac-js .ac-reveal:not(.is-in) {
  opacity: 0;
  clip-path: polygon(0 0, 0 0, -14% 100%, -14% 100%);
  translate: 0 14px;
}
.ac-js .ac-reveal.is-in {
  animation: ac-wipe var(--ac-slow) var(--ac-ease) backwards;
  animation-delay: var(--ac-delay, 0ms);
}
@keyframes ac-wipe {
  from { opacity: 1; clip-path: polygon(0 0, 0 0, -14% 100%, -14% 100%); translate: 0 14px; }
  to { opacity: 1; clip-path: polygon(0 0, 114% 0, 100% 100%, -14% 100%); translate: 0 0; }
}

/* ---------------------------------------------------------------------
   18. Movimiento reducido: nada se mueve, todo visible
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .ac-js .ac-reveal, .ac-js .ac-reveal:not(.is-in) { opacity: 1 !important; clip-path: none !important; translate: none !important; animation: none !important; }
  .ac-shard, .ac-js .ac-shard { opacity: 1 !important; translate: none !important; rotate: none !important; transition: none !important; }
  .ac-js .section-newsletter-home:not(.ac-in)::before, .ac-js .section-newsletter-home:not(.ac-in)::after { opacity: 1; translate: none; }
  .section-informative-banners-color::before { animation: none; }
  [data-store="home-slider"] .slider-image, .ac-slider-auto [data-store="home-slider"] .swiper-slide-active .slider-image { animation: none !important; }
  [data-store="home-slider"] .swiper-pagination-bullet::after { animation: none !important; }
  .ac-acc[open] .ac-acc__body, .ac-js .ac-reveal.is-in .product-item-price { animation: none !important; }
  .ac-btn::before, .btn-primary::before, .micx-wa-btn::before { transition: none; }
  .js-item-product.product-item, .js-item-product .product-item-image, .ac-mosaic__link img, .ac-cat,
  [data-store="home-banner-categories"] .textbanner-image, .section-brands-home .brand-image { transition: none !important; }
  .js-item-product.product-item:hover, .ac-cat:hover { translate: none; }
  .js-item-product:hover .product-item-image, [data-store="home-banner-categories"] .js-banner-item:hover .textbanner-image, .ac-mosaic__link:hover img { scale: none !important; }
}

/* Boton de compra: texto en una linea en la columna angosta */
.js-product-detail input.js-addtocart { font-size: 14px; letter-spacing: .02em; padding-left: 12px; padding-right: 12px; white-space: normal; }

/* Logo amarillo nitido de Quienes somos: PNG/WebP transparente, sin el
   mix-blend-mode que necesitaba el JPG con fondo negro. 320px de ancho
   maximo: el archivo mide 371px, asi nunca se estira. */
.ac-hero__logo .ac-hero__logo-img--nitido{ mix-blend-mode:normal; width:min(320px, 70vw) !important; height:auto !important; }