/* =========================
   RESET
========================= */

body{
    margin:0;
    padding:0;
    font-family:Arial, Helvetica, sans-serif;
    background:#f5f6fa;
    color:#111;
}

/* =========================
   TOPBAR
========================= */

.topbar{
    background:#000;
    color:#fff;
    padding:12px 40px;
    font-size:14px;
}

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

.hero{

    position:relative;

    height:100vh;

    background-image:url('https://images.unsplash.com/photo-1503376780353-7e6692767b70?q=80&w=1800');

    background-size:cover;

    background-position:center center;

    background-repeat:no-repeat;

    display:flex;

    flex-direction:column;

    justify-content:flex-start;

    color:#fff;

    overflow:hidden;
}

.overlay{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.55);
}

.hero-content{
    position:relative;
    z-index:2;
    text-align:center;
    margin-top:180px;
}

.hero h1{
    font-size:72px;
    font-weight:700;
    letter-spacing:1px;
}

.hero p{
    font-size:24px;
    margin-top:20px;
    opacity:.9;
}

/* =========================
   SEARCH
========================= */

.search-box{
    position:relative;
    z-index:2;
    margin-top:40px;
    background:#fff;
    padding:25px;
    border-radius:20px;
    display:flex;
    gap:15px;
    width:70%;
    margin-left:auto;
    margin-right:auto;
    box-shadow:0 20px 40px rgba(0,0,0,.2);
}

/* =========================
   NAVBAR
========================= */

.custom-navbar{
    position:relative;
    z-index:10;
    padding-top:25px;
}

.navbar-brand{
    letter-spacing:1px;
}

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

.catalogo-hero{

    position:relative;

    min-height:300px;

    background-image:url('../img/hero-car.jpg');

    background-size:cover;

    background-position:center center;

    background-repeat:no-repeat;

    display:flex;

    align-items:center;

    overflow:hidden;
}

.catalogo-overlay{

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:100%;

    background:rgba(0,0,0,.55);

    z-index:1;
}

.catalogo-hero .container{

    position:relative;

    z-index:5;
}

.catalogo-title{

    color:#fff;

    font-size:56px;

    font-weight:700;

    margin-bottom:20px;

    text-shadow:0 10px 25px rgba(0,0,0,.45);
}

.catalogo-subtitle{

    color:#fff;

    font-size:20px;

    margin-bottom:35px;

    max-width:600px;

    line-height:1.6;
}

.catalogo-features{

    display:flex;

    gap:15px;

    flex-wrap:wrap;
}

.feature-item{

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

    color:#fff;

    padding:12px 18px;

    border-radius:12px;

    backdrop-filter:blur(6px);

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

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

.catalogo-wrapper{

    margin-top:-50px;

    position:relative;

    z-index:10;
}

.filtros-card{

    border-radius:24px;

    overflow:hidden;
}

.resultados-badge{

    border-radius:20px;

    font-size:15px;

    padding:12px 20px;
}

/* =========================
   BUTTONS
========================= */

.btn{
    border-radius:12px;
    padding:12px 24px;
    font-weight:600;
    transition:.3s;
}

.btn:hover{
    transform:translateY(-2px);
}

.btn-outline-light{
    border-width:2px;
}

/* =========================
   CARDS AUTOS
========================= */

.card-auto{

    position:relative;

    transition:.4s;

    border-radius:24px;

    overflow:hidden;

    background:#fff;

    border:none;
}

.card-auto:hover{

    transform:translateY(-12px);

    box-shadow:0 30px 60px rgba(0,0,0,.18)!important;
}

.card-auto img{

    transition:.6s;

    width:100%;
}

.card-auto:hover img{

    transform:scale(1.08);
}

.card-auto .card-body{

    padding:24px;
}

.card-auto h4{

    font-size:24px;

    font-weight:700;

    margin-bottom:10px;
}

.card-auto .btn{

    border-radius:14px;

    padding:14px;

    font-weight:700;
}

.card{
    border-radius:20px;
}

/* =========================
   BADGES
========================= */

.badge{
    border-radius:10px;
    padding:8px 12px;
    font-size:12px;
}

/* =========================
   DASHBOARD
========================= */

.dashboard-wrapper{
    display:flex;
    min-height:100vh;
}

.sidebar{
    width:260px;
    background:#111827;
    color:#fff;
    padding:30px 20px;
}

.sidebar-logo{
    margin-bottom:40px;
}

.sidebar-menu{
    list-style:none;
    padding:0;
}

.sidebar-menu li{
    margin-bottom:15px;
}

.sidebar-menu a{
    display:block;
    padding:12px 16px;
    border-radius:12px;
    transition:.3s;
    color:#fff;
    text-decoration:none;
}

.sidebar-menu a:hover{
    background:#1f2937;
}

.dashboard-content{
    flex:1;
    background:#f5f6fa;
    padding:40px;
}

.dashboard-card{
    padding:30px;
    border-radius:20px;
    box-shadow:0 10px 25px rgba(0,0,0,.08);
    transition:.3s;
    background:#fff;
}

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

.dashboard-card h1{
    font-size:48px;
    margin-top:15px;
    font-weight:700;
}

/* =========================
   TABLES
========================= */

.table td{
    vertical-align:middle;
}

.table img{
    border-radius:12px;
}

/* =========================
   FORMS
========================= */

.form-control,
.form-select{
    border-radius:12px;
    padding:12px;
    border:1px solid #ddd;
}

.form-control:focus,
.form-select:focus{
    box-shadow:none;
    border-color:#000;
}

/* =========================
   LOGIN
========================= */

.login-page{

    position:relative;

    min-height:100vh;

    background-image:url('https://images.unsplash.com/photo-1492144534655-ae79c964c9d7?q=80&w=1800');

    background-size:cover;

    background-position:center center;

    background-repeat:no-repeat;

    overflow:hidden;
}

.login-overlay{

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:100%;

    background:rgba(0,0,0,.60);

    z-index:1;
}

.login-page .container{

    position:relative;

    z-index:5;
}

.login-card{

    background:#fff;

    padding:50px;

    border-radius:24px;

    box-shadow:0 25px 60px rgba(0,0,0,.30);
}

/* =========================
   FOOTER
========================= */

footer{
    font-size:14px;
    letter-spacing:.5px;
}

/* =========================
   SCROLL
========================= */

::-webkit-scrollbar{
    width:10px;
}

::-webkit-scrollbar-thumb{
    background:#111827;
    border-radius:20px;
}