/* Hero carrusel del home.
   Estructura y espaciado con Bootstrap (container/row/col + utilidades);
   aquí solo lo que Bootstrap no resuelve: capas, degradado, fade, tipografía y pestañas. */

.hero-slider {
    min-height: clamp(560px, 76vh, 680px);
    background: var(--blue-teavalo, #051D6B);
}

/* Mismo ancho y márgenes que el header para alinear texto y logo */
.hero-slider .container {
    max-width: var(--maximum-dimension);
    padding-inline: var(--pad, 24px);
}

/* Slides apilados con fade */
.hero-slide {
    opacity: 0;
    visibility: hidden;
    transition: opacity .6s ease, visibility .6s;
}

.hero-slide.is-active {
    opacity: 1;
    visibility: visible;
    z-index: 1;
}

/* Foto a todo el ancho del slide; el degradado de la izquierda va encima de la misma imagen */
.hero-slide__media { width: 100%; }

.hero-slide__image {
    display: block;
    object-fit: cover;
    object-position: center 20%;
}

/* Degradado izquierdo sobre todo el slide (sobre la foto, bajo el texto) */
.hero-slide::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    background: linear-gradient(100deg,
        rgba(3, 19, 74, .95) 0%,
        rgba(3, 19, 74, .86) 22%,
        rgba(3, 19, 74, .5) 44%,
        rgba(3, 19, 74, .1) 64%,
        rgba(3, 19, 74, 0) 80%);
}

.hero-slide .container { z-index: 4; }

/* Texto */
.hero-slide__category {
    font-size: .75rem;
    letter-spacing: .14em;
}

.hero-slide__category::before {
    content: "";
    width: 22px;
    height: 3px;
    background: var(--orange-teavalo, #FF6F16);
}

.hero-slide__title {
    font-family: var(--header-font, inherit);
    font-size: clamp(2.2rem, 5vw, 3.6rem);
    line-height: 1.08;
    letter-spacing: -.02em;
}

.hero-slide__title .text-orange { color: var(--orange-teavalo, #FF6F16); }

/* Seguridad ante datos antiguos: nunca desbordar el bloque */
.hero-slide__title,
.hero-slide__subtitle {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}

.hero-slide__title { -webkit-line-clamp: 5; }

.hero-slide__subtitle {
    -webkit-line-clamp: 3;
    font-size: 1.05rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, .82);
}

.hero-slide__btn {
    background: var(--orange-teavalo, #FF6F16);
    border: 2px solid transparent;
    box-shadow: 0 10px 26px rgba(255, 111, 22, .35);
    transition: transform .2s, background .2s;
}

.hero-slide__btn:hover {
    color: #fff;
    background: #e85f0b;
    transform: translateY(-2px);
}

.calculate-button{
    background: var(--blue-teavalo);
    border: 2px solid rgba(255, 255, 255, .28);
}

.calculate-button:hover {
    border: 2px solid rgb(255, 255, 255);
}

/* Pestañas: la activa siempre completa en naranja */
.hero-slider__tab {
    position: relative;
    width: 32px;
    height: 14px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    transition: width .3s ease;
}

.hero-slider__tab.is-active { width: 48px; }

.hero-slider__tab span {
    position: absolute;
    inset: 5px 0;
    border-radius: 2px;
    background: rgba(255, 255, 255, .35);
}

.hero-slider__tab.is-active span { background: var(--orange-teavalo, #FF6F16); }

/* Móvil: foto arriba, texto abajo */
@media (max-width: 767px) {
    .hero-slider { min-height: 560px; }

    .hero-slide__media { width: 100%; height: 48% !important; }

    .hero-slide__image { object-position: center 25%; }

    /* En móvil la foto va arriba: degradado vertical hacia el fondo del texto */
    .hero-slide::after {
        inset: 0 0 auto 0;
        height: 48%;
        background: linear-gradient(180deg, rgba(5, 29, 107, 0) 40%, var(--blue-teavalo, #051D6B) 100%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-slide,
    .hero-slider__tab { transition: none; }
}