@charset "UTF-8";

/* =========================================
   NAV
   ========================================= */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  padding: 30px 60px;
  display: flex; align-items: center; justify-content: space-between;
}
.nav-logo img { height: 80px; filter: brightness(0) invert(1); opacity: 0.85; }
.nav-links { display: flex; gap: 42px; list-style: none; }
.nav-links a {
  color: rgba(255,255,255,0.52); text-decoration: none;
  font-size: 14px; font-weight: 200; letter-spacing: 0.18em;
  text-transform: uppercase; transition: color 0.2s;
}
.nav-links a:hover { color: white; }
.nav-hbg { display: flex; flex-direction: column; gap: 5px; cursor: pointer; }
.nav-hbg span { width: 24px; height: 1px; background: rgba(255,255,255,0.55); display: block; }

/* =========================================
   HERO
   ========================================= */
#hero {
  position: relative;
  height: 100vh; overflow: hidden;
  display: flex; align-items: flex-end;
}

.hero-vig {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(to top, rgba(6,14,26,0.85) 0%, rgba(6,14,26,0.35) 40%, transparent 72%),
    linear-gradient(to bottom, rgba(6,14,26,0.45) 0%, transparent 22%);
}
.hero-body {
  position: relative; z-index: 2;
  width: 100%;
  padding: 0 7% 8%;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

.video-fondo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
  filter: brightness(0.65) saturate(0.7);
}
.hero-vig {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(to top, rgba(6,14,26,0.85) 0%, rgba(6,14,26,0.35) 40%, transparent 72%),
    linear-gradient(to bottom, rgba(6,14,26,0.45) 0%, transparent 22%);
}
.hero-main { max-width: 70%; }
.hero-main h1 {
  font-family: 'Timeless Horizon', serif;
  font-size: clamp(3.2rem, 7.5vw, 8rem);
  font-weight: 300;
  color: white;
  line-height: 0.94;
  letter-spacing: -0.02em;
  margin-bottom: 28px;
}
.hero-main h1 em {
  font-style: italic;
  color: rgba(255,255,255,0.75);
  font-size: 0.82em;
}
.hero-main-meta {
  display: flex; align-items: center; gap: 32px;
}

.hero-vig {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(to top, rgba(6,14,26,0.85) 0%, rgba(6,14,26,0.35) 40%, transparent 72%),
    linear-gradient(to bottom, rgba(6,14,26,0.45) 0%, transparent 22%);
}
.hero-body {
  position: relative; z-index: 2;
  width: 100%;
  padding: 0 7% 8%;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

.hero-eyebrow {
  font-size: 13px; font-weight: 200;
  letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--gold);
}
.hero-divider { width: 1px; height: 28px; background: rgba(255,255,255,0.2); }
.hero-desc {
  font-size: 16px; font-weight: 200;
  color: rgba(255,255,255,0.45);
  letter-spacing: 0.04em;
  max-width: 320px; line-height: 1.6;
}

.hero-side {
  display: flex; flex-direction: column;
  align-items: flex-end; gap: 18px;
  padding-bottom: 4px;
}
.hero-cta-btn {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 14px 28px;
  border: 1px solid rgba(201,169,110,0.45);
  color: var(--gold);
  font-size: 13px; font-weight: 300;
  letter-spacing: 0.2em; text-transform: uppercase;
  text-decoration: none;
  transition: background 0.25s, border-color 0.25s;
}
.hero-cta-btn:hover { background: rgba(201,169,110,0.1); border-color: var(--gold); }

.hero-scroll-wrap {
  display: flex; flex-direction: column;
  align-items: center; gap: 10px;
  cursor: pointer;
}

.hero-scroll-wrap span {
  font-size: 12px; font-weight: 200;
  letter-spacing: 0.26em; text-transform: uppercase;
  color: rgba(255,255,255,0.3);
  writing-mode: vertical-lr;
}

.hero-scroll-line { width: 1px; height: 44px; background: rgba(255,255,255,0.18); }


.video-fondo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
  filter: brightness(0.65) saturate(0.7);
}


/*  para el contenido dinamico o vista dinamica */
.captura-main{
    /*20260617*/
    margin-top: 120px;
   
}

#contenido-dinamico {
    flex: 1;
    padding: 5px;
    background: var(--steel);     /*#f4f4f4;*/
}