/* ============================================
   GINCANA LOCATIONS v2 — styles.css
   Fiel al diseño de Canva
   ============================================ */

/* COLORES */
:root {
  --olive:      #6b7c3f;
  --olive-dark: #556332;
  --olive-dim:  rgba(107, 124, 63, 0.15);
  --black:      #0a0a0a;
  --black-2:    #0d0d0d;
}

/* HERO HEIGHT — 100vh real en móvil */
.hero-h {
  height: 100vh;
  min-height: 600px;
}

html {
  scroll-behavior: smooth;
}

section[id],
header[id] {
  scroll-margin-top: 96px;
}

/* OLIVE helpers (Tailwind no sabe de este custom color) */
.olive          { color: var(--olive); }
.bg-olive       { background-color: var(--olive); }
.border-olive   { border-color: var(--olive); }
.hover\:text-olive:hover { color: var(--olive); }
.text-olive     { color: var(--olive); }

.bg-olive-dark  { background-color: var(--olive-dark); }
.hover\:bg-olive:hover      { background-color: var(--olive); }
.hover\:bg-olive-dark:hover { background-color: var(--olive-dark); }
.focus\:border-olive:focus  { border-color: var(--olive) !important; }
.hover\:border-olive\/50:hover { border-color: rgba(107,124,63,0.5); }

/* NAV scroll effect — añadido desde JS */
#navbar.scrolled {
  background: rgba(10, 10, 10, 0.95) !important;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

/* NAV links */
.nav-link {
  color: white;
  font-size: 14px;
  font-weight: 400;
  transition: color 0.2s;
}
.nav-link:hover { color: var(--olive); }

/* TERRITORY images — hover zoom */
.territory-img {
  transition: transform 0.5s ease;
}
.group:hover .territory-img {
  transform: scale(1.05);
}

/* CATEGORY cards — hover zoom */
.cat-card img {
  transition: transform 0.5s ease;
}
.cat-card:hover img {
  transform: scale(1.05);
}

/* SERVICE CARDS */
.service-card {
  background: transparent;
  transition: border-color 0.25s;
}

/* FORM inputs — color override for autofill */
.form-input:-webkit-autofill,
.form-input:-webkit-autofill:hover,
.form-input:-webkit-autofill:focus {
  -webkit-text-fill-color: white;
  -webkit-box-shadow: 0 0 0px 1000px #1a1a1a inset;
  transition: background-color 5000s ease-in-out 0s;
}

/* SCROLL REVEAL */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.65s cubic-bezier(0.16,1,0.3,1), transform 0.65s cubic-bezier(0.16,1,0.3,1);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* MOBILE MENU animation */
#mobile-menu {
  transition: opacity 0.2s;
}
#mobile-menu.flex {
  opacity: 1;
}

/* RESPONSIVE tweaks */
@media (max-width: 640px) {
  .hero-h { min-height: 100dvh; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}