/**
 * Badges de título y subtítulo en .hero-section y en el carrusel de banners del home.
 *
 * Carga: @import en /assets/css/style.css, o enlace en mantenciones.
 *
 * Ajustes globales: variables :root y, si aplica, tamaño base del título (incluye −2pt).
 */

:root {
    --hero-desktop-height: 538px;
    --hero-badge-accent: #cc0000;
    --hero-badge-text: var(--text-light, rgba(255, 255, 255, 0.9));
    --hero-badge-gradient-a: rgba(17, 56, 133, 0.38);
    --hero-badge-gradient-b: rgba(30, 82, 153, 0.32);
    --hero-badge-gradient-c: rgba(12, 32, 71, 0.4);
    --hero-badge-title-max-width: 100%;
    --hero-left-stack-gap: 0.65rem;
    --hero-left-stack-gap-mobile: 0.55rem;
    --hero-left-stack-gap-xs: 0.45rem;
    /* Margen superior del bloque de texto/buscador dentro del hero (móvil) */
    --hero-content-mobile-inset-top: 0.65rem;
    /* Título: −2pt respecto a la escala anterior */
    --hero-badge-title-size: clamp(calc(1.4rem - 2pt), calc(3.5vw - 2pt), calc(2.45rem - 2pt));
}

/*
 * Escritorio (≥769px): altura fija 538px — .hero-section, home y landings.
 * Por debajo de 769px: proporción 100:28 (tablet) o 25:42 (móvil).
 * page-hero-banner-desk usa hero-banner-escritorio.css.
 */
.home-hero-banners,
body:not(.page-hero-banner-desk) .hero-section {
    margin-top: 0 !important;
}

body:not(.page-hero-banner-desk) .hero-section {
    box-sizing: border-box;
    width: 100%;
    aspect-ratio: 100 / 28;
    height: auto;
    max-height: none;
}

.home-hero-banners .home-hero-banners__carousel {
    aspect-ratio: 100 / 28;
}

@media (min-width: 769px) {
    body:not(.page-hero-banner-desk) .hero-section,
    body.page-mantenciones-index .hero-section,
    body.page-mantenciones-marca .hero-section,
    body.page-neumaticos .hero-section,
    .home-hero-banners,
    .home-hero-banners .home-hero-banners__carousel {
        aspect-ratio: unset;
        height: var(--hero-desktop-height);
        min-height: var(--hero-desktop-height);
        max-height: var(--hero-desktop-height);
    }

    body.page-sucursales .detail-hero {
        aspect-ratio: unset;
        height: var(--hero-desktop-height);
        min-height: var(--hero-desktop-height);
        max-height: var(--hero-desktop-height);
        margin-top: 0;
        padding-top: 0;
    }
}

.hero-section .hero-left,
.home-hero-banners .banner-text {
    gap: var(--hero-left-stack-gap);
}

.home-hero-banners .banner-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.hero-section .hero-title,
.home-hero-banners .banner-title {
    font-size: var(--hero-badge-title-size);
    font-weight: 800;
    color: var(--hero-badge-text);
    line-height: 1.25;
    margin: 0;
    text-align: left;
    display: block;
    width: fit-content;
    max-width: min(100%, var(--hero-badge-title-max-width));
    padding: clamp(0.55rem, 1.8vw, 0.95rem) clamp(0.8rem, 2.8vw, 1.25rem);
    background: linear-gradient(
        135deg,
        var(--hero-badge-gradient-a) 0%,
        var(--hero-badge-gradient-b) 50%,
        var(--hero-badge-gradient-c) 100%
    );
    -webkit-backdrop-filter: blur(14px) saturate(1.15);
    backdrop-filter: blur(14px) saturate(1.15);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-left: 4px solid var(--hero-badge-accent);
    box-shadow:
        0 8px 28px rgba(0, 0, 0, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.14);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55), 0 0 18px rgba(0, 0, 0, 0.2);
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    font-family: var(--font-sans) !important;
}

