/* ===== Margen catálogo — temas y utilidades ===== */

[data-theme="papel"] {
  color-scheme: light;
  --p: 47% 0.13 274;     --pc: 97% 0.02 274;
  --s: 64% 0.16 32;      --sc: 99% 0.01 32;
  --a: 81% 0.13 78;      --ac: 32% 0.06 78;
  --n: 27% 0.025 274;    --nc: 95% 0.01 90;
  --b1: 97.8% 0.009 84;  --b2: 95.4% 0.013 83;  --b3: 90.5% 0.02 82;
  --bc: 25% 0.035 274;
  --in: 60% 0.12 230;    --inc: 100% 0 0;
  --su: 60% 0.12 158;    --suc: 98% 0.01 158;
  --wa: 80% 0.14 80;     --wac: 32% 0.05 80;
  --er: 58% 0.19 25;     --erc: 100% 0 0;
  --rounded-box: 1.3rem;
  --rounded-btn: 0.8rem;
}

[data-theme="tinta"] {
  color-scheme: dark;
  --p: 74% 0.12 274;     --pc: 17% 0.04 274;
  --s: 70% 0.15 32;      --sc: 16% 0.03 32;
  --a: 81% 0.13 78;      --ac: 20% 0.05 78;
  --n: 22% 0.018 274;    --nc: 91% 0.01 90;
  --b1: 17% 0.018 274;   --b2: 20.5% 0.02 274;  --b3: 26% 0.022 274;
  --bc: 91% 0.012 85;
  --in: 65% 0.12 230;    --inc: 100% 0 0;
  --su: 68% 0.13 158;    --suc: 16% 0.03 158;
  --wa: 80% 0.14 80;     --wac: 20% 0.05 80;
  --er: 65% 0.19 25;     --erc: 100% 0 0;
  --rounded-box: 1.3rem;
  --rounded-btn: 0.8rem;
}

html, body { scroll-behavior: smooth; }
body { font-family: "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif; }
.font-display { font-family: "Space Grotesk", ui-sans-serif, system-ui, sans-serif; }
.font-serif-it { font-family: "Instrument Serif", ui-serif, Georgia, serif; }
h1, h2, h3, .display { font-family: "Space Grotesk", ui-sans-serif, system-ui, sans-serif; letter-spacing: -0.02em; }
::selection { background: oklch(var(--p) / 0.20); }

.card-hover { transition: transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s; }
.card-hover:hover { transform: translateY(-6px); }

@keyframes floatUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
.anim-up { animation: floatUp .5s cubic-bezier(.2,.7,.3,1) both; }

.grain::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .05;
  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)'/%3E%3C/svg%3E");
}

.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

.product-visual {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4/5;
  border-radius: 1rem;
}
.product-media {
  position: relative;
  overflow: hidden;
  background: oklch(var(--b2));
}
.product-media img {
  transition: transform .35s cubic-bezier(.2,.7,.3,1);
}
.card-hover:hover .product-media img {
  transform: scale(1.04);
}
.product-visual .glyph {
  position: absolute;
  right: -0.5rem;
  bottom: -0.75rem;
  opacity: .35;
  font-size: 5rem;
  line-height: 1;
}
.product-visual .brand-pill {
  position: absolute;
  left: 0.75rem;
  top: 0.75rem;
  font-size: 11px;
  font-weight: 700;
  padding: 0.25rem 0.625rem;
  border-radius: 9999px;
  background: oklch(1 0 0 / .9);
  backdrop-filter: blur(4px);
}

.soon-banner {
  background: linear-gradient(90deg, oklch(var(--p)), oklch(var(--s)));
  color: oklch(var(--pc));
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  padding: 0.5rem 1rem;
  letter-spacing: 0.02em;
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.wa-fab {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1.1rem;
  border-radius: 9999px;
  background: #25d366;
  color: #fff;
  font-weight: 700;
  font-size: 0.9rem;
  box-shadow: 0 12px 28px oklch(0.45 0.12 150 / 0.35);
  transition: transform .25s, box-shadow .25s;
}
.wa-fab:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 32px oklch(0.45 0.12 150 / 0.42);
  color: #fff;
}
.wa-fab svg {
  width: 1.35rem;
  height: 1.35rem;
  flex-shrink: 0;
}
.wa-fab-label {
  display: none;
}
@media (min-width: 640px) {
  .wa-fab-label { display: inline; }
}

.wa-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: #25d366;
  border-color: #25d366;
  color: #fff;
}
.wa-btn:hover {
  background: #1ebe57;
  border-color: #1ebe57;
  color: #fff;
}