/* ======================
   Variables y fuentes
====================== */
:root {
  --color-principal: rgba(255, 255, 255, 0.3);
  --color-secundario: #1e1e2f;
  --glass-blur: blur(12px);
  --hover-acento: #ffd700;
  --transicion: 0.3s ease;
  --font-principal: 'Segoe UI', sans-serif;
}

/* ======================
   Reset básico y fondo
====================== */
body {
  margin: 0;
  padding: 0;
  font-family: var(--font-principal);
  background: linear-gradient(120deg, #111827, #1f2937);
  color: #fff;
  scroll-behavior: smooth;
}

/* ======================
   Hero & secciones
====================== */
.hero {
  height: 80vh;
  background-image: url('../img/hero.jpg'); /* imagen futura */
  background-size: cover;
  background-position: center;
  position: relative;
}

section h2 {
  color: var(--hover-acento);
  margin-bottom: 1rem;
}

/* ======================
   Navbar transparente y blur
====================== */
.navbar {
  background: var(--color-principal);
  backdrop-filter: var(--glass-blur);
  transition: background-color var(--transicion);
}

.navbar.scrolled {
  background-color: rgba(0, 0, 0, 0.7);
}

.nav-link {
  position: relative;
  margin-right: 1rem;
  transition: color var(--transicion);
}

.nav-link:hover {
  color: var(--hover-acento);
}

.nav-link::after {
  content: '';
  position: absolute;
  width: 0%;
  height: 2px;
  bottom: -2px;
  left: 0;
  background-color: var(--hover-acento);
  transition: width var(--transicion);
}

.nav-link:hover::after {
  width: 100%;
}

/* ======================
   Footer y detalles
====================== */
footer {
  background-color: #0f172a;
  color: #ccc;
}

/*
carousel img {
  max-height: 500px;
  object-fit: cover;
}
*/

.hero-carousel {
  height: 100vh;
  overflow: hidden;
  position: relative;
}

.hero-carousel .carousel-inner img {
  height: 100vh;
  object-fit: cover;
  filter: brightness(60%);
}

.carousel-caption-top {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
}

.text-shadow {
  text-shadow: 2px 2px 10px #000;
}