/* =======================
   HERO GENERAL
======================= */
.hero {
    width: 100%;
    display: flex;
    flex-direction: column;
}

/* =======================
   LÍNEAS
======================= */
.hero-lines {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.hero-lines .line {
    height: 6px;
    width: 0;
    animation: draw-line 2s ease forwards;
}

.line.brown { background: #f9e8a3; animation-delay: 1s; }
.line.gold  { background: #a7b5cf; animation-delay: 1s; }
.line.gray  { background: #e7acb2; animation-delay: 1s; }

/* =======================
   CONTENEDOR VIDEO
======================= */
.hero-video {
    position: relative;
    height: 65vh;
    min-height: 420px;
    overflow: hidden;
}

/* Video */
.hero-video video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

/* Overlay cine */
.hero-video::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0,0,0,.75) 0%,
        rgba(0,0,0,.35) 40%,
        rgba(0,0,0,.15) 100%
    );
    z-index: 2;
}

/* Texto */
.hero-text {
    position: absolute;
    left: 60px;
    bottom: 60px;
    z-index: 3;
    max-width: 700px;
}

.hero-text h1 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 56px;
    color: #fff;
    text-shadow: 2px 2px 10px rgba(0,0,0,.6);
    line-height: 1.1;
}

/* Animación */
@keyframes draw-line {
    from { width: 0; }
    to   { width: 100%; }
}