/* ============================================================
   WRD — premium.css  ·  La línea Premium en «Noche y Día»
   ============================================================
   Construido ENCIMA de css/tienda.css. La barra, la cuenta y el pie
   vienen de css/gate.css, igual que en la tienda.

   Premium es la misma dulcería con más capricho: el hero de
   chocolate que gotea, y tarjetas-sticker con la sombra dura en
   MANGO (el oro de la casa) en vez de naranja.

   Qué vive acá:
     1. Hero premium (.hero-premium.t-noche)
     2. Catálogo y grilla (+ el estado vacío)
     3. La tarjeta premium
     4. Stock: agotado y "quedan pocos"

   Este archivo NO crea el DOM: lo pinta js/premium-render.js.
   ============================================================ */


/* ============================================================
   1 · HERO PREMIUM
   ============================================================ */

.premium-page main {
  max-width: none;
  padding-inline: 0;
  padding-bottom: 0;
}

.hero.hero-premium {
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: 30px 16px 60px;
  text-align: center;
  background:
    linear-gradient(rgb(30 18 12 / 0.5), rgb(30 18 12 / 0.5)),
    var(--t-chispitas) 0 0 / 160px 160px,
    radial-gradient(90% 70% at 50% 40%, var(--t-noche-2) 0%, rgb(58 36 24 / 0) 70%),
    var(--t-noche);
  z-index: 2;
}

.hero-premium-sello {
  --giro: -4deg;
  font-size: 17px;
}

.hero-premium h1 {
  max-width: 12ch;
  margin: 0;
  font-family: var(--t-font-display);
  font-size: 44px;
  font-weight: 700;
  font-stretch: 108%;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--t-blanco-choco);
  text-shadow: 3px 3px 0 var(--t-naranja-texto);
}

.hero-premium h1 .hero-premium-pinta {
  color: var(--t-mango);
  text-shadow: 3px 3px 0 var(--t-rojo-boton);
}

.hero-premium .tagline {
  max-width: 30ch;
  margin: 0 auto;
  font-size: 17px;
  line-height: 1.4;
  color: var(--t-blanco-choco-2);
}

@media (min-width: 56.25em) {
  .hero.hero-premium { padding: 56px 24px 84px; }
  .hero-premium h1 { font-size: 64px; }
  .hero-premium .tagline { font-size: 20px; }
}


/* ============================================================
   2 · CATÁLOGO Y GRILLA
   ============================================================ */

.premium-catalogo {
  padding: 70px 0 8px;
}

/* El envase de la tienda (home.css no se carga acá). */
.premium-page .envase {
  width: 100%;
  max-width: 1076px;
  margin-inline: auto;
  padding-inline: 16px;
}

@media (min-width: 56.25em) {
  .premium-page .envase { padding-inline: 24px; }
}

.premium-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 26px;
}

@media (min-width: 40em) {
  .premium-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 56.25em) {
  .premium-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
}

/* "La vitrina premium está en preparación." — un cartel, no un hueco. */
.premium-grid > p {
  grid-column: 1 / -1;
  max-width: 460px;
  margin: 0 auto;
  padding: 22px 20px;
  text-align: center;
  font-family: var(--t-font-display);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--t-choco);
  background: var(--t-papel);
  border: var(--t-borde);
  border-radius: var(--t-r-3);
  box-shadow: 6px 6px 0 var(--t-mango);
  transform: rotate(-1deg);
}


/* ============================================================
   3 · LA TARJETA PREMIUM  ·  .premium-tarjeta (un <button>)
   ============================================================ */

.premium-tarjeta {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  width: 100%;
  padding: 0 0 16px;
  overflow: hidden;
  font: inherit;
  text-align: left;
  color: var(--t-choco);
  background: var(--t-papel);
  border: var(--t-borde);
  border-radius: 26px;
  box-shadow: 7px 7px 0 var(--t-mango);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 90ms ease-out, box-shadow 90ms ease-out;
}

.premium-tarjeta:active {
  transform: translate(3px, 3px);
  box-shadow: 4px 4px 0 var(--t-mango);
}

.premium-tarjeta-foto {
  display: grid;
  place-items: center;
  height: 190px;
  overflow: hidden;
  font-size: 64px;
  line-height: 1;
  background:
    repeating-conic-gradient(from 0deg at 50% 62%, var(--t-mango) 0deg 10deg, var(--t-naranja-2) 10deg 20deg);
  border-bottom: var(--t-borde);
}

.premium-tarjeta-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.premium-tarjeta-foto .producto-icono {
  width: 200px;
  max-width: none;
  height: auto;
  transform: rotate(-8deg);
}

.premium-tarjeta-foto .producto-icono > :nth-child(-n+2) { display: none; }

.premium-tarjeta-nombre {
  margin: 4px 16px 0;
  font-family: var(--t-font-display);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.05;
  color: var(--t-choco);
}

.premium-tarjeta-desc {
  margin: 0 16px;
  font-size: 15px;
  line-height: 1.45;
  color: var(--t-choco-2);
}

.premium-tarjeta-detalle {
  width: fit-content;
  margin: 0 16px;
  padding: 2px 10px 3px;
  font-family: var(--t-font-chicle);
  font-size: 15px;
  color: #fff;
  background: var(--t-verde-boton);
  border: var(--t-borde-fino);
  border-radius: var(--t-r-1);
  transform: rotate(-2deg);
}

.premium-tarjeta-precio {
  margin: auto 16px 0;
  padding-top: 4px;
  font-family: var(--t-font-display);
  font-size: 36px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--t-choco);
}

/* El botón es decorativo: la tarjeta entera es el control. */
.premium-tarjeta-btn {
  width: auto;
  margin: 2px 16px 0;
  pointer-events: none;
}


/* ============================================================
   4 · STOCK
   ============================================================ */

.premium-tarjeta.agotado {
  cursor: default;
  box-shadow: 7px 7px 0 var(--t-crema-2);
}

.premium-tarjeta.agotado .premium-tarjeta-foto { filter: grayscale(0.85); }
.premium-tarjeta.agotado .premium-tarjeta-precio { color: var(--t-choco-3); }

.premium-tarjeta .cinta-agotado {
  --giro: -6deg;
  position: absolute;
  z-index: 2;
  top: 14px;
  left: 14px;
}

.premium-tarjeta .quedan {
  width: fit-content;
  margin: 0 16px;
  padding: 2px 10px 3px;
  font-family: var(--t-font-chicle);
  font-size: 16px;
  color: #fff;
  background: var(--t-rojo-boton);
  border: var(--t-borde-fino);
  border-radius: var(--t-r-1);
  transform: rotate(-2deg);
}

@media (prefers-reduced-motion: reduce) {
  .premium-tarjeta { transition: none; }
}