/* Tienda: catálogo, carrito y pedido */

.pasos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 18px auto 0;
  max-width: 720px;
  padding: 0;
  list-style: none;
}

.pasos li {
  background: #fff;
  border: 2px solid var(--rosa-200);
  border-radius: 16px;
  padding: 10px 8px;
  text-align: center;
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1.25;
}

.pasos b {
  display: block;
  font-size: 1.4rem;
  line-height: 1.2;
}

/* ---- Productos ------------------------------------------------------------------ */

.productos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 18px;
}

.producto {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: var(--papel);
  border: 2px solid var(--rosa-200);
  border-radius: var(--radio-lg);
  padding: 22px 18px 18px;
  box-shadow: var(--sombra);
}

.producto__foto {
  position: relative;
  width: 168px;
  height: 168px;
  margin-bottom: 10px;
}

/* Rayitas de "brillo" alrededor de la galleta, como en el menú */
.producto__foto::before {
  content: '';
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  background: repeating-conic-gradient(from 8deg, var(--rosa-400) 0 3deg, transparent 3deg 30deg);
  -webkit-mask: radial-gradient(circle, transparent 62%, #000 63%, #000 70%, transparent 71%);
  mask: radial-gradient(circle, transparent 62%, #000 63%, #000 70%, transparent 71%);
  opacity: 0.55;
}

.producto__img {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  filter: drop-shadow(0 6px 10px rgba(74, 44, 34, 0.2));
}

.producto__img--dibujo svg {
  width: 100%;
  height: 100%;
}

.producto__nombre {
  margin: 4px 0 6px;
  font-family: var(--fuente-titulo);
  font-weight: 800;
  font-size: 1.45rem;
  line-height: 1.1;
}

.producto__nombre span {
  display: inline-block;
  background: var(--rosa-200);
  padding: 6px 14px 2px;
  border-radius: 12px 18px 12px 18px;
  transform: rotate(-1.5deg);
}

.producto__nombre::after {
  content: ' ♥';
  color: var(--rosa-500);
  font-size: 1rem;
}

.producto__desc {
  margin: 0 0 14px;
  color: var(--cafe-700);
  font-size: 0.95rem;
}

.tamanos {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.tamano {
  position: relative;
}

.tamano input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.tamano span {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 92px;
  padding: 6px 12px;
  border-radius: 14px;
  border: 2px dashed var(--rosa-300);
  background: #fff;
  line-height: 1.2;
}

.tamano small {
  font-weight: 800;
  font-size: 0.8rem;
  background: var(--rosa-100);
  border-radius: 6px;
  padding: 1px 6px;
  margin-bottom: 2px;
}

.tamano strong {
  font-family: var(--fuente-titulo);
  font-size: 1.15rem;
}

.tamano input:checked + span {
  border-style: solid;
  border-color: var(--rosa-600);
  background: var(--rosa-100);
}

.tamano input:focus-visible + span {
  outline: 3px solid var(--rosa-500);
  outline-offset: 2px;
}

.tamano input:disabled + span {
  opacity: 0.45;
  text-decoration: line-through;
}

.producto__accion {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  width: 100%;
}

.producto__accion .btn {
  flex: 1;
}

.contador {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.contador output {
  min-width: 28px;
  text-align: center;
  font-weight: 800;
  font-size: 1.1rem;
}

.producto__en-carrito {
  position: absolute;
  top: 14px;
  right: 14px;
  background: var(--rosa-600);
  color: #fff;
  font-weight: 800;
  font-size: 0.8rem;
  padding: 3px 10px;
  border-radius: 999px;
}

.producto--agotado .producto__foto {
  filter: grayscale(0.7);
  opacity: 0.7;
}

.producto__agotado {
  font-family: var(--fuente-mano);
  font-size: 1.5rem;
  color: var(--rosa-700);
  margin: 6px 0 0;
}

/* ---- Bloques informativos --------------------------------------------------------- */

.bloques {
  display: grid;
  gap: 16px;
  margin-top: 34px;
}

@media (min-width: 760px) {
  .bloques {
    grid-template-columns: 1.2fr 1fr;
  }
}

.bloque-fidelidad {
  display: flex;
  gap: 16px;
  align-items: center;
  background: var(--rosa-100);
  border-color: var(--rosa-300);
}

.bloque-fidelidad__sellos {
  display: grid;
  grid-template-columns: repeat(5, 18px);
  gap: 4px;
  flex-shrink: 0;
}

.bloque-fidelidad__sellos i {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px dashed var(--rosa-400);
  background: #fff;
}

.bloque-fidelidad__sellos i.lleno {
  border-style: solid;
  border-color: var(--cafe-700);
  background: var(--galleta);
}

.bloque-fidelidad__sellos i.regalo {
  border-color: var(--rosa-600);
  background: var(--rosa-500);
}

.bloque h3 {
  margin: 0 0 4px;
  font-family: var(--fuente-titulo);
  font-size: 1.25rem;
  line-height: 1.2;
}

.bloque p {
  margin: 0 0 10px;
}

.bloque p:last-child {
  margin-bottom: 0;
}

/* ---- Barra del carrito ------------------------------------------------------------ */

.barra-carrito {
  position: fixed;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  width: min(calc(100% - 24px), 560px);
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 10px 10px 18px;
  background: var(--cafe-900);
  color: #fff;
  border-radius: 999px;
  box-shadow: 0 12px 30px -8px rgba(74, 44, 34, 0.55);
  animation: sube 0.25s ease;
}

.barra-carrito__info {
  line-height: 1.2;
  font-weight: 700;
}

.barra-carrito__info strong {
  display: block;
  font-family: var(--fuente-titulo);
  font-size: 1.2rem;
}

@keyframes sube {
  from { transform: translate(-50%, 20px); opacity: 0; }
}

/* ---- Diálogo del pedido ----------------------------------------------------------- */

.dialogo {
  border: 0;
  padding: 0;
  width: 100%;
  max-width: 520px;
  max-height: 100dvh;
  height: 100dvh;
  margin: 0 0 0 auto;
  background: var(--crema);
  color: var(--cafe-900);
}

.dialogo::backdrop {
  background: rgba(74, 44, 34, 0.45);
}

@media (max-width: 560px) {
  .dialogo {
    max-width: none;
    height: auto;
    max-height: 94dvh;
    margin: auto 0 0;
    border-radius: 24px 24px 0 0;
  }
}

.dialogo__cab {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  background: var(--rosa-100);
  border-bottom: 2px dashed var(--rosa-300);
}

.dialogo__cab h2 {
  margin: 0;
  font-family: var(--fuente-titulo);
  font-size: 1.4rem;
}

.dialogo__cuerpo {
  padding: 16px 18px 28px;
}

.dialogo__seccion {
  font-family: var(--fuente-titulo);
  font-weight: 800;
  font-size: 1.1rem;
  margin: 20px 0 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.dialogo__seccion::after {
  content: '';
  flex: 1;
  border-top: 2px dashed var(--rosa-200);
}

.lineas {
  list-style: none;
  margin: 0;
  padding: 0;
}

.linea {
  display: grid;
  grid-template-columns: 54px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px dashed var(--rosa-200);
}

.linea__img {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  object-fit: cover;
}

.linea__img--dibujo svg {
  width: 54px;
  height: 54px;
}

.linea__nombre {
  font-weight: 800;
  line-height: 1.2;
}

.linea__detalle {
  font-size: 0.85rem;
  color: var(--cafe-500);
}

.linea__der {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.linea__der .btn-icono {
  width: 32px;
  height: 32px;
  font-size: 0.95rem;
}

.totales {
  margin: 14px 0 6px;
  padding: 12px 14px;
  background: #fff;
  border: 2px solid var(--rosa-200);
  border-radius: 14px;
}

.totales div {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.totales .total {
  font-family: var(--fuente-titulo);
  font-weight: 800;
  font-size: 1.3rem;
  border-top: 2px dashed var(--rosa-200);
  margin-top: 6px;
  padding-top: 6px;
}

.premio-caja {
  background: linear-gradient(135deg, var(--rosa-100), #fff);
  border: 2px solid var(--rosa-400);
  border-radius: 16px;
  padding: 14px;
  margin: 10px 0 14px;
}

.premio-caja h3 {
  margin: 0 0 8px;
  font-family: var(--fuente-titulo);
  font-size: 1.15rem;
}

.premio-caja .opciones {
  grid-template-columns: 1fr;
}

.vacio {
  text-align: center;
  padding: 30px 10px;
  color: var(--cafe-500);
}

.vacio svg {
  width: 90px;
  margin: 0 auto 8px;
  display: block;
}

/* ---- Pedido enviado ------------------------------------------------------------- */

.exito {
  text-align: center;
}

.exito__galleta {
  width: 110px;
  margin: 6px auto 0;
  animation: rebota 1.2s ease infinite alternate;
}

@keyframes rebota {
  to { transform: translateY(-8px) rotate(-6deg); }
}

.exito h3 {
  font-family: var(--fuente-titulo);
  font-size: 1.6rem;
  margin: 8px 0 0;
}

.exito__codigo {
  display: inline-block;
  font-family: var(--fuente-titulo);
  font-weight: 800;
  font-size: 1.5rem;
  letter-spacing: 0.06em;
  background: var(--rosa-200);
  padding: 4px 18px 0;
  border-radius: 12px;
  margin: 6px 0 14px;
}

.exito .tarjeta {
  text-align: left;
  margin: 12px 0;
}

.exito .tarjeta h4 {
  margin: 0 0 6px;
  font-family: var(--fuente-titulo);
  font-size: 1.05rem;
}

.exito .tarjeta p {
  margin: 0 0 4px;
}

.dato-pago {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  background: var(--rosa-50);
  border-radius: 10px;
  padding: 6px 10px;
  margin-top: 6px;
  font-weight: 800;
}

/* ---- Cupón ---- */

.cupon-fila {
  display: flex;
  gap: 8px;
}

.cupon-fila .entrada {
  flex: 1;
  min-width: 0;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.totales__desc {
  color: var(--verde);
  font-weight: 800;
}

/* ---- Stock ---- */

.quedan {
  display: block;
  font-style: normal;
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--verde);
  margin-top: 2px;
}

.quedan--pocas {
  color: var(--rosa-700);
}

.quedan--cero {
  color: var(--cafe-500);
}

/* ---- Pedido grande ---- */

.aviso-grande {
  background: var(--ambar-claro);
  border: 2px solid #f1d39a;
  border-radius: 14px;
  padding: 10px 14px;
  margin: 12px 0 4px;
}

.aviso-grande b {
  font-family: var(--fuente-titulo);
  font-size: 1.05rem;
}

.aviso-grande p {
  margin: 4px 0 0;
  font-size: 0.92rem;
}

.opcional {
  font-weight: 600;
  font-size: 0.82rem;
  color: var(--cafe-500);
  background: var(--rosa-50);
  border-radius: 6px;
  padding: 1px 6px;
}

.opcional--req {
  color: var(--rosa-700);
  background: var(--rosa-100);
}

.opcion input:disabled + span {
  opacity: 0.45;
  text-decoration: line-through;
  cursor: not-allowed;
}