/* ===============================
   CONTENEDOR GENERAL
=============================== */

.catalogo {
  text-align: center;
  padding: 60px 20px;

 background:
    linear-gradient(rgba(0,0,0,0.40), rgba(0,0,0,0.70)),
    url("../img/fondo-catalogo.webp");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

/* ===============================
   TITULO
=============================== */

.titulo-catalogo {
  font-family: "JunkyTitle", serif;
  color: #d4bf63;   /* ← dorado Junky Moldy */
  font-size: 5rem;
  letter-spacing: 6px;
  margin-bottom: 70px;

  text-shadow:
    0 0 8px rgba(212,191,99,0.9),
    0 0 18px rgba(212,191,99,0.8),
    0 0 40px rgba(212,191,99,0.6),
    0 0 70px rgba(212,191,99,0.4);

  animation: farolIncandescente 9.7s infinite;
}

@keyframes neonFalla {

  /* luz normal */
  0%, 92%, 100% {
    opacity: 1;
    text-shadow:
      0 0 8px rgba(212,191,99,0.9),
      0 0 18px rgba(212,191,99,0.7),
      0 0 38px rgba(212,191,99,0.6);
  }

  /* micro fallo */
  93% {
    opacity: 0.4;
    text-shadow: none;
  }

  /* vuelve */
  94% {
    opacity: 1;
  }

  /* chispazo eléctrico */
  95% {
    opacity: 0.2;
  }

  /* recuperación */
  96% {
    opacity: 1;
  }
}

/* Ritmo suave e irregular, como una vela dentro de un farol antiguo. */
@keyframes farolIncandescente {
  0%, 100% { opacity: 1; text-shadow: 0 0 8px rgba(212,191,99,.92), 0 0 20px rgba(212,191,99,.76), 0 0 44px rgba(212,191,99,.52), 0 0 76px rgba(212,191,99,.28); }
  11% { opacity: .92; text-shadow: 0 0 6px rgba(212,191,99,.82), 0 0 16px rgba(212,191,99,.62), 0 0 34px rgba(212,191,99,.38); }
  14% { opacity: .98; text-shadow: 0 0 10px rgba(244,218,118,.98), 0 0 25px rgba(212,191,99,.82), 0 0 52px rgba(212,191,99,.52); }
  31% { opacity: .88; text-shadow: 0 0 5px rgba(212,191,99,.72), 0 0 13px rgba(212,191,99,.48), 0 0 26px rgba(212,191,99,.26); }
  34% { opacity: .97; text-shadow: 0 0 9px rgba(235,209,106,.94), 0 0 22px rgba(212,191,99,.72), 0 0 46px rgba(212,191,99,.44); }
  57% { opacity: .94; text-shadow: 0 0 7px rgba(212,191,99,.82), 0 0 17px rgba(212,191,99,.62), 0 0 37px rgba(212,191,99,.40); }
  61% { opacity: .84; text-shadow: 0 0 4px rgba(212,191,99,.62), 0 0 11px rgba(212,191,99,.40), 0 0 23px rgba(212,191,99,.20); }
  64% { opacity: 1; text-shadow: 0 0 11px rgba(244,218,118,.98), 0 0 28px rgba(212,191,99,.84), 0 0 57px rgba(212,191,99,.56); }
  82% { opacity: .91; text-shadow: 0 0 6px rgba(212,191,99,.76), 0 0 15px rgba(212,191,99,.54), 0 0 31px rgba(212,191,99,.30); }
}

.global-discount-banner {
  width: min(92%, 760px);
  margin: -42px auto 48px;
  padding: 14px 20px;
  border: 1px solid rgba(244, 213, 105, .9);
  background: linear-gradient(90deg, rgba(58, 35, 9, .88), rgba(28, 17, 7, .92));
  color: #fff0a7;
  font-family: "JunkyTitle", serif;
  font-size: clamp(1.15rem, 2.3vw, 1.55rem);
  letter-spacing: .9px;
  line-height: 1.35;
  text-shadow: 0 0 12px rgba(235, 195, 77, .7);
  box-shadow: 0 0 22px rgba(203, 155, 39, .25), inset 0 0 18px rgba(255, 228, 126, .08);
}

.global-discount-banner[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .titulo-catalogo { animation: none; }
}

@media (max-width: 768px) {
  .global-discount-banner {
    width: min(94%, 430px);
    margin: -28px auto 34px;
    padding: 12px 14px;
    font-size: 1.08rem;
  }
}

/* ===============================
   GRID CATEGORIAS (DESKTOP)
=============================== */

.categorias-grid,
.subcategorias-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  justify-items: center;
  gap: 40px;
  max-width: 1100px;
  margin: 0 auto 80px auto;
}

