/*==================================================
        COMERCIO - HERO
==================================================*/

.comercio-hero{

    position:relative;

    overflow:hidden;

    border-radius:18px;

    min-height:520px;

    box-shadow:var(--sombra);

    background:#000;

}

.comercio-hero .hero-img{

    width:100%;

    height:520px;

    object-fit:cover;

}

.comercio-hero .hero-overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(
        to top,
        rgba(0,0,0,.82),
        rgba(0,0,0,.35),
        transparent
    );

}

.hero-info{

    position:absolute;

    left:50px;

    bottom:45px;

    color:#fff;

    max-width:650px;

}

.logo-comercio{

    width:130px;

    height:130px;

    border-radius:50%;

    background:#fff;

    padding:12px;

    object-fit:contain;

    box-shadow:0 10px 30px rgba(0,0,0,.35);

    margin-bottom:22px;

}

.hero-info .categoria{

    display:inline-block;

    background:#b6252d;

    color:#fff;

    padding:8px 18px;

    border-radius:40px;

    min-height:auto;

    box-shadow:none;

    margin-bottom:20px;

    font-size:14px;

    font-weight:600;

}

.hero-info h1{

    font-size:52px;

    color:#fff;

    margin-bottom:18px;

    line-height:1.1;

}

.hero-info p{

    font-size:19px;

    line-height:1.7;

    margin-bottom:22px;

    color:#f3f3f3;

}

/*==================================================
        CALIFICACION
==================================================*/

.rating{

    display:flex;

    align-items:center;

    gap:8px;

    color:#FFD43B;

    font-size:20px;

    margin-bottom:28px;

}

.rating span{

    color:#fff;

    font-size:18px;

    font-weight:700;

    margin-left:12px;

}

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

.hero-buttons{

    display:flex;

    gap:18px;

    flex-wrap:wrap;

}

.hero-buttons .btn{

    background:#b6252d;

    padding:14px 28px;

    border-radius:10px;

    font-weight:600;

}

.hero-buttons .btn:hover{

    background:#931b22;

}

.btn-outline{

    display:inline-flex;

    align-items:center;

    gap:10px;

    border:2px solid #fff;

    color:#fff;

    padding:12px 26px;

    border-radius:10px;

    transition:.30s;

}

.btn-outline:hover{

    background:#fff;

    color:#333;

}

/*==================================================
        DESCRIPCION
==================================================*/

.descripcion-comercio{

    display:grid;

    grid-template-columns:2fr 1fr;

    gap:25px;

}

.descripcion{

    background:#fff;

    border-radius:18px;

    padding:35px;

    box-shadow:var(--sombra);

}

.descripcion h2{

    color:var(--marron);

    margin-bottom:20px;

}

.descripcion p{

    line-height:1.9;

    color:#555;

}

.datos-comercio{

    background:#fff;

    border-radius:18px;

    padding:35px;

    box-shadow:var(--sombra);

}

.datos-comercio div{

    display:flex;

    align-items:center;

    gap:14px;

    padding:15px 0;

    border-bottom:1px solid #ececec;

}

.datos-comercio div:last-child{

    border:none;

}

.datos-comercio i{

    color:#b6252d;

    width:24px;

    text-align:center;

}

/*==================================================
        PRODUCTOS
==================================================*/

.productos-comercio{

    margin-top:10px;

}

.productos-comercio h2{

    color:var(--marron);

    font-size:32px;

    margin-bottom:25px;

}

.productos-grid{

    display:grid;

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

    gap:20px;

}

.producto-card{

    background:#fff;

    border-radius:18px;

    padding:30px 22px;

    text-align:center;

    box-shadow:var(--sombra);

    transition:.3s;

}

.producto-card:hover{

    transform:translateY(-6px);

}

.producto-card i{

    font-size:42px;

    color:#b6252d;

    margin-bottom:18px;

}

.producto-card h3{

    color:var(--marron);

    font-size:19px;

    margin-bottom:12px;

}

.producto-card p{

    color:#666;

    line-height:1.6;

    font-size:14px;

}


/*==================================================
        GALERÍA
==================================================*/

.galeria-comercio{

    margin-top:10px;

}

