body{
    margin:0;
    font-family:system-ui;
}

.main-index {
    max-width: 100% !important;
}

.article-products-img {
    position: relative;
    min-height: 950px;

    background-image: url('/storage/static/index.webp');
    background-size: cover;        /* clave */
    background-position: center top;   /* centra la imagen */
    background-repeat: no-repeat;

    display: flex;
    align-items: center;
    justify-content: center;
}

.article-products{
    position:relative;
    min-height: 800px;
    display:flex;
    align-items:center;
    overflow:hidden;
}

.bg-video{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    object-fit:cover;
    z-index:1;
}

.background-for-video{
    position:absolute;
    inset:0;
    z-index:2;

    /* overlay negro difuminado */
    background:linear-gradient(
        to bottom,
        rgba(0,0,0,0.8) 0%,
        rgba(0,0,0,0.6) 40%,
        rgba(0,0,0,0.85) 100%
    );
}

.hero-content{
    position:relative;
    z-index:3;
    text-align:center;
    color:white;
    max-width:700px;
    padding:20px;
}

.hero-content p{
    font-size:1.2rem;
    opacity:0.85;
    margin-bottom:30px;
    text-align: left;
}

/* BOTON */

.content-btn-hero {
    text-align: left;
}

.btn-hero{
    position:relative;
    font-size:1.4rem;
    text-decoration:none;
    color:white;
    display: inline-block;
    align-items:center;
    gap:10px;
    padding-bottom:4px;
}

.btn-hero::after{
    content:"";
    position:absolute;
    left:0;
    bottom:0;
    width:0;
    height:1px;
    background:white;
    transition:width .3s ease;
}

.btn-hero:hover::after{
    width:100%;
}

.arrow{
    transition:transform .3s ease;
}

.btn-hero:hover .arrow{
    transform:translateX(6px);
}

.reveal-text {
    opacity: 0;
    transform: translateY(30px);
    filter: blur(6px);
    transition: 
        opacity 0.6s ease,
        transform 0.6s ease,
        filter 0.6s ease;
}

.reveal-text.show {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}

@media (max-width: 768px) {
    .hero-content {
        padding-left: 16px;
    }

    .bg-video {
        display: none;
    }

    .article-products {
        background-size: cover;
        background-position: center;
    }

    .article-products:nth-of-type(2) {
        background-image: url('/storage/static/shisha-mobile.webp');
    }

    .article-products:nth-of-type(3) {
        background-image: url('/storage/static/sabores-mobile.webp');
    }

    .article-products:nth-of-type(4) {
        background-image: url('/storage/static/carbones-mobile.webp');
    }
}