:root {
    --dinamia-green-light: #9ACD32;
    --dinamia-green-dark: #2E7D32;
    --dinamia-blue-light: #00BFFF;
    --dinamia-blue-dark: #0047AB;
    --light-bg: #F0F8FF;
    --dark-text: #0A2342;
    --dinamia: var(--dinamia-blue-dark);
    --dinamia-rgb: 0, 71, 171;
  }
html {
    scroll-behavior: smooth;
  }

  body {
    background: #070b08;
    color: white;
    font-family: "Poppins", sans-serif;
  }
 

  .logo-text,
  header nav a,
  h1, h2, h3, h4 {
    font-family: "Montserrat", sans-serif;
  }

  /* Galería acordeón (3 paneles): hover expande y muestra overlay */
  .gallery-accordion {
    display: flex;
    gap: 0.75rem;
  }

  @media (min-width: 768px) {
    .gallery-accordion {
      gap: 1rem;
      min-height: 440px;
      height: 440px;
    }
  }

  .gallery-panel {
    position: relative;
    flex: 1 1 0%;
    min-width: 4.5rem;
    border-radius: 1.75rem;
    overflow: hidden;
    transition: flex 0.55s cubic-bezier(0.4, 0, 0.2, 1), min-width 0.55s ease;
  }

  @media (min-width: 768px) {
    .gallery-panel:hover {
      flex: 3 1 0%;
    }
  }

  .gallery-panel__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s ease;
  }

  .gallery-panel:hover .gallery-panel__img {
    transform: scale(1.05);
  }

  .gallery-vertical-label {
    font-family: "Montserrat", sans-serif;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
  }

  .gallery-overlay__title {
    font-family: "Montserrat", sans-serif;
  }

  .gallery-overlay__text {
    font-family: "Poppins", sans-serif;
  }

  @media (max-width: 767px) {
    /* Carrusel horizontal con scroll-snap */
    .gallery-accordion {
      flex-direction: row;
      flex-wrap: nowrap;
      overflow-x: auto;
      overflow-y: hidden;
      -webkit-overflow-scrolling: touch;
      scroll-snap-type: x mandatory;
      scroll-padding-inline: 1rem;
      gap: 0.75rem;
      padding-bottom: 0.35rem;
      height: auto;
      min-height: 0;
      scrollbar-color: rgba(var(--dinamia-rgb), 0.5) transparent;
    }

    .gallery-accordion::-webkit-scrollbar {
      height: 6px;
    }

    .gallery-accordion::-webkit-scrollbar-thumb {
      background: rgba(var(--dinamia-rgb), 0.45);
      border-radius: 999px;
    }

    .gallery-panel {
      flex: 0 0 min(88vw, 21rem);
      width: min(88vw, 21rem);
      max-width: min(88vw, 21rem);
      min-height: 320px;
      height: 320px;
      scroll-snap-align: center;
      scroll-snap-stop: always;
    }

    .gallery-panel:hover .gallery-panel__img {
      transform: none;
    }
  }

  .neon {
    color: var(--dinamia);
  }

  .glass {
    background: rgba(16, 26, 18, .82);
    border: 1px solid rgba(var(--dinamia-rgb), .18);
    box-shadow: 0 0 25px rgba(var(--dinamia-rgb), .08);
  }
  @keyframes dinamiaPulse {
  0% { transform: scale(.85); opacity: .85; }
  70%, 100% { transform: scale(1.65); opacity: 0; }
}
@keyframes floatIcon {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-8px) rotate(4deg); }
}

@keyframes floatSticker {
  0%, 100% { transform: translateY(0px) rotate(-6deg); }
  50% { transform: translateY(-10px) rotate(4deg); }
}
@keyframes tabGlowSequence {
  0%, 100% {
    transform: scale(1);
    box-shadow: none;
    background: rgba(255,255,255,.05);
    border-color: rgba(255,255,255,.1);
  }

  12% {
    transform: scale(1.06);
    box-shadow: 0 0 35px var(--color);
    background: color-mix(in srgb, var(--color) 15%, transparent);
    border-color: var(--color);
  }

  24% {
    transform: scale(1);
    box-shadow: none;
    background: rgba(255,255,255,.05);
    border-color: rgba(255,255,255,.1);
  }
}

@keyframes iconJumpSequence {
  0%, 100% {
    transform: translateY(0);
    color: var(--dinamia); 
  }

  12% {
    transform: translateY(-6px) rotate(-10deg);
    color: var(--color); 
  }

  24% {
    transform: translateY(0);
    color: var(--dinamia);
  }
}

@keyframes ballCardPulse {
  0%, 100% {
    transform: scale(1);
    border-color: rgba(255,255,255,.10);
    background: rgba(255,255,255,.025);
    box-shadow: none;
  }

  12% {
    transform: scale(1.04);
    border-color: var(--color);
    background: color-mix(in srgb, var(--color) 12%, transparent);
    box-shadow: 0 0 35px color-mix(in srgb, var(--color) 35%, transparent);
  }

  24% {
    transform: scale(1);
    border-color: rgba(255,255,255,.10);
    background: rgba(255,255,255,.025);
    box-shadow: none;
  }
}

@keyframes ballIconPulse {
  0%, 100% {
    transform: scale(1);
    color: var(--dinamia);
    box-shadow: none;
  }

  12% {
    transform: scale(1.12);
    color: var(--color);
    box-shadow:
      0 0 0 12px color-mix(in srgb, var(--color) 12%, transparent),
      0 0 0 25px color-mix(in srgb, var(--color) 7%, transparent),
      0 0 30px color-mix(in srgb, var(--color) 45%, transparent);
  }

  24% {
    transform: scale(1);
    color: var(--dinamia);
    box-shadow: none;
  }
}

.ball-feature-card {
  animation: ballCardPulse 15s ease-in-out infinite;
}

.ball-feature-icon {
  animation: ballIconPulse 15s ease-in-out infinite;
}

.ball-feature-card:nth-child(1),
.ball-feature-card:nth-child(1) .ball-feature-icon { animation-delay: 0s; }

.ball-feature-card:nth-child(2),
.ball-feature-card:nth-child(2) .ball-feature-icon { animation-delay: 3s; }

.ball-feature-card:nth-child(3),
.ball-feature-card:nth-child(3) .ball-feature-icon { animation-delay: 6s; }

.ball-feature-card:nth-child(4),
.ball-feature-card:nth-child(4) .ball-feature-icon { animation-delay: 9s; }

.ball-feature-card:nth-child(5),
.ball-feature-card:nth-child(5) .ball-feature-icon { animation-delay: 12s; }

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