/* ============================================================================
   MEGASUR — Mejora de secciones del Home (categorías) y Footer
   Solo CSS. Cargado por el mu-plugin.
   Paleta: #991e1d (primario) · #b72626 (secundario) · #7d1817 (profundo)
   ============================================================================ */

/* ###########################################################################
   1) SECCIÓN DE CATEGORÍAS (Home) — fila .vc_custom_1602093946750
   De 3 imágenes sueltas sobre blanco → sección con fondo tratado + tarjetas.
   ########################################################################### */

/* --- SECCIÓN DE CATEGORÍAS = fondo gris claro, FULL-WIDTH ---
   Título (vc_custom_1602093891929) + tarjetas (vc_custom_1602093946750): gris
   claro que llega hasta los bordes (full-bleed por negative-margin), para
   separarse del blanco de "Gran variedad". Gap título↔tarjetas reducido y
   aire arriba del título. */
.home .vc_custom_1602093891929,
.home .vc_custom_1602093946750 {
  background-color: #f1f1f1 !important;
  background-image: none !important;
  /* full-bleed: la fila ocupa todo el ancho de la pantalla */
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  box-sizing: border-box !important;
}
/* Título: AIRE arriba (separación del borde superior) y poco abajo (gap chico).
   El padding lateral centra el contenido dentro del gris full-width. */
.home .vc_custom_1602093891929 {
  padding: 52px max(15px, calc(50vw - 620px)) 2px !important;
}
/* Reset del espacio interno del título (el column-inner/text-column traían
   padding/margin que agrandaban el aire de arriba). Así el aire superior lo
   controla solo el padding-top de la fila. */
.home .vc_custom_1602093891929 .vc_column-inner,
.home .vc_custom_1602093891929 .wpb_column,
.home .vc_custom_1602093891929 .wpb_wrapper,
.home .vc_custom_1602093891929 .wpb_text_column,
.home .vc_custom_1602093891929 h1,
.home .vc_custom_1602093891929 h2,
.home .vc_custom_1602093891929 h3 {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
/* Tarjetas: pegadas al título y aire abajo. */
.home .vc_custom_1602093946750 {
  padding: 2px max(15px, calc(50vw - 620px)) 100px !important;
}
/* Degradé: la sección funde de GRIS (donde están las tarjetas) a BLANCO abajo,
   para cerrar la sección suavemente. Mantiene el full-bleed (ancho 100vw). */
.home .vc_custom_1602093946750 {
  background: linear-gradient(180deg, #f1f1f1 0%, #f1f1f1 48%, #ffffff 100%) !important;
}
/* El h2 del título sin márgenes propios que agranden el gap. */
.home .vc_custom_1602093891929 h2,
.home .vc_custom_1602093891929 .wpb_text_column,
.home .vc_custom_1602093891929 p {
  margin: 0 !important;
}
/* Contenedores internos transparentes: gris uniforme. */
.home .vc_custom_1602093891929 .vc_column-inner,
.home .vc_custom_1602093891929 .wpb_column,
.home .vc_custom_1602093891929 .wpb_wrapper,
.home .vc_custom_1602093946750 .vc_column-inner,
.home .vc_custom_1602093946750 .wpb_column,
.home .vc_custom_1602093946750 .wpb_wrapper {
  background-color: transparent !important;
  background-image: none !important;
}
.home .vc_custom_1602093946750::after { content: none !important; }

/* Evitar scroll horizontal por el 100vw de las filas full-bleed. */
body { overflow-x: hidden !important; }

/* La fila que envuelve "Gran variedad" + "Categorías" (vc_custom_1602095103384)
   en BLANCO (Gran variedad queda blanca; las filas de categorías van en gris). */
.home .vc_custom_1602095103384,
.home .vc_custom_1602095103384 > .wpb_column,
.home .vc_custom_1602095103384 > .wpb_column > .vc_column-inner,
.home .vc_custom_1602095103384 > .wpb_column > .vc_column-inner > .wpb_wrapper,
/* Espaciadores internos de "Gran variedad" que traían fondo gris propio
   (#f7f7f7) y dejaban franjas grises: los blanqueamos. */
.home .vc_custom_1602095311930,
.home .vc_custom_1602095408084 {
  background-color: #ffffff !important;
  background-image: none !important;
}

/* --- OFERTAS con fondo GRIS ---
   Es la 2da fila con la clase vc_custom_1602092942636 (NOVEDADES es la 1ra y
   queda blanca). Es una fila full-width, así que el gris llega hasta los bordes.
   Alternancia final: Novedades(blanco) → Ofertas(gris) → Gran variedad(blanco)
   → Categorías(gris, degradé a blanco) → El mayor surtido(gris). */
.home .vc_custom_1602092942636 ~ .vc_custom_1602092942636 {
  background-color: #f1f1f1 !important;
  padding-top: 46px !important; /* aire arriba de OFERTAS (dentro del gris) */
}

/* El contenido (columnas) por encima de la decoración */
.home .vc_custom_1602093946750 > .wpb_column,
.home .vc_custom_1602093946750 .vc_row,
.home .vc_custom_1602093946750 .wpb_column {
  position: relative;
  z-index: 2;
}

/* Aire alrededor de cada tarjeta (evita que la sombra se recorte) */
.home .vc_custom_1602093946750 .wpb_single_image {
  margin: 0 !important;
  padding: 10px !important;
}

/* --- Tarjeta: el <a> que envuelve la imagen --- */
.home .vc_custom_1602093946750 .vc_single_image-wrapper {
  display: block !important;
  position: relative;
  border: 0 !important;              /* anula el vc_box_border_grey */
  border-radius: 14px !important;
  overflow: hidden !important;
  box-shadow: 0 6px 18px rgba(28, 8, 8, 0.12);
  transition: transform 260ms ease, box-shadow 260ms ease;
  background: #fff;
  line-height: 0;                    /* evita gap bajo la imagen */
}

/* Imagen dentro de la tarjeta */
.home .vc_custom_1602093946750 .vc_single_image-wrapper img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  border-radius: 14px !important;
  transition: transform 500ms ease;
  will-change: transform;
}

/* Overlay de degradado inferior para dar profundidad y unificar */
.home .vc_custom_1602093946750 .vc_single_image-wrapper::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: 14px;
  background: linear-gradient(180deg,
    rgba(125, 24, 23, 0) 55%,
    rgba(125, 24, 23, 0.28) 100%);
  opacity: 0.85;
  transition: opacity 260ms ease;
}