.galeria-comercio h2{

    color:var(--marron);

    font-size:32px;

    margin-bottom:25px;

}

.galeria-grid{

    display:grid;

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

    gap:16px;

}

.galeria-grid img{

    width:100%;

    height:250px;

    object-fit:cover;

    border-radius:16px;

    box-shadow:var(--sombra);

    transition:.3s;

    cursor:pointer;

}

.galeria-grid img:hover{

    transform:scale(1.025);

}


/*==================================================
        PROMOCIÓN
==================================================*/

.promo-comercio{

    margin-top:10px;

}

.promo-box{

    background:linear-gradient(
        135deg,
        #b6252d,
        #87191f
    );

    color:#fff;

    border-radius:20px;

    padding:55px 35px;

    text-align:center;

    box-shadow:0 15px 35px rgba(182,37,45,.25);

}

.promo-box > span{

    display:inline-block;

    font-size:13px;

    font-weight:700;

    letter-spacing:2px;

    margin-bottom:12px;

}

.promo-box h2{

    color:#fff;

    font-size:58px;

    margin-bottom:12px;

}

.promo-box p{

    font-size:18px;

    margin-bottom:28px;

}

.promo-box .btn{

    background:#fff;

    color:#b6252d;

    padding:14px 26px;

    border-radius:10px;

}

.promo-box .btn:hover{

    background:#f3f3f3;

}

/*==================================================
        INFORMACIÓN
==================================================*/

.servicios-comercio{

    margin-top:10px;

}

.servicios-comercio h2{

    color:var(--marron);

    font-size:32px;

    margin-bottom:25px;

}

.info-grid{

    display:grid;

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

    gap:20px;

}

.info-grid>div{

    background:#fff;

    border-radius:18px;

    padding:28px 22px;

    text-align:center;

    box-shadow:var(--sombra);

    transition:.30s;

}

.info-grid>div:hover{

    transform:translateY(-5px);

}

.info-grid i{

    font-size:36px;

    color:#b6252d;

    margin-bottom:18px;

}

.info-grid h3{

    color:var(--marron);

    margin-bottom:12px;

    font-size:20px;

}

.info-grid p{

    color:#666;

    line-height:1.7;

    white-space:pre-line;

}


/*==================================================
        REDES
==================================================*/

.redes-comercio{

    margin-top:10px;

    margin-bottom:40px;

}

.redes-comercio h2{

    color:var(--marron);

    font-size:32px;

    margin-bottom:25px;

}

.redes-grid{

    display:grid;

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

    gap:20px;

}

.redes-grid a{

    background:#fff;

    border-radius:18px;

    padding:28px;

    text-align:center;

    text-decoration:none;

    color:#444;

    font-size:18px;

    font-weight:600;

    box-shadow:var(--sombra);

    transition:.30s;

}

.redes-grid a:hover{

    transform:translateY(-5px);

    color:#b6252d;

}

.redes-grid i{

    display:block;

    font-size:42px;

    margin-bottom:15px;

    color:#b6252d;

}


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

@media(max-width:1100px){

    .productos-grid{

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

    }

    .info-grid{

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

    }

}

@media(max-width:900px){

    .descripcion-comercio{

        grid-template-columns:1fr;

    }

    .hero-info{

        left:25px;

        right:25px;

        bottom:25px;

    }

    .hero-info h1{

        font-size:38px;

    }

    .logo-comercio{

        width:100px;

        height:100px;

    }

    .galeria-grid{

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

    }

}

@media(max-width:700px){

    .productos-grid{

        grid-template-columns:1fr;

    }

    .info-grid{

        grid-template-columns:1fr;

    }

    .redes-grid{

        grid-template-columns:1fr;

    }

    .galeria-grid{

        grid-template-columns:1fr;

    }

    .hero-buttons{

        flex-direction:column;

        align-items:flex-start;

    }

    .hero-buttons .btn,

    .btn-outline{

        width:100%;

        justify-content:center;

    }

    .comercio-hero{

        min-height:600px;

    }

    .comercio-hero .hero-img{

        height:600px;

    }

    .promo-box h2{

        font-size:42px;

    }

}