/* Tipografía y Base */
body {
  font-family:
    "Inter",
    system-ui,
    -apple-system,
    sans-serif;
  background-color: #fafafa; /* Un blanco roto muy sutil. */
  color: #334155; /* Slate 700 - Más suave que el negro puro. */
  background-image: radial-gradient(#e5e7eb 1px, transparent 1px);
  background-size: 24px 24px; /* Patrón de puntos sutil. */
}

/* Color Corporativo */
.text-us-red {
  color: #b30a1b;
}
.bg-us-red {
  background-color: #b30a1b;
}
.border-us-red {
  border-color: #b30a1b;
}

/* Interacciones Finas */
.hover-card {
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.hover-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px -10px rgba(179, 10, 27, 0.15); /* Sombra roja muy sutil. */
  border-color: rgba(179, 10, 27, 0.3);
}

/* Animaciones de Entrada */
.fade-in {
  animation: fadeIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.stagger-1 {
  animation-delay: 100ms;
}
.stagger-2 {
  animation-delay: 200ms;
}
.stagger-3 {
  animation-delay: 300ms;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Utilidad para ocultar secciones. */
.hidden-section {
  display: none;
}
.loading-screen {
  position: fixed;
  inset: 0;
  background: white;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

/* Elementos Decorativos */
.hero-blob {
  position: absolute;
  filter: blur(80px);
  opacity: 0.08;
  z-index: 0;
  pointer-events: none;
}

.btn-primary {
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}
.btn-primary:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #b30a1b;
  transform: scaleX(0);
  transform-origin: bottom right;
  transition: transform 0.4s cubic-bezier(0.86, 0, 0.07, 1);
  z-index: -1;
}
.btn-primary:hover:after {
  transform: scaleX(1);
  transform-origin: bottom left;
}
.btn-primary:hover {
  color: white;
}

/* Ajuste para el iframe del mapa. */
.map-container iframe {
  width: 100%;
  height: 100%;
  border: 0;
  filter: grayscale(0.2);
  transition: filter 0.3s;
}
.map-container iframe:hover {
  filter: grayscale(0);
}

/* Ocultar scrollbar para el slider de grupos y avisos. */
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Mobile: hide hero background image */
@media (max-width: 768px) {
  .hero-bg {
    background-image: none !important;
  }
}

/* MENÚ PRINCIPAL (desktop) + MENÚ MÓVIL (acordeón): tipografía y color */
#desktop-nav button,
#mobile-nav-items button {
  font-family:
    "Inter",
    system-ui,
    -apple-system,
    sans-serif;
  font-weight: 400; /* regular */
  color: #374151; /* gris oscuro (gray-700) */
  letter-spacing: 0.01em;
}

/* Hover sobrio */
#desktop-nav button:hover,
#mobile-nav-items button:hover {
  color: #111827; /* gray-900 */
}