.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
}

html {
  scroll-behavior: smooth;
  scroll-snap-type: y proximity;
}

body {
  font-family: 'Noto Sans Devanagari', sans-serif;
  scroll-snap-type: y proximity;
  scroll-padding-top: 5rem;
  background: #111111;
  color: #ffffff;
}


header,
section,
footer {
  scroll-snap-align: start;
}

#heroSection {
  background-color: transparent !important;
}

/* Vanta canvas detrás del contenido */
#heroSection {
  position: relative;
}

#heroSection .vanta-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

#heroSection > * {
  position: relative;
  z-index: 1;
}


.animated-gradient {
  position: relative;
  background: linear-gradient(0deg, #0b0b0b 0%, #111111 20%, #000000 40%, #0f2a33 60%, #111111 100%);
  background-size: 250% 250%;
  animation: gradient-wave-v 8s ease-out alternate infinite;
  overflow: hidden;
}


@keyframes gradient-wave-v {
  0% { background-position: 50% 0%; }
  50% { background-position: 50% 100%; }
  100% { background-position: 50% 0%; }
}


#heroSection > * {
  position: relative;
  z-index: 1;
}

.vanta-canvas {
  background: transparent !important;
}

.logo-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 90px;
}

.client-logo {
  height: 52px;
  width: auto;
  max-width: 120px;
  object-fit: contain;
  /* Logos en blanco con opacidad 70% para contraste */
  filter: brightness(0) invert(1) opacity(0.7);
  transition: transform 0.3s ease, filter 0.3s ease, opacity 0.3s ease;
}

.logo-item:hover .client-logo {
  transform: scale(1.05);
  filter: brightness(0) invert(1) opacity(1);
}

.clients-marquee {
  /* La animación la controla JS para asegurar loop perfecto sin salto */
  animation: none;
  will-change: transform;
}

nav {
  transition: background-color 0.3s ease, padding 0.3s ease, box-shadow 0.3s ease;
}

.shadow-custom {
  box-shadow: 0 10px 40px rgba(18, 18, 18, 0.04);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.shadow-custom:hover {
  transform: translateY(-3px);
}

.project-card img,
.group img {
  transition: transform 0.5s ease;
}

.project-card:hover img,
.group:hover img {
  transform: scale(1.05);
}

.animate-marquee {
  animation: marquee 30s linear infinite;
}

@keyframes marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

.mobile-menu {
  transition: max-height 0.35s ease, opacity 0.3s ease, transform 0.3s ease;
  transform-origin: top;
}

.mobile-menu.hidden {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transform: translateY(-8px);
}

.mobile-menu:not(.hidden) {
  opacity: 1;
  max-height: 100vh;
  transform: translateY(0);
}

button,
a {
  transition: color 0.25s ease, background-color 0.25s ease, transform 0.25s ease;
}

/* Accesibilidad (modo dark): mejor contraste para elementos interactivos */
button:focus-visible,
a:focus-visible {
  outline: 2px solid rgba(0, 122, 255, 0.55);
  outline-offset: 3px;
}

/* Botones sólidos: leve degradado para profundidad sin perder contraste */
/* Nota: usamos selectores por atributo (evita problemas con clases Tailwind como bg-[#FF9000]) */
button[class*="bg-primary"],
button[class*="bg-on-primary"],
button[class*="bg-surface"],
button[class*="bg-surface-container-lowest"],
button.bg-primary,
button.bg-on-primary,
button.bg-surface,
button.bg-surface-container-lowest {
  background-image: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(0,0,0,0.15));
}

/* El botón naranja usa bg-[#FF9000]; lo cubrimos con un selector de substring sin romper CSS */
button[class*="#FF9000"] {
  background-image: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(0,0,0,0.15));
}

/* Evita estilos duplicados de focus: se sobreponen en varias reglas existentes */
/* input/textarea ya gestionan outline:none arriba; aquí solo dejamos la accesibilidad */


.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

button:focus-visible,
a:focus-visible {
  outline: 2px solid rgba(0, 65, 200, 0.35);
  outline-offset: 2px;
}

input:focus,
textarea:focus {
  outline: none;
}


@media (max-width: 768px) {
  .font-display-lg {
    font-size: 2.5rem;
    line-height: 1.15;
  }

  /* Centrado visual de métricas en mobile */
  #heroSection {
    text-align: center;
  }

  .hero-stats {
    gap: 14px;
    justify-content: center;
    text-align: center;
  }

  /* Carrusel: evita que el w-screen + overflow genere sesgo hacia la derecha */
  .clients-marquee {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    display: flex;
    justify-content: center;
  }

  .clients-marquee__track {
    width: max-content;
    margin: 0 auto;
  }

  .mobile-only-heading {
    font-size: 2rem;
    line-height: 1.2;
  }
}