/* public/css/styles.css
   Complementa Tailwind con los pocos detalles que el CDN no cubre. */

:root {
  --pr-tinta: #20251F;
  --pr-musgo: #46563F;
  --pr-bambu: #8E9A7C;
  --pr-hueso: #F3EEE3;
  --pr-oro:   #B6914B;
}

html { scroll-behavior: smooth; }

*:focus-visible {
  outline: 2px solid var(--pr-oro);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ── Hero ───────────────────────────────────── */
.hero-bg {
  background: linear-gradient(155deg,
    #141918 0%,
    #1c2019 30%,
    #252e22 55%,
    #2e3c28 75%,
    #3a4d31 100%);
}

/* ── CTA final ──────────────────────────────── */
.cta-bg {
  background: linear-gradient(135deg, var(--pr-musgo) 0%, var(--pr-tinta) 100%);
}

/* ── Botón flotante de WhatsApp ─────────────── */
.wa-float {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 50;
  width: 3.5rem;
  height: 3.5rem;
  background: #25d366;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-decoration: none;
  box-shadow: 0 4px 20px rgba(37,211,102,.45);
  transition: transform .2s, background .2s;
}
.wa-float:hover { background: #1ebe5d; transform: scale(1.1); }

.wa-float-ring {
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  background: #25d366;
  animation: wa-ping 2s ease-out infinite;
  opacity: 0;
  pointer-events: none;
}
@keyframes wa-ping {
  0%   { transform: scale(1);   opacity: .5; }
  100% { transform: scale(1.7); opacity: 0;  }
}

/* ── Clamp de texto ─────────────────────────── */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}