/* ===== Design Upgrade — Amarres de Amor ===== */

/* 1. Richer mystical color palette */
:root {
  --bg: #07040F;
  --bg-soft: #0E0718;
  --bg-card: rgba(12, 5, 20, .92);
  --bg-card-hover: rgba(20, 8, 34, .96);
  --text: #F5EBF3;
  --muted: #B09CAA;
  --line: rgba(173, 34, 81, .30);
  --line-gold: rgba(212, 175, 55, .28);
  --accent: #D4AF37;
  --accent-light: #F2CD5C;
  --primary: #AD2251;
  --primary-glow: rgba(173, 34, 81, .48);
  --secondary: #6E1F84;
  --secondary-glow: rgba(110, 31, 132, .42);
  --shadow: 0 20px 60px rgba(0, 0, 0, .70);
  --shadow-soft: 0 10px 35px rgba(0, 0, 0, .42);
  --shadow-gold: 0 10px 45px rgba(212, 175, 55, .30);
  --shadow-ember: 0 12px 45px rgba(173, 34, 81, .38);
}

/* 2. Richer body background */
body {
  background:
    radial-gradient(ellipse at 10% 0%, rgba(173, 34, 81, .22) 0%, transparent 50%),
    radial-gradient(ellipse at 90% 5%, rgba(110, 31, 132, .18) 0%, transparent 45%),
    radial-gradient(ellipse at 50% 100%, rgba(173, 34, 81, .10) 0%, transparent 55%),
    #07040F;
}

/* 3. Stars background layer */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(1.5px 1.5px at 15% 12%, rgba(212, 175, 55, .70) 0%, transparent 100%),
    radial-gradient(1px 1px at 38% 5%, rgba(255, 255, 255, .50) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 62% 18%, rgba(212, 175, 55, .50) 0%, transparent 100%),
    radial-gradient(1px 1px at 82% 8%, rgba(255, 255, 255, .55) 0%, transparent 100%),
    radial-gradient(1px 1px at 5% 35%, rgba(255, 255, 255, .40) 0%, transparent 100%),
    radial-gradient(2px 2px at 92% 42%, rgba(212, 175, 55, .55) 0%, transparent 100%),
    radial-gradient(1px 1px at 27% 58%, rgba(255, 255, 255, .30) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 73% 65%, rgba(212, 175, 55, .40) 0%, transparent 100%),
    radial-gradient(1px 1px at 48% 82%, rgba(255, 255, 255, .35) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 10% 90%, rgba(212, 175, 55, .45) 0%, transparent 100%),
    radial-gradient(1px 1px at 88% 88%, rgba(255, 255, 255, .30) 0%, transparent 100%),
    radial-gradient(2px 2px at 33% 75%, rgba(173, 34, 81, .45) 0%, transparent 100%),
    radial-gradient(1px 1px at 67% 92%, rgba(255, 255, 255, .35) 0%, transparent 100%),
    radial-gradient(1px 1px at 55% 45%, rgba(255, 255, 255, .25) 0%, transparent 100%);
  animation: twinkle-stars 9s ease-in-out infinite alternate;
}

@keyframes twinkle-stars {
  0%   { opacity: .45; }
  30%  { opacity: .90; }
  55%  { opacity: .60; }
  80%  { opacity: 1;   }
  100% { opacity: .70; }
}

/* 4. Richer body::before gradient */
body::before {
  background-image:
    radial-gradient(circle at 20% 30%, rgba(212, 175, 55, .08), transparent 42%),
    radial-gradient(circle at 82% 15%, rgba(173, 34, 81, .14), transparent 38%),
    radial-gradient(circle at 58% 72%, rgba(110, 31, 132, .10), transparent 40%),
    linear-gradient(135deg, rgba(255,255,255,.007) 25%, transparent 25%),
    linear-gradient(225deg, rgba(255,255,255,.007) 25%, transparent 25%);
  background-size: 100% 100%, 100% 100%, 100% 100%, 24px 24px, 24px 24px;
  background-position: center, center, center, 0 0, 12px 12px;
}

