/* ══════════════════════════════════════════════════════════════
   TEMPLATE — Custom Styles & Animations
   Para cambiar la marca: edita las variables de :root
   ══════════════════════════════════════════════════════════════ */

/* ── Variables de marca (cambia aquí para cada cliente) ──────── */
:root {
  --brand:        #10b981;
  --brand-light:  #4edea3;
  --brand-dark:   #0b513d;
  --brand-glow:   rgba(16, 185, 129, 0.4);
  --brand-subtle: rgba(16, 185, 129, 0.08);
  --bg:           #0d0f0e;
  --surface:      #131313;
}

/* ── Keyframes ───────────────────────────────────────────────── */

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0);    }
}

@keyframes float {
  0%, 100% { transform: translateY(0px)   rotate(0deg);  }
  33%       { transform: translateY(-18px) rotate(3deg);  }
  66%       { transform: translateY(-8px)  rotate(-2deg); }
}

@keyframes floatReverse {
  0%, 100% { transform: translateY(0px)  rotate(0deg);  }
  33%       { transform: translateY(16px) rotate(-3deg); }
  66%       { transform: translateY(6px)  rotate(2deg);  }
}

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

@keyframes blobMorph {
  0%, 100% { border-radius: 60% 40% 30% 70% / 50% 60% 40% 50%; }
  20%       { border-radius: 30% 70% 55% 45% / 60% 35% 65% 40%; }
  40%       { border-radius: 50% 50% 70% 30% / 40% 65% 35% 60%; }
  60%       { border-radius: 40% 60% 40% 60% / 65% 30% 70% 35%; }
  80%       { border-radius: 70% 30% 50% 50% / 35% 55% 45% 65%; }
}

@keyframes blobMorphReverse {
  0%, 100% { border-radius: 40% 60% 70% 30% / 55% 45% 55% 45%; }
  25%       { border-radius: 65% 35% 40% 60% / 40% 65% 35% 60%; }
  50%       { border-radius: 35% 65% 55% 45% / 60% 35% 65% 40%; }
  75%       { border-radius: 55% 45% 35% 65% / 45% 55% 50% 50%; }
}

/* ── Page background ─────────────────────────────────────────── */

.mesh-bg {
  background-color: var(--bg);
  background-image:
    radial-gradient(at   0%   0%, rgba(16,185,129,0.13) 0px, transparent 55%),
    radial-gradient(at 100%   0%, rgba(16,185,129,0.07) 0px, transparent 55%),
    radial-gradient(at  50%  50%, rgba(16,185,129,0.09) 0px, transparent 55%),
    radial-gradient(at   0% 100%, rgba(16,185,129,0.07) 0px, transparent 55%),
    radial-gradient(at 100% 100%, rgba(16,185,129,0.13) 0px, transparent 55%);
  background-attachment: fixed;
}

/* ── Glass panel ─────────────────────────────────────────────── */

