/**
 * TuttyCosas Kids — components.css
 * Cards · Botones · Modales · Chat · Toast · Carrito · WhatsApp
 * Sprint 2 — Arquitectura modular
 */

/* ── ANNOUNCEMENT BAR ── */
.ann-bar {
  background: var(--sage-dark); color: var(--cream);
  text-align: center; padding: 9px 20px;
  font-size: 0.78rem; font-weight: 500; letter-spacing: 0.6px;
  position: relative;
}
.ann-bar strong { color: #C8E6CA; font-weight: 600; }
.ann-bar-close {
  position: absolute; right: 12px; top: 50%;
  transform: translateY(-50%);
  background: none; border: none;
  color: rgba(250,247,242,0.6); cursor: pointer;
  font-size: 1rem; line-height: 1; padding: 4px;
  transition: color 0.2s;
}
.ann-bar-close:hover { color: var(--cream); }

/* ── BOTONES BASE ── */
.btn-primary {
  background: var(--sage); color: var(--white);
  padding: 13px 28px; border-radius: var(--radius-pill);
  font-weight: 600; font-size: 0.9rem;
  transition: all 0.25s var(--ease-out);
  display: inline-flex; align-items: center; gap: 8px; border: none;
}
.btn-primary:hover { background: var(--sage-dark); transform: translateY(-2px); box-shadow: var(--shadow-sm); }

.btn-secondary {
  background: transparent; color: var(--bark-mid);
  padding: 13px 22px; border-radius: var(--radius-pill);
  font-weight: 500; font-size: 0.88rem;
  border: 1.5px solid var(--cream-deep);
  transition: all 0.25s var(--ease-out);
  display: inline-flex; align-items: center; gap: 8px;
}
.btn-secondary:hover { border-color: var(--sage); color: var(--sage-dark); }

.btn-sage {
  background: var(--sage); color: var(--white);
  padding: 13px 24px; border-radius: var(--radius-pill);
  font-weight: 600; font-size: 0.88rem; border: none;
  cursor: pointer; transition: all 0.25s var(--ease-out);
}
.btn-sage:hover { background: var(--sage-dark); transform: scale(1.03); }

/* ── PRODUCT CARDS ── */
.product-card {
  background: var(--white); border-radius: var(--radius-lg);
  overflow: hidden; cursor: pointer;
  transition: all 0.3s var(--ease-out);
  box-shadow: var(--shadow-xs);
  border: 1px solid var(--cream-deep);
}
.product-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }

.product-img-wrap { position: relative; aspect-ratio: 1; overflow: hidden; background: var(--cream-dark); }
.product-img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.5s var(--ease-out);
}
.product-card:hover .product-img { transform: scale(1.06); }

.skeleton {
  background: linear-gradient(90deg, var(--cream-dark) 25%, var(--cream-deep) 50%, var(--cream-dark) 75%);
  background-size: 400% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
}

.product-badge {
  position: absolute; top: 12px; left: 12px;
  padding: 4px 10px; border-radius: var(--radius-pill);
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.5px;
  text-transform: uppercase;
}
.badge-sale { background: var(--terra); color: var(--white); }
.badge-new  { background: var(--sage); color: var(--white); }

.product-actions {
  position: absolute; top: 10px; right: 10px;
  display: flex; flex-direction: column; gap: 6px;
  opacity: 0; transform: translateX(8px);
  transition: all 0.25s var(--ease-out);
}
.product-card:hover .product-actions { opacity: 1; transform: translateX(0); }
.action-btn {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--white); box-shadow: var(--shadow-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.9rem; transition: all 0.2s; border: none; cursor: pointer;
}
.action-btn:hover, .action-btn.active { background: var(--terra-light); transform: scale(1.1); }

