/*==================================================
CATALOGO
==================================================*/

.catalog-hero{

    background:#000;

    padding:70px 0 35px;

}

/*==================================================
TITULO
==================================================*/

.catalog-heading{

    text-align:center;

    width:100%;

    max-width:1400px;

    margin:0 auto;

    padding:0 40px;

}

.catalog-mini-title{

    display:inline-block;

    color:#E30613;

    font-size:13px;

    font-weight:700;

    letter-spacing:4px;

    text-transform:uppercase;

    margin-bottom:14px;

}

.catalog-heading h1{

    color:#ffffff;

    font-size:60px;

    font-weight:900;

    line-height:1.08;

    margin-bottom:20px;

    text-transform:uppercase;

    max-width:1400px;

    margin-left:auto;

    margin-right:auto;

}

.catalog-heading p{

    max-width:780px;

    margin:0 auto;

    color:#BDBDBD;

    font-size:18px;

    line-height:1.7;

}

/*==================================================
BUSCADOR
==================================================*/

.catalog-search-box{

    margin:40px auto 0;

    max-width:900px;

    display:flex;

    align-items:center;

    gap:14px;

}

.catalog-search{

    flex:1;

    height:58px;

    display:flex;

    align-items:center;

    background:#111;

    border:1px solid rgba(227,6,19,.25);

    border-radius:999px;

    overflow:hidden;

    transition:.30s;

}

.catalog-search:hover{

    border-color:#E30613;

}

.catalog-search:focus-within{

    border-color:#E30613;

    box-shadow:0 0 0 3px rgba(227,6,19,.12);

}

.catalog-search i{

    width:60px;

    text-align:center;

    color:#E30613;

    font-size:18px;

}

.catalog-search input{

    flex:1;

    height:100%;

    background:none;

    border:none;

    color:#ffffff;

    font-size:16px;

    padding-right:25px;

}

.catalog-search input:focus{

    outline:none;

}

.catalog-search input::placeholder{

    color:#777;

}

/*==================================================
BOTON MARCAS
==================================================*/

.catalog-filter{

    height:58px;

    padding:0 28px;

    border-radius:999px;

    border:1px solid rgba(227,6,19,.35);

    background:#161616;

    color:#ffffff;

    font-size:14px;

    font-weight:700;

    letter-spacing:1px;

    cursor:pointer;

    transition:.30s;

}

.catalog-filter:hover{

    background:#E30613;

    border-color:#E30613;

}

.catalog-filter i{

    margin-right:8px;

}

/*==================================================
SECCION MARCAS
==================================================*/

.catalog-brands{

    background:#000;

    padding:10px 0 80px;

}

/*==================================================
TITULO
==================================================*/

.brands-title{

    display:flex;

    align-items:center;

    gap:10px;

    margin-bottom:28px;

    color:#ffffff;

    font-size:15px;

    font-weight:800;

    letter-spacing:1px;

    text-transform:uppercase;

}

.brands-title span{

    width:10px;

    height:10px;

    border-radius:50%;

    background:#E30613;

}

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

.brands-grid{

    display:grid;

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

    gap:18px;

}

/*==================================================
TARJETA DEMO
==================================================*/

.brand-card{

    height:82px;

    border-radius:18px;

    background:#111;

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

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:0 24px;

    transition:.30s;

    cursor:pointer;

}

.brand-card:hover{

    border-color:#E30613;

    transform:translateY(-3px);

}

.brand-left{

    display:flex;

    align-items:center;

    gap:14px;

}

.brand-logo{

    width:42px;

    height:42px;

    border-radius:50%;

    background:#1a1a1a;

    display:flex;

    justify-content:center;

    align-items:center;

    color:#ffffff;

    font-size:14px;

    font-weight:800;

}

.brand-name{

    color:#ffffff;

    font-size:16px;

    font-weight:700;

}

.brand-count{

    min-width:34px;

    height:34px;

    border-radius:999px;

    background:#E30613;

    display:flex;

    justify-content:center;

    align-items:center;

    color:#fff;

    font-size:13px;

    font-weight:700;

}