/* Hover: elevación de la tarjeta + zoom suave de la imagen */
.home .vc_custom_1602093946750 .vc_single_image-wrapper:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 34px rgba(28, 8, 8, 0.22);
}
.home .vc_custom_1602093946750 .vc_single_image-wrapper:hover img {
  transform: scale(1.06);
}
.home .vc_custom_1602093946750 .vc_single_image-wrapper:hover::after {
  opacity: 1;
}

/* Foco accesible por teclado */
.home .vc_custom_1602093946750 .vc_single_image-wrapper:focus-visible {
  outline: 3px solid #b72626;
  outline-offset: 3px;
}

/* Responsive: en mobile las 3 columnas se apilan con separación */
@media (max-width: 767px) {
  .home .vc_custom_1602093946750 {
    padding: 40px 0 44px !important;
  }
  .home .vc_custom_1602093946750 .wpb_single_image {
    padding: 8px 4px !important;
  }
  .home .vc_custom_1602093946750 .vc_single_image-wrapper,
  .home .vc_custom_1602093946750 .vc_single_image-wrapper img {
    border-radius: 12px !important;
  }
}


/* ###########################################################################
   2) FOOTER — #site-footer
   De barra roja plana → footer con gradiente, textura, acento y menú prolijo.
   ########################################################################### */

/* --- Fondo: gradiente de marca + acento superior + textura sutil --- */
#site-footer {
  position: relative;
  background-color: #7d1817 !important;
  background-image: linear-gradient(160deg, #a52322 0%, #991e1d 45%, #7d1817 100%) !important;
  padding: 64px 0 34px !important;
  overflow: hidden;
}

/* Acento superior de marca (línea/degradado) */
#site-footer::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  z-index: 2;
  background: linear-gradient(90deg, #7d1817 0%, #cf3030 50%, #7d1817 100%);
}

/* Textura sutil (patrón diagonal muy tenue) */
#site-footer::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(255, 255, 255, 0.03) 0px,
    rgba(255, 255, 255, 0.03) 1px,
    transparent 1px,
    transparent 24px
  );
}

/* El contenido por encima de la textura */
#site-footer .site-footer-copyright-area {
  position: relative;
  z-index: 1;
}

/* --- Menú del footer --- */
#site-footer .footer-navigation-wrapper {
  margin-bottom: 26px;
}

#site-footer .menu-footer-menu {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px 0;
  margin: 0 auto !important;
  padding: 0 !important;
  list-style: none !important;
}

#site-footer .menu-footer-menu > li {
  position: relative;
  margin: 0 !important;
  padding: 0 22px !important;
  line-height: 1.2;
}

/* Separadores verticales entre ítems (no en el último) */
#site-footer .menu-footer-menu > li:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 14px;
  background: rgba(255, 255, 255, 0.28);
}

#site-footer .menu-footer-menu > li > a {
  display: inline-block;
  color: rgba(255, 255, 255, 0.86) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em;
  text-decoration: none !important;
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
  transition: color 180ms ease, border-color 180ms ease;
}

#site-footer .menu-footer-menu > li > a:hover,
#site-footer .menu-footer-menu > li > a:focus-visible {
  color: #ffffff !important;
  border-bottom-color: #ffffff;
}

#site-footer .menu-footer-menu > li > a:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.9);
  outline-offset: 4px;
  border-radius: 2px;
}

/* --- Copyright --- */
#site-footer .copyright_text {
  max-width: 760px;
  margin: 0 auto !important;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.72) !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
  text-align: center;
}

/* Reduce el doble salto de línea del markup a un espacio más prolijo */
#site-footer .copyright_text br + br {
  display: none;
}

#site-footer .copyright_text a {
  display: inline-block;
  margin-top: 8px;
  color: rgba(255, 255, 255, 0.78) !important;
  font-weight: 600;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
  transition: color 180ms ease, border-color 180ms ease;
}
#site-footer .copyright_text a:hover {
  color: #ffffff !important;
  border-bottom-color: #ffffff;
}

/* Responsive footer */
@media (max-width: 767px) {
  #site-footer {
    padding: 44px 0 28px !important;
  }
  #site-footer .menu-footer-menu {
    flex-direction: column;
    gap: 0;
  }
  #site-footer .menu-footer-menu > li {
    padding: 11px 0 !important;
    width: 100%;
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
  }
  #site-footer .menu-footer-menu > li:last-child {
    border-bottom: 0;
  }
  /* En columna, los separadores verticales no aplican */
  #site-footer .menu-footer-menu > li:not(:last-child)::after {
    display: none;
  }
  #site-footer .menu-footer-menu > li > a {
    font-size: 15px !important;
  }
}