/* 5. Header deeper */
.site-header {
  background: rgba(7, 4, 15, .86);
  border-bottom-color: rgba(173, 34, 81, .24);
}

/* 6. Brand mark — richer glow */
.brand-mark {
  background: radial-gradient(circle at 35% 30%, #F2CD5C, #AD2251 55%, #3a0c20);
  box-shadow: 0 0 20px rgba(173, 34, 81, .70), 0 0 8px rgba(212, 175, 55, .50);
  animation: brand-glow 4s ease-in-out infinite;
}

@keyframes brand-glow {
  0%, 100% { box-shadow: 0 0 18px rgba(173, 34, 81, .60), 0 0 7px rgba(212, 175, 55, .40); }
  50%       { box-shadow: 0 0 32px rgba(173, 34, 81, .90), 0 0 14px rgba(212, 175, 55, .65); }
}

/* 7. Hero H1 — richer shimmer gradient */
.hero h1 {
  background: linear-gradient(135deg, #F5EBF3 0%, #F2CD5C 30%, #D4AF37 50%, #F2CD5C 70%, #F5EBF3 100%);
  background-size: 300% 300%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer-text 5s ease infinite;
}

/* 8. Hero reward card — floating */
.hero-reward {
  border-color: rgba(212, 175, 55, .38);
  background: linear-gradient(155deg, rgba(173, 34, 81, .22), rgba(12, 5, 20, .92), rgba(110, 31, 132, .18));
  box-shadow: 0 0 0 1px rgba(212, 175, 55, .10), var(--shadow), 0 0 60px rgba(173, 34, 81, .14);
  animation: float-card 6s ease-in-out infinite;
}

@keyframes float-card {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-10px); }
}

