/* =========================================================
   Artesanías Belena — Sistema de diseño (paleta pastel/arte)
   Usado en todo el sitio. Cargar después de Tailwind CDN.
   ========================================================= */

:root {
  /* Paleta pastel artesanal */
  --cream: #FBF6EF;        /* fondo principal */
  --cream-2: #F4EBDE;      /* fondo alterno / secciones */
  --blush: #E7B2A5;        /* rosa terracota pastel (acento principal) */
  --terracotta: #C98474;   /* acento fuerte / hover */
  --sage: #A7B99A;         /* verde salvia */
  --sage-soft: #DCE6D5;    /* verde muy claro */
  --lavender: #C7B8DD;     /* lavanda */
  --mustard: #E6C67A;      /* mostaza suave */
  --ink: #4B4038;          /* texto principal (marrón cálido) */
  --muted: #8A7E74;        /* texto secundario */
  --line: #EADFD2;         /* bordes suaves */
  --white: #ffffff;

  --font-heading: 'Playfair Display', Georgia, serif;
  --font-body: 'Inter', system-ui, sans-serif;

  --shadow-soft: 0 10px 30px rgba(75, 64, 56, 0.08);
  --shadow-hover: 0 20px 45px rgba(75, 64, 56, 0.16);
  --radius: 18px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--cream);
  line-height: 1.65;
  overflow-x: hidden;
}

.font-heading { font-family: var(--font-heading); }

