/* pzm-moda95: Mejoras de Centrado, Categorias Animadas estilo Aurux, Productos sin rostros y Portada Editorial PLA-061 */

/* ==========================================================================
   1. AJUSTE DE CABECERA Y MENU (1366px Y 1920px)
   ========================================================================== */
@media (min-width: 769px) {
  .tm1-header-bar {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    max-width: 1318px !important;
    margin: 0 auto !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .tm1-nav {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    margin: 0 auto !important;
  }

  .tm1-nav-link {
    font-size: 14px !important;
    letter-spacing: 0.08em !important;
    padding: 6px 10px !important;
    white-space: nowrap !important;
  }

  .tm1-actions {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex-shrink: 0 !important;
  }

  .tm1-search-input {
    max-width: 160px !important;
  }
}

@media (max-width: 768px) {
  .tm1-nav {
    display: none !important;
  }
}

/* ==========================================================================
   2. CENTRADO RIGUROSO DEL HERO (1366px Y 1920px)
   ========================================================================== */
.sl-hero-sec {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.sl-hero-sec .tm1-wrap-full {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100% !important;
  max-width: 1240px !important;
  box-sizing: border-box !important;
}

.sl-hero-sec .tm1-hero-component {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100% !important;
  max-width: 860px !important;
  text-align: center !important;
  box-sizing: border-box !important;
}

.sl-hero-wrap {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  margin: 0 auto !important;
  width: 100% !important;
  max-width: 860px !important;
  padding: 40px 20px !important;
  box-sizing: border-box !important;
}

.sl-hero-kicker,
.sl-hero-title,
.sl-hero-sub,
.sl-hero-action {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.sl-hero-title {
  letter-spacing: 0.18em !important;
  margin: 12px auto 16px !important;
}

.sl-hero-sub {
  max-width: 680px !important;
  margin: 0 auto 28px !important;
  line-height: 1.7 !important;
}

.sl-hero-action {
  display: flex !important;
  justify-content: center !important;
}

/* ==========================================================================
   3. CENTRADO GENERAL DE OTRAS SECCIONES EN 1366px Y 1920px
   ========================================================================== */
.tm1-cintillo-sec,
.tm1-categories-sec,
.tm1-products-sec,
.tm1-benefits-sec,
.tm1-sec-testimonios,
.tm1-sec-mapa,
.tm1-manifesto-sec,
.tm1-footer-sec {
  width: 100% !important;
  box-sizing: border-box !important;
}

.tm1-categories-sec .tm1-wrap,
.sl-cats-grid,
.pzm-cats-aurux,
.tm1-products-sec .tm1-wrap,
.tm1-benefits-sec .tm1-wrap,
.tm1-sec-testimonios .sx-wrap,
.tm1-sec-mapa .sx-wrap,
.tm1-manifesto-sec .tm1-wrap,
.tm1-footer-sec .tm1-wrap,
.tm1-footer-sec .brxe-container {
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 1240px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* ==========================================================================
   4. CATEGORIAS ANIMADAS ESTILO AURUX EN NEGRO ELEGANTE
   ========================================================================== */
.pzm-cats-aurux {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 24px !important;
  width: 100% !important;
  margin: 28px auto 0 !important;
  box-sizing: border-box !important;
}

.sl-cat-card {
  position: relative !important;
  display: block !important;
  height: 380px !important;
  overflow: hidden !important;
  border-radius: 6px !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  text-decoration: none !important;
  background: #0A0A0C !important;
  box-sizing: border-box !important;
  transition: border-color 0.4s ease, box-shadow 0.4s ease !important;
}

.sl-cat-card:hover {
  border-color: rgba(197, 168, 105, 0.45) !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.7) !important;
}

.sl-cat-card--wide {
  grid-column: 1 / -1 !important;
  height: 420px !important;
}

.sl-cat-bg {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background-size: cover !important;
  background-position: center center !important;
  transform: scale(1.0) !important;
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1), filter 0.8s ease !important;
  will-change: transform !important;
}

.sl-cat-card:hover .sl-cat-bg {
  transform: scale(1.07) !important;
  filter: brightness(1.06) contrast(1.03) !important;
}

.sl-cat-veil {
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(180deg, rgba(10, 10, 12, 0.08) 0%, rgba(10, 10, 12, 0.55) 50%, rgba(10, 10, 12, 0.95) 100%) !important;
  transition: background 0.6s ease !important;
  pointer-events: none !important;
}

.sl-cat-card:hover .sl-cat-veil {
  background: linear-gradient(180deg, rgba(10, 10, 12, 0.04) 0%, rgba(10, 10, 12, 0.45) 45%, rgba(10, 10, 12, 0.98) 100%) !important;
}

.sl-cat-content {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  padding: 32px 28px !important;
  z-index: 2 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  box-sizing: border-box !important;
}

.sl-cat-tag {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.3em !important;
  text-transform: uppercase !important;
  color: #C5A869 !important;
  margin-bottom: 6px !important;
  display: block !important;
}

.sl-cat-name {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: #FFFFFF !important;
  margin: 0 0 14px !important;
  line-height: 1.2 !important;
}

.sl-cat-card--wide .sl-cat-name {
  font-size: 34px !important;
  letter-spacing: 0.2em !important;
}

.sl-cat-cta {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding-bottom: 4px !important;
  border-bottom: 1px solid rgba(197, 168, 105, 0.4) !important;
  transition: border-color 0.3s ease !important;
}

.sl-cat-cta-text {
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: #E8E0CF !important;
  transition: color 0.3s ease !important;
}

.sl-cat-arrow {
  display: inline-block !important;
  font-size: 16px !important;
  color: #C5A869 !important;
  transform: translateX(0) !important;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}

.sl-cat-card:hover .sl-cat-cta {
  border-bottom-color: #C5A869 !important;
}

.sl-cat-card:hover .sl-cat-cta-text {
  color: #FFFFFF !important;
}

.sl-cat-card:hover .sl-cat-arrow {
  transform: translateX(8px) !important;
}

/* ==========================================================================
   5. SECCION 'NUESTROS PRODUCTOS' SIN FOTOS DE ROSTROS (SOLO PRENDAS)
   ========================================================================== */
.tm1-products-sec ul.products li.product .woocommerce-LoopProduct-link img {
  object-fit: cover !important;
  object-position: center center !important;
  background: #0A0A0C !important;
}

/* ==========================================================================
   6. COMPONENTE TESTIMONIOS OFICIAL tst--moda (PLA-061)
   ========================================================================== */
.tst {
  --tst-fondo: #0A0A0C;
  --tst-tinta: #F7F2EB;
  --tst-marca: #C5A869;
  --tst-estrella: #E8A923;
  --tst-suave: rgba(255, 255, 255, 0.12);
  background: var(--tst-fondo) !important;
  color: var(--tst-tinta) !important;
  padding: 48px 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.tst-in {
  max-width: 1240px !important;
  margin: 0 auto !important;
  padding: 0 20px !important;
  box-sizing: border-box !important;
}

.tst-head {
  text-align: center !important;
  max-width: 640px !important;
  margin: 0 auto 36px !important;
}

.tst-nota {
  font-size: clamp(40px, 5vw, 56px) !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  margin: 0 !important;
  color: #FFFFFF !important;
}

.tst-estrellas {
  color: var(--tst-estrella) !important;
  font-size: 24px !important;
  letter-spacing: 4px !important;
  margin: 8px 0 !important;
}

.tst-cuenta {
  font-size: 14px !important;
  opacity: 0.75 !important;
  margin: 0 !important;
}

.tst-ej {
  display: inline-block !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  border: 1px solid var(--tst-marca) !important;
  border-radius: 999px !important;
  padding: 3px 10px !important;
  color: var(--tst-marca) !important;
  margin-top: 10px !important;
}

.tst-grid {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px !important;
}

.tst-card {
  background: #16130F !important;
  border: 1px solid var(--tst-suave) !important;
  border-radius: 14px !important;
  padding: 28px 24px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  box-sizing: border-box !important;
}

.tst-comilla {
  font-size: 40px !important;
  line-height: 0.6 !important;
  color: var(--tst-marca) !important;
  font-family: Georgia, serif !important;
}

.tst-texto {
  font-size: 15px !important;
  line-height: 1.65 !important;
  margin: 0 !important;
  color: #F7F2EB !important;
}

.tst-quien {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-top: auto !important;
  padding-top: 8px !important;
}

.tst-foto {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  background: var(--tst-marca) !important;
  color: #0A0A0C !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 800 !important;
  font-size: 16px !important;
  flex: none !important;
}

.tst-nombre {
  font-weight: 700 !important;
  font-size: 14px !important;
  margin: 0 !important;
  color: #FFFFFF !important;
}

.tst-ciudad {
  font-size: 13px !important;
  opacity: 0.65 !important;
  margin: 0 !important;
}

.tst-insignia {
  align-self: flex-start !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--tst-marca) !important;
  border: 1px dashed rgba(197, 168, 105, 0.5) !important;
  border-radius: 6px !important;
  padding: 2px 8px !important;
}

/* ==========================================================================
   7. ADAPTACION MOVIL (390px)
   ========================================================================== */
@media (max-width: 768px) {
  .sl-hero-wrap {
    padding: 24px 16px !important;
  }

  .pzm-cats-aurux {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .sl-cat-card,
  .sl-cat-card--wide {
    height: 300px !important;
  }

  .sl-cat-content {
    padding: 24px 20px !important;
  }

  .sl-cat-name {
    font-size: 24px !important;
    margin-bottom: 10px !important;
  }

  .sl-cat-card--wide .sl-cat-name {
    font-size: 26px !important;
  }

  .sl-cat-cta {
    min-height: 44px !important;
  }

  .sl-cat-card:active .sl-cat-bg {
    transform: scale(1.04) !important;
  }

  .sl-cat-card:active .sl-cat-arrow {
    transform: translateX(6px) !important;
  }

  .tst-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .tst-card {
    padding: 22px 18px !important;
  }
}

/* ==========================================================================
   8. ESTABILIDAD DE DISENO Y MEDIDAS DE IMAGENES (PLA-065)
   ========================================================================== */
.woocommerce-LoopProduct-link img,
.woocommerce-product-gallery__image img {
  aspect-ratio: 2 / 3 !important;
  width: 100% !important;
  height: auto !important;
  object-fit: cover !important;
}