/* ============================================
   JG MODA · COLECCIONES
   ============================================
   Los filtros de categoría dejaron de ser botones y pasaron a ser
   ENLACES de verdad (/catalogo/bautizo). Es lo que permite que Google
   los siga y que funcionen sin JavaScript.

   Este archivo solo se asegura de que un enlace con la clase
   «filter-btn» se vea EXACTAMENTE igual que el botón de antes.

   Sin esto, los enlaces saldrían con subrayado y en línea, porque el
   navegador les pone esos estilos por defecto.

   Es aditivo: no reescribe nada de catalog.css.
   ============================================ */

/* Se ve y se comporta igual que el botón original. */
a.filter-btn {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* El navegador pone un color azul a los enlaces: se anula. */
  color: var(--color-text);
  /* Que no se pueda seleccionar el texto al tocar seguido en el celular. */
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* El estado activo también manda sobre el enlace. */
a.filter-btn.active {
  background: var(--color-text);
  color: var(--color-bg);
  border-color: var(--color-text);
}

/* Al pasar el ratón, como los botones. */
a.filter-btn:not(.active):hover {
  border-color: var(--color-text);
}

/* Al navegar con el teclado hay que ver dónde estás. */
a.filter-btn:focus-visible {
  outline: 2px solid var(--color-wine);
  outline-offset: 3px;
}

/* ============================================
   MIGAS DE PAN
   ============================================
   En una colección (/catalogo/bautizo) conviene saber dónde estás y
   poder volver. En el celular se pone debajo del título, discreto. */

.coleccion-migas {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 6px;
  font-size: 12px;
  color: var(--color-text-light);
}

.coleccion-migas a {
  color: var(--color-text-light);
  text-decoration: none;
  /* Zona cómoda para el dedo sin que se vea grande. */
  padding: 6px 2px;
}

.coleccion-migas a:hover {
  color: var(--color-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.coleccion-migas span[aria-hidden] {
  opacity: 0.5;
}

/* En pantallas grandes, el filtro activo destaca un poco más: hay
   espacio de sobra y ayuda a ubicarse. */
@media (min-width: 1024px) {
  a.filter-btn.active {
    box-shadow: 0 1px 0 rgba(26, 26, 26, 0.08);
  }
}

/* ============================================
   v3 · Texto propio de cada colección
   ============================================
   Va DEBAJO de los vestidos en /catalogo/fantasia, /catalogo/folklore…
   La clienta ve primero los diseños; Google lee el texto igual. Es lo
   que hace que la página sea distinta del catálogo general. */
.catalog-intro {
  max-width: 68ch;
  margin: 48px auto 8px;
  padding: 28px 20px 0;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  text-align: center;
}
.catalog-intro h2 {
  font-family: var(--font-display, Georgia, serif);
  font-weight: 400;
  font-size: 26px;
  margin: 0 0 10px;
  color: var(--color-text, #1a1a1a);
}
.catalog-intro h2::first-letter { text-transform: uppercase; }
.catalog-intro p {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--color-text-light, #6b6b6b);
}
@media (max-width: 640px) {
  .catalog-intro { margin-top: 32px; padding: 22px 16px 0; text-align: left; }
  .catalog-intro h2 { font-size: 21px; }
}