/* ============================================
   MODERN REDESIGN STYLESHEET - LOGICNET
   Tech Blue Color Scheme
   ============================================ */

:root {
  /* Color Palette - Tech Blue */
  --primary-dark: #0F172A;
  --primary-blue: #3B82F6;
  --accent-green: #10B981;
  --accent-orange: #F97316;
  --bg-dark: #0F172A;
  --bg-light: #F0F9FF;
  --text-white: #FFFFFF;
  --text-light: #E5E7EB;
  --text-muted: #CBD5E1;
  --border-color: #1E293B;

  /* Typography */
  --font-primary: 'Poppins', sans-serif;
  --fs-h1: 56px;
  --fs-h2: 42px;
  --fs-h4: 28px;
  --fw-700: 700;
  --fw-600: 600;
  --fw-500: 500;
  --fw-400: 400;

  /* Transitions */
  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast: all 0.15s ease;
  --transition-slow: all 0.6s ease;
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

.text-white {
  color: var(--text-white);
}

.text-white-80 {
  color: rgba(255, 255, 255, 0.8);
}

.section-title {
  font-size: var(--fs-h2);
  font-weight: var(--fw-700);
  color: var(--primary-dark);
  margin-bottom: 20px;
  letter-spacing: -0.02em;
}

.section-subtitle {
  font-size: 18px;
  color: var(--text-muted);
  font-weight: var(--fw-500);
  max-width: 600px;
  margin: 0 auto;
}

/* AOS aplica su propia opacidad cuando su CSS carga. No ocultamos de forma
   global para que el contenido siga visible aunque el CDN de AOS no cargue
   (por ejemplo, sin conexión a internet). */
[data-aos] {
  will-change: opacity, transform;
}

/* ============================================
   HERO SECTION - MEGA
   ============================================ */

.hero-section-mega {
  position: relative;
  min-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 100px 24px;
  background: linear-gradient(135deg, #0F172A 0%, #1E40AF 50%, #0F172A 100%);
  background-size: 200% 200%;
  animation: gradient-shift 15s ease infinite;
}

@keyframes gradient-shift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.hero-background {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.hero-code-background {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(90deg, transparent 24%, rgba(59, 130, 246, 0.05) 25%, rgba(59, 130, 246, 0.05) 26%, transparent 27%, transparent 74%, rgba(59, 130, 246, 0.05) 75%, rgba(59, 130, 246, 0.05) 76%, transparent 77%, transparent),
    linear-gradient(0deg, transparent 24%, rgba(59, 130, 246, 0.05) 25%, rgba(59, 130, 246, 0.05) 26%, transparent 27%, transparent 74%, rgba(59, 130, 246, 0.05) 75%, rgba(59, 130, 246, 0.05) 76%, transparent 77%, transparent);
  background-size: 50px 50px;
  animation: shift 20s linear infinite;
}

@keyframes shift {
  0% { transform: translate(0, 0); }
  100% { transform: translate(50px, 50px); }
}

#particlesCanvas {
  position: absolute;
  inset: 0;
  display: block;
}

.section-overlay-mega {
  position: absolute;
  inset: 0;
  background: rgba(16, 185, 129, 0.05);
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
}

.hero-title {
  font-size: var(--fs-h1);
  font-weight: var(--fw-700);
  color: var(--text-white);
  margin-bottom: 20px;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.hero-highlight {
  background: linear-gradient(135deg, var(--accent-green) 0%, var(--accent-orange) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: pulse-glow 2s ease-in-out infinite;
}

@keyframes pulse-glow {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.2); }
}

.typing-text {
  display: block;
  min-height: 60px;
  font-size: 42px;
  font-weight: var(--fw-700);
  color: var(--accent-green);
  margin-top: 10px;
}

.hero-subtitle {
  font-size: 18px;
  color: var(--text-light);
  max-width: 600px;
  margin: 30px auto 50px;
  line-height: 1.6;
}

.hero-buttons {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
}

.btn-primary-mega,
.btn-secondary-mega {
  padding: 16px 36px;
  font-size: 16px;
  font-weight: var(--fw-700);
  border-radius: 12px;
  border: none;
  cursor: pointer;
  transition: var(--transition);
  text-decoration: none;
  display: inline-block;
}

.btn-primary-mega {
  background: var(--accent-green);
  color: white;
  box-shadow: 0 10px 30px rgba(16, 185, 129, 0.3);
}

.btn-primary-mega:hover {
  transform: translateY(-3px);
  box-shadow: 0 15px 40px rgba(16, 185, 129, 0.5);
}

.btn-secondary-mega {
  background: transparent;
  border: 2px solid var(--accent-orange);
  color: var(--accent-orange);
}

.btn-secondary-mega:hover {
  background: var(--accent-orange);
  color: white;
  transform: translateY(-3px);
}

.wave-svg {
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  width: 100%;
  height: 120px;
  display: block;
  z-index: 1;
  pointer-events: none;
}

@media (max-width: 768px) {
  .wave-svg {
    height: 70px;
  }
}

/* ============================================
   DEMO SECTION
   ============================================ */

.demo-section {
  padding: 80px 24px;
  background: var(--bg-light);
}

.demo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
}

.demo-card {
  background: white;
  padding: 30px;
  border-radius: 16px;
  text-align: center;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: var(--transition);
  border: 1px solid #E5E7EB;
}

.demo-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(59, 130, 246, 0.15);
  border-color: var(--primary-blue);
}

