.glass { background: rgba(255,255,255,0.6); backdrop-filter: blur(6px); }

.font-brand {
  font-family: "Arial Narrow", Arial, sans-serif;
}

section[id] {
  scroll-margin-top: 6rem;
}

.animate-infinite-scroll {
  animation: infinite-scroll 25s linear infinite;
}

.animate-gallery-scroll {
  animation: infinite-scroll 60s linear infinite;
}

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

.animated-frame {
  position: relative;
  background: #003366;
  padding: 3px;
  overflow: visible;
}

.animated-frame::before {
  content: '';
  position: absolute;
  inset: -3px;
  background: conic-gradient(from 90deg at 40% -25%, #003366, #ffffff, #003366, #ffffff, #003366);
  animation: rotate 4s linear infinite;
  filter: blur(5px);
  z-index: -1;
  border-radius: inherit;
}

/* Asegurar que la animación funcione en móvil */
@media (max-width: 768px) {
  .animated-frame {
    overflow: visible;
  }
  
  .animated-frame::before {
    filter: blur(3px);
    inset: -2px;
  }
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Floating action buttons (WhatsApp/Email) stability on mobile */
#fab {
  position: fixed;
  right: clamp(12px, 2.5vw, 20px);
  bottom: max(12px, env(safe-area-inset-bottom));
  z-index: 40;
  will-change: transform;
  transform: translateZ(0);
}

/* Avoid hover scale on touch devices to prevent jitter */
@media (hover: none) and (pointer: coarse) {
  #fab a:hover {
    transform: none !important;
  }
  #fab a {
    transition: transform 0.2s ease, background-color 0.2s ease;
  }
}

/* Small screens: lock size and spacing to reduce movement */
@media (max-width: 640px) {
  #fab {
    gap: 12px !important;
  }
  #fab a,
  #fab img {
    width: 56px !important;
    height: 56px !important;
  }
}