/* ==========================================================================
   Estructura de página. MOBILE-FIRST: los estilos base son para celular y
   los min-width (en em) los amplían para tablet y computadora.
   ========================================================================== */

/* Cabecera */
.site-header {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--color-bg);
  background: color-mix(in srgb, var(--color-bg) 82%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--color-border);
}
.header-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0.625rem 1rem;
}

/* Portada */
.hero { max-width: 67.5rem; margin: 0 auto; padding: 1.25rem 1rem 0.25rem; }
.hero-card {
  display: grid;
  gap: 1.25rem;
  padding: 1.5rem;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: 1.75rem;
  background:
    radial-gradient(32rem 16rem at 95% 0%, color-mix(in srgb, var(--color-accent) 24%, transparent), transparent),
    radial-gradient(26rem 15rem at 0% 100%, color-mix(in srgb, var(--color-gold) 30%, transparent), transparent),
    var(--color-surface);
}
.hero-fan { display: none; position: relative; height: 14.375rem; }

/* Tienda: filtros + resultados */
.results { min-width: 0; }   /* evita que la cuadrícula desborde en pantallas angostas */
.shop {
  display: grid;
  gap: 1.5rem;
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0.75rem 0.625rem 2.5rem;
}
.product-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));   /* 2 tarjetas en celular */
  gap: 0.625rem;
}

.site-footer {
  padding: 1.75rem 1rem;
  border-top: 1px solid var(--color-border);
  color: var(--color-muted);
  text-align: center;
}
.site-footer a { color: var(--color-accent); font-weight: 700; }

/* Tablet pequeña */
@media (min-width: 37.5em) {
  .shop { padding-inline: 1rem; }
  .product-grid { grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr)); gap: 1.125rem; }
}

/* Tablet grande */
@media (min-width: 45em) {
  .hero-card { grid-template-columns: 1.3fr 1fr; align-items: center; padding: 3rem; }
  .hero-fan { display: block; }
}

/* Computadora: los filtros pasan a barra lateral */
@media (min-width: 56.25em) {
  .shop { grid-template-columns: 15.625rem 1fr; align-items: start; padding-top: 1.5rem; padding-bottom: 3rem; }
}