/* ==========================================
   MARBACON S.A.S. - CSS Global Compartido
   ========================================== */

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: #F4F4F4;
}
::-webkit-scrollbar-thumb {
  background: #C0392B;
  border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
  background: #922B21;
}

/* Glassmorphism & Transition for scrolled navbar */
.nav-scrolled {
  background-color: rgba(192, 57, 43, 0.95);
  backdrop-filter: blur(12px);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Speech Bubble pointing down on mobile, pointing left on desktop */
.speech-bubble-right {
  position: relative;
  background: #ffffff;
  border: 1px solid #f3f4f6;
}
.speech-bubble-right::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid #ffffff;
}
.speech-bubble-right::before {
  content: '';
  position: absolute;
  bottom: -11px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid #e5e7eb;
  z-index: -1;
}
@media (min-width: 1024px) {
  .speech-bubble-right::after {
    bottom: auto;
    left: -10px;
    top: 50%;
    transform: translateY(-50%);
    border-left: none;
    border-right: 10px solid #ffffff;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
  }
  .speech-bubble-right::before {
    bottom: auto;
    left: -11px;
    top: 50%;
    transform: translateY(-50%);
    border-left: none;
    border-right: 10px solid #e5e7eb;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
  }
}

/* Small Speech Bubble pointing left (desktop) or up (mobile) */
.speech-bubble-left {
  position: relative;
  background: #ffffff;
  border: 1px solid #e5e7eb;
}
.speech-bubble-left::after {
  content: '';
  position: absolute;
  left: -10px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 10px solid #ffffff;
}
.speech-bubble-left::before {
  content: '';
  position: absolute;
  left: -11px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 10px solid #e5e7eb;
  z-index: -1;
}

@media (max-width: 640px) {
  .speech-bubble-left::after {
    left: 50%;
    top: -10px;
    transform: translateX(-50%);
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: none;
    border-bottom: 10px solid #ffffff;
  }
  .speech-bubble-left::before {
    left: 50%;
    top: -11px;
    transform: translateX(-50%);
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: none;
    border-bottom: 10px solid #e5e7eb;
    z-index: -1;
  }
}

/* Entrance pop-up for the Speech Bubble */
@keyframes pop {
  0% {
    transform: scale(0.85);
    opacity: 0;
  }
  70% {
    transform: scale(1.03);
    opacity: 0.9;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
.animate-pop {
  animation: pop 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
  transform-origin: bottom center;
}
@media (min-width: 1024px) {
  .animate-pop {
    transform-origin: left center;
  }
}

/* Reveal animations on scroll */
.reveal-item {
  opacity: 0;
  transform: translateY(35px);
  transition: all 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-item.show {
  opacity: 1;
  transform: translateY(0);
}

/* Pulse animation for WhatsApp */
@keyframes shadowPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.5);
  }
  70% {
    box-shadow: 0 0 0 15px rgba(37, 211, 102, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
  }
}
.animate-whatsapp-pulse {
  animation: shadowPulse 2s infinite;
}

/* CSS filter to make logo white */
.logo-white {
  filter: brightness(0) invert(1);
}