/* layout.css */

/* NAVBAR */
.navbar {
  transition: background 0.4s ease, box-shadow 0.4s ease;
  padding: 1rem 2rem;

  background: rgba(0, 0, 0, 0.3); /* overlay */
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(10px);
}

.navbar.scrolled {
  background: rgba(0, 0, 0, 0.85);
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}

.navbar .nav-link {
  margin-left: 1rem;
  color: #fff;
  font-weight: 500;
  position: relative; /* 👈 CLAVE */
  display: inline-block; /* 👈 CLAVE */
  transition: color 0.3s ease;
}

.navbar .nav-link:hover {
  color: #ff3b3b;
}

.navbar .nav-link.active {
  color: #ff3b3b;
  font-weight: 700;
}

.navbar .nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0%;
  height: 2px;
  background: #ff3b3b;
  transition: width 0.3s ease;
}

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

/* HERO */
.hero .bg-video {
  position: absolute;
  top:0; left:0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
.hero .overlay {
  position: absolute;
  top:0; left:0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.45);
  z-index: -1;
}
.hero-content h1 {
  font-size: 3rem;
  margin-bottom: 1rem;
}
.hero-content p {
  font-size: 1.5rem;
}

/* FOOTER */
.footer {
  min-height: 100vh;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: #111;
  color: #fff;
  padding: 3rem 1rem;
}
.footer h5 {
  margin-bottom: 1rem;
}
.footer p, .footer a {
  color: #ccc;
  font-size: 0.9rem;
}
.footer a:hover {
  color: #f2b01e;
}

/* SECCIONES */
.section {
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;

  display: flex;
  flex-direction: column;

  position: relative;

  scroll-snap-align: start;
  scroll-snap-stop: always;

  box-sizing: border-box;

  padding: 80px 0 40px;

  overflow: hidden;
}

.section .container{
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;

  display: flex;
  flex-direction: column;

  gap: 20px;
}

.section-title {
  margin-top: 0;
  margin-bottom: 10px;
  padding-top: 10px;
  position: relative;
  z-index: 2;
}

.section.dark {
  background-color: #222;
  color: #fff;
}

.section + .section {
  margin-top: 0;
}

main {
  scroll-snap-type: y mandatory;
}

.section {
  isolation: isolate;
}