:root {
  --primary: #003366;
  --accent: #000340;
  --highlight: #F59E0B;
}

.brand-gradient {
  background: linear-gradient(135deg, var(--primary), var(--accent));
}
.brand-text { color: var(--primary); }
.brand-bg { background-color: var(--primary); }
.brand-accent { background-color: var(--accent); }
.brand-highlight { color: var(--highlight); }
.brand-border { border-color: var(--primary); }

.shadow-soft { box-shadow: 0 10px 30px rgba(0,0,0,.08); }
.round-2xl { border-radius: 1rem; }

html { scroll-behavior: smooth; }

/* Uniformes */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
}

.gallery-item {
  text-align: center;
}

.carousel2-container {
  position: relative;
  display: flex;
  align-items: center;
}

.carousel2 {
  display: flex;
  overflow: hidden;
  gap: 1rem;
  scroll-behavior: smooth;
}

/* Evitar scroll horizontal inesperado en móviles */
html, body { overflow-x: hidden; }

/* Que todo media sea fluido en pantallas chicas */
img, video, iframe {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Mejor grid responsive para 'Uniformes' en teléfonos muy pequeños */
.gallery {
  /* antes: minmax(250px, 1fr) puede forzar ancho y provocar overflow en móviles estrechos */
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

/* Toques cómodos y tipografía más legible en móviles */
button, a, input, textarea {
  -webkit-tap-highlight-color: transparent;
}

@media (max-width: 640px) {
  :root {
    /* puedes ajustar si quieres subir un poco el tamaño base en móviles */
    font-size: 16px;
  }
}

.navCustom {
  background: linear-gradient(135deg, var(--primary), var(--accent));
  color: white;
}