/* ====================================================
   HERO BANNER - DESKTOP, TABLET Y MÓVIL
   ==================================================== */

/* 1. ESCRITORIO / PANTALLAS GRANDES (> 1024px) */
.hero-banner-full {
    width: 100%;
    aspect-ratio: 1920 / 850;
    min-height: 480px;
    max-height: 680px;
    background-image: url('../img/banner-hero.png');
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    position: relative;
}

/* Área transparente de clic para versión Desktop */
.hero-clickable-area {
    position: absolute;
    bottom: 18%;
    left: 4.5%;
    width: 18%;
    height: 8%;
    z-index: 10;
    cursor: pointer;
}


/* 2. TABLETS (768px a 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
    .hero-banner-full {
        width: 100%;
        height: auto;
        /* Proporción híbrida para pantallas medianas */
        aspect-ratio: 16 / 10;
        min-height: 450px;
        max-height: 600px;
        background-image: url('../img/banner-hero.png'); /* Usa la versión horizontal ajustada */
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
    }

    .hero-clickable-area {
        bottom: 15%;
        left: 4.5%;
        width: 22%;
        height: 9%;
    }
}


/* 3. MÓVILES (< 768px) */
@media (max-width: 768px) {
    .hero-banner-full {
        width: 100%;
        height: auto;
        /* Cambiamos a 3 / 4.5 para darle ese extra de alto y mostrar el final de la madera */
        aspect-ratio: 3 / 4.5;
        min-height: auto;
        max-height: none;
        background-image: url('../img/banner-hero-mobile.png');
        background-size: cover;
        background-position: center top;
        background-repeat: no-repeat;
    }

    .hero-clickable-area {
        display: none;
    }
}