:root {
      --primary: #001f3f;      /* Azul rey profundo */
      --accent: #d4af37;       /* Dorado elegante */
      --light: #ffffff;
      --gray: #f8f9fa;
    }
    
    body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      color: #333;
      background-color: var(--gray);
    }
    
    .navbar {
      background-color: rgba(0, 31, 63, 0.85);
      backdrop-filter: blur(10px);
      transition: all 0.4s ease;
    }
    
    .navbar.scrolled {
      background-color: var(--primary) !important;
      box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    }
    
    .nav-link, .navbar-brand {
      color: var(--light) !important;
      font-weight: 500;
    }
    
    .nav-link:hover {
      color: var(--accent) !important;
    }
    
    .hero {
      background-image: url("../img/portada.jpg");
      background-position: center;
      background-repeat: no-repeat;
      background-size:cover;
      min-height: 100vh;
      color: white;
      position: relative;
    }
    
    .hero-overlay {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 30%;
      background: linear-gradient(transparent, var(--primary));
    }
    .overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.65);  /* Negro con 65% opacidad - prueba valores */
  pointer-events: none;  /* Para que no interfiera con clics */
}
    
    .btn-primary {
      background-color: var(--accent);
      border-color: var(--accent);
      color: var(--primary);
      font-weight: bold;
    }
    
    .btn-primary:hover {
      background-color: #b8972e;
      border-color: #b8972e;
    }
    
    .card {
      border: none;
      border-radius: 15px;
      overflow: hidden;
      transition: all 0.4s ease;
      box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    }
    
    .card:hover {
      transform: translateY(-12px);
      box-shadow: 0 20px 40px rgba(0,0,0,0.15);
    }
    
    .card-header {
      background: var(--primary);
      color: white;
      border-radius: 15px 15px 0 0;
    }
    
    .gold-text {
      color: var(--accent);
      font-weight: bold;
    }
    
    footer {
      background: var(--primary);
      color: white;
    }