/* PZ Home v3 — bust cache: género 1 por fila en mobile 2026-09-07 */
:root {
  --pzhome-ink: #222;
  --pzhome-muted: #6b6b6b;
  --pzhome-gap: 10px;
  --pzhome-max: 1530px;
  --pzhome-pad: 12px;
  --pzhome-font: "Montserrat", "Segoe UI", system-ui, sans-serif;
}

.pzhome {
  font-family: var(--pzhome-font);
  color: var(--pzhome-ink);
  margin: 0 auto;
  max-width: 100%;
  position: relative;
  box-sizing: border-box;
}

.pzhome *,
.pzhome *::before,
.pzhome *::after {
  box-sizing: border-box;
}

.pzhome img:not(.pzhome-hero__img):not(.pzhome-hero__layer-img):not(.pzhome-hero__cta-off):not(.pzhome-hero__cta-on):not(.pzhome-hero__nav-img) {
  max-width: 100%;
  height: auto;
  vertical-align: top;
}

/* —— Skeleton de carga ——
   El fondo va DETRÁS del <img>: mientras no llega la imagen se ve el
   shimmer/color; en cuanto la imagen pinta, la tapa entera (por eso el
   shimmer animado solo se usa en piezas opacas de borde a borde — hero,
   género, destacados). Los íconos/logos son PNG con transparencia
   (padding alrededor del dibujo), así que ahí un shimmer en movimiento
   quedaría visible para siempre asomando por los bordes; se les pone un
   fondo neutro fijo en vez de animación. */
@keyframes pzhome-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.pzhome-tile--gender img,
.pzhome-tile--banner img {
  background: linear-gradient(100deg, #e6e5e2 30%, #f3f2f0 50%, #e6e5e2 70%);
  background-size: 200% 100%;
  animation: pzhome-shimmer 1.8s ease-in-out infinite;
}

.pzhome-tile--cat img,
.pzhome-tile--brand img,
.pzhome-grid--cols-3-mix > .pzhome-tile--wide img,
.pzhome-grid--cols-3-mix > .pzhome-tile--narrow img {
  background: #f4f3f1;
}

@media (prefers-reduced-motion: reduce) {
  .pzhome-tile--gender img,
  .pzhome-tile--banner img {
    animation: none;
    background: #f4f3f1;
  }

  .pzhome-tile--cat img {
    transition: none;
  }

  .pzhome-logos__item img {
    transition: none;
  }

  .pzhome-logos__item:hover img {
    transform: none;
  }
}

.pzhome-empty {
  padding: 2rem;
  text-align: center;
  color: var(--pzhome-muted);
}

.pzhome-shell {
  width: 100%;
  max-width: var(--pzhome-max);
  margin: 0 auto;
  padding: 0 var(--pzhome-pad);
}

.pzhome-content {
  display: block;
}

/* —— Quick nav —— */
.pzhome-quick {
  width: 100%;
  padding: 8px 0 10px;
  margin: 0;
}

.pzhome-quick__inner {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap;
  justify-content: flex-end;
  align-items: center;
  gap: 0;
  width: 100%;
  margin: 0;
  padding: 0;
}

.pzhome-quick__inner a {
  display: inline-block;
  color: #666 !important;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-decoration: none !important;
  text-transform: uppercase;
  padding: 4px 12px;
  white-space: nowrap;
  line-height: 1.2;
}

.pzhome-quick__inner a:hover {
  color: #111 !important;
}

.pzhome-quick__sep {
  color: #bbb;
  font-size: 0.7rem;
  padding: 0 2px;
  user-select: none;
}

/* —— Hero: layout/sizing en views/assets/css/hero-slider.css —— */

/* —— Responsive img desk/mob —— */
.pzhome-img--desk {
  display: block;
}

.pzhome-img--mob {
  display: none;
}

@media (max-width: 767px) {
  .pzhome-img--desk {
    display: none !important;
  }

  .pzhome-img--mob {
    display: block !important;
  }
}

/* Destacadas desk: fila 4 (col-25) + fila 3 (col-33), como Elementor test-home-pz */
.pzhome-grid--featured-brands {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--pzhome-gap);
  width: 100%;
}

.pzhome-grid--featured-brands > .pzhome-tile--brand-featured:nth-child(-n+4) {
  grid-column: span 3;
}

.pzhome-grid--featured-brands > .pzhome-tile--brand-featured:nth-child(n+5) {
  grid-column: span 4;
}

.pzhome-tile--brand-featured {
  border-radius: 12px;
  overflow: hidden;
  background: #f4f3f1;
}

