/* =========================================================
   INDUSTRIALES
   MISMO PATRÓN VISUAL QUE DOMÉSTICAS
========================================================= */

.industriales-page{
    margin:0;
    min-height:100vh;
    background:
        linear-gradient(
            rgba(235,238,240,.18),
            rgba(235,238,240,.18)
        ),
        url('../images/home.webp')
        center / cover
        fixed
        no-repeat;
}


/* =========================================================
   CONTENEDOR
========================================================= */

.industriales-main{
    min-height:100vh;
    padding-top:156px;
}


/* =========================================================
   HERO
========================================================= */

.industriales-hero{
    padding:56px 4% 40px;

    background:
        rgba(255,255,255,.06);

    backdrop-filter:
        blur(10px);

    -webkit-backdrop-filter:
        blur(10px);

    border-bottom:
        1px solid
        rgba(255,255,255,.18);
}


.industriales-hero-inner{
    width:min(1180px,92%);
    margin:auto;
    max-width:900px;
}


.industriales-kicker{
    display:block;
    margin-bottom:10px;

    color:#8b0f1c;

    font-size:12px;

    text-transform:uppercase;

    letter-spacing:.22em;
}


.industriales-hero h1{
    margin:0;

    color:#171a1f;

    font-size:
        clamp(
            44px,
            6vw,
            76px
        );

    line-height:1;

    font-weight:400;

    text-transform:uppercase;

    letter-spacing:.02em;
}


.industriales-hero p{
    max-width:760px;

    margin:18px 0 0;

    color:#343a40;

    font-size:16px;

    line-height:1.6;
}


/* =========================================================
   CATÁLOGO
========================================================= */

.industriales-catalogo{
    padding:42px 0 60px;

    background:
        rgba(255,255,255,.05);

    backdrop-filter:
        blur(8px);

    -webkit-backdrop-filter:
        blur(8px);
}


/* =========================================================
   GRID
========================================================= */

.industriales-grid{
    width:min(1050px,90%);

    margin:auto;

    display:grid;

    grid-template-columns:
        repeat(3,1fr);

    gap:18px;
}


/* =========================================================
   TARJETAS
========================================================= */

.industriales-card{
    position:relative;

    min-height:360px;

    overflow:hidden;

    text-decoration:none;

    border:
        1px solid
        rgba(255,255,255,.42);

    box-shadow:
        0
        16px
        34px
        rgba(20,24,28,.08);

    background:
        rgba(255,255,255,.10);

    transition:
        transform .32s ease,
        box-shadow .32s ease;
}


.industriales-card-media{
    position:absolute;

    inset:0;

    background-size:contain;

    background-position:
        center
        center;

    background-repeat:no-repeat;

    background-color:
        rgba(245,245,245,.76);

    filter:
        brightness(.90)
        contrast(.95)
        saturate(.92);

    transform:none;

    transition:
        transform .5s ease,
        filter .35s ease;
}


.industriales-card-overlay{
    position:absolute;

    inset:0;

    background:
        linear-gradient(
            180deg,
            rgba(245,245,245,.12) 0%,
            rgba(245,245,245,.08) 35%,
            rgba(25,25,25,.18) 62%,
            rgba(15,15,15,.62) 100%
        );

    backdrop-filter:
        blur(.35px);

    -webkit-backdrop-filter:
        blur(.35px);

    transition:.32s;
}


.industriales-card-content{
    position:absolute;

    left:0;
    right:0;
    bottom:0;

    z-index:2;

    padding:24px;

    color:#fff;
}


.industriales-card-content span{
    display:block;

    margin-bottom:8px;

    color:#d7a4aa;

    font-size:11px;

    font-weight:700;

    letter-spacing:.14em;
}


.industriales-card-content h2{
    margin:0 0 8px;

    font-size:24px;

    font-weight:500;

    line-height:1.08;

    text-transform:uppercase;
}


.industriales-card-content small{
    font-size:12px;

    letter-spacing:.06em;

    text-transform:uppercase;

    opacity:.88;
}


.industriales-card:hover{
    transform:
        translateY(-5px);

    box-shadow:
        0
        24px
        46px
        rgba(20,24,28,.14);
}


.industriales-card:hover
.industriales-card-media{
    transform:
        scale(1.01);

    filter:
        brightness(.95)
        contrast(.98)
        saturate(.96);
}