.product-info { padding: 16px; }
.product-meta { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.product-cat  { font-size: 0.68rem; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--sage); }
.product-rating { font-size: 0.75rem; color: var(--stone); display: flex; align-items: center; gap: 3px; }
.stars { color: var(--terra); }
.product-name { font-family: var(--font-display); font-size: 0.95rem; font-weight: 600; color: var(--bark); margin-bottom: 10px; line-height: 1.3; }
.product-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.price-wrap { display: flex; flex-direction: column; }
.price-current { font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; color: var(--sage-dark); }
.price-original { font-size: 0.75rem; color: var(--stone-light); text-decoration: line-through; }
.btn-add {
  background: var(--sage-pale); color: var(--sage-dark);
  padding: 7px 14px; border-radius: var(--radius-pill);
  font-size: 0.75rem; font-weight: 600; border: none; cursor: pointer;
  transition: all 0.2s; white-space: nowrap;
}
.btn-add:hover { background: var(--sage); color: var(--white); transform: scale(1.05); }

/* ── CART SIDEBAR ── */
.cart-overlay {
  position: fixed; inset: 0;
  background: rgba(44,36,22,0.45); z-index: 200;
  opacity: 0; pointer-events: none; transition: opacity 0.3s;
  backdrop-filter: blur(3px);
}
.cart-overlay.open { opacity: 1; pointer-events: all; }
.cart-sidebar {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(420px, 100vw);
  background: var(--cream); z-index: 201;
  display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform 0.38s var(--ease-out);
  box-shadow: var(--shadow-lg);
}
.cart-sidebar.open { transform: translateX(0); }
.cart-header { padding: 22px 24px; border-bottom: 1px solid var(--cream-deep); display: flex; align-items: center; justify-content: space-between; }
.cart-header h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; color: var(--bark); }
.cart-close {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--cream-dark);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 1rem; color: var(--bark-mid); transition: all 0.2s;
}
.cart-close:hover { background: var(--sage); color: var(--white); }
.cart-items { flex: 1; overflow-y: auto; padding: 18px 24px; }
.cart-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; gap: 12px; color: var(--stone); text-align: center; }
.cart-empty-icon { font-size: 2.8rem; opacity: 0.5; }
.cart-empty p    { font-weight: 500; font-size: 0.9rem; color: var(--bark-mid); }
.cart-item  { display: flex; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--cream-deep); align-items: flex-start; }
.cart-item-img   { width: 68px; height: 68px; border-radius: var(--radius-sm); object-fit: cover; background: var(--cream-dark); flex-shrink: 0; }
.cart-item-info  { flex: 1; }
.cart-item-name  { font-weight: 600; font-size: 0.85rem; color: var(--bark); margin-bottom: 3px; }
.cart-item-price { color: var(--sage); font-weight: 700; font-size: 0.9rem; }
.cart-item-qty   { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.qty-btn {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--cream-dark);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-weight: 700; font-size: 0.85rem;
  transition: all 0.2s; border: none; color: var(--bark);
}
.qty-btn:hover { background: var(--sage); color: var(--white); }
.cart-item-remove { color: var(--stone-light); cursor: pointer; padding: 4px; font-size: 0.75rem; transition: color 0.2s; }
.cart-item-remove:hover { color: var(--terra); }
.cart-footer      { padding: 20px 24px; border-top: 1px solid var(--cream-deep); }
.cart-subtotal    { display: flex; justify-content: space-between; font-weight: 600; margin-bottom: 14px; font-size: 0.95rem; color: var(--bark); }
.cart-subtotal .price { color: var(--sage-dark); font-family: var(--font-display); font-size: 1.2rem; font-weight: 700; }
.cart-free-shipping {
  background: var(--sage-pale); border-radius: var(--radius-sm);
  padding: 8px 12px; font-size: 0.78rem; font-weight: 500; color: var(--sage-dark);
  margin-bottom: 14px; text-align: center;
}
.cart-whatsapp {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--whatsapp); color: var(--white);
  padding: 11px 20px; border-radius: var(--radius-pill);
  font-weight: 600; font-size: 0.85rem;
  transition: all 0.25s; border: none; cursor: pointer;
  margin-bottom: 8px; text-decoration: none;
}
.cart-whatsapp:hover { background: var(--whatsapp-dark); transform: translateY(-2px); }
.btn-checkout {
  width: 100%; display: block;
  background: var(--sage-dark); color: var(--white);
  padding: 14px 20px; border-radius: var(--radius-pill);
  font-weight: 600; font-size: 0.9rem;
  transition: all 0.25s; border: none; cursor: pointer;
  text-align: center; margin-bottom: 10px;
}
.btn-checkout:hover { background: var(--sage); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.cart-note { text-align: center; font-size: 0.72rem; color: var(--stone); font-weight: 400; }

/* ── PRODUCT MODAL ── */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(44,36,22,0.55); z-index: 200;
  opacity: 0; pointer-events: none; transition: opacity 0.3s;
  display: flex; align-items: center; justify-content: center; padding: 16px;
  backdrop-filter: blur(5px);
}
.modal-overlay.open { opacity: 1; pointer-events: all; }
.modal-box {
  background: var(--cream); border-radius: var(--radius-xl);
  max-width: 820px; width: 100%; max-height: 90vh;
  overflow-y: auto;
  transform: scale(0.92); transition: transform 0.35s var(--ease-spring);
  position: relative;
}
.modal-overlay.open .modal-box { transform: scale(1); }
.modal-inner    { display: grid; grid-template-columns: 1fr 1fr; }
.modal-img-col  { background: var(--cream-dark); border-radius: var(--radius-xl) 0 0 var(--radius-xl); overflow: hidden; }
.modal-img      { width: 100%; height: 100%; min-height: 320px; object-fit: cover; }
.modal-info-col { padding: 36px 32px; }
.modal-close {
  position: absolute; top: 16px; right: 16px;
  background: var(--white); border: none;
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; box-shadow: var(--shadow-sm);
  font-size: 0.9rem; color: var(--bark); z-index: 1; transition: all 0.2s;
}
.modal-close:hover { background: var(--sage); color: var(--white); }