.demo-icon {
  font-size: 48px;
  margin-bottom: 20px;
  display: block;
}

.demo-card h4 {
  font-size: 20px;
  font-weight: var(--fw-700);
  color: var(--primary-dark);
  margin-bottom: 12px;
}

.demo-card p {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.6;
}

/* IT Services - Featured layout with photo */
@keyframes ti-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}

@keyframes ti-glow {
  0%, 100% {
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.15),
                0 0 0 0 rgba(59, 130, 246, 0);
  }
  50% {
    box-shadow: 0 28px 65px rgba(59, 130, 246, 0.3),
                0 0 45px 5px rgba(16, 185, 129, 0.2);
  }
}

@keyframes ti-badge-pulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  }
  50% {
    transform: scale(1.06);
    box-shadow: 0 16px 40px rgba(16, 185, 129, 0.45);
  }
}

.ti-image-wrap {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.15);
  animation: ti-float 6s ease-in-out infinite,
             ti-glow 4s ease-in-out infinite;
}

.ti-image-wrap:hover {
  animation-play-state: paused;
}

.ti-image {
  width: 100%;
  height: 480px;
  object-fit: cover;
  display: block;
  transition: var(--transition);
}

.ti-image-wrap:hover .ti-image {
  transform: scale(1.05);
}

.ti-image-badge {
  position: absolute;
  bottom: 25px;
  left: 25px;
  background: linear-gradient(135deg, var(--primary-blue) 0%, var(--accent-green) 100%);
  color: #fff;
  padding: 18px 26px;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  animation: ti-badge-pulse 2.5s ease-in-out infinite;
}

.ti-badge-number {
  font-size: 32px;
  font-weight: var(--fw-700);
  line-height: 1;
}

.ti-badge-text {
  font-size: 13px;
  font-weight: var(--fw-500);
  margin-top: 4px;
  opacity: 0.95;
}

.ti-services-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.ti-service-item {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  background: #fff;
  padding: 22px 24px;
  border-radius: 14px;
  border-left: 4px solid var(--primary-blue);
  box-shadow: 0 4px 18px rgba(15, 23, 42, 0.06);
  transition: var(--transition);
  text-decoration: none;
  position: relative;
  overflow: hidden;
}

/* Brillo que barre la tarjeta al pasar el mouse */
.ti-service-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: -130%;
  width: 80%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(59, 130, 246, 0.18), transparent);
  transform: skewX(-20deg);
  transition: left 0.7s ease;
  pointer-events: none;
}