.hero-section .hero-description,
.home-hero-banners .banner-subtitle {
    font-size: clamp(0.84rem, 1.68vw, 1.008rem);
    color: var(--hero-badge-text);
    line-height: 1.6;
    margin: 0;
    text-align: left;
    display: block;
    width: fit-content;
    max-width: 100%;
    padding: clamp(0.45rem, 1.5vw, 0.78rem) clamp(0.7rem, 2.5vw, 1.1rem);
    background: linear-gradient(
        135deg,
        var(--hero-badge-gradient-a) 0%,
        var(--hero-badge-gradient-b) 50%,
        var(--hero-badge-gradient-c) 100%
    );
    -webkit-backdrop-filter: blur(14px) saturate(1.15);
    backdrop-filter: blur(14px) saturate(1.15);
    border-radius: 12px;
    border: none;
    box-shadow:
        0 8px 28px rgba(0, 0, 0, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.14);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55), 0 0 18px rgba(0, 0, 0, 0.2);
    font-family: var(--font-sans) !important;
}

.hero-section .hero-title .hero-year-subtle {
    color: rgba(255, 255, 255, 0.85);
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}

.hero-section .hero-description .hero-year-subtle {
    font-size: 0.9em;
    opacity: 0.75;
    color: rgba(255, 255, 255, 0.82);
}

@media (max-width: 768px) {
    body:not(.page-hero-banner-desk) .hero-section {
        aspect-ratio: 25 / 42;
    }

    .home-hero-banners .home-hero-banners__carousel {
        aspect-ratio: 25 / 42;
    }

    .hero-section .hero-left,
    .home-hero-banners .banner-text {
        gap: var(--hero-left-stack-gap-mobile);
    }

    .hero-section .hero-title,
    .home-hero-banners .banner-title {
        text-align: center;
        padding: clamp(0.5rem, 2.5vw, 0.85rem) clamp(0.7rem, 3vw, 1.05rem);
    }

    .hero-section .hero-description,
    .home-hero-banners .banner-subtitle {
        text-align: center;
        padding: clamp(0.42rem, 2.2vw, 0.72rem) clamp(0.6rem, 2.8vw, 0.95rem);
    }

    body .hero-section .hero-content,
    body.page-hero-banner-desk .hero-section > .hero-content,
    body.page-mantenciones-index .hero-section--mantenciones-search .hero-content--mantenciones-search,
    body.page-mantenciones-marca .hero-section--mantenciones-search .hero-content--mantenciones-search,
    body.page-neumaticos .hero-section--neumaticos-search .hero-content--neumaticos-hero,
    .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: flex-start !important;
        align-items: flex-start;
        align-self: stretch;
        padding-top: var(--hero-content-mobile-inset-top);
        box-sizing: border-box;
    }

    body .hero-section .hero-left {
        align-items: center;
        text-align: center;
    }

    body .hero-section .hero-buttons {
        justify-content: center;
    }

    body .home-hero-banners .banner-content {
        align-items: flex-start !important;
        justify-content: flex-start !important;
    }

    body .home-hero-banners .hero-mantenciones-search-wrap,
    body .home-hero-banners .hero-neumaticos-search-wrap {
        align-items: flex-start !important;
        justify-content: flex-start !important;
    }

    body .home-hero-banners .hero-mantenciones-search-wrap__inner,
    body .home-hero-banners .hero-neumaticos-search-wrap__inner {
        align-items: flex-start !important;
        justify-content: flex-start !important;
    }

    body .home-hero-banners .banner-text {
        align-items: center;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
        max-width: min(600px, 100%);
    }
}

@media (max-width: 480px) {
    .hero-section .hero-left,
    .home-hero-banners .banner-text {
        gap: var(--hero-left-stack-gap-xs);
    }

    .hero-section .hero-title,
    .home-hero-banners .banner-title {
        font-size: calc(1.4rem - 2pt);
        line-height: 1.3;
        text-align: center;
        word-wrap: break-word;
        overflow-wrap: break-word;
        padding: 0.5rem 0.75rem;
    }

    .hero-section .hero-description,
    .home-hero-banners .banner-subtitle {
        font-size: 0.9rem;
        line-height: 1.5;
        text-align: center;
        word-wrap: break-word;
        overflow-wrap: break-word;
        padding: 0.45rem 0.65rem;
    }

    .hero-section .hero-title .hero-year-subtle {
        font-size: 0.7em;
        display: inline-block;
    }

    .hero-section .hero-description .hero-year-subtle {
        font-size: 0.85em;
    }
}