:root {
  --bg: #070a12;
  --bg-2: #0d1220;
  --surface: rgba(255,255,255,0.045);
  --surface-border: rgba(255,255,255,0.09);
  --text: #eef1f8;
  --text-dim: rgba(238,241,248,0.62);
  --cyan: #38e0ff;
  --violet: #9b6bff;
  --amber: #ffb84d;
  --font-display: 'Space Grotesk', sans-serif;
  --font-body: 'Manrope', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
}

a { color: var(--cyan); text-decoration: none; }
a:hover { color: var(--violet); }

::selection { background: var(--cyan); color: #06121a; }

button, select, textarea, input {
  font-family: inherit;
}

/* ---------- Animaciones ---------- */

@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(56,224,255,0.35), 0 20px 60px -20px rgba(56,224,255,0.35); }
  50% { box-shadow: 0 0 0 8px rgba(56,224,255,0), 0 20px 70px -15px rgba(56,224,255,0.5); }
}
@keyframes float-y {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}
@keyframes drift {
  0% { transform: translate(0,0); }
  50% { transform: translate(30px,-20px); }
  100% { transform: translate(0,0); }
}
@keyframes hero-in {
  from { opacity: 0; transform: translateY(28px); }
  to { opacity: 1; transform: translateY(0); }
}

.hero-anim { opacity: 0; animation: hero-in 0.8s cubic-bezier(0.16,1,0.3,1) forwards; }

.bg-orb { position: absolute; border-radius: 50%; filter: blur(70px); pointer-events: none; z-index: 0; }

.grid-lines {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, black, transparent 75%);
}

/* Hojas decorativas: la posicion/tamano/color se asignan por JS (ver js/leaves.js) */
.lk-leaf {
  position: absolute;
  clip-path: ellipse(50% 35% at 50% 50%);
  z-index: 2;
  pointer-events: none;
}

/* Tarjetas con efecto de inclinacion 3D al pasar el mouse */
.lk-tilt {
  transition: transform .15s ease-out, border-color .2s;
  transform: perspective(900px) rotateX(0) rotateY(0) translateZ(0);
}

/* Dropdown personalizado (reemplaza al <select> nativo) */
.lk-dropdown-option {
  padding: 10px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text);
  transition: background .12s, color .12s;
}
.lk-dropdown-option:hover,
.lk-dropdown-option.is-highlighted {
  background: rgba(56,224,255,0.14);
}
.lk-dropdown-option[aria-selected="true"] {
  color: var(--cyan);
}
#dropdown-servicio-btn:focus-visible,
#dropdown-servicio-btn.is-open {
  border-color: rgba(56,224,255,0.5) !important;
}

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
  .lk-nav { padding: 16px 20px !important; }
  .lk-nav-links { gap: 12px !important; }
  .lk-nav-links a.lk-nav-link { display: none !important; }
  .lk-hero { grid-template-columns: 1fr !important; padding: 56px 24px 48px !important; gap: 36px !important; }
  .lk-hero-h1 { font-size: 38px !important; }
  .lk-section { padding-left: 24px !important; padding-right: 24px !important; }
  .lk-cols-4 { grid-template-columns: repeat(2,1fr) !important; }
  .lk-cols-3 { grid-template-columns: 1fr !important; }
  .lk-proceso-grid { grid-template-columns: repeat(2,1fr) !important; row-gap: 32px !important; }
  .lk-proceso-line { display: none !important; }
  .lk-soporte { grid-template-columns: 1fr !important; }
  .lk-form-grid { grid-template-columns: 1fr !important; }
  #tree-trunk-layer { height: 70vh !important; opacity: 0.4 !important; }
  .lk-stats { gap: 18px !important; }
}

@media (max-width: 560px) {
  .lk-cols-4 { grid-template-columns: 1fr !important; }
  .lk-proceso-grid { grid-template-columns: 1fr !important; }
  .lk-hero-h1 { font-size: 32px !important; }
}