.ti-service-item:hover::before {
  left: 140%;
}

.ti-service-item:hover {
  transform: translateX(10px) scale(1.02);
  border-left-color: var(--accent-orange);
  box-shadow: 0 16px 35px rgba(59, 130, 246, 0.2);
}

.ti-service-icon {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 12px;
  background: var(--bg-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  transition: var(--transition);
}

.ti-service-item:hover .ti-service-icon {
  background: linear-gradient(135deg, var(--primary-blue) 0%, var(--accent-green) 100%);
  transform: scale(1.12) rotate(-8deg);
}

.ti-service-info h4 {
  font-size: 18px;
  font-weight: var(--fw-700);
  color: var(--primary-dark);
  margin-bottom: 6px;
}

.ti-service-info p {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0;
}

@media (max-width: 991px) {
  .ti-image {
    height: 360px;
  }
}

/* ============================================
   FEATURES SECTION
   ============================================ */

.features-section {
  padding: 100px 24px;
  background: linear-gradient(135deg, var(--primary-dark) 0%, #1E293B 100%);
  position: relative;
  overflow: hidden;
}

.features-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 20% 50%, rgba(59, 130, 246, 0.1) 0%, transparent 50%),
              radial-gradient(circle at 80% 80%, rgba(16, 185, 129, 0.1) 0%, transparent 50%);
  pointer-events: none;
}

