/* ============================================================
   Ajustes del menu que no pasan por SCSS
   ------------------------------------------------------------
   Van en su propio archivo a proposito: LasGuayuzas-theme.css
   publicado NO coincide con lo que produce hoy su .scss, asi que
   recompilar el tema para agregar unas lineas cambiaria estilos
   que ya estan en produccion. Este archivo se carga despues del
   tema en index.html.
   ============================================================ */

/* ------------------------------------------------------------
   1. Apilamiento del titulo de subcategoria (sticky)
   ------------------------------------------------------------
   .group-title es sticky pero tenia z-index:auto. Entre dos
   elementos posicionados sin z-index gana el que va despues en
   el HTML, asi que cualquier tarjeta posicionada le pasaba por
   encima al hacer scroll.

   Con z-index propio el titulo queda SIEMPRE sobre las tarjetas.
   El 5 es relativo a .group-container (z-index:100), que a su vez
   esta por debajo del carrusel de categorias (z-index:110): los
   selectores de arriba siguen tapando al titulo, como debe ser.
   ------------------------------------------------------------ */
.group-title {
  z-index: 5;
}

/* ------------------------------------------------------------
   2. Etiqueta "Nuevo"
   ------------------------------------------------------------
   La logica de cuando se muestra vive en scripts/new-badge.js.
   ------------------------------------------------------------ */

/* Ancla de la etiqueta. Solo en las tarjetas que la llevan:
   si se le pone `position` a TODAS las fotos, entran en la capa
   de elementos posicionados y vuelven a tapar el titulo sticky. */
.card__photo--con-badge {
  position: relative;
}

.card__badge {
  position: absolute;
  top: 0.5em;
  right: 0.5em;
  z-index: 2;

  padding: 0.25em 0.7em;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.45);

  background: linear-gradient(135deg, #e57a52, #de5927);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);

  font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
  font-size: 0.68em;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.4;
  color: #ffffff;
  white-space: nowrap;

  pointer-events: none;
}

/* Respaldo para tarjetas sin foto: la etiqueta va en el flujo,
   junto al titulo, en vez de flotar sobre una imagen que no existe. */
.card__badge--inline {
  position: static;
  align-self: flex-start;
  margin-bottom: 0.2em;
}

@media (prefers-reduced-motion: no-preference) {
  .card__badge {
    animation: badge-nuevo-entrada 0.35s ease-out both;
  }
}

@keyframes badge-nuevo-entrada {
  from {
    opacity: 0;
    transform: translateY(-0.3em);
  }
  to {
    opacity: 1;
    transform: none;
  }
}