/**
 * Home: overlays de mantenciones y neumáticos (mismo layout que landings).
 * Escritorio (≥769px): altura fija 538px (hero-badges-sitio.css, igual que mantenciones/neumáticos).
 */

/* Imagen siempre contenida en el slide (evita que el carrusel crezca y desplace las flechas) */
.home-hero-banners .carousel-item picture {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

.home-hero-banners .carousel-item img {
    object-fit: cover;
    object-position: center center;
}

/* Flechas en .home-hero-banners (no dentro del .carousel) → mismo alto que el hero visible */
.home-hero-banners > .carousel-control-prev,
.home-hero-banners > .carousel-control-next {
    position: absolute;
    top: 50%;
    right: auto;
    bottom: auto !important;
    left: auto;
    width: 50px;
    height: 50px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-50%);
    backdrop-filter: blur(10px);
    transition: opacity 0.3s ease, background 0.3s ease;
    opacity: 0.8;
    z-index: 25;
    pointer-events: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.home-hero-banners > .carousel-control-prev {
    left: 1.5rem;
}

.home-hero-banners > .carousel-control-next {
    right: 1.5rem;
}

.home-hero-banners > .carousel-control-prev:hover,
.home-hero-banners > .carousel-control-next:hover {
    background: rgba(255, 255, 255, 0.3);
    opacity: 1;
}

.home-hero-banners > .carousel-control-prev-icon,
.home-hero-banners > .carousel-control-next-icon {
    width: 20px;
    height: 20px;
}

/*
 * Hero alto (móvil / tablet): el texto va arriba; 50% del slide deja las flechas bajo el bloque.
 * Desktop estrecho (769–1199px, 538px): se mantiene el centro vertical del hero.
 */
@media (max-width: 768px) {
    .home-hero-banners > .carousel-control-prev,
    .home-hero-banners > .carousel-control-next {
        top: clamp(6.25rem, 24vw, 10.5rem);
        width: 40px;
        height: 40px;
        transform: translateY(-50%);
    }

    .home-hero-banners > .carousel-control-prev {
        left: 0.75rem;
    }

    .home-hero-banners > .carousel-control-next {
        right: 0.75rem;
    }
}

@media (min-width: 769px) and (max-width: 1199px) {
    /* Banners con texto arriba: flechas alineadas al bloque de copy, no al centro del slide */
    .home-hero-banners:not(.home-hero-banners--mantenciones-search):not(.home-hero-banners--neumaticos-search) > .carousel-control-prev,
    .home-hero-banners:not(.home-hero-banners--mantenciones-search):not(.home-hero-banners--neumaticos-search) > .carousel-control-next {
        top: clamp(9.5rem, 40%, 15.5rem);
        transform: translateY(-50%);
    }

    .home-hero-banners.home-hero-banners--mantenciones-search > .carousel-control-prev,
    .home-hero-banners.home-hero-banners--mantenciones-search > .carousel-control-next,
    .home-hero-banners.home-hero-banners--neumaticos-search > .carousel-control-prev,
    .home-hero-banners.home-hero-banners--neumaticos-search > .carousel-control-next {
        top: 50%;
        transform: translateY(-50%);
    }
}

.home-hero-banners .hero-mantenciones-search-wrap__inner.hero-content--mantenciones-search,
.home-hero-banners .hero-neumaticos-search-wrap__inner.hero-content--neumaticos-hero {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    max-width: 1400px;
    min-height: 0;
    width: 100%;
    box-sizing: border-box;
    position: relative;
    z-index: 2;
    padding: clamp(1rem, 2.5vw, 1.75rem) clamp(1.25rem, 3vw, 2.5rem);
}

.home-hero-banners .hero-mantenciones-search-wrap__inner {
    align-items: flex-start;
}


.home-hero-banners .hero-hero-badge__text[hidden],
.home-hero-banners .hero-mantenciones-panel__description[hidden],
.home-hero-banners .hero-neumaticos-panel__description[hidden] {
    display: none !important;
}

@media (min-width: 769px) {
    .home-hero-banners .hero-mantenciones-search-wrap__inner.hero-content--mantenciones-search,
    .home-hero-banners .hero-neumaticos-search-wrap__inner.hero-content--neumaticos-hero {
        justify-content: center;
    }
}

@media (max-width: 768px) {
    .home-hero-banners .hero-mantenciones-search-wrap__inner.hero-content--mantenciones-search,
    .home-hero-banners .hero-neumaticos-search-wrap__inner.hero-content--neumaticos-hero {
        padding: var(--hero-content-mobile-inset-top, 0.65rem) 0.7rem 1rem;
        align-items: flex-start;
    }
}

@media (max-width: 480px) {
    .home-hero-banners .hero-mantenciones-search-wrap__inner.hero-content--mantenciones-search,
    .home-hero-banners .hero-neumaticos-search-wrap__inner.hero-content--neumaticos-hero {
        padding: 0.55rem 0.525rem 0.85rem;
    }
}

/*
 * CTAs del carrusel (home): Safari/macOS no pinta bien fondos en <a>/<button>
 * si solo vienen de CSS diferido o sin -webkit-appearance.
 */
.home-hero-banners .banner-button {
    -webkit-appearance: none;
    appearance: none;
    display: inline-block;
    background-color: #cc0000;
    background-image: none;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff;
    text-decoration: none;
    opacity: 1;
    visibility: visible;
    position: relative;
    z-index: 2;
    color-scheme: light;
}

.home-hero-banners .banner-button:hover {
    background-color: #b30000;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff;
}

.home-hero-banners .hero-mantenciones-panel__submit,
.home-hero-banners .hero-neumaticos-panel__submit,
.home-hero-banners .hero-neumaticos-panel .form-search-button.hero-neumaticos-panel__submit {
    -webkit-appearance: none;
    appearance: none;
    color-scheme: light;
    background-color: #2f6fed !important;
    background-image: none !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff;
    opacity: 1;
    visibility: visible;
    position: relative;
    z-index: 2;
    box-shadow: 0 4px 14px rgba(17, 56, 133, 0.35);
}

.home-hero-banners .hero-mantenciones-panel__submit:hover:not(:disabled),
.home-hero-banners .hero-neumaticos-panel__submit:hover:not(:disabled),
.home-hero-banners .hero-neumaticos-panel .form-search-button.hero-neumaticos-panel__submit:hover:not(:disabled) {
    background-color: #3d7ef5 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff;
}