.feature-card {
  background: linear-gradient(135deg, #1E293B 0%, #0F172A 100%);
  padding: 35px;
  border-radius: 16px;
  border: 2px solid transparent;
  transition: var(--transition);
  position: relative;
  overflow: hidden;
  z-index: 1;
  cursor: pointer;
  min-height: 380px;
  display: flex;
  flex-direction: column;
}

.feature-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(16, 185, 129, 0.2) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.feature-card:hover {
  transform: translateY(-15px) scale(1.02);
  border-color: var(--primary-blue);
  box-shadow: 0 30px 60px rgba(59, 130, 246, 0.2),
              inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.feature-card:hover::before {
  opacity: 1;
}

.feature-icon {
  font-size: 52px;
  margin-bottom: 20px;
  display: block;
  transition: var(--transition);
}

.feature-card:hover .feature-icon {
  transform: scale(1.15) rotate(5deg);
}

.feature-card h4 {
  font-size: 22px;
  font-weight: var(--fw-700);
  color: var(--text-white);
  margin-bottom: 15px;
  position: relative;
  z-index: 1;
}

.feature-card p {
  font-size: 14px;
  color: var(--text-light);
  margin-bottom: 20px;
  line-height: 1.6;
  position: relative;
  z-index: 1;
}

.feature-list {
  list-style: none;
  padding: 0;
  margin-top: auto;
  position: relative;
  z-index: 1;
}

.feature-list li {
  font-size: 13px;
  color: var(--accent-green);
  padding: 8px 0;
  font-weight: var(--fw-600);
}

/* ============================================
   PROJECTS SECTION
   ============================================ */

.projects-section {
  padding: 100px 24px;
  background: white;
}

.project-card {
  background: linear-gradient(135deg, #F9FAFB 0%, #F3F4F6 100%);
  padding: 40px;
  border-radius: 16px;
  border-left: 5px solid var(--accent-green);
  transition: var(--transition);
  min-height: 350px;
}

.project-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 50px rgba(59, 130, 246, 0.15);
  border-left-color: var(--accent-orange);
}

.project-card h4 {
  font-size: 20px;
  font-weight: var(--fw-700);
  color: var(--primary-dark);
  margin-bottom: 25px;
}

.project-comparison {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 20px;
  align-items: center;
  margin-bottom: 20px;
  background: white;
  padding: 20px;
  border-radius: 12px;
}

.before, .after {
  flex: 1;
}

.before h6, .after h6 {
  font-size: 12px;
  font-weight: var(--fw-700);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 12px;
}

.before h6 {
  color: #DC2626;
}

.after h6 {
  color: var(--accent-green);
}

.before ul, .after ul {
  list-style: none;
  padding: 0;
}

.before li, .after li {
  font-size: 13px;
  padding: 6px 0;
  line-height: 1.4;
  color: var(--text-muted);
}

.before li {
  color: #991B1B;
}

.after li {
  color: #065F46;
}

.arrow {
  font-size: 24px;
  color: var(--primary-blue);
  font-weight: var(--fw-700);
}

.project-tech {
  font-size: 13px;
  color: var(--text-muted);
  font-style: italic;
  padding-top: 15px;
  border-top: 1px solid #E5E7EB;
}

/* ============================================
   STATISTICS SECTION
   ============================================ */

.stats-section {
  padding: 100px 24px;
  background: linear-gradient(135deg, var(--primary-dark) 0%, #1E293B 100%);
}

.stat-card {
  background: linear-gradient(135deg, #1E293B 0%, #0F172A 100%);
  padding: 40px 30px;
  border-radius: 16px;
  border: 1px solid rgba(59, 130, 246, 0.2);
  text-align: center;
  transition: var(--transition);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  min-height: 280px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.stat-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(59, 130, 246, 0.1) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.stat-card:hover {
  transform: scale(1.05);
  border-color: var(--primary-blue);
  box-shadow: 0 20px 50px rgba(59, 130, 246, 0.2);
}

.stat-card:hover::before {
  opacity: 1;
}

.stat-number {
  font-size: 56px;
  font-weight: var(--fw-700);
  background: linear-gradient(135deg, var(--accent-green) 0%, var(--accent-orange) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 15px;
  position: relative;
  z-index: 1;
}

.stat-label {
  font-size: 18px;
  font-weight: var(--fw-700);
  color: var(--text-white);
  margin-bottom: 8px;
  position: relative;
  z-index: 1;
}

.stat-desc {
  font-size: 13px;
  color: var(--text-muted);
  position: relative;
  z-index: 1;
}

/* ============================================
   PROCESS TIMELINE SECTION
   ============================================ */

.process-section {
  padding: 100px 24px;
  background: white;
}

.timeline {
  position: relative;
  padding: 40px 0;
}

.timeline::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--primary-blue);
  transform: translateX(-1px);
}

.timeline-item {
  margin-bottom: 50px;
  position: relative;
}

.timeline-item:nth-child(odd) {
  text-align: right;
  padding-right: calc(50% + 40px);
}

.timeline-item:nth-child(even) {
  text-align: left;
  padding-left: calc(50% + 40px);
}

.timeline-marker {
  position: absolute;
  left: 50%;
  top: 0;
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, var(--accent-green) 0%, var(--accent-orange) 100%);
  border: 4px solid white;
  border-radius: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--fw-700);
  color: white;
  font-size: 20px;
  box-shadow: 0 0 0 4px var(--primary-blue);
}

.timeline-content {
  background: linear-gradient(135deg, #F9FAFB 0%, white 100%);
  padding: 25px 30px;
  border-radius: 12px;
  border-left: 4px solid var(--primary-blue);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
  transition: var(--transition);
}

.timeline-content:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 40px rgba(59, 130, 246, 0.15);
}

.timeline-content h4 {
  font-size: 18px;
  font-weight: var(--fw-700);
  color: var(--primary-dark);
  margin-bottom: 10px;
}

.timeline-content p {
  font-size: 14px;
  color: var(--text-muted);
  margin-bottom: 10px;
}

.timeline-duration {
  display: inline-block;
  background: var(--primary-blue);
  color: white;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: var(--fw-600);
}

@media (max-width: 768px) {
  .timeline::before {
    left: 20px;
  }

  .timeline-item:nth-child(odd),
  .timeline-item:nth-child(even) {
    text-align: left;
    padding-left: calc(60px + 40px);
    padding-right: 0;
  }

  .timeline-marker {
    left: 20px;
  }
}

/* ============================================
   CTA TIENDA SECTION
   ============================================ */

.cta-tienda-section {
  position: relative;
  padding: 120px 24px;
  background: linear-gradient(135deg, var(--primary-dark) 0%, #1E293B 50%, var(--primary-dark) 100%);
  background-size: 200% 200%;
  animation: gradient-shift 15s ease infinite;
  overflow: hidden;
}

.cta-background {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.cta-particles {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(59, 130, 246, 0.1) 0%, transparent 30%),
    radial-gradient(circle at 80% 70%, rgba(16, 185, 129, 0.1) 0%, transparent 30%),
    radial-gradient(circle at 50% 50%, rgba(249, 115, 22, 0.05) 0%, transparent 40%);
  animation: float 6s ease-in-out infinite;
}

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

.cta-title {
  font-size: var(--fs-h2);
  font-weight: var(--fw-700);
  color: var(--text-white);
  margin-bottom: 15px;
  position: relative;
  z-index: 2;
}

.cta-subtitle {
  font-size: 18px;
  color: var(--text-light);
  margin-bottom: 50px;
  position: relative;
  z-index: 2;
}

.btn-tienda-mega {
  min-width: 450px;
  padding: 35px 70px;
  font-size: 28px;
  font-weight: var(--fw-700);
  background: linear-gradient(135deg, var(--accent-orange) 0%, var(--accent-green) 100%);
  color: white;
  border: none;
  border-radius: 25px;
  cursor: pointer;
  box-shadow: 0 0 40px rgba(249, 115, 22, 0.6);
  transition: var(--transition);
  position: relative;
  z-index: 2;
  animation: pulsing-tienda 2s ease-in-out infinite;
}

@keyframes pulsing-tienda {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 40px rgba(249, 115, 22, 0.6);
  }
  50% {
    transform: scale(1.08);
    box-shadow: 0 0 70px rgba(249, 115, 22, 0.9);
  }
}

.btn-tienda-mega:hover {
  transform: scale(1.1);
  box-shadow: 0 0 80px rgba(249, 115, 22, 1),
              0 0 40px rgba(16, 185, 129, 0.8);
}

.btn-tienda-mega:active {
  transform: scale(0.95);
}

.cta-description {
  font-size: 15px;
  color: var(--text-light);
  margin-top: 30px;
  position: relative;
  z-index: 2;
  line-height: 1.6;
}

/* ============================================
   PARTNERS SECTION
   ============================================ */

.partners-section {
  text-align: center;
  padding: 80px 24px;
  background: var(--bg-light);
}

.partners-section-title {
  border-radius: 20px;
  display: inline-block;
  position: relative;
  bottom: 50px;
  margin-bottom: -50px;
  padding: 15px 30px;
  font-size: 24px;
  font-weight: var(--fw-700);
  color: var(--primary-dark);
}

.partners-image {
  display: block;
  width: 150px;
  margin: 0 auto;
  transition: var(--transition);
  filter: grayscale(0%);
}

.partners-image:hover {
  transform: scale(1.1);
  filter: grayscale(0%);
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */

@media (max-width: 768px) {
  :root {
    --fs-h1: 42px;
    --fs-h2: 32px;
  }

  .hero-section-mega {
    min-height: 100vh;
    padding: 60px 20px;
  }

  .hero-title {
    font-size: 36px;
  }

  .typing-text {
    font-size: 28px;
    min-height: 45px;
  }

  .btn-tienda-mega {
    min-width: 100%;
    max-width: 350px;
    padding: 25px 40px;
    font-size: 20px;
  }

  .demo-grid {
    grid-template-columns: 1fr;
  }

  .timeline::before {
    left: 20px;
  }

  .timeline-item:nth-child(odd),
  .timeline-item:nth-child(even) {
    text-align: left;
    padding-left: calc(80px);
    padding-right: 0;
  }

  .timeline-marker {
    left: 20px;
    width: 40px;
    height: 40px;
    font-size: 16px;
  }

  .project-comparison {
    grid-template-columns: 1fr;
    gap: 15px;
  }

  .arrow {
    transform: rotate(90deg);
  }

  .hero-buttons {
    gap: 12px;
  }

  .btn-primary-mega,
  .btn-secondary-mega {
    padding: 12px 24px;
    font-size: 14px;
  }
}

@media (max-width: 576px) {
  .section-title {
    font-size: 28px;
  }

  .feature-card {
    min-height: auto;
    padding: 25px;
  }

  .stat-number {
    font-size: 42px;
  }

  .demo-card {
    padding: 20px;
  }
}

/* ============================================
   BOTÓN TIENDA - NAVBAR (animado y tentador)
   ============================================ */
.navbar-nav .nav-link.btn-tienda-nav {
  background: linear-gradient(135deg, var(--accent-orange) 0%, var(--accent-green) 100%);
  background-size: 200% 200%;
  color: #ffffff !important;
  font-weight: var(--fw-700);
  padding: 11px 28px;
  border-radius: 50px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 0 20px rgba(249, 115, 22, 0.55);
  position: relative;
  overflow: hidden;
  margin-top: 6px;
  white-space: nowrap;
  animation: tienda-nav-pulse 2s ease-in-out infinite,
             tienda-nav-gradient 5s ease infinite;
}

.navbar-nav .nav-link.btn-tienda-nav span,
.navbar-nav .nav-link.btn-tienda-nav i {
  position: relative;
  z-index: 2;
}

/* Latido + resplandor */
@keyframes tienda-nav-pulse {
  0%, 100% {
    box-shadow: 0 0 20px rgba(249, 115, 22, 0.55);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 34px rgba(16, 185, 129, 0.85);
    transform: scale(1.06);
  }
}

/* Movimiento sutil del gradiente */
@keyframes tienda-nav-gradient {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* Brillo que recorre el botón solo */
.navbar-nav .nav-link.btn-tienda-nav::before {
  content: '';
  position: absolute;
  top: 0;
  left: -130%;
  width: 70%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.5), transparent);
  transform: skewX(-20deg);
  z-index: 1;
  pointer-events: none;
  animation: tienda-nav-shine 3.5s ease-in-out infinite;
}

@keyframes tienda-nav-shine {
  0% { left: -130%; }
  55%, 100% { left: 150%; }
}

/* Hover: crece y brilla más */
.navbar-nav .nav-link.btn-tienda-nav:hover,
.navbar-nav .nav-link.btn-tienda-nav:focus {
  color: #ffffff !important;
  transform: scale(1.12);
  border-color: #ffffff;
  box-shadow: 0 0 45px rgba(249, 115, 22, 1),
              0 0 25px rgba(16, 185, 129, 0.7);
}

.navbar-nav .nav-link.btn-tienda-nav .bi-cart-fill {
  font-size: 15px;
}

/* ============================================
   CARRUSEL INFINITO DE CLIENTES (marquee)
   ============================================ */
.partners-marquee {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding: 40px 0 10px;
  /* Desvanecido suave en los bordes izquierdo y derecho */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
}

.partners-track {
  display: flex;
  width: max-content;
  animation: partners-scroll 35s linear infinite;
}

/* Pausa al pasar el mouse para poder ver cada logo */
.partners-marquee:hover .partners-track {
  animation-play-state: paused;
}

.partners-slide {
  flex: 0 0 auto;
  width: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 40px;
}

.partners-slide img {
  max-width: 230px;
  max-height: 150px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.65;
  transition: filter 0.4s ease, opacity 0.4s ease, transform 0.4s ease;
}

/* Cada logo se ilumina y crece al pasar el mouse */
.partners-slide img:hover {
  filter: grayscale(0%);
  opacity: 1;
  transform: scale(1.15);
}

@keyframes partners-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (max-width: 768px) {
  .partners-slide {
    width: 200px;
    padding: 0 25px;
  }
  .partners-slide img {
    max-width: 160px;
    max-height: 110px;
  }
  .partners-track {
    animation-duration: 25s;
  }
}

/* ============================================
   BOTONES FLOTANTES — siempre invitando a comprar
   ============================================ */
.floating-actions {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.fab {
  position: relative;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 26px;
  text-decoration: none;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.fab-whatsapp {
  background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
  animation: fab-bounce 2.6s ease-in-out infinite;
}

.fab-tienda {
  background: linear-gradient(135deg, var(--accent-orange) 0%, var(--accent-green) 100%);
  animation: fab-bounce 2.6s ease-in-out infinite 0.4s;
}

.fab:hover {
  transform: scale(1.12);
  color: #fff;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.35);
  animation-play-state: paused;
}

/* Etiqueta que aparece al pasar el mouse */
.fab-label {
  position: absolute;
  right: 74px;
  background: var(--primary-dark);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  padding: 9px 15px;
  border-radius: 10px;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(12px);
  pointer-events: none;
  transition: all 0.3s ease;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
}

.fab-label::after {
  content: "";
  position: absolute;
  right: -5px;
  top: 50%;
  transform: translateY(-50%);
  border-left: 6px solid var(--primary-dark);
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
}

.fab:hover .fab-label {
  opacity: 1;
  transform: translateX(0);
}

/* Anillo expansivo en el botón de tienda */
.fab-ping {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(249, 115, 22, 0.7);
  animation: fab-ping 1.8s cubic-bezier(0, 0, 0.2, 1) infinite;
  pointer-events: none;
}

/* Punto de notificación */
.fab-dot {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 14px;
  height: 14px;
  background: #ef4444;
  border: 2px solid #fff;
  border-radius: 50%;
  animation: fab-dot-pulse 1.5s ease-in-out infinite;
}

@keyframes fab-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

@keyframes fab-ping {
  0% { transform: scale(1); opacity: 0.7; }
  100% { transform: scale(1.9); opacity: 0; }
}

@keyframes fab-dot-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.3); opacity: 0.7; }
}

@media (max-width: 768px) {
  .fab {
    width: 54px;
    height: 54px;
    font-size: 23px;
  }
  .floating-actions {
    right: 16px;
    bottom: 16px;
    gap: 14px;
  }
}

/* ============================================
   BURBUJA DE MENSAJE — aparece cada cierto tiempo
   ============================================ */
.fab-bubble {
  position: absolute;
  right: 74px;
  bottom: 4px;
  background: #fff;
  color: var(--primary-dark);
  font-size: 13.5px;
  font-weight: 600;
  padding: 12px 16px;
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  border: 1px solid rgba(0, 0, 0, 0.05);
  opacity: 0;
  transform: translateX(20px) scale(0.8);
  transform-origin: right center;
  pointer-events: none;
  transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

.fab-bubble.show {
  opacity: 1;
  transform: translateX(0) scale(1);
  pointer-events: auto;
}

/* Flecha que apunta al botón */
.fab-bubble::after {
  content: "";
  position: absolute;
  right: -7px;
  bottom: 20px;
  border-left: 8px solid #fff;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
}

.fab-bubble-close {
  border: none;
  background: var(--bg-light);
  color: var(--text-muted);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.fab-bubble-close:hover {
  background: #fee2e2;
  color: #ef4444;
}

@media (max-width: 768px) {
  .fab-bubble {
    font-size: 12px;
    padding: 10px 13px;
    right: 66px;
  }
}

/* ============================================
   HERO — legibilidad del texto + entrada animada
   ============================================ */
@keyframes hero-rise {
  from { opacity: 0; transform: translateY(32px); }
  to { opacity: 1; transform: translateY(0); }
}

.hero-content,
.svc-hero-content,
.about-hero-content {
  animation: hero-rise 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Índice */
.hero-title,
.hero-subtitle {
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.35);
}

.hero-highlight {
  text-shadow: none;
}

.typing-text {
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.3);
}