/* ── NUBI IA CHAT ── */
.chat-fab { position: fixed; bottom: 24px; right: 24px; z-index: 150; }
.chat-fab-btn {
  width: 58px; height: 58px; background: var(--sage);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; box-shadow: var(--shadow-lg);
  cursor: pointer; transition: all 0.25s var(--ease-spring); border: none;
  animation: float 3.5s ease-in-out infinite;
}
.chat-fab-btn:hover { background: var(--sage-dark); transform: scale(1.1); }
.chat-fab-badge {
  position: absolute; top: -3px; right: -3px;
  background: var(--terra); color: var(--white); border-radius: 50%;
  width: 20px; height: 20px; font-size: 0.62rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.chat-window {
  position: fixed; bottom: 94px; right: 24px;
  width: min(380px, calc(100vw - 48px)); height: 520px;
  background: var(--cream); border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg); z-index: 151;
  display: flex; flex-direction: column; overflow: hidden;
  transform: scale(0.88) translateY(16px);
  opacity: 0; pointer-events: none; transform-origin: bottom right;
  transition: all 0.3s var(--ease-spring);
  border: 1px solid var(--cream-deep);
}
.chat-window.open { transform: scale(1) translateY(0); opacity: 1; pointer-events: all; }
.chat-win-header { background: var(--sage-dark); padding: 16px 20px; color: var(--cream); display: flex; align-items: center; gap: 12px; }
.chat-avatar { width: 38px; height: 38px; background: rgba(250,247,242,0.15); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; }
.chat-win-info h4 { font-family: var(--font-display); font-weight: 600; font-size: 0.9rem; }
.chat-win-info p  { font-size: 0.72rem; opacity: 0.75; margin-top: 1px; }
.chat-online { display: inline-block; width: 7px; height: 7px; background: #6BCB77; border-radius: 50%; margin-right: 4px; }
.chat-close-btn {
  margin-left: auto; background: rgba(250,247,242,0.12); border: none;
  color: var(--cream); width: 30px; height: 30px; border-radius: 50%;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background 0.2s; font-size: 0.9rem;
}
.chat-close-btn:hover { background: rgba(250,247,242,0.25); }
.chat-messages { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; background: var(--cream-dark); }
.msg       { display: flex; gap: 7px; max-width: 90%; }
.msg.user  { margin-left: auto; flex-direction: row-reverse; }
.msg-bubble { padding: 9px 14px; border-radius: 16px; font-size: 0.85rem; line-height: 1.55; font-weight: 400; }
.msg.bot .msg-bubble  { background: var(--white); color: var(--bark); border-bottom-left-radius: 4px; box-shadow: var(--shadow-xs); }
.msg.user .msg-bubble { background: var(--sage); color: var(--white); border-bottom-right-radius: 4px; }
.msg-time  { font-size: 0.65rem; color: var(--stone); margin-top: 3px; padding: 0 4px; }
.chat-suggestions { display: flex; gap: 5px; flex-wrap: wrap; padding: 8px 14px; background: var(--cream-dark); }
.chat-suggestion-btn {
  background: var(--white); border: 1px solid var(--cream-deep);
  color: var(--sage-dark); padding: 5px 11px; border-radius: var(--radius-pill);
  font-size: 0.72rem; font-weight: 500; cursor: pointer; transition: all 0.2s; white-space: nowrap;
}
.chat-suggestion-btn:hover { background: var(--sage); color: var(--white); border-color: var(--sage); }
.typing-indicator { display: flex; gap: 4px; align-items: center; padding: 9px 13px; }
.typing-dot {
  width: 6px; height: 6px; background: var(--stone-light); border-radius: 50%;
  animation: typingBounce 1.2s ease-in-out infinite;
}
.typing-dot:nth-child(2) { animation-delay: 0.2s; }
.typing-dot:nth-child(3) { animation-delay: 0.4s; }
.chat-input-wrap { padding: 11px 14px; border-top: 1px solid var(--cream-deep); display: flex; gap: 8px; background: var(--cream); }
.chat-input {
  flex: 1; padding: 9px 14px;
  border: 1.5px solid var(--cream-deep); border-radius: var(--radius-pill);
  font-family: var(--font-body); font-size: 0.85rem;
  outline: none; background: var(--cream-dark); color: var(--bark);
  transition: border-color 0.2s;
}
.chat-input:focus { border-color: var(--sage); background: var(--white); }
.chat-send-btn {
  width: 38px; height: 38px; background: var(--sage); border: none;
  border-radius: 50%; color: var(--white); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.2s; flex-shrink: 0;
}
.chat-send-btn:hover { background: var(--sage-dark); transform: scale(1.08); }
.chat-rate-warn { font-size: 0.72rem; color: var(--terra); text-align: center; padding: 4px 14px; }

/* ── WHATSAPP FLOTANTE ── */
.wa-fab { position: fixed; bottom: 96px; right: 24px; z-index: 148; }
.wa-fab-btn {
  width: 48px; height: 48px;
  background: var(--whatsapp); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 20px rgba(37,211,102,0.35);
  cursor: pointer; transition: all 0.25s var(--ease-spring);
  border: none; font-size: 1.4rem;
  animation: waPulse 3s ease-in-out infinite;
  text-decoration: none;
}
.wa-fab-btn:hover { background: var(--whatsapp-dark); transform: scale(1.12); box-shadow: 0 6px 24px rgba(37,211,102,0.45); }
.wa-tooltip {
  position: absolute; bottom: 0; right: 58px;
  background: var(--bark); color: var(--cream);
  padding: 6px 12px; border-radius: var(--radius-md);
  font-size: 0.75rem; font-weight: 500; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: all 0.2s;
  transform: translateX(4px);
}
.wa-fab:hover .wa-tooltip { opacity: 1; transform: translateX(0); }
.wa-tooltip::after {
  content: '';
  position: absolute; left: 100%; top: 50%; transform: translateY(-50%);
  border: 5px solid transparent; border-left-color: var(--bark);
}

/* ── TOAST ── */
.toast {
  position: fixed; bottom: 96px; left: 50%;
  transform: translateX(-50%) translateY(16px);
  background: var(--bark); color: var(--cream);
  padding: 11px 22px; border-radius: var(--radius-pill);
  font-weight: 500; font-size: 0.85rem; z-index: 300;
  opacity: 0; transition: all 0.3s var(--ease-out);
  white-space: nowrap; display: flex; align-items: center; gap: 8px;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── TRUST BAR ── */
.trust-bar { background: var(--white); border-bottom: 1px solid var(--cream-deep); padding: 18px 28px; }
.trust-bar-inner { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
.trust-item { display: flex; align-items: center; gap: 10px; }
.trust-icon { font-size: 1.4rem; flex-shrink: 0; }
.trust-text strong { display: block; font-size: 0.82rem; font-weight: 600; color: var(--bark); }
.trust-text span   { font-size: 0.72rem; color: var(--stone); }

/* ── TESTIMONIOS ── */
.testimonios-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.testi-card { background: var(--white); border-radius: var(--radius-lg); padding: 28px; border: 1px solid var(--cream-deep); }
.testi-stars  { color: var(--terra); font-size: 0.85rem; margin-bottom: 12px; letter-spacing: 2px; }
.testi-text   { font-size: 0.88rem; color: var(--bark-mid); line-height: 1.75; margin-bottom: 18px; font-style: italic; font-family: var(--font-display); font-weight: 400; }
.testi-author { display: flex; align-items: center; gap: 10px; }
.testi-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--sage-pale); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; flex-shrink: 0; }
.testi-name   { font-size: 0.85rem; font-weight: 600; color: var(--bark); }
.testi-loc    { font-size: 0.72rem; color: var(--stone); margin-top: 1px; }

/* ── NEWSLETTER ── */
.newsletter       { background: var(--cream-dark); border-top: 1px solid var(--cream-deep); border-bottom: 1px solid var(--cream-deep); padding: 64px 28px; }
.newsletter-inner { max-width: 560px; margin: 0 auto; text-align: center; }
.newsletter h2    { font-family: var(--font-display); font-size: clamp(1.6rem,3.5vw,2.2rem); font-weight: 700; color: var(--bark); margin-bottom: 8px; }
.newsletter p     { color: var(--stone); font-size: 0.9rem; margin-bottom: 28px; }
.newsletter-form  { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.newsletter-form input {
  flex: 1; min-width: 220px;
  padding: 13px 20px;
  border: 1.5px solid var(--cream-deep); border-radius: var(--radius-pill);
  font-family: var(--font-body); font-size: 0.9rem;
  background: var(--white); color: var(--bark);
  outline: none; transition: border-color 0.2s;
}
.newsletter-form input:focus { border-color: var(--sage); }

/* ── TRACKING ENVÍO ── */
.tracking-section { background: var(--cream); padding: 48px 28px; }
.tracking-inner   { max-width: 560px; margin: 0 auto; text-align: center; }
.tracking-form    { display: flex; gap: 10px; margin: 20px 0; flex-wrap: wrap; justify-content: center; }
.tracking-input {
  flex: 1; min-width: 200px;
  padding: 12px 20px; border: 1.5px solid var(--cream-deep);
  border-radius: var(--radius-pill); font-family: var(--font-body);
  font-size: 0.9rem; background: var(--white); color: var(--bark);
  outline: none; transition: border-color 0.2s;
}
.tracking-input:focus { border-color: var(--sage); }
.tracking-links { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 12px; }
.tracking-link {
  padding: 8px 18px; border-radius: var(--radius-pill);
  font-size: 0.8rem; font-weight: 600; border: none; cursor: pointer;
  text-decoration: none; display: inline-flex; align-items: center; gap: 6px;
  transition: all 0.2s;
}
.tracking-link.chilexpress { background: var(--terra-light); color: var(--terra-dark); }
.tracking-link.starken     { background: var(--sage-pale); color: var(--sage-dark); }
.tracking-link.blueexpress { background: #E3F2FD; color: #1565C0; }
.tracking-link:hover { transform: translateY(-2px); box-shadow: var(--shadow-xs); }

/* ── SECCIÓN GENÉRICA ── */
.section { padding: 72px 28px; }
.section-inner { max-width: 1240px; margin: 0 auto; }
.section-header { text-align: center; margin-bottom: 48px; }
.section-eyebrow {
  font-size: 0.72rem; font-weight: 600; letter-spacing: 2px;
  text-transform: uppercase; color: var(--sage); margin-bottom: 10px;
}
.section h2 { font-family: var(--font-display); font-size: clamp(1.8rem,3.5vw,2.6rem); font-weight: 700; color: var(--bark); }
.section-sub { color: var(--stone); font-size: 0.9rem; margin-top: 8px; }

/* ═══════════════════════════════════════════════════════════════
   STOCK BADGES — TuttyCosas Kids
   Agregar a: css/components.css
   Sprint 2d
   ═══════════════════════════════════════════════════════════════ */

/* ── Wrapper posicionado sobre la imagen ── */
.badge-wrapper {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
}

/* ── Base badge ── */
.badge-stock {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.70rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 20px;
  letter-spacing: 0.02em;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

/* 11+ → no se muestra nada (silencio) */

/* 6–10: "Pocas unidades" — verde suave */
.badge-stock.suave {
  background: #e8f5e9;
  color: #2e7d32;
  border: 1px solid #a5d6a7;
}

/* 3–5: "Solo X quedan" — naranja */
.badge-stock.medio {
  background: #fff3e0;
  color: #e65100;
  border: 1px solid #ffcc80;
  animation: pulse-badge 2.5s ease-in-out infinite;
}

/* 1–2: "¡Último!" / "¡Quedan 2!" — rojo urgente */
.badge-stock.urgente {
  background: #ffebee;
  color: #c62828;
  border: 1px solid #ef9a9a;
  animation: pulse-badge 1.8s ease-in-out infinite;
}

/* 0: "Agotado" — gris neutro */
.badge-stock.agotado {
  background: #f5f5f5;
  color: #757575;
  border: 1px solid #e0e0e0;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  border-radius: 10px;
  padding: 6px 10px;
}

/* Pulse animation */
@keyframes pulse-badge {
  0%, 100% { opacity: 1;    transform: scale(1); }
  50%       { opacity: 0.82; transform: scale(1.03); }
}

/* ── Botón "Avísame →" dentro del badge agotado ── */
.btn-avisame {
  background: #616161;
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 3px 9px;
  cursor: pointer;
  transition: background 0.2s;
}
.btn-avisame:hover { background: #424242; }

/* ── Tarjeta agotada — visual atenuado ── */
.product-card.product-agotado {
  opacity: 0.72;
  filter: grayscale(20%);
  transition: opacity 0.2s;
}
.product-card.product-agotado:hover { opacity: 0.85; }

/* ── Botón carrito deshabilitado ── */
.btn-add-cart.btn-disabled {
  background: #e0e0e0;
  color: #9e9e9e;
  cursor: not-allowed;
  pointer-events: none;
}


/* ═══════════════════════════════════════════════════════════════
   MODAL RESTOCK — "Avísame cuando esté disponible"
   ═══════════════════════════════════════════════════════════════ */

#restockModal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
#restockModal.active { display: flex; }

.restock-card {
  background: #fff;
  border-radius: 16px;
  padding: 32px 28px;
  max-width: 400px;
  width: 100%;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
  position: relative;
  animation: slide-up 0.25s ease;
}
@keyframes slide-up {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

.restock-card h3 {
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0 0 6px;
  color: #1a1a2e;
}
.restock-card p {
  font-size: 0.88rem;
  color: #555;
  margin: 0 0 20px;
}
.restock-product-name {
  font-weight: 700;
  color: #e65100;
}

.restock-card input[type="email"] {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid #e0e0e0;
  border-radius: 10px;
  font-size: 0.95rem;
  outline: none;
  transition: border-color 0.2s;
  box-sizing: border-box;
}
.restock-card input[type="email"]:focus { border-color: #ff6b35; }

#restockSubmitBtn {
  width: 100%;
  margin-top: 12px;
  padding: 13px;
  background: #ff6b35;
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
}
#restockSubmitBtn:hover    { background: #e55a25; }
#restockSubmitBtn:active   { transform: scale(0.98); }
#restockSubmitBtn:disabled { background: #ccc; cursor: not-allowed; }

.restock-close {
  position: absolute;
  top: 14px;
  right: 16px;
  background: none;
  border: none;
  font-size: 1.4rem;
  color: #aaa;
  cursor: pointer;
  line-height: 1;
}
.restock-close:hover { color: #333; }

/* ── Responsive ── */
@media (max-width: 480px) {
  .restock-card { padding: 24px 18px; }
}