/* Contenedor general del hero */
/* Cada slide: imagen de fondo */
.hero-slide {
    position: relative;
    min-height: 460px;           /* ajustá altura según tu imagen */
    max-height: 650px;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
   
}

/* Overlay oscuro */
.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to right,
        rgba(0, 0, 0, 0.65) 0%,
        rgba(0, 0, 0, 0.4) 45%,
        rgba(0, 0, 0, 0.25) 100%
    );
}

/* CAPTION */
/* CAPTION */
.hero-caption {
    position: relative;
    z-index: 2;
    color: #fff;
    padding: 3rem 0;
    margin-top: -100px;   /* <--- SUBE el bloque de texto hacia el área gris */
}

/* En mobile no lo subimos tanto para que no se corte */
@media (max-width: 767.98px) {
    .hero-caption {
        margin-top: -15px;
        padding: 2rem 0 4.5rem;
    }
}

/* Títulos */
.hero-title-line {
    margin: 0;
    line-height: 1.2;
    text-transform: uppercase;
}

.hero-title-main {
    font-size: clamp(1.9rem, 2.5vw, 4rem);
    font-weight: 600;
    color: #585655; /* gris claro como en tu diseño */
}

.hero-title-orange {
    font-size: clamp(1.9rem, 2.5vw, 3.5rem);
    font-weight: 400;
    color: #f57c00; /* naranja */
    padding-top: 3px;
    line-height: 0.8
}

.hero-title-sub {
    font-size: clamp(1.6rem, 2.3vw, 3.5rem);
    font-weight: 400;
}

/* Texto */
.hero-text {
    margin-top: 1rem;
    font-size: 1.375rem;
}

/* Animación: texto que "sube" */
.hero-caption > * {
    opacity: 0;
    transform: translateY(20px);
}

		
		
		
		
/* Al activarse el slide, animar cada parte */
.carousel-item.active .hero-caption > * {
    animation: heroTextUp 0.8s ease-out forwards;
}

.carousel-item.active .hero-caption h2.hero-title-main {
    animation-delay: 0.05s;
}
.carousel-item.active .hero-caption h2.hero-title-orange {
    animation-delay: 0.20s;
}
.carousel-item.active .hero-caption h2.hero-title-sub {
    animation-delay: 0.35s;
}
.carousel-item.active .hero-caption .hero-text {
    animation-delay: 0.55s;
}

@keyframes heroTextUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* CONTROLES NARANJAS (flechas abajo derecha) */
.hero-controls {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 3;
    background-color: #f57c00; /* naranja sólido */
    display: flex;
    align-items: stretch;
    min-width: 130px;
}

/* Botones dentro del bloque naranja */
.hero-arrow {
    flex: 1;
    border: none;
    background: transparent;
    color: #fff;
    font-size: 1.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.6rem 1.2rem;
    cursor: pointer;
    transition: background-color .2s ease, transform .1s ease;
}

.hero-arrow + .hero-arrow {
    border-left: 1px solid rgba(255, 255, 255, 0.35);
}

.hero-arrow:hover {
    background-color: rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
}

/* Responsivo */
@media (max-width: 767.98px) {
    .hero-slide {
        min-height: 380px;
    }
    .hero-caption {
        padding: 2rem 0 4.5rem; /* deja espacio para que no pisen las flechas */
    }
    .hero-title-main,
    .hero-title-orange,
    .hero-title-sub {
        font-size: 1.4rem;
    }
    .hero-text {
        font-size: 0.9rem;
    }
    .hero-controls {
        min-width: 110px;
    }
}

.hero-carousel-wrapper .carousel-inner {
    overflow: visible;
}	

		
.bg-aptitud-dark {
    background: linear-gradient(
        90deg,
        #000000 0%,   /* negro */
        #1b1b1b 25%,  /* gris muy oscuro */
        #3a3a3a 60%,  /* gris oscuro */
        #666666 100%  /* gris medio derecho */
    );
    color: #ffffff;
}