/* =========================================================
   CINTA DE MARCAS
========================================================= */

.industriales-marcas{
    position:relative;

    width:min(1050px,90%);

    margin:26px auto 0;

    overflow:hidden;

    border:
        1px solid
        rgba(255,255,255,.38);

    background:
        rgba(255,255,255,.15);

    box-shadow:
        0
        14px
        30px
        rgba(20,24,28,.06);

    backdrop-filter:
        blur(14px);

    -webkit-backdrop-filter:
        blur(14px);
}


.industriales-marcas::before,
.industriales-marcas::after{
    content:"";

    position:absolute;

    top:0;
    bottom:0;

    z-index:3;

    width:56px;

    pointer-events:none;
}


.industriales-marcas::before{
    left:0;

    background:
        linear-gradient(
            90deg,
            rgba(235,238,240,.68),
            transparent
        );
}


.industriales-marcas::after{
    right:0;

    background:
        linear-gradient(
            270deg,
            rgba(235,238,240,.68),
            transparent
        );
}


.industriales-marcas-track{
    width:max-content;

    display:flex;

    align-items:center;

    animation:
        industrialesMarcasScroll
        26s
        linear
        infinite;
}


.industriales-marcas:hover
.industriales-marcas-track{
    animation-play-state:paused;
}


.industriales-marca{
    width:210px;

    min-height:84px;

    padding:
        16px
        26px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-right:
        1px solid
        rgba(255,255,255,.30);
}


.industriales-marca img{
    display:block;

    max-width:140px;

    max-height:50px;

    width:auto;

    height:auto;

    object-fit:contain;

    opacity:.88;

    transition:
        opacity .25s ease,
        transform .25s ease;
}


.industriales-marca:hover img{
    opacity:1;

    transform:
        scale(1.04);
}


@keyframes industrialesMarcasScroll{

    from{
        transform:
            translateX(0);
    }

    to{
        transform:
            translateX(-50%);
    }

}


/* =========================================================
   CTA
========================================================= */

.industriales-cta{
    width:min(1050px,90%);

    margin:34px auto 0;

    padding:
        20px
        24px;

    display:flex;

    align-items:center;

    justify-content:
        space-between;

    gap:24px;

    border:
        1px solid
        rgba(255,255,255,.38);

    background:
        rgba(255,255,255,.16);

    backdrop-filter:
        blur(14px);

    -webkit-backdrop-filter:
        blur(14px);
}


.industriales-cta > div:first-child{
    display:flex;

    flex-direction:column;

    gap:6px;
}


.industriales-cta strong{
    color:#8b0f1c;

    font-size:20px;
}


.industriales-cta span{
    color:#4e555d;

    font-size:14px;

    line-height:1.5;
}


.industriales-cta-actions{
    display:flex;

    gap:12px;

    flex-shrink:0;
}


.industriales-btn{
    min-width:140px;

    padding:
        12px
        20px;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    border:
        1px solid
        #8b0f1c;

    text-decoration:none;

    text-transform:uppercase;

    letter-spacing:.06em;

    font-size:12px;
}


.industriales-btn-primary{
    background:#8b0f1c;
    color:#fff;
}


.industriales-btn-primary:hover{
    background:#6f0b16;
    border-color:#6f0b16;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:900px){

    .industriales-main{
        padding-top:124px;
    }


    .industriales-grid{
        grid-template-columns:
            repeat(2,1fr);
    }

}


@media(max-width:620px){

    .industriales-main{
        padding-top:100px;
    }


    .industriales-hero{
        padding:
            42px
            4%
            32px;
    }


    .industriales-hero h1{
        font-size:42px;
    }


    .industriales-hero p{
        font-size:14px;
    }


    .industriales-grid{
        grid-template-columns:
            1fr;
    }


    .industriales-card{
        min-height:320px;
    }


    .industriales-marca{
        width:165px;

        min-height:72px;

        padding:
            14px
            18px;
    }


    .industriales-marca img{
        max-width:115px;

        max-height:42px;
    }


    .industriales-cta{
        flex-direction:column;

        text-align:center;
    }


    .industriales-cta-actions{
        width:100%;

        flex-direction:column;
    }


    .industriales-btn{
        width:100%;
    }

}


@media(
    prefers-reduced-motion:reduce
){

    .industriales-marcas-track{
        animation:none;
    }

}