/* 9. WhatsApp button — pulse glow */
.btn-whatsapp {
  background: linear-gradient(135deg, #25d366 0%, #20bd5a 50%, #128c7e 100%);
  box-shadow: 0 8px 26px rgba(37, 211, 102, .50);
  animation: wa-pulse 3s ease-in-out infinite;
}

@keyframes wa-pulse {
  0%, 100% { box-shadow: 0 8px 26px rgba(37, 211, 102, .50); }
  50%       { box-shadow: 0 12px 34px rgba(37, 211, 102, .78), 0 0 0 7px rgba(37, 211, 102, .08); }
}

.btn-whatsapp:hover,
.btn-whatsapp:focus-visible {
  animation: none;
  box-shadow: 0 16px 42px rgba(37, 211, 102, .78);
}

/* 10. Primary button — gold glow */
.btn-primary {
  background: linear-gradient(135deg, #F2CD5C, #D4AF37 55%, #B8952A);
  box-shadow: 0 8px 28px rgba(212, 175, 55, .50);
  color: #130f08;
}

.btn-primary:hover,
.btn-primary:focus-visible {
  box-shadow: 0 14px 42px rgba(212, 175, 55, .72);
}

/* 11. Pain cards — staggered hover + glow */
.pain-card {
  border-color: rgba(173, 34, 81, .26);
  background: linear-gradient(155deg, rgba(173, 34, 81, .14), rgba(12, 5, 20, .88));
  transition: border-color .3s ease, transform .3s ease, box-shadow .3s ease;
}

.pain-card:hover {
  border-color: rgba(212, 175, 55, .55);
  transform: translateY(-5px) scale(1.02);
  box-shadow: 0 18px 48px rgba(0,0,0,.55), 0 0 22px rgba(212, 175, 55, .12);
}

.pains-grid .pain-card:nth-child(1) { transition-delay: 0ms; }
.pains-grid .pain-card:nth-child(2) { transition-delay: 60ms; }
.pains-grid .pain-card:nth-child(3) { transition-delay: 120ms; }
.pains-grid .pain-card:nth-child(4) { transition-delay: 180ms; }
.pains-grid .pain-card:nth-child(5) { transition-delay: 240ms; }
.pains-grid .pain-card:nth-child(6) { transition-delay: 300ms; }

/* 12. Service cards — depth hover */
.service-card {
  border-color: rgba(173, 34, 81, .24);
  background: var(--bg-card);
}

.service-card:hover {
  border-color: rgba(173, 34, 81, .65);
  transform: translateY(-6px);
  box-shadow: 0 22px 52px rgba(0,0,0,.62), 0 0 32px rgba(173, 34, 81, .16);
}

.service-grid .service-card:nth-child(1) { transition-delay: 0ms; }
.service-grid .service-card:nth-child(2) { transition-delay: 80ms; }
.service-grid .service-card:nth-child(3) { transition-delay: 160ms; }
.service-grid .service-card:nth-child(4) { transition-delay: 240ms; }
.service-grid .service-card:nth-child(5) { transition-delay: 320ms; }

/* 13. How-cards — gold accent hover */
.how-card {
  border-color: rgba(212, 175, 55, .24);
}

.how-card:hover {
  border-color: rgba(212, 175, 55, .55);
  box-shadow: 0 18px 48px rgba(0,0,0,.55), 0 0 26px rgba(212, 175, 55, .10);
}

/* 14. Testimonial cards */
.testimonial {
  border-color: rgba(173, 34, 81, .28);
  background: linear-gradient(155deg, rgba(12, 5, 20, .98), rgba(20, 8, 34, .94));
  transition: border-color .28s ease, box-shadow .28s ease;
}

.testimonial:hover {
  border-color: rgba(212, 175, 55, .42);
  box-shadow: 0 18px 46px rgba(0,0,0,.52), 0 0 22px rgba(212, 175, 55, .08);
}

/* 15. FAQ items */
.faq-item {
  border-color: rgba(173, 34, 81, .26);
}

.faq-item[open] {
  border-color: rgba(212, 175, 55, .42);
  box-shadow: 0 8px 30px rgba(0,0,0,.40), 0 0 18px rgba(212, 175, 55, .08);
}

/* 16. Blog cards */
.blog-card:hover {
  border-color: rgba(173, 34, 81, .62);
  box-shadow: 0 18px 46px rgba(0,0,0,.56), 0 0 26px rgba(173, 34, 81, .13);
}

/* 17. Bridge block */
.bridge-block {
  background: linear-gradient(140deg, rgba(173, 34, 81, .26), rgba(12, 5, 20, .92), rgba(110, 31, 132, .22));
  border-color: rgba(173, 34, 81, .34);
  box-shadow: var(--shadow-ember), 0 0 65px rgba(173, 34, 81, .08);
}

/* 18. CTA closing block */
.cta-closing {
  background: linear-gradient(140deg, rgba(173, 34, 81, .34), rgba(7, 4, 15, .94), rgba(110, 31, 132, .26));
  border-color: rgba(173, 34, 81, .40);
  box-shadow: var(--shadow-ember), 0 0 85px rgba(173, 34, 81, .10);
}

/* 19. Section alt — richer */
.section-block--alt {
  background:
    radial-gradient(ellipse at 80% 50%, rgba(110, 31, 132, .14), transparent 55%),
    radial-gradient(ellipse at 20% 50%, rgba(173, 34, 81, .10), transparent 50%),
    rgba(14, 7, 24, .72);
  border-top-color: rgba(173, 34, 81, .18);
  border-bottom-color: rgba(173, 34, 81, .18);
}

/* 20. Summary cards */
.summary-card {
  border-color: rgba(212, 175, 55, .24);
  background: linear-gradient(155deg, rgba(12, 5, 20, .94), rgba(20, 8, 34, .90));
  transition: border-color .25s ease, transform .25s ease;
}

.summary-card:hover {
  border-color: rgba(212, 175, 55, .46);
  transform: translateY(-2px);
}

/* 21. Keyword chips */
.keyword-chip {
  background: rgba(212, 175, 55, .12);
  border-color: rgba(212, 175, 55, .28);
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}

.keyword-chip:hover {
  background: rgba(212, 175, 55, .22);
  border-color: rgba(212, 175, 55, .52);
  transform: translateY(-1px);
}

/* 22. Trust chips */
.trust-chips li {
  border-color: rgba(212, 175, 55, .24);
  transition: border-color .2s ease, background .2s ease;
}

.trust-chips li:hover {
  border-color: rgba(212, 175, 55, .52);
  background: rgba(212, 175, 55, .08);
}

/* 23. Eyebrow — letter spacing enhancement */
.eyebrow {
  color: var(--accent);
  letter-spacing: .18em;
}

/* 24. Step number — richer color */
.step-number {
  color: rgba(173, 34, 81, .40);
  text-shadow: 0 0 22px rgba(212, 175, 55, .18);
}

/* 25. Reward progress shimmer */
.reward-progress > span {
  background: linear-gradient(90deg, var(--primary), #F2CD5C, var(--primary));
  background-size: 200% 100%;
  animation: pulseProgress 3.5s ease-in-out infinite, reward-shimmer 2.2s linear infinite;
}

@keyframes reward-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* 26. Progress top bar — animated shimmer */
.progress-top {
  background: linear-gradient(90deg, var(--primary), var(--accent), var(--secondary), var(--accent), var(--primary));
  background-size: 300% 100%;
  animation: progress-shimmer 2.5s linear infinite;
}

@keyframes progress-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* 27. Footer */
.footer {
  border-top-color: rgba(173, 34, 81, .24);
  background: rgba(5, 2, 10, .96);
}

/* 28. Floating trust badge — sube para dejar espacio al wa-fab */
.floating-trust {
  border-color: rgba(173, 34, 81, .42);
  background: rgba(7, 4, 15, .90);
  bottom: calc(env(safe-area-inset-bottom) + 5.5rem);
  left: .85rem;
}

@media (min-width: 960px) {
  .floating-trust {
    bottom: 5.5rem;
    left: 1rem;
  }
}

/* 29. Focus states */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible {
  outline-color: var(--accent);
  outline-offset: 4px;
}

/* ===== 30. Floating WhatsApp FAB (icon only) ===== */
.wa-fab {
  position: fixed;
  bottom: 15%;
  right: 1.5rem;
  z-index: 82;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: linear-gradient(135deg, #25d366 0%, #20bd5a 50%, #128c7e 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-shadow: 0 8px 28px rgba(37, 211, 102, .55);
  animation: wa-float 3.5s ease-in-out infinite;
  transition: transform .22s ease, box-shadow .22s ease;
  will-change: transform;
  border: 2px solid rgba(255,255,255,.18);
}

.wa-fab:hover {
  transform: scale(1.12) translateY(-2px);
  animation: none;
  box-shadow: 0 16px 40px rgba(37, 211, 102, .78), 0 0 0 8px rgba(37, 211, 102, .10);
}

.wa-fab svg {
  display: block;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.35));
}

@keyframes wa-float {
  0%, 100% { transform: translateY(0);   box-shadow: 0 8px 28px rgba(37, 211, 102, .55); }
  50%       { transform: translateY(-7px); box-shadow: 0 18px 38px rgba(37, 211, 102, .72); }
}

/* 31. Hide original mobile bar and desktop pill — replaced by wa-fab */
.cta-mobile-bar,
.cta-desktop-pill {
  display: none !important;
}

/* 32. Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .hero-reward,
  .brand-mark,
  .btn-whatsapp,
  body::after,
  .wa-fab,
  .progress-top,
  .reward-progress > span {
    animation: none !important;
  }
  body::after { display: none; }
}