/**
 * ==============================================================================
 * ESTILOS LANDING INSTITUCIONAL (INSPIRADO EN ZAJUNA SENA)
 * ==============================================================================
 */

:root {
  --sena-green: #39A900;
  --sena-green-dark: #007832;
  --sena-green-light: #e8f7ea;
  --sena-blue: #00324D;
  --sena-blue-light: #e6f0f5;
  --sena-sky: #0072ce;
  --bg-light: #F8FAFC;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Work Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background-color: var(--bg-light);
  color: #1e293b;
}

/* Hero Background con degradados suaves institucionales */
.hero-gradient {
  background: radial-gradient(circle at 10% 20%, rgba(57, 169, 0, 0.08) 0%, transparent 40%),
              radial-gradient(circle at 90% 80%, rgba(0, 50, 77, 0.08) 0%, transparent 40%),
              linear-gradient(180deg, #FFFFFF 0%, #F1F5F9 100%);
}

/* Efecto de cristal Zajuna */
.glass-card {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(226, 232, 240, 0.8);
  box-shadow: 0 10px 30px -5px rgba(0, 50, 77, 0.05);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.glass-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 35px -5px rgba(0, 50, 77, 0.1);
  border-color: rgba(57, 169, 0, 0.3);
}

/* Botón institucional */
.btn-sena-primary {
  background: linear-gradient(135deg, #39A900 0%, #2e8800 100%);
  color: #FFFFFF !important;
  box-shadow: 0 4px 14px rgba(57, 169, 0, 0.35);
  transition: all 0.25s ease;
  cursor: pointer;
}

.btn-sena-primary:hover {
  background: linear-gradient(135deg, #2e8800 0%, #007832 100%);
  box-shadow: 0 6px 20px rgba(57, 169, 0, 0.45);
  transform: translateY(-1px);
}

.btn-sena-outline {
  border: 2px solid #00324D;
  color: #00324D;
  transition: all 0.25s ease;
  cursor: pointer;
}

.btn-sena-outline:hover {
  background-color: #00324D;
  color: #FFFFFF;
}

/* Modal Backdrop */
.modal-overlay {
  background-color: rgba(0, 50, 77, 0.65);
  backdrop-filter: blur(6px);
}

#loginModal {
  display: none;
}