.pzhome-tile--brand-featured img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 390 / 436;
  display: block;
  object-fit: cover;
  background: #f4f3f1;
}

@media (max-width: 992px) {
  .pzhome-grid--featured-brands {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pzhome-grid--featured-brands > .pzhome-tile--brand-featured:nth-child(-n+4),
  .pzhome-grid--featured-brands > .pzhome-tile--brand-featured:nth-child(n+5) {
    grid-column: auto;
  }
}

/* Mobile (mismo corte que .pzhome-img--mob): 2+1 en la fila MJUS/Felmini/Saverio.
   Saverio_MOBILE es 814×437 (landscape); no heredar el ratio vertical del desk. */
@media (max-width: 767px) {
  .pzhome-grid--featured-brands {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pzhome-grid--featured-brands > .pzhome-tile--brand-featured {
    grid-column: auto;
  }

  .pzhome-tile--brand-featured .pzhome-img--mob {
    aspect-ratio: 390 / 436;
    object-fit: cover;
  }

  /* 7º tile = Saverio: ancho completo + ratio del asset mobile */
  .pzhome-grid--featured-brands > .pzhome-tile--brand-featured:nth-child(7) {
    grid-column: 1 / -1;
  }

  .pzhome-grid--featured-brands > .pzhome-tile--brand-featured:nth-child(7) .pzhome-img--mob {
    aspect-ratio: 814 / 437;
    object-fit: cover;
  }
}

/* —— Gender CTAs: 3 o 4 botones (avance + géneros) —— */
.pzhome-row--gender {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--pzhome-gap);
  width: 100%;
  margin: 12px 0 0;
  padding: 0;
  align-items: start;
}

.pzhome-row--gender:has(> :nth-child(3):last-child) {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.pzhome-tile--gender {
  display: block;
  background: transparent !important;
  line-height: 0;
  overflow: hidden;
  border-radius: 0;
}

.pzhome-tile--gender img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 542 / 154;
  max-height: none !important;
  display: block;
  object-fit: contain !important;
}

/* —— Logos (oficial pz.cl: Elementor Swiper slidesToShow 7, arrows outside) —— */
.pzhome-logos {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  margin: 8px 0 4px;
  padding: 0;
}

.pzhome-logos__track {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: 4px 0;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  cursor: grab;
  user-select: none;
}

.pzhome-logos__track:active {
  cursor: grabbing;
}

.pzhome-logos__track::-webkit-scrollbar {
  display: none;
}

.pzhome-logos__item {
  flex: 0 0 calc(100% / 7);
  width: calc(100% / 7);
  max-width: calc(100% / 7);
  min-width: 0;
  height: 176px;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  padding: 8px 10px;
}

.pzhome-logos__item img {
  width: auto !important;
  height: auto !important;
  max-width: 125px !important;
  max-height: 169px !important;
  object-fit: contain !important;
  display: block;
  margin: 0 auto;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  transition: transform 0.2s ease;
}

.pzhome-logos__item:hover img {
  transform: scale(0.8);
}

.pzhome-logos__nav {
  position: relative;
  flex: 0 0 32px;
  z-index: 2;
  width: 32px;
  height: 44px;
  border: 0;
  background: transparent;
  color: #b0b0b0;
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}

.pzhome-logos__nav:hover {
  color: #0c0c0c;
}

.pzhome-logos__nav--prev { left: auto; }
.pzhome-logos__nav--next { right: auto; }

/* —— Sections / grids —— */
.pzhome-section {
  width: 100%;
  margin: 1.5rem 0 0;
  padding: 0;
}

.pzhome-section__title {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0 0 1rem;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  justify-content: center;
  text-align: center;
}

.pzhome-section__title::before,
.pzhome-section__title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--pzhome-ink);
  max-width: 22%;
}

.pzhome-grid {
  display: grid;
  gap: var(--pzhome-gap);
  margin-bottom: var(--pzhome-gap);
  width: 100%;
}

.pzhome-grid--cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.pzhome-grid--cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pzhome-featured {
  display: grid;
  gap: var(--pzhome-gap);
  width: 100%;
}

.pzhome-tile {
  display: block;
  line-height: 0;
  overflow: hidden;
  background: transparent;
  text-decoration: none;
  color: inherit;
  min-width: 0;
  min-height: 0 !important;
  height: auto !important;
  aspect-ratio: auto !important;
}

.pzhome-tile--brand,
.pzhome-tile--banner {
  background: transparent !important;
  border-radius: 12px;
  overflow: hidden;
}

/* Oficiales pz.cl: piezas 380×320 (1/4) y 786×320 (1/2). No forzar un solo ratio. */
.pzhome-tile--cat {
  /* Elementor .hoverImage: DETALLE como background cover; default <img> se oculta al hover */
  background-color: #f4f3f1;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
}

