/* Hero Fullscreen */
.hero{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
    overflow:hidden;
    color:#fff;
    background:linear-gradient(rgba(0,40,85,.75), rgba(0,59,122,.75));
}


.hero-bg{
    position:absolute;
    inset:0;

    background:url("../img/hero.jpg") center center/cover no-repeat;

    animation: heroZoom 8s ease-in-out infinite alternate;

    z-index:0;
	will-change: transform;
}

.hero-overlay{
    position:absolute;
    inset:0;

    background:linear-gradient(
        rgba(0,40,85,.65),
        rgba(0,59,122,.75)
    );

    z-index:1;
}

@keyframes heroZoom{
    from{
        transform: scale(1);
    }
    to{
        transform: scale(1.20);
    }
}

.hero-content{
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: 900px;

    text-align: center;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
	
}

.hero-title{
    font-size:clamp(2.8rem,6vw,5rem);
    line-height:1.1;
    font-weight:800;
    margin-bottom:1.5rem;
}

.hero-subtitle{
    font-size: 1.35rem;
    max-width: 700px;
    opacity: .9;
    margin: 0;
}
.hero-typed{
	margin-top: 25px;
    font-size:1.4rem;
    font-weight:600;
    color:#f5f7fb; 
	text-shadow: 2px 2px 5px #ff0000;
    min-height:40px;
}

.scroll-indicator {
    margin-top: 30px; /* Reducí este valor si la flecha quedó muy pegada al botón */
    font-size: 2rem;
    animation: bounce 2s infinite;
}

@keyframes bounce{
    0%,20%,50%,80%,100%{
        transform:translateY(0);
    }
    40%{
        transform:translateY(10px);
    }
    60%{
        transform:translateY(5px);
    }
}

/* Color del cursor de Typed.js */
.typed-cursor {
    color: #ffff;
    font-size: 1.4rem;
}

.hero-buttons {
    margin-top: 30px; /* Podés aumentar o reducir este valor a tu gusto (ej. 30px o 40px) */
}