/* ============================
   GRID CATEGORÍAS HOME JOSULO
   (versión ajustada)
   ============================ */

.categories.section-categories-index {
  padding-top: 40px;
  padding-bottom: 40px;
}

/* Cards de categoría: SIN bordes redondeados */
.categories.section-categories-index .section-categories-index_item {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 0;
  position: relative;
}

.categories.section-categories-index .section-categories-index_item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0;
}

/* Enlaces como contenedor completo */
.categories.section-categories-index .section-categories-index_item a.position-relative {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
}

/* ---------------------------------
   BOTONES CENTRADOS EN TODAS LAS CARDS
   --------------------------------- */
.categories.section-categories-index .section-categories-index_item_banner-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  margin-bottom: 0 !important;
  width: auto;
  max-width: 90%;      /* evita que el botón se salga del contenedor */
  text-align: center;
}

/* Botón alargado, evitando apariencia de círculo
   y reduciendo un poco la tipografía para que no
   quede el “+” solo en una línea */
.categories.section-categories-index .btn-outline-primary__custom {
  display: inline-block;
  border-radius: 999px;
  min-width: 200px;
  max-width: 100%;
  padding: 0.40rem 2.4rem;
  font-weight: 600;
  font-size: 0.85rem;
  line-height: 1.25;
  white-space: normal;     /* permite 2 líneas como máximo */
  word-break: keep-all;    /* evita cortes raros de palabras */
}

/* Quitamos padding de columnas para usar solo el gap del grid */
.categories.section-categories-index .row > [class*="col-"] {
  padding: 0;
}

/* ============================
   DESKTOP (≥992px)
   ============================ */
@media (min-width: 992px) {

  .categories.section-categories-index .row {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 columnas */
    grid-auto-rows: 230px;                 /* altura base */
    gap: 24px;                             /* espacio entre todas */
  }

  /* Anulamos tamaños de Bootstrap dentro del grid */
  .categories.section-categories-index .row > [class*="col-"] {
    flex: 0 0 auto !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  /* 1) INDUMENTARIA: ocupa las 2 primeras columnas (todo su contenedor)
     y doble altura, similar al ejemplo que enviaste */
  .categories.section-categories-index .row > div:nth-child(1) {
    grid-column: 1 / 3;  /* columnas 1 y 2 */
    grid-row: 1 / 3;     /* filas 1 y 2 */
  }

  .categories.section-categories-index .row > div:nth-child(1) .section-categories-index_item {
    min-height: 460px;
  }

  /* 2) MARROQUINERÍA: arriba a la derecha */
  .categories.section-categories-index .row > div:nth-child(2) {
    grid-column: 3 / 4;
    grid-row: 1 / 2;
  }

  /* 3) DRINKWARE: debajo de marroquinería */
  .categories.section-categories-index .row > div:nth-child(3) {
    grid-column: 3 / 4;
    grid-row: 2 / 3;
  }

  /* 4, 5 y 6: fila inferior completa con tres columnas */
  .categories.section-categories-index .row > div:nth-child(4) {
    grid-column: 1 / 2;
    grid-row: 3 / 4;
  }

  .categories.section-categories-index .row > div:nth-child(5) {
    grid-column: 2 / 3;
    grid-row: 3 / 4;
  }

  .categories.section-categories-index .row > div:nth-child(6) {
    grid-column: 3 / 4;
    grid-row: 3 / 4;
  }

  .categories.section-categories-index .row > div:nth-child(n+2) .section-categories-index_item {
    min-height: 230px;
  }
}

/* ============================
   TABLET (≥768 y <992)
   – Indumentaria ancho completo arriba, luego 2 columnas
   ============================ */
@media (min-width: 768px) and (max-width: 991.98px) {

  .categories.section-categories-index .row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 220px;
    gap: 20px;
  }

  .categories.section-categories-index .row > [class*="col-"] {
    flex: 0 0 auto !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  .categories.section-categories-index .row > div:nth-child(1) {
    grid-column: 1 / 3;
    min-height: 360px;
  }

  .categories.section-categories-index .row > div:nth-child(n+2) {
    min-height: 220px;
  }
}

/* ============================
   MOBILE (<768)
   – una columna, espaciado uniforme
   ============================ */
@media (max-width: 767.98px) {
  .categories.section-categories-index .row {
    display: block;
  }

  .categories.section-categories-index .row > div {
    margin-bottom: 20px;
  }

  .categories.section-categories-index .row > div:last-child {
    margin-bottom: 0;
  }

  .categories.section-categories-index .section-categories-index_item {
    min-height: 260px;
  }
}