/* Hero con carrusel: imágenes a sangre completa y contenido superpuesto */

.carousel-component {
    position: relative;
    width: 100%;
    height: 88vh;
    min-height: 620px;
    background-color: var(--c-dark);
    overflow: hidden;
}

/* ---------- Pista de imágenes ---------- */
.carousel-viewport {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
}

.carousel-track {
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.carousel-slide {
    min-width: 100%;
    height: 100%;
}

.carousel-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* ---------- Capa de contenido ---------- */
/* El degradado oscurece el costado del texto y deja respirar la imagen del otro.
   Sin él, el texto blanco cae sobre zonas claras de las escenas y pierde contraste. */
.carousel-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    padding: var(--header-h) var(--section-pad-x) 3.5rem;
    background:
        linear-gradient(90deg, rgba(10, 7, 41, 0.95) 0%, rgba(10, 7, 41, 0.86) 42%, rgba(10, 7, 41, 0.45) 100%);
    pointer-events: none;
}

.carousel-content {
    max-width: 680px;
    color: var(--c-on-dark);
}

.carousel-content .eyebrow {
    color: var(--c-accent-on-dark);
}

.hero-title {
    margin-top: 1rem;
    font-family: var(--font-titles);
    font-size: clamp(2rem, 4.2vw, 3.1rem);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -0.01em;
    text-shadow: 0 2px 18px rgba(10, 7, 41, 0.6);
}

.hero-paragraph {
    margin-top: 1.4rem;
    font-size: 1.03rem;
    line-height: 1.75;
    color: var(--c-on-dark-muted);
}

.hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 2.1rem;
}

/* La capa no intercepta el puntero; los botones sí deben recibirlo */
.hero-buttons .btn {
    pointer-events: auto;
}

.hero-divider {
    width: 160px;
    height: 4px;
    margin-top: 2.2rem;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--c-accent), var(--c-secondary));
}

.hero-values {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    margin-top: 1.3rem;
    font-size: 0.88rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.hero-values-sep {
    color: var(--c-accent-on-dark);
}

/* ---------- Puntos de navegación ---------- */
.carousel-dots {
    position: absolute;
    bottom: 26px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    display: flex;
    gap: 10px;
}

.carousel-dot {
    width: 11px;
    height: 11px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.45);
    cursor: pointer;
    transition: background 0.3s ease, transform 0.3s ease;
}

.carousel-dot:hover:not(.active) {
    background: rgba(255, 255, 255, 0.8);
}

.carousel-dot.active {
    background: var(--c-accent);
    transform: scale(1.3);
}

/* Área táctil de 44 px sin agrandar el punto visible */
.carousel-dot::after {
    content: '';
    position: absolute;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
    margin-left: 5.5px;
    margin-top: 5.5px;
}

@media (max-width: 992px) {
    .carousel-component {
        height: auto;
        min-height: 0;
    }

    /* En pantallas angostas la imagen no sostiene el texto encima: pasa a ser una
       banda superior y el contenido queda debajo, legible y sin recortes.
       La banda arranca bajo el header —y bajo la barra de ruta cuando está
       visible—; si no, esos elementos fijos le tapan el borde superior. */
    .carousel-component {
        padding-top: calc(var(--header-h) + var(--route-bar-h));
    }

    .carousel-viewport {
        position: relative;
        height: 46vw;
        min-height: 220px;
        max-height: 340px;
    }

    .carousel-overlay {
        position: relative;
        inset: auto;
        padding: 2.6rem var(--section-pad-x) 3rem;
        background: var(--c-dark);
    }

    .carousel-dots {
        bottom: auto;
        top: calc(46vw - 30px);
    }
}

@media (max-width: 992px) and (min-height: 0px) {
    .carousel-dots {
        top: min(calc(46vw - 30px), 310px);
    }
}

@media (max-width: 640px) {
    .hero-buttons .btn {
        width: 100%;
    }

    .hero-divider {
        width: 110px;
        margin-top: 1.8rem;
    }
}