/* ===============================
   CIRCULOS CATEGORIAS
=============================== */

.categoria-card {
  position: relative;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  overflow: hidden;
  cursor: pointer;
  border: 6px solid #b99a45;
  background: #120d08;
  box-shadow:
    0 0 24px rgba(0,0,0,0.82),
    inset 0 0 20px rgba(0,0,0,0.82);
  transition: 0.35s ease;
}

/* imagen */
.categoria-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* texto */
.categoria-card span {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;

  font-family: "JunkyTitle";
  font-size: clamp(1.68rem, 2.22vw, 1.98rem);
  letter-spacing: 2px;
  line-height: 1.2;
  color: var(--accent);
  overflow-wrap: break-word;
  text-wrap: balance;

  background: radial-gradient(
    circle,
    rgba(26,13,10,0.2) 30%,
    rgba(26,13,10,0.9) 90%
  );

  text-shadow:
    0 0 8px rgba(0,0,0,1),
    0 0 18px rgba(0,0,0,0.9);
}

/* hover */
.categoria-card:hover {
  transform: scale(1.05);
  border-color: #f2d77f;
  box-shadow:
    0 0 28px rgba(205, 170, 61, 0.48),
    0 0 30px rgba(0,0,0,0.84),
    inset 0 0 20px rgba(0,0,0,0.72);
}

/* Escritorio: categorías más protagonistas, centradas incluso si la última fila
   no queda completa. La versión móvil conserva sus medidas propias más abajo. */
@media (min-width: 769px) {
  .titulo-catalogo {
    font-size: 8.625rem;
    margin-bottom: 76px;
  }

  .categorias-grid,
  .subcategorias-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 46px;
    max-width: 1500px;
  }

  .categoria-card {
    flex: 0 0 260px;
    width: 260px;
    height: 260px;
  }

  .categoria-card span {
    padding: 28px;
    font-size: clamp(1.85rem, 2.35vw, 2.25rem);
  }
}

.categoria-card:hover img {
  transform: scale(1.12);
  filter: brightness(1.15) contrast(1.05);
}
.categoria-card:hover span {
  color: #fff1a8;
  text-shadow:
    0 0 10px rgba(212,191,99,1),
    0 0 25px rgba(212,191,99,0.9),
    0 0 40px rgba(212,191,99,0.7);
}

/* ===============================
   SUBCATEGORIAS
=============================== */

.lista-subcategorias {
  list-style: none;
  padding: 0;
  margin-top: 40px;

  display: flex;
  flex-direction: column;
  align-items: center;
}

.lista-subcategorias li {
  margin: 14px 0;
}

.lista-subcategorias a {
  text-decoration: none;
  color: #d4bf63;
  font-family: "JunkyTitle";
  letter-spacing: 3px;
  font-size: 1.4rem;
  transition: 0.25s ease;

  text-shadow:
    0 0 8px rgba(212,191,99,0.6),
    0 0 16px rgba(212,191,99,0.4);
}

.lista-subcategorias a:hover {
  color: #fff1a8;
  transform: scale(1.12);

  text-shadow:
    0 0 12px rgba(212,191,99,1),
    0 0 25px rgba(212,191,99,0.9),
    0 0 45px rgba(212,191,99,0.7);
}

/* ===============================
   📱 MOBILE PERFECTO
=============================== */

@media (max-width: 768px) {

  .categorias-grid,
  .subcategorias-grid {
    grid-template-columns: 1fr;   /* 🔥 un círculo por fila */
    gap: 35px;
  }

  .categoria-card {
    width: 64vw;
    height: 64vw;
    min-width: 210px;
    min-height: 210px;
    max-width: 290px;
    max-height: 290px;
  }

  .categoria-card span {
    padding: 9vw;
    font-size: clamp(1.9rem, 7vw, 2.3rem);
    line-height: 1.12;
  }

  .titulo-catalogo {
    font-size: clamp(3rem, 13vw, 3.6rem);
    margin-bottom: 36px;
    /* El título es el farol del catálogo: en iPhone se mantiene encendido
       aunque Safari active su preferencia de reducir movimiento. */
    animation: farolIncandescente 9.7s infinite !important;
  }
}