/* Custom Tactical & Patriotic Design System for Polígono Malvinas Argentinas */

@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@400;600;700&family=Montserrat:wght@300;400;500;600;700;800&family=Oswald:wght@500;600;700&display=swap');

:root {
  --color-coyote: #C2A676;
  --color-coyote-dark: #8F764C;
  --color-coyote-light: #E6D7BD;
  --color-steel-blue: #1D3557;
  --color-patriot-blue: #457B9D;
  --color-patriot-sky: #74ACDF;
  --color-olive-safety: #4A5D36;
  --color-olive-glow: #68844D;
  --color-bg-dark: #0A0C10;
  --color-bg-card: #131722;
  --color-bg-card-hover: #1A202E;
  --color-border: #283042;
  --font-heading: 'Chakra Petch', sans-serif;
  --font-display: 'Oswald', sans-serif;
  --font-body: 'Montserrat', sans-serif;
}

body {
  background-color: var(--color-bg-dark);
  color: #E2E8F0;
  font-family: var(--font-body);
  overflow-x: hidden;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: #0A0C10;
}
::-webkit-scrollbar-thumb {
  background: #283042;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--color-coyote);
}

.font-heading {
  font-family: var(--font-heading);
}

.font-display {
  font-family: var(--font-display);
}

/* Tactical Background Grid Pattern */
.bg-tactical-grid {
  background-size: 40px 40px;
  background-image: 
    linear-gradient(to right, rgba(194, 166, 118, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(194, 166, 118, 0.05) 1px, transparent 1px);
}

.bg-pattern-dots {
  background-image: radial-gradient(rgba(194, 166, 118, 0.15) 1px, transparent 1px);
  background-size: 20px 20px;
}

/* Custom Tactical Border Glow */
.border-coyote-glow {
  border-color: var(--color-coyote);
  box-shadow: 0 0 15px rgba(194, 166, 118, 0.2);
}

.border-steel-glow {
  border-color: var(--color-patriot-sky);
  box-shadow: 0 0 15px rgba(116, 172, 223, 0.2);
}

/* Tactical Cutout Corners */
.tactical-clip {
  clip-path: polygon(
    0 0, 
    calc(100% - 15px) 0, 
    100% 15px, 
    100% 100%, 
    15px 100%, 
    0 calc(100% - 15px)
  );
}

.tactical-clip-sm {
  clip-path: polygon(
    0 0, 
    calc(100% - 8px) 0, 
    100% 8px, 
    100% 100%, 
    8px 100%, 
    0 calc(100% - 8px)
  );
}

/* Argentina Flag Accent Line */
.flag-stripe {
  background: linear-gradient(90deg, #74ACDF 0%, #74ACDF 33%, #FFFFFF 33%, #FFFFFF 66%, #74ACDF 66%, #74ACDF 100%);
  height: 4px;
}

.flag-badge {
  background: linear-gradient(135deg, rgba(116, 172, 223, 0.2) 0%, rgba(29, 53, 87, 0.4) 100%);
  border: 1px solid rgba(116, 172, 223, 0.4);
}

/* Pulsating Animation for WhatsApp & Live Badges */
@keyframes pulse-coyote {
  0%, 100% { box-shadow: 0 0 0 0 rgba(194, 166, 118, 0.6); }
  50% { box-shadow: 0 0 0 12px rgba(194, 166, 118, 0); }
}

@keyframes pulse-green {
  0%, 100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7); }
  50% { box-shadow: 0 0 0 14px rgba(37, 211, 102, 0); }
}

.pulse-coyote-btn {
  animation: pulse-coyote 2.5s infinite;
}

.pulse-whatsapp {
  animation: pulse-green 2s infinite;
}

/* Glassmorphism Navigation */
.nav-glass {
  background: rgba(10, 12, 16, 0.88);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(40, 48, 66, 0.7);
}

/* Card Hover Elevation */
.service-card {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.service-card:hover {
  transform: translateY(-5px);
  border-color: var(--color-coyote);
  box-shadow: 0 10px 30px -10px rgba(194, 166, 118, 0.25);
}

/* Lightbox Modal */
.lightbox-modal {
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.lightbox-modal.hidden {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}
.lightbox-modal.active {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}