/* Texturita de papel para dar aire artesanal */
.bg-cream    { background-color: var(--cream); }
.bg-cream-2  { background-color: var(--cream-2); }
.bg-sage-soft{ background-color: var(--sage-soft); }
.text-ink    { color: var(--ink); }
.text-muted  { color: var(--muted); }
.text-terracotta { color: var(--terracotta); }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .7rem 1.4rem; border-radius: 999px; font-weight: 600; font-size: .95rem;
  cursor: pointer; border: 1px solid transparent; transition: all .25s ease;
  text-decoration: none; line-height: 1;
}
.btn-primary { background: var(--blush); color: #fff; box-shadow: var(--shadow-soft); }
.btn-primary:hover { background: var(--terracotta); transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.btn-outline { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-outline:hover { border-color: var(--terracotta); color: var(--terracotta); background: #fff; }
.btn-sage { background: var(--sage); color: #fff; }
.btn-sage:hover { background: #93a986; transform: translateY(-2px); }
.btn-block { width: 100%; }
.btn-sm { padding: .5rem 1rem; font-size: .85rem; }

/* ---------- Chips / etiquetas ---------- */
.chip {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .35rem .85rem; border-radius: 999px; font-size: .8rem; font-weight: 600;
  background: #fff; border: 1px solid var(--line); color: var(--muted); cursor: pointer;
  transition: all .2s ease;
}
.chip:hover { border-color: var(--blush); color: var(--terracotta); }
.chip.active { background: var(--blush); border-color: var(--blush); color: #fff; }

.badge-soft {
  display:inline-block; padding:.25rem .7rem; border-radius:999px; font-size:.72rem;
  font-weight:700; letter-spacing:.02em; background: var(--sage-soft); color:#5c6b52;
}
.badge-encargo { background: var(--lavender); color:#4a3f63; }

/* ---------- Tarjetas de producto ---------- */
.card {
  background:#fff; border:1px solid var(--line); border-radius: var(--radius);
  overflow:hidden; transition: transform .35s ease, box-shadow .35s ease;
  display:flex; flex-direction:column;
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-hover); }
.card-media { position:relative; aspect-ratio: 4/5; overflow:hidden; background: var(--cream-2); }
.card-media img { width:100%; height:100%; object-fit:cover; transition: transform .6s ease; }
.card:hover .card-media img { transform: scale(1.06); }
.card-fav {
  position:absolute; top:.7rem; right:.7rem; width:38px; height:38px; border-radius:50%;
  background:rgba(255,255,255,.9); display:flex; align-items:center; justify-content:center;
  border:none; cursor:pointer; color:var(--muted); transition:all .2s ease;
}
.card-fav:hover { color: var(--terracotta); transform:scale(1.1); }
.card-body { padding:1rem 1.1rem 1.2rem; display:flex; flex-direction:column; gap:.4rem; flex:1; }
.card-title { font-family: var(--font-heading); font-size:1.05rem; font-weight:600; color:var(--ink); }
.card-price { font-weight:700; color:var(--terracotta); font-size:1.1rem; }

/* ---------- Header ---------- */
.belena-header {
  position: sticky; top:0; z-index:50;
  background: #F4EDE4; backdrop-filter: blur(10px);
  border-bottom:1px solid var(--line);
}
.nav-link { font-size:.9rem; font-weight:500; color:var(--ink); transition:color .2s; }
.nav-link:hover { color: var(--terracotta); }

/* ---------- Carrito drawer ---------- */
#belena-cart-overlay {
  position:fixed; inset:0; background:rgba(75,64,56,.45); opacity:0; visibility:hidden;
  transition:opacity .3s ease, visibility .3s ease; z-index:60;
}
#belena-cart-overlay.open { opacity:1; visibility:visible; }
#belena-cart-drawer {
  position:fixed; top:0; right:0; height:100%; width:min(420px,100%); background:var(--cream);
  z-index:70; transform:translateX(100%); transition:transform .35s cubic-bezier(.4,0,.2,1);
  display:flex; flex-direction:column; box-shadow:-10px 0 40px rgba(0,0,0,.15);
}
#belena-cart-drawer.open { transform:translateX(0); }
.cart-item { display:flex; gap:.8rem; padding:.9rem 0; border-bottom:1px solid var(--line); }
.cart-item img { width:70px; height:84px; object-fit:cover; border-radius:12px; background:var(--cream-2); }
.qty-btn { width:28px; height:28px; border-radius:8px; border:1px solid var(--line); background:#fff;
  cursor:pointer; font-weight:700; color:var(--ink); line-height:1; }
.qty-btn:hover { border-color:var(--terracotta); color:var(--terracotta); }
.cart-badge {
  position:absolute; top:-6px; right:-8px; min-width:18px; height:18px; padding:0 4px;
  background:var(--terracotta); color:#fff; border-radius:999px; font-size:.68rem; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}

/* ---------- Formularios ---------- */
.field {
  width:100%; padding:.7rem .9rem; border-radius:12px; border:1px solid var(--line);
  background:#fff; color:var(--ink); font-size:.95rem; transition:border-color .2s;
}
.field:focus { outline:none; border-color:var(--blush); box-shadow:0 0 0 3px rgba(231,178,165,.25); }
.label { font-size:.82rem; font-weight:600; color:var(--muted); margin-bottom:.35rem; display:block; }

/* ---------- Secciones ---------- */
.section { padding: 4.5rem 0; }
.eyebrow { text-transform:uppercase; letter-spacing:.18em; font-size:.72rem; font-weight:700; color:var(--terracotta); }
.h-section { font-family:var(--font-heading); font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight:700; color:var(--ink); }

/* ---------- Animaciones ---------- */
@keyframes fadeInUp { from { opacity:0; transform:translateY(24px);} to {opacity:1; transform:translateY(0);} }
.reveal { opacity:0; }
.reveal.in { animation: fadeInUp .7s ease forwards; }

/* Utilidad de contenedor */
.wrap { max-width:1200px; margin:0 auto; padding:0 1.25rem; }

/* =========================================================
   Mejoras visuales (v2) — hero, blobs, confianza, testimonios
   ========================================================= */

/* Formas orgánicas decorativas */
.blob { position:absolute; border-radius:50%; filter:blur(40px); opacity:.5; z-index:0; pointer-events:none; }
.blob-blush { background:var(--blush); }
.blob-sage { background:var(--sage); }
.blob-lav { background:var(--lavender); }
.blob-mustard { background:var(--mustard); }

/* Grano/textura sutil para dar aire artesanal */
.grain::before {
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E");
}

/* Hero collage de productos flotantes */
.hero-collage { position:relative; min-height:420px; }
.hero-collage .ph {
  position:absolute; border-radius:22px; overflow:hidden; box-shadow:var(--shadow-hover);
  border:6px solid #fff; background:var(--cream-2);
}
.hero-collage .ph img { width:100%; height:100%; object-fit:cover; display:block; }
.hero-collage .ph-1 { width:56%; aspect-ratio:4/5; top:0; right:6%; transform:rotate(4deg); z-index:2; }
.hero-collage .ph-2 { width:42%; aspect-ratio:1/1; bottom:2%; left:2%; transform:rotate(-6deg); z-index:3; }
.hero-collage .ph-3 { width:36%; aspect-ratio:4/5; bottom:12%; right:0; transform:rotate(8deg); z-index:1; }
.float-badge {
  position:absolute; background:#fff; border-radius:14px; padding:.55rem .8rem; box-shadow:var(--shadow-soft);
  display:flex; align-items:center; gap:.5rem; font-size:.8rem; font-weight:600; color:var(--ink); z-index:4;
}
@media (max-width:860px){ .hero-collage{ min-height:340px; } }

/* Barra de confianza */
.trust-bar { display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); }
.trust-item { display:flex; align-items:center; gap:.8rem; padding:1rem 1.1rem; background:#fff; border:1px solid var(--line); border-radius:16px; }
.trust-item .ic { width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:1.3rem; background:var(--sage-soft); flex-shrink:0; }

/* Testimonios */
.quote-card { background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:1.6rem; box-shadow:var(--shadow-soft); }
.stars { color:var(--mustard); letter-spacing:2px; }

/* Galería tipo Instagram (marquee) */
.gallery-strip { display:flex; gap:1rem; width:max-content; }
.gallery-strip img { width:200px; height:200px; object-fit:cover; border-radius:18px; }
.marquee { overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); }
.marquee-track { display:flex; gap:1rem; animation:marquee 40s linear infinite; width:max-content; }
.marquee-track a { flex:0 0 auto; display:block; }
.marquee-track img { width:200px; height:200px; object-fit:cover; border-radius:18px; display:block; transition:transform .3s ease; }
.marquee-track a:hover img { transform:scale(1.04); }
.marquee:hover .marquee-track { animation-play-state:paused; }
@keyframes marquee { from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

/* Header con sombra al hacer scroll */
.belena-header.scrolled { box-shadow:var(--shadow-soft); background:#F4EDE4; }

/* Botón de anim: respeta usuarios que prefieren menos movimiento */
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation:none; }
  .slider-slide, .fade-in-up { animation:none !important; }
}