/*! ELO GROUP | Custom Style v2.0 — Mobile-First */

/* ==========================================================================
   Variables de Design
   ========================================================================== */
:root {
  --navy: #0B3C5D;
  --sky: #87CEEB;
  --accent: #F97316;
  --white: #ffffff;
  --glass-bg: rgba(255, 255, 255, 0.75);
  --glass-border: rgba(11, 60, 93, 0.07);
}

/* ==========================================================================
   Base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  color: var(--navy);
  -webkit-text-size-adjust: 100%;
}

body {
  overflow-x: hidden;
}

section {
  scroll-margin-top: 90px;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

.text-outline {
  -webkit-text-stroke: 2px var(--sky);
  color: transparent;
}

/* ==========================================================================
   Glassmorphism
   ========================================================================== */
.glass, .glass-card {
  background: var(--glass-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--glass-border);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.glass-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 36px rgba(11, 60, 93, 0.09);
  border-color: var(--sky);
}

/* Disable hover lift on touch devices */
@media (hover: none) {
  .glass-card:hover {
    transform: none;
    box-shadow: none;
  }
}

/* ==========================================================================
   Background Grid
   ========================================================================== */
.bg-grid {
  background-image: radial-gradient(var(--navy) 0.5px, transparent 0.5px);
  background-size: 28px 28px;
  opacity: 0.04;
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* ==========================================================================
   Navbar — Mobile Hamburger
   ========================================================================== */
#bar1, #bar2, #bar3 {
  transform-origin: center;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* ==========================================================================
   Animations
   ========================================================================== */
.animate-float {
  animation: float 6s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-18px); }
}

.scan-line {
  height: 2px;
  background: var(--accent);
  position: absolute;
  width: 100%;
  top: 50%;
  animation: scan 2s linear infinite;
}

@keyframes scan {
  0%   { top: 0%;   opacity: 0; }
  50%  { top: 50%;  opacity: 1; }
  100% { top: 100%; opacity: 0; }
}

/* ==========================================================================
   Utility
   ========================================================================== */
.card-hover:hover {
  transform: translateY(-5px);
  border-color: rgba(249, 115, 22, 0.3);
  background: var(--white);
}

/* ==========================================================================
   Responsive Typography
   ========================================================================== */
@media (max-width: 480px) {
  h1 { font-size: 2.2rem !important; line-height: 1.15; }
  h2 { font-size: 1.6rem !important; }
  .text-outline { -webkit-text-stroke: 1.5px var(--sky); }
}

/* ==========================================================================
   Touch-friendly tap targets
   ========================================================================== */
@media (max-width: 768px) {
  a, button {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  nav a {
    padding: 0.5rem 0;
  }
}

/* ==========================================================================
   Boilerplate helpers
   ========================================================================== */
.hidden           {
  display: none;
}
.visually-hidden  {
  border: 0; clip: rect(0,0,0,0);
  height: 1px; margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}