/* Fallback hover (oficial .hoverImage) si el JSON de BO aún no trae image_hover */
.pzhome-tile--cat[href*="/s/1448/"] { background-image: url("/img/cms/MARCAS/PZ/home_principal/FW26/Home/Desktop/PZ_FW26_BTN_CAT_BOTINES%20DETALLES.png"); }
.pzhome-tile--cat[href*="/s/1328/"] { background-image: url("/img/cms/MARCAS/PZ/home_principal/FW26/Home/Desktop/PZ_FW26_BTN_CAT_BOTAS%20DETALLE.png"); }
.pzhome-tile--cat[href*="/s/1449/"] { background-image: url("/img/cms/MARCAS/PZ/home_principal/FW26/Home/Desktop/PZ_FW26_BTN_CAT_ZAPATOS%20DETALLE.png"); }
.pzhome-tile--cat[href*="/s/1447/"] { background-image: url("/img/cms/MARCAS/PZ/home_principal/FW26/Home/Desktop/PZ_FW26_BTN_CAT_ZAPATILLAS%20DETALLE.png"); }
.pzhome-tile--cat[href*="/s/1446/"] { background-image: url("/img/cms/MARCAS/PZ/home_principal/FW26/Home/Desktop/PZ_FW26_BTN_CAT_SANDALIAS%20DETALLE.png"); }
.pzhome-tile--cat[href*="/s/1450/"] { background-image: url("/img/cms/MARCAS/PZ/home_principal/FW26/Home/Desktop/PZ_FW26_BTN_CAT_CARTERAS%20Y%20MOCHILAS%20DETALLE.png"); }
.pzhome-tile--cat[href*="/s/1580/"] { background-image: url("/img/cms/MARCAS/PZ/home_principal/FW26/Home/Desktop/PZ_FW26_BTN_CAT_CINTURONES%20DETALLE.png"); }
.pzhome-tile--cat[href*="/s/1515/"] { background-image: url("/img/cms/MARCAS/PZ/home_principal/FW26/Home/Desktop/PZ_FW26_BTN_CAT_ACCESORIOS%20%26%20ESTUCHERIA%20DETALLE.png"); }
.pzhome-tile--cat[href*="/s/2425/"] { background-image: url("/img/cms/MARCAS/PZ/home_principal/FW26/Home/Desktop/PZ_FW26_BTN_CAT_CHAQUETAS-%26-PARKAS-DETALLE.png"); }
.pzhome-tile--cat[href*="/s/1495/"] { background-image: url("/img/cms/MARCAS/PZ/home_principal/FW26/Home/Desktop/PZ_FW26_BTN_CAT_PANTALONES%20%26%20JOGGERS%20DETALLE.png"); }
.pzhome-tile--cat[href*="/s/2662/"] { background-image: url("/img/cms/MARCAS/PZ/home_principal/FW26/Home/Desktop/PZ_FW26_BTN_CAT_POLERAS-DETALLES.png"); }
.pzhome-tile--cat[href*="/s/1953/"] { background-image: url("/img/cms/MARCAS/PZ/home_principal/FW26/Home/Desktop/PZ_FW26_BTN_CAT_CORTAVIENTOS%20%26%20POLERONES%20DETALLE.png"); }
.pzhome-tile--cat[href*="/s/2824/"] { background-image: url("/img/cms/MARCAS/PZ/home_principal/FW26/Home/Desktop/PZ_FW26_BTN_CAT_SOBRECAMISAS%20DETALLES.png"); }
.pzhome-tile--cat[href*="/s/2154/"] { background-image: url("/img/cms/MARCAS/PZ/home_principal/FW26/Home/Desktop/PZ_FW26_BTN_CAT_GORROS-%26-JOCKEYS_DETALLE.png"); }
.pzhome-tile--cat[href*="/catalogo/478-"] { background-image: url("/img/cms/MARCAS/PZ/home_principal/FW26/Home/Desktop/PZ_FW26_BTN_CAT_EQUIPAMIENTO_DETALLE.png"); }

.pzhome-tile--cat img,
.pzhome-tile--brand img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 380 / 320;
  max-height: none !important;
  display: block;
  object-fit: contain !important;
}

.pzhome-grid--cols-2 > .pzhome-tile--cat img {
  aspect-ratio: 786 / 320;
}

.pzhome-tile--cat img {
  transition: opacity 0.25s ease;
  background: transparent;
}

.pzhome-tile--cat:hover img,
.pzhome-tile--cat:focus-visible img {
  opacity: 0;
}

