/* Jamones Carbó — jamonescarbo.es */
body { margin: 0; background: #0a0707; }
#root { min-height: 100vh; }


:root {
  --black-1: #0a0707;
  --black-2: #141010;
  --black-3: #1c1614;
  --copper: #b8895a;
  --copper-soft: rgba(184, 137, 90, 0.5);
  --red: #dc2626;
}
.font-display { font-family: 'Fraunces', serif; font-variation-settings: "opsz" 144, "SOFT" 50; }
.font-italic { font-family: 'EB Garamond', serif; font-style: italic; }
.font-body { font-family: 'Inter', sans-serif; letter-spacing: 0.01em; }
.grain::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 1; opacity: 0.06; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.vellum { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='v'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.015' numOctaves='3' seed='5'/%3E%3CfeColorMatrix values='0 0 0 0 0.72  0 0 0 0 0.54  0 0 0 0 0.35  0 0 0 0.04 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23v)'/%3E%3C/svg%3E"); }
@keyframes fadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slowZoom { from { transform: scale(1.05); } to { transform: scale(1); } }
.anim-fadeup { animation: fadeUp 1s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.anim-fadein { animation: fadeIn 1.4s ease both; }
.anim-zoom { animation: slowZoom 8s ease both; }
.delay-1 { animation-delay: 0.1s; } .delay-2 { animation-delay: 0.3s; } .delay-3 { animation-delay: 0.5s; } .delay-4 { animation-delay: 0.7s; } .delay-5 { animation-delay: 0.9s; }
.reveal { opacity: 0; transform: translateY(30px); transition: opacity 1.1s cubic-bezier(0.2, 0.8, 0.2, 1), transform 1.1s cubic-bezier(0.2, 0.8, 0.2, 1); }
.reveal.in-view { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 0.12s; }
.reveal-delay-2 { transition-delay: 0.24s; }
.reveal-delay-3 { transition-delay: 0.36s; }
.reveal-delay-4 { transition-delay: 0.48s; }
.reveal-line { transform: scaleX(0); transform-origin: left; transition: transform 1.4s cubic-bezier(0.7, 0, 0.3, 1); }
.reveal-line.in-view { transform: scaleX(1); }
.hairline { height: 1px; background: linear-gradient(90deg, transparent, var(--copper-soft), transparent); }
.hairline-copper { height: 1px; background: var(--copper); opacity: 0.6; }

/* Producto sobre fondo blanco: aplicamos filtros + viñeta CSS para fundir con el fondo de la web */
.product-bg-blend {
  position: relative;
  background: var(--black-2);
  overflow: hidden;
}
.product-bg-blend img {
  filter: brightness(0.78) contrast(1.12) saturate(1.1);
  mix-blend-mode: screen;
  transition: filter 1s, transform 1.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.product-bg-blend::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 30%, rgba(10,7,7,0.85) 100%);
  pointer-events: none;
}
.product-bg-blend::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(10,7,7,0.3) 0%, transparent 30%, transparent 70%, rgba(10,7,7,0.7) 100%);
  pointer-events: none;
  z-index: 1;
}

.product-card { transition: all 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); }
.product-card:hover { transform: translateY(-6px); }
.product-card:hover .product-img { transform: scale(1.04); filter: brightness(0.88) contrast(1.12) saturate(1.15); }
.product-card .product-img { transition: transform 1.2s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.6s; }

.nav-link { position: relative; transition: color 0.3s ease; }
.nav-link::after { content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px; background: #dc2626; transform: scaleX(0); transform-origin: right; transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); }
.nav-link:hover::after, .nav-link.active::after { transform: scaleX(1); transform-origin: left; }
.nav-link.active { color: #dc2626; }
.filter-btn { transition: all 0.3s ease; border: 1px solid rgba(255,255,255,0.1); }
.filter-btn.active { background: #dc2626; border-color: #dc2626; color: white; }
.filter-btn:hover:not(.active) { border-color: rgba(220,38,38,0.5); }
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #0a0707; }
::-webkit-scrollbar-thumb { background: #2a2a2a; }
::-webkit-scrollbar-thumb:hover { background: #b8895a; }
.vertical-text { writing-mode: vertical-rl; transform: rotate(180deg); }
.wa-btn { background: #25D366; }
.wa-btn:hover { background: #1da851; }

.contact-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 24px 16px;
  background: var(--black-2);
  border: 1px solid rgba(184,137,90,0.15);
  transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
  text-align: center;
  text-decoration: none;
  color: inherit;
}
.contact-btn:hover {
  border-color: var(--copper);
  background: var(--black-3);
  transform: translateY(-3px);
}
.contact-btn-icon {
  color: var(--copper);
  margin-bottom: 4px;
}
.contact-btn:hover .contact-btn-icon {
  color: #d4a472;
}
.contact-btn-label {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  color: #888;
}
.contact-btn-value {
  font-family: 'Fraunces', serif;
  font-size: 16px;
  color: #e8e3df;
  font-weight: 400;
  margin-top: 2px;
}
.contact-btn-wa .contact-btn-icon { color: #25D366; }
.contact-btn-wa:hover .contact-btn-icon { color: #1da851; }
.contact-btn-wa:hover { border-color: #25D366; }