/* =========================================================
   style.css
========================================================= */

:root{
    --azul:#2563eb;
    --azul-hover:#1d4ed8;
    --negro:#111827;
    --gris:#f3f4f6;
    --gris-texto:#6b7280;
    --blanco:#ffffff;
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    background:var(--gris);
    font-family:Arial, Helvetica, sans-serif;
    color:var(--negro);
}

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

.navbar{
    background:var(--blanco);
    box-shadow:0 2px 10px rgba(0,0,0,0.08);
    padding:15px 0;
    z-index:999;
}

.navbar-brand{
    font-size:30px;
    font-weight:bold;
    color:var(--azul) !important;
}

.nav-link{
    color:var(--negro) !important;
    font-weight:500;
    margin-left:10px;
    transition:0.3s;
}

.nav-link:hover{
    color:var(--azul) !important;
}

.btn-login{
    background:var(--azul);
    color:white;
    border:none;
    padding:10px 20px;
    border-radius:10px;
    transition:0.3s;
    font-weight:bold;
    text-decoration:none;
}

.btn-login:hover{
    background:var(--azul-hover);
    color:white;
}

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

.hero{
    min-height:90vh;

    background:
    linear-gradient(rgba(0,0,0,0.65), rgba(0,0,0,0.65)),
    url('https://images.unsplash.com/photo-1504674900247-0877df9cc836?q=80&w=1600&auto=format&fit=crop');

    background-size:cover;
    background-position:center;

    display:flex;
    align-items:center;

    color:white;
}

.hero-content{
    max-width:700px;
}

.hero h1{
    font-size:65px;
    font-weight:bold;
    margin-bottom:20px;
}

.hero p{
    font-size:22px;
    margin-bottom:30px;
    color:#e5e7eb;
}

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

.search-box{
    background:white;
    padding:10px;
    border-radius:16px;

    display:flex;
    gap:10px;

    box-shadow:0 5px 20px rgba(0,0,0,0.2);
}

.search-box input{
    border:none;
    outline:none;
    width:100%;
    padding:14px;
    border-radius:12px;
}

.search-box button{
    background:var(--azul);
    color:white;
    border:none;
    padding:14px 25px;
    border-radius:12px;
    font-weight:bold;
    transition:0.3s;
}

.search-box button:hover{
    background:var(--azul-hover);
}

/* =========================
    TITULOS
========================= */

.section-title{
    font-size:38px;
    font-weight:bold;
    color:var(--negro);
}

/* =========================
    RESTAURANTES
========================= */

.restaurant-card{
    background:white;
    border-radius:20px;
    overflow:hidden;
    transition:0.3s;
    box-shadow:0 5px 15px rgba(0,0,0,0.08);
}

.restaurant-card:hover{
    transform:translateY(-10px);
}

.restaurant-cover{
    width:100%;
    height:220px;
    object-fit:cover;
}

.restaurant-info{
    padding:20px;
}

.restaurant-logo{
    width:60px;
    height:60px;
    border-radius:50%;
    object-fit:cover;
    margin-right:12px;
}

.restaurant-info h5{
    font-weight:bold;
}

.restaurant-info p{
    color:var(--gris-texto);
}

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

.product-card{
    background:white;
    border-radius:20px;
    overflow:hidden;
    transition:0.3s;
    box-shadow:0 5px 15px rgba(0,0,0,0.08);
}

.product-card:hover{
    transform:translateY(-10px);
}

.product-card img{
    width:100%;
    height:220px;
    object-fit:cover;
}

.product-info{
    padding:20px;
}

.product-info h5{
    font-weight:bold;
}

.product-info small{
    color:var(--gris-texto);
}

.price{
    color:var(--azul);
    font-size:26px;
    font-weight:bold;
}

.btn-cart{
    background:var(--negro);
    color:white;
    border:none;
    width:100%;
    padding:12px;
    border-radius:12px;
    font-weight:bold;
    transition:0.3s;
}

.btn-cart:hover{
    background:var(--azul);
}

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

.btn-primary-custom{
    background:var(--azul);
    color:white;
    border:none;
    padding:12px 22px;
    border-radius:12px;
    font-weight:bold;
    transition:0.3s;
    text-decoration:none;
}

.btn-primary-custom:hover{
    background:var(--azul-hover);
    color:white;
}

.btn-dark-custom{
    background:var(--negro);
    color:white;
    border:none;
    padding:12px 22px;
    border-radius:12px;
    font-weight:bold;
    transition:0.3s;
    text-decoration:none;
}

.btn-dark-custom:hover{
    background:#000;
    color:white;
}

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

footer{
    background:var(--negro);
    color:white;
    padding:70px 0;
    margin-top:80px;
}

footer h5{
    margin-bottom:20px;
    font-weight:bold;
}

footer p{
    color:#d1d5db;
}

/* =========================
    ANIMACIONES
========================= */

.fade-in{
    opacity:0;
    transform:translateY(20px);
    transition:0.6s;
}

.fade-in.show{
    opacity:1;
    transform:translateY(0);
}

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

@media(max-width:992px){

    .hero h1{
        font-size:45px;
    }

}

@media(max-width:768px){

    .hero{
        padding:120px 20px;
        text-align:center;
    }

    .hero h1{
        font-size:35px;
    }

    .hero p{
        font-size:18px;
    }

    .search-box{
        flex-direction:column;
    }

    .section-title{
        font-size:30px;
    }

}


/* =========================
    CARRITO
========================= */

.animacion-carrito{
    animation:carritoShake 0.5s;
}

@keyframes carritoShake{

    0%{
        transform:scale(1);
    }

    25%{
        transform:scale(1.2) rotate(-10deg);
    }

    50%{
        transform:scale(1.3) rotate(10deg);
    }

    75%{
        transform:scale(1.2) rotate(-10deg);
    }

    100%{
        transform:scale(1);
    }

}


/* =========================
    ICONO CARRITO
========================= */

#iconoCarrito{
    color:#111827 !important;
}

#iconoCarrito i{
    color:#111827 !important;
    font-size:26px;
}