/* ═══════════════════════════════════════════
   Artesanías Ortiz — Componentes reutilizables
   ═══════════════════════════════════════════ */

/* ── Modal / Lightbox ──────────────────────── */
.modal-overlay {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(44,26,14,.7); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity var(--transition);
}
.modal-overlay.active { opacity: 1; pointer-events: auto; }
.modal-content {
  background: var(--blanco); border-radius: var(--radius);
  max-width: 700px; width: 90%; max-height: 90vh; overflow-y: auto;
  padding: 2rem; position: relative;
  transform: scale(.95); transition: transform var(--transition);
}
.modal-overlay.active .modal-content { transform: scale(1); }
.modal-close {
  position: absolute; top: 1rem; right: 1rem;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--beige); display: flex; align-items: center; justify-content: center;
  font-size: 1.25rem; color: var(--marron); transition: background var(--transition);
}
.modal-close:hover { background: var(--gris-200); }

/* ── Modal de producto ─────────────────────── */
.modal-product-img { border-radius: var(--radius-sm); overflow: hidden; margin-bottom: 1.5rem; }
.modal-product-img img { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.modal-product-title { font-family: var(--ff-heading); font-size: var(--fs-2xl); margin-bottom: .5rem; }
.modal-product-cat { color: var(--terracota); font-weight: 500; font-size: var(--fs-sm); margin-bottom: 1rem; text-transform: capitalize; }
.modal-product-desc { color: var(--gris-600); line-height: 1.7; margin-bottom: 1.5rem; }
.modal-product-extras { display: flex; gap: .75rem; overflow-x: auto; padding-bottom: .5rem; margin-bottom: 1.5rem; }
.modal-product-extras img {
  width: 80px; height: 80px; object-fit: cover; border-radius: var(--radius-sm);
  border: 2px solid var(--gris-200); cursor: pointer; transition: border-color var(--transition);
}
.modal-product-extras img:hover { border-color: var(--terracota); }

/* ── Toast / Alertas ───────────────────────── */
.toast {
  position: fixed; bottom: 2rem; left: 50%; transform: translateX(-50%) translateY(100px);
  background: var(--marron); color: var(--blanco); padding: .85rem 1.5rem;
  border-radius: var(--radius-sm); font-weight: 500; font-size: var(--fs-sm);
  box-shadow: var(--shadow-lg); z-index: 3000; transition: transform .3s ease;
  max-width: 90%; text-align: center;
}
.toast.show { transform: translateX(-50%) translateY(0); }
.toast.success { background: var(--verde-ok); }
.toast.error { background: var(--rojo-err); }

/* ── Skeleton loader ───────────────────────── */
.skeleton {
  background: linear-gradient(90deg, var(--gris-200) 25%, var(--beige) 50%, var(--gris-200) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius-sm);
}
@keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
.skeleton-card { height: 350px; border-radius: var(--radius); }

/* ── Scroll-to-top ─────────────────────────── */
.scroll-top {
  position: fixed; bottom: 5.5rem; right: 1.5rem; z-index: 800;
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--marron); color: var(--blanco);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-md); opacity: 0; pointer-events: none;
  transition: all var(--transition);
}
.scroll-top.visible { opacity: 1; pointer-events: auto; }
.scroll-top:hover { background: var(--terracota); color: var(--blanco); transform: translateY(-2px); }
.scroll-top svg { width: 20px; height: 20px; fill: currentColor; }

/* ── Animaciones de entrada ────────────────── */
.fade-in {
  opacity: 0; transform: translateY(20px);
  transition: opacity .5s ease, transform .5s ease;
}
.fade-in.visible { opacity: 1; transform: translateY(0); }