/* =========================================================
   COMPONENTES COMPARTIDOS · botones, marca, tarjetas glass,
   etiquetas y lienzos 3D (se usan en varias secciones)
   ========================================================= */

/* Botones */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  border: 0; cursor: pointer;
  font-family: var(--font-sans); font-weight: 700; letter-spacing: .04em; font-size: 14px; text-transform: uppercase;
  border-radius: var(--radius-pill); padding: 19px 30px;
  transition: transform .25s var(--ease-out), box-shadow .25s, background .25s;
}
.btn-primary { background: var(--color-cta); color: var(--color-cta-ink); box-shadow: var(--shadow-cta); }
.btn-primary:hover { transform: translateY(-2px); background: var(--color-cta-hover); box-shadow: var(--shadow-cta-hover); }
.btn-primary:active { transform: translateY(0); }
.btn-arrow { display: inline-block; transition: transform .25s; }
.btn:hover .btn-arrow { transform: translateX(4px); }
.btn-ghost {
  background: transparent; color: var(--color-text); border: 1px solid var(--color-line-strong);
  padding: 11px 20px; font-size: 12px;
}
.btn-ghost:hover { border-color: var(--color-accent); color: var(--color-accent); }

/* Microcopy bajo los CTA */
.micro {
  margin-top: 16px; font-size: 13px; color: var(--color-text-faint);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.micro i { width: 4px; height: 4px; border-radius: 50%; background: var(--color-text-faint); display: inline-block; }

/* Marca (nav y footer) */
.brand { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 16px; letter-spacing: -.01em; }
.brand-mark {
  width: 28px; height: 28px; border-radius: 8px;
  background: linear-gradient(140deg, var(--color-accent), var(--color-accent-deep));
  display: grid; place-items: center;
  color: var(--color-cta-ink); font-family: var(--font-serif); font-size: 18px;
}

/* Tarjetas glass */
.glass {
  background: linear-gradient(180deg, rgba(var(--rgb-text), .045), rgba(var(--rgb-text), .015));
  border: 1px solid var(--color-line); border-radius: var(--radius-lg);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  position: relative;
}
.glass:before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(140deg, rgba(var(--rgb-accent), .28), rgba(255, 255, 255, 0) 40%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}

/* Etiquetas tipo píldora */
.tag {
  font-size: 12px; color: var(--color-text-muted); padding: 8px 14px;
  border: 1px solid var(--color-line); border-radius: var(--radius-pill);
  background: var(--color-glass-bg); backdrop-filter: blur(8px);
}

/* Lienzos 3D (hero, oferta, CTA final) y portada de respaldo sin WebGL */
.hero-visual canvas, .visual canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; }
.fallback {
  position: absolute; left: 50%; top: 50%; width: min(320px, 70%);
  transform: translate(-50%, -50%) rotate(-4deg); border-radius: var(--radius-sm);
  box-shadow: 0 40px 80px -20px rgba(0, 0, 0, .8), 0 0 0 1px var(--color-line-strong);
}
.webgl-on .fallback { display: none; }

@media (max-width: 720px) {
  .brand { white-space: nowrap; font-size: 15px; }
  .btn-primary.btn-big { width: 100%; }
}