/* Variables de color */
    :root {
      --primary-color: #083B66;
      --secondary-color: #083B66;
      --bg-color: #ffffff;
      --text-color: #31373E;
      --nav-bg: #ffffff;
      --nav-text: #212529;
      --card-bg: #f8f9fa;
    }

    body.dark-mode {
      --bg-color: #0a1f3d;
      --text-color: #e0e0e0;
      --nav-bg: #0a1f3d;
      --nav-text: #e0e0e0;
      --card-bg: #11284d;
    }

    body {
      font-family: 'Inter', sans-serif;
      background-color: var(--bg-color);
      color: var(--text-color);
      transition: background-color 0.3s, color 0.3s;
    }

    .navbar, .navbar-dark .navbar-nav .nav-link {
      background-color: var(--nav-bg) !important;
      color: var(--nav-text) !important;
      transition: background-color 0.3s, color 0.3s;
      position: fixed;top: 0;width: 100%;background-color: #fff;overflow:hidden;z-index: 1;
    }

    .navbarLanguaje{
      color:#083B66;
    }

    .navbarLanguaje:hover{
      color:#0D60A4;
    }

    .heroMargin{
      margin-top: 70px;
    }

    .heroText1{
      color:#456C8C;
    }

    .heroText2{
      color:#595959;
    }

    .btn-primary {
      background-color: var(--primary-color);
      border-color: var(--primary-color);
      transition: background-color 0.3s, transform 0.2s;
    }

    .btn-primary:hover {
      background-color: #0B528C;
      transform: translateY(-2px);
    }

    /* Nosotros */
    .about {
      background: linear-gradient(135deg, #e9f1f9 0%, #ffffff 100%);
      padding: 5rem 0;
    }

    .about img {
      width: 100%;
      border-radius: 1rem;
      box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    }

    .about h2 {
      font-weight: 600;
      color: var(--primary-color);
    }

    .about p {
      color: #555;
      font-weight: 300;
    }

    .card {
      background-color: var(--card-bg);
      border: none;
      border-radius: 1rem;
      box-shadow: 0 8px 20px rgba(0,0,0,0.05);
      transition: transform 0.3s, box-shadow 0.3s;
    }

    .card:hover {
      transform: translateY(-5px);
      box-shadow: 0 12px 25px rgba(0,0,0,0.1);
    }

    footer {
      padding: 2rem 0;
      text-align: center;
      background-color: var(--nav-bg);
      color: var(--nav-text);
      margin-top: 3rem;
    }