.pzhome-tile--banner img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1668 / 277;
  max-height: none !important;
  display: block;
  object-fit: contain !important;
}

.pzhome-tile--banner .pzhome-img--mob {
  aspect-ratio: 542 / 204;
}

/* Oficiales Elementor: col-25 | col-50 | col-25 (380 | 786 | 380) */
.pzhome-grid--cols-3-mix {
  display: grid;
  grid-template-columns: 380fr 786fr 380fr;
  align-items: start;
  gap: var(--pzhome-gap);
  width: 100%;
  margin-bottom: var(--pzhome-gap);
}

.pzhome-grid--cols-3-mix > .pzhome-tile {
  display: block;
  position: relative;
  overflow: hidden;
  min-width: 0;
}

.pzhome-grid--cols-3-mix > .pzhome-tile--narrow img {
  position: static;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 380 / 320;
  object-fit: contain !important;
  display: block;
}

.pzhome-grid--cols-3-mix > .pzhome-tile--wide img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 786 / 320;
  object-fit: contain !important;
  display: block;
}

.pzhome-tile--gender:hover,
.pzhome-tile--brand:hover {
  opacity: 0.96;
}

/* —— Animaciones Elementor (test-home-pz) ——
   gender: animation-shrink | marcas + destacadas: animation-float
   categorías: hoverImage (opacity → background DETALLE) ya arriba */
@keyframes pzhome-anim-float {
  0% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
  100% { transform: translateY(0); }
}

@keyframes pzhome-anim-shrink {
  0%,
  100% { transform: scale(1); }
  50% { transform: scale(0.9); }
}

.pzhome-tile--brand,
.pzhome-tile--brand-featured {
  transition: transform 0.2s ease;
  will-change: transform;
}

.pzhome-tile--brand:hover,
.pzhome-tile--brand:focus-visible,
.pzhome-tile--brand-featured:hover,
.pzhome-tile--brand-featured:focus-visible {
  opacity: 1;
  animation: pzhome-anim-float 1.5s linear infinite;
}

.pzhome-tile--gender {
  transition: transform 0.2s ease;
  will-change: transform;
}

.pzhome-tile--gender:hover,
.pzhome-tile--gender:focus-visible {
  opacity: 1;
  animation: pzhome-anim-shrink 0.8s linear infinite;
}

.pzhome-tile--cat {
  /* hoverImage: el DETALLE vive en background-image (inline o fallback) */
  transition: transform 0.2s ease;
}

@media (prefers-reduced-motion: reduce) {
  .pzhome-tile--brand:hover,
  .pzhome-tile--brand:focus-visible,
  .pzhome-tile--brand-featured:hover,
  .pzhome-tile--brand-featured:focus-visible,
  .pzhome-tile--gender:hover,
  .pzhome-tile--gender:focus-visible {
    animation: none;
  }
}

/* Visible por defecto (sin JS / sin caché). Solo anima si el JS alcanzó a
   marcar el root antes del paint con .pzhome--reveal-ready. */
[data-pzhome-reveal] {
  opacity: 1;
  transform: none;
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.pzhome--reveal-ready [data-pzhome-reveal]:not(.is-in) {
  opacity: 0;
  transform: translateY(14px);
}

.pzhome--reveal-ready [data-pzhome-reveal].is-in {
  opacity: 1;
  transform: none;
}

@media (max-width: 992px) {
  .pzhome-row--gender {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pzhome-grid--cols-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pzhome-quick__inner {
    justify-content: center;
  }

  .pzhome-logos__item {
    flex: 0 0 25%;
    width: 25%;
    max-width: 25%;
    min-width: 0;
  }
}

@media (max-width: 600px) {
  .pzhome {
    --pzhome-gap: 8px;
    --pzhome-pad: 10px;
  }

  .pzhome-grid--cols-2,
  .pzhome-grid--cols-3-mix {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Género: un banner por fila a ancho completo. Se repite el selector con
     :has() porque esa variante de 3 ítems tiene más especificidad. */
  .pzhome-row--gender,
  .pzhome-row--gender:has(> :nth-child(3):last-child) {
    grid-template-columns: minmax(0, 1fr);
  }

  .pzhome-logos__item {
    flex: 0 0 50%;
    width: 50%;
    max-width: 50%;
    min-width: 0;
    height: 148px;
  }

  .pzhome-logos__item img {
    max-width: 125px !important;
    max-height: 134px !important;
  }

  .pzhome-quick {
    overflow-x: auto;
  }

  .pzhome-quick__inner {
    justify-content: flex-start;
    width: max-content;
    min-width: 100%;
  }
}