/* Tienda gourmet */

/* ---------- Pieza destacada ---------- */

.destacada {
  display: grid;
  background: var(--vino-hondo);
  color: var(--ceniza-claro);
}
.destacada__foto {
  min-height: 18rem;
  background: var(--vino);
  overflow: hidden;
}
.destacada__foto img {
  width: 100%;
  height: 100%;
  min-height: 18rem;
  max-height: 34rem;
  object-fit: cover;
}
.destacada__texto {
  align-self: center;
  padding: clamp(2rem, 1rem + 4vw, 5rem) var(--gutter);
  max-width: 40rem;
}
.destacada__texto h2 {
  font-size: var(--t-3xl);
  margin-bottom: 1rem;
}
.destacada__precio {
  font-family: var(--f-display);
  font-size: 2.4rem;
  font-weight: 800;
  line-height: 1;
  margin: 1.5rem 0;
}
.destacada__precio .nota {
  font-family: var(--f-texto);
  font-size: var(--t-s);
  font-weight: 400;
  margin-left: 0.5rem;
}
.destacada__botones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
@media (min-width: 56rem) {
  .destacada {
    grid-template-columns: 1.15fr 1fr;
    min-height: 34rem;
  }
  .destacada__foto img {
    max-height: none;
    min-height: 34rem;
  }
  .destacada__texto {
    padding-right: max(var(--gutter), calc((100vw - var(--ancho)) / 2));
    padding-left: clamp(2rem, 4vw, 4.5rem);
  }
}

/* ---------- Barra de catálogo ---------- */

.catalogo-bloque {
  padding-top: clamp(3rem, 2rem + 3vw, 5rem);
}
.barra-catalogo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
}
.orden {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--t-s);
}
.orden label {
  font-weight: 600;
}
.orden select {
  min-height: 2.75rem;
  padding: 0.4rem 2rem 0.4rem 0.8rem;
  border: 1.5px solid color-mix(in srgb, var(--hollin) 35%, transparent);
  border-radius: var(--r-s);
  background: var(--ceniza-claro);
}
.recuento {
  margin: 1.25rem 0 1.5rem;
}

/* ---------- Catálogo editorial ---------- */

.catalogo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-flow: dense;
  gap: clamp(2rem, 1rem + 3vw, 4rem) clamp(1rem, 0.5rem + 2vw, 2.5rem);
  align-items: end; /* precios y botones alineados en cada fila */
}
.pieza--l,
.pieza--m {
  grid-column: 1 / -1;
}
@media (min-width: 48rem) {
  .catalogo {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
  .pieza--l {
    grid-column: span 7;
  }
  .pieza--m {
    grid-column: span 5;
  }
  .pieza--s {
    grid-column: span 4;
  }
  .pieza--h {
    grid-column: span 6;
  }
}

.pieza__foto {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: var(--ceniza-claro);
  overflow: hidden;
  aspect-ratio: 1;
}
.pieza--l .pieza__foto {
  aspect-ratio: 5 / 4;
}
.pieza__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}
.pieza__foto:hover img {
  transform: scale(1.03);
}
.pieza__texto {
  padding-top: 0.9rem;
}
.pieza__texto h3 {
  margin: 0;
  font-size: 1.7rem;
  line-height: 1;
}
.pieza--l .pieza__texto h3 {
  font-size: var(--t-xl);
}
.pieza__nombre {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  letter-spacing: inherit;
  text-align: left;
  text-wrap: balance;
}
.pieza__nombre:hover {
  color: var(--brasa-hondo);
}
.pieza__formato {
  margin: 0.3rem 0 0;
}
.pieza__pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.75rem;
}
.pieza__precio {
  margin: 0;
  font-family: var(--f-display);
  font-size: 1.6rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.pieza__pie .boton {
  min-height: 2.75rem;
}

/* ---------- Importes de la tarjeta regalo ---------- */

.importes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.75rem 0 0;
  padding: 0;
  border: 0;
  min-width: 0;
}
.chip-radio {
  position: relative;
}
.chip-radio input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}
.chip-radio .chip {
  min-width: 3.5rem;
  min-height: 2.75rem;
  justify-content: center;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}
.chip-radio input:checked + .chip {
  background: var(--hollin);
  border-color: var(--hollin);
  color: var(--ceniza-claro);
}
.chip-radio input:focus-visible + .chip {
  outline: 3px solid var(--foco);
  outline-offset: 3px;
}

/* ---------- Ficha rápida ---------- */

.ficha {
  width: min(100% - 1.5rem, 56rem);
  max-height: calc(100dvh - 1.5rem);
  padding: 0;
  border: 0;
  border-radius: var(--r-s);
  background: var(--ceniza-claro);
  color: var(--hollin);
  overflow: auto;
}
.ficha[open] {
  display: grid;
  animation: ficha-entra 0.35s var(--ease);
}
.ficha::backdrop {
  background: rgb(30 26 23 / 0.6);
}
@keyframes ficha-entra {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
}
.ficha__cerrar {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  z-index: 2;
  background: var(--ceniza-claro);
}
.ficha__foto {
  background: var(--ceniza);
}
.ficha__foto img {
  width: 100%;
  height: 100%;
  max-height: 22rem;
  object-fit: cover;
}
.ficha__texto {
  padding: 1.5rem;
}
.ficha__texto h2 {
  font-size: var(--t-2xl);
  margin: 0 3rem 0.25rem 0;
}
.ficha__precio {
  margin: 0.5rem 0 1rem;
  font-family: var(--f-display);
  font-size: 2rem;
  font-weight: 800;
}
.ficha__alergenos {
  font-size: var(--t-s);
}
.ficha__accion {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.5rem;
}
.ficha__accion .boton {
  flex: 1 1 12rem;
}
@media (min-width: 46rem) {
  .ficha[open] {
    grid-template-columns: 1fr 1fr;
  }
  .ficha__foto img {
    max-height: none;
    min-height: 100%;
  }
  .ficha__texto {
    padding: 2.5rem 2rem;
  }
}
.cant {
  display: inline-flex;
  align-items: center;
  border: 1.5px solid color-mix(in srgb, var(--hollin) 35%, transparent);
  border-radius: var(--r-s);
}
.cant button {
  width: 2.75rem;
  height: 3rem;
  border: 0;
  background: transparent;
  font-size: 1.3rem;
}
.cant button:hover {
  background: color-mix(in srgb, var(--hollin) 8%, transparent);
}
.cant output {
  min-width: 2.25rem;
  text-align: center;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ---------- Garantías ---------- */

.garantias {
  padding-block: clamp(3rem, 2rem + 3vw, 5rem);
}
.garantias__fila {
  display: grid;
  gap: 2rem 3rem;
}
@media (min-width: 48rem) {
  .garantias__fila {
    grid-template-columns: repeat(3, 1fr);
  }
}
.garantias h3 {
  font-size: var(--t-xl);
  margin-bottom: 0.4rem;
  padding-top: 0.9rem;
  border-top: 2px solid var(--brasa);
}
.garantias p {
  margin: 0;
  color: var(--humo);
  max-width: 24rem;
}