/* ===========================
   LEN Group — Custom Styles
   =========================== */

:root {
  --bg: #01050B;
  --white: #FFFFFF;
  --text-muted: rgba(255, 255, 255, 0.5);
  --text-footer: rgba(255, 255, 255, 0.4);

  /* Badges por producto */
  --badge-platform-bg: rgba(0, 255, 30, 0.05);
  --badge-platform-border: rgba(0, 255, 30, 0.10);
  --badge-platform-text: #00FF1E;

  --badge-dam-bg: rgba(255, 45, 241, 0.05);
  --badge-dam-border: rgba(255, 45, 241, 0.10);
  --badge-dam-text: #FF2DF1;

  --badge-analytics-bg: rgba(0, 229, 255, 0.05);
  --badge-analytics-border: rgba(59, 235, 255, 0.10);
  --badge-analytics-text: #00E5FF;

  /* Tarjetas */
  --card-bg: rgba(255, 255, 255, 0.05);
  --card-border: rgba(255, 255, 255, 0.10);
}

/* ---- Global ---- */
html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--bg);
  background-image: url('../assets/bg.png');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
}

/* ---- Nav scrolled state ---- */
#navbar.scrolled {
  background-color: rgba(1, 5, 11, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* ---- Badges de producto ---- */
.badge-platform {
  background: var(--badge-platform-bg);
  border: 1px solid var(--badge-platform-border);
  color: var(--badge-platform-text);
}

.badge-dam {
  background: var(--badge-dam-bg);
  border: 1px solid var(--badge-dam-border);
  color: var(--badge-dam-text);
}

.badge-analytics {
  background: var(--badge-analytics-bg);
  border: 1px solid var(--badge-analytics-border);
  color: var(--badge-analytics-text);
}

/* ---- Avalados por ---- */
.avalados-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 32px;
}

@media (min-width: 768px) {
  .avalados-grid {
    gap: 48px;
  }
}

@media (max-width: 767px) {
  .avalados-grid {
    flex-direction: column;
    align-items: center;
    gap: 32px;
  }
}

.avalados-grid img {
  filter: none;
}

/* ---- Clients grid ---- */
.clients-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  position: relative;
}

@media (min-width: 769px) {
  .clients-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.client-item {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  cursor: pointer;
  border-right: 1px solid rgba(255, 255, 255, 0.15);
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

/* Desktop: 4 columnas */
@media (min-width: 768px) {
  .clients-grid .client-item:nth-last-child(-n+4) {
    border-bottom: none !important;
  }
  .clients-grid .client-item:nth-child(4n) {
    border-right: none !important;
  }
}

/* Mobile: 2 columnas */
@media (max-width: 767px) {
  .clients-grid .client-item:nth-last-child(-n+2) {
    border-bottom: none !important;
  }
  .clients-grid .client-item:nth-child(2n) {
    border-right: none !important;
  }
}

/* ---- Grid crosses at intersections ---- */
.grid-cross {
  position: absolute;
  z-index: 20;
  width: 24px;
  height: 24px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: rgba(255, 255, 255, 0.6);
  font-size: 20px;
  line-height: 1;
  text-align: center;
}

.client-item svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.client-item .client-circle {
  transition: transform 300ms ease;
  transform: scale(0);
  transform-origin: center;
}

.client-item:hover .client-circle {
  transform: scale(1);
}

.client-item .client-logo-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  max-width: 60%;
  max-height: 40%;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.7;
  transition: opacity 200ms ease;
  pointer-events: none;
}

.client-item:hover .client-logo-overlay {
  opacity: 0;
}

/* ---- Glass card (Cómo funciona) ---- */
.glass-card {
  background: #FFFFFF0D;
  border: 2px solid #FFFFFF1A;
  border-radius: 40px;
}

/* ---- Cascade layout ---- */

/* Mobile: vertical stack with overlap */
.cascade-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.cascade-card {
  width: 100%;
  position: relative;
  min-height: 259px;
  gap: 16px;
}

.cascade-card-1 { z-index: 1; }
.cascade-card-2 { z-index: 2; margin-top: -16px; }
.cascade-card-3 { z-index: 3; margin-top: -16px; }

/* Desktop */
@media (min-width: 769px) {
  .cascade-container {
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
  }

  .cascade-card {
    min-width: 362px;
    width: 362px;
    flex-shrink: 0;
  }

  .cascade-card-1 {
    z-index: 1;
    margin-top: 0;
  }

  .cascade-card-2 {
    z-index: 2;
    margin-top: 82px;
    margin-left: -16px;
  }

  .cascade-card-3 {
    z-index: 1;
    margin-top: 0;
    margin-left: -16px;
  }
}

/* ---- Mobile menu animation ---- */
#mobile-menu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

#mobile-menu.open {
  display: block;
  max-height: 400px;
}

/* Hamburger active state */
#menu-toggle.active .hamburger-line:nth-child(1) {
  transform: translateY(5.5px) rotate(45deg);
}
#menu-toggle.active .hamburger-line:nth-child(2) {
  opacity: 0;
}
#menu-toggle.active .hamburger-line:nth-child(3) {
  transform: translateY(-5.5px) rotate(-45deg);
}

/* ---- Hero typing + fade-in sequence ---- */
.typing-cursor {
  display: inline;
  font-weight: 100;
  color: rgba(255, 255, 255, 0.6);
  animation: blink 0.8s step-end infinite;
}

.typing-cursor.done {
  opacity: 0;
  transition: opacity 0.6s ease;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0; }
}

.hero-fade {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.hero-fade.show {
  opacity: 1;
  transform: translateY(0);
}

.hero-earth-wrap {
  margin-bottom: 22px;
}

.hero-earth {
  width: 92px;
  height: 92px;
  object-fit: contain;
  margin-inline: auto;
  filter: drop-shadow(0 8px 20px rgba(0, 15, 40, 0.55));
}

@media (min-width: 768px) {
  .hero-earth-wrap {
    margin-bottom: 28px;
  }

  .hero-earth {
    width: 120px;
    height: 120px;
  }
}

/* Staggered delays */
.hero-fade-1 { transition-delay: 0s; }
.hero-fade-2 { transition-delay: 0.15s; }
.hero-fade-3 { transition-delay: 0.3s; }
.hero-fade-4 { transition-delay: 0.45s; }

/* ---- Video play button ---- */
.play-btn-img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 80px;
  cursor: pointer;
  pointer-events: none;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.video-container:hover .play-btn-img {
  transform: translate(-50%, -50%) scale(1.1);
  opacity: 0.9;
}

/* ---- Scroll entrance animations ---- */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.animate-on-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---- Selection ---- */
::selection {
  background: rgba(0, 229, 255, 0.3);
  color: #fff;
}