/* ===================================================
   Nova Iberia — Custom Styles
   Complementa Tailwind CSS Play CDN
   =================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: 'Inter', system-ui, sans-serif; }

/* Custom scrollbar */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: #1B1717; }
::-webkit-scrollbar-thumb { background: #5E0001; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #7a0002; }

/* ─── Scroll Animations ─── */
.fade-up {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}
.fade-up.visible { opacity: 1; transform: translateY(0); }

.fade-in {
  opacity: 0;
  transition: opacity 0.75s ease;
}
.fade-in.visible { opacity: 1; }

.scale-in {
  opacity: 0;
  transform: scale(0.94);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.scale-in.visible { opacity: 1; transform: scale(1); }

/* Stagger delays */
.delay-100 { transition-delay: 0.1s; }
.delay-200 { transition-delay: 0.2s; }
.delay-300 { transition-delay: 0.3s; }
.delay-400 { transition-delay: 0.4s; }
.delay-500 { transition-delay: 0.5s; }
.delay-600 { transition-delay: 0.6s; }

/* ─── Navigation ─── */
.nav-link {
  position: relative;
}
.nav-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: #5E0001;
  transition: width 0.3s ease;
}
.nav-link:hover::after,
.nav-link.active::after { width: 100%; }

/* Mobile menu */
.mobile-menu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.mobile-menu.open { max-height: 420px; }

/* ─── Hero ─── */
.hero-bg {
  background:
    radial-gradient(ellipse 60% 50% at 15% 55%, rgba(94,0,1,0.18) 0%, transparent 65%),
    radial-gradient(ellipse 50% 40% at 85% 20%, rgba(94,0,1,0.12) 0%, transparent 55%),
    #1B1717;
}

/* Animated node network in hero */
@keyframes nodePulse {
  0%, 100% { opacity: 0.6; r: 3; }
  50%       { opacity: 0.15; r: 5; }
}
@keyframes lineFlicker {
  0%, 100% { opacity: 0.2; }
  50%       { opacity: 0.05; }
}
.anim-node {
  animation: nodePulse 3.5s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}
.anim-line { animation: lineFlicker 4s ease-in-out infinite; }
.anim-node:nth-child(2)  { animation-delay: 0.7s; }
.anim-node:nth-child(3)  { animation-delay: 1.4s; }
.anim-node:nth-child(4)  { animation-delay: 0.3s; }
.anim-node:nth-child(5)  { animation-delay: 2.1s; }
.anim-line:nth-child(6)  { animation-delay: 0.5s; }
.anim-line:nth-child(7)  { animation-delay: 1.2s; }
.anim-line:nth-child(8)  { animation-delay: 1.8s; }

/* ─── Section divider ─── */
.section-divider {
  width: 48px;
  height: 3px;
  background: #5E0001;
  border-radius: 2px;
  margin: 14px auto 0;
}
.section-divider-left {
  width: 48px;
  height: 3px;
  background: #5E0001;
  border-radius: 2px;
  margin: 14px 0 0;
}

/* ─── Cards ─── */
.service-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.service-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 24px 48px rgba(0,0,0,0.35);
}

.star-card {
  border: 2px solid #5E0001;
  box-shadow: 0 0 30px rgba(94,0,1,0.2);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.star-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 0 45px rgba(94,0,1,0.35), 0 24px 48px rgba(0,0,0,0.35);
}

.pricing-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.pricing-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 28px 56px rgba(0,0,0,0.32);
}

.pricing-star {
  border: 2px solid #5E0001;
  box-shadow: 0 0 40px rgba(94,0,1,0.25);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.pricing-star:hover {
  transform: translateY(-6px) scale(1.01);
  box-shadow: 0 0 55px rgba(94,0,1,0.4), 0 28px 56px rgba(0,0,0,0.35);
}

/* Automation feature cards */
.auto-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.auto-card:hover {
  transform: translateY(-4px);
  border-color: rgba(94,0,1,0.5) !important;
  box-shadow: 0 20px 40px rgba(0,0,0,0.3);
}

/* Tool badges */
.tool-badge {
  transition: transform 0.2s ease, background 0.2s ease;
}
.tool-badge:hover {
  transform: scale(1.07);
  background: rgba(94,0,1,0.25);
}

/* ─── Testimonials ─── */
.testimonial-card {
  transition: transform 0.3s ease;
}
.testimonial-card:hover { transform: translateY(-3px); }

/* ─── Photo placeholder (Sobre Nosotros) ─── */
.founder-placeholder {
  background: linear-gradient(135deg, #1B1717 0%, #2d1212 40%, #5E0001 100%);
  position: relative;
  overflow: hidden;
}
.founder-placeholder::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 60% 40%, rgba(94,0,1,0.4) 0%, transparent 70%);
}

/* ─── WhatsApp Floating Button ─── */
.whatsapp-btn {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  width: 58px;
  height: 58px;
  background: #25D366;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 24px rgba(37,211,102,0.45);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  text-decoration: none;
}
.whatsapp-btn:hover {
  transform: scale(1.12) translateY(-2px);
  box-shadow: 0 10px 30px rgba(37,211,102,0.55);
}

/* ─── Contact form ─── */
.form-input {
  width: 100%;
  background: rgba(237,235,221,0.06);
  border: 1.5px solid rgba(237,235,221,0.12);
  border-radius: 10px;
  padding: 14px 16px;
  color: #EDEBDD;
  font-family: 'Inter', sans-serif;
  font-size: 0.9375rem;
  transition: border-color 0.2s ease, background 0.2s ease;
  outline: none;
}
.form-input::placeholder { color: rgba(237,235,221,0.35); }
.form-input:focus {
  border-color: #5E0001;
  background: rgba(94,0,1,0.07);
}

/* ─── Sector tags ─── */
.sector-tag {
  transition: transform 0.2s ease, background 0.2s ease;
}
.sector-tag:hover {
  transform: scale(1.04);
  background: rgba(94,0,1,0.15);
}

/* ─── CTA Buttons ─── */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #5E0001;
  color: #EDEBDD;
  font-weight: 700;
  border-radius: 999px;
  padding: 14px 28px;
  font-size: 1rem;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.btn-primary:hover {
  background: #7a0002;
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(94,0,1,0.35);
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1.5px solid rgba(237,235,221,0.3);
  color: #EDEBDD;
  font-weight: 600;
  border-radius: 999px;
  padding: 14px 28px;
  font-size: 1rem;
  text-decoration: none;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.btn-secondary:hover {
  border-color: #EDEBDD;
  transform: translateY(-2px);
}

/* Scroll to top pulse on CTA brand buttons */
@keyframes ctaPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(94,0,1,0.45); }
  50%       { box-shadow: 0 0 0 10px rgba(94,0,1,0); }
}
.btn-pulse { animation: ctaPulse 2.5s ease-in-out infinite; }

/* Bounce arrow */
@keyframes bounceDown {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%       { transform: translateX(-50%) translateY(6px); }
}
.bounce-arrow { animation: bounceDown 2s ease-in-out infinite; }