.glass-panel {
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

.glass-panel:hover {
  border-color: rgba(16, 185, 129, 0.25);
  box-shadow: 0 12px 40px rgba(16, 185, 129, 0.09);
}

/* ── Scroll reveal ───────────────────────────────────────────── */

.reveal {
  opacity: 0;
  transform: translateY(44px);
  transition: opacity 0.75s ease, transform 0.75s ease;
}
.reveal.visible         { opacity: 1; transform: translateY(0); }
.reveal-delay-1         { transition-delay: 0.10s; }
.reveal-delay-2         { transition-delay: 0.22s; }
.reveal-delay-3         { transition-delay: 0.34s; }
.reveal-delay-4         { transition-delay: 0.46s; }

/* ── Hero entrance animations ────────────────────────────────── */

.hero-badge    { opacity: 0; animation: fadeInUp 0.8s ease forwards 0.10s; }
.hero-title    { opacity: 0; animation: fadeInUp 0.9s ease forwards 0.28s; }
.hero-subtitle { opacity: 0; animation: fadeInUp 0.9s ease forwards 0.46s; }
.hero-cta      { opacity: 0; animation: fadeInUp 0.9s ease forwards 0.62s; }

/* ── Gradient text ───────────────────────────────────────────── */

.gradient-text {
  background: linear-gradient(135deg, var(--brand-light) 0%, var(--brand) 40%, #6ffbbe 70%, var(--brand-light) 100%);
  background-size: 220% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 4s linear infinite;
}

/* ── Glow CTA button ─────────────────────────────────────────── */

.btn-glow {
  box-shadow: 0 0 0 0 var(--brand-glow);
  animation: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.btn-glow:hover {
  box-shadow: 0 0 28px var(--brand-glow), 0 0 60px rgba(16,185,129,0.18);
  transform: scale(1.04);
}

/* ── Section divider ─────────────────────────────────────────── */

.section-divider {
  width: 0;
  transition: width 1.1s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Floating dots ───────────────────────────────────────────── */

.float-1 { animation: float        6s ease-in-out infinite; }
.float-2 { animation: floatReverse 8s ease-in-out infinite; }
.float-3 { animation: float        5s ease-in-out infinite 1.2s; }
.float-4 { animation: floatReverse 7s ease-in-out infinite 0.6s; }

/* ── HERO BLOB ───────────────────────────────────────────────── */

.hero-blob-wrap {
  position: absolute;
  right: -3%;
  top: 50%;
  transform: translateY(-52%);
  width: min(46vw, 520px);
  height: min(46vw, 520px);
  pointer-events: none;
  z-index: 1;
}

/* Outer glow */
.blob-glow {
  position: absolute;
  inset: -18%;
  background: radial-gradient(circle, rgba(16,185,129,0.18), transparent 65%);
  border-radius: 50%;
  filter: blur(28px);
}

/* Main body */
.blob-body {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    #6ffbbe  0%,
    #4edea3 20%,
    #10b981 45%,
    #0b6645 70%,
    #073d2a 100%
  );
  border-radius: 60% 40% 30% 70% / 50% 60% 40% 50%;
  box-shadow:
    inset -30px -30px 60px rgba(0,0,0,0.35),
    inset  18px  18px 40px rgba(110,251,190,0.20);
  animation: blobMorph 10s ease-in-out infinite;
}

/* Secondary lobe (bottom-right) */
.blob-lobe {
  position: absolute;
  bottom: -12%;
  right: 8%;
  width: 52%;
  height: 52%;
  background: linear-gradient(145deg, #4edea3, #10b981 45%, #084d34);
  border-radius: 40% 60% 60% 40% / 60% 30% 70% 40%;
  box-shadow: inset -12px -12px 30px rgba(0,0,0,0.28);
  animation: blobMorphReverse 13s ease-in-out infinite;
}

/* Specular highlight */
.blob-highlight {
  position: absolute;
  top: 11%;
  left: 14%;
  width: 28%;
  height: 28%;
  background: radial-gradient(circle, rgba(255,255,255,0.38), transparent 70%);
  border-radius: 50%;
  filter: blur(5px);
}

/* ── Navbar scroll ───────────────────────────────────────────── */

.nav-scrolled {
  background: rgba(10, 12, 11, 0.97) !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
}

/* ── Form inputs ─────────────────────────────────────────────── */

.form-input {
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.form-input:focus {
  transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(16, 185, 129, 0.2);
}

/* ── Testimonial cards ───────────────────────────────────────── */

.testimonial-card {
  transition: transform 0.38s ease, box-shadow 0.38s ease;
}
.testimonial-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 48px rgba(16, 185, 129, 0.12);
}

/* ── Pricing cards ───────────────────────────────────────────── */

.pricing-card {
  transition: transform 0.38s ease, box-shadow 0.38s ease;
}
.pricing-card:not(.pricing-featured):hover {
  transform: translateY(-6px);
}

/* ── Mobile menu ─────────────────────────────────────────────── */

.mobile-menu {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.35s ease, opacity 0.35s ease;
}
.mobile-menu.open { max-height: 320px; opacity: 1; }

/* ── Particles ───────────────────────────────────────────────── */

#particles-container {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.particle {
  position: absolute;
  border-radius: 50%;
  background: rgba(16, 185, 129, 0.18);
  animation: float var(--dur) ease-in-out infinite var(--delay);
}

/* ── Feedback states ─────────────────────────────────────────── */

#form-success,
#form-error { animation: fadeInUp 0.45s ease forwards; }

/* ── Scroll-to-top ───────────────────────────────────────────── */

#scroll-top {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
  transform: translateY(8px);
}
#scroll-top.visible {
  opacity: 1;
  pointer-events: all;
  transform: translateY(0);
}

/* ── Stat numbers ────────────────────────────────────────────── */

.stat-number { font-variant-numeric: tabular-nums; }

/* ── Video testimonials ──────────────────────────────────────── */

.video-wrap video { display: block; }

.video-play-btn {
  background: rgba(0, 0, 0, 0.25);
  transition: background 0.25s ease, opacity 0.25s ease;
  border: none;
}
.video-play-btn:hover { background: rgba(0, 0, 0, 0.35); }
.video-play-btn.hidden-btn {
  opacity: 0;
  pointer-events: none;
}