/* ================================================= */
/*                 CONFIGURACIÓN GLOBAL              */
/* ================================================= */

/*
Se aplica a todos los elementos.
Elimina márgenes y padding por defecto.
*/

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Arial, sans-serif;
}

/*
Color de fondo general del sitio.
*/

body{
    background:#f5f5f5;
}

/* ================================================= */
/*                     HEADER                        */
/* ================================================= */

/*
Barra superior de navegación.
*/

header{
    background:#2c2c2c;
    color:white;

    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:15px 8%;

    position:sticky;
    top:0;

    z-index:1000;
}

/*
Logo de la empresa.
*/

.logo{
    font-size:1.3rem;
    font-weight:bold;
}

/* ================================================= */
/*                  MENÚ NAVEGACIÓN                  */
/* ================================================= */

nav{
    display:flex;
    gap:20px;
}

/*
Enlaces del menú.
*/

nav a{
    color:white;
    text-decoration:none;
}

/*
Botón hamburguesa para móviles.
*/

.menu-btn{
    display:none;
    font-size:28px;
    cursor:pointer;
}

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

/*
Imagen principal de portada.
*/

.hero{
    height:80vh;

    background:
    url('https://images.unsplash.com/photo-1505693416388-ac5ce068fe85')
    center/cover;

    display:flex;
    justify-content:center;
    align-items:center;

    text-align:center;
}

/*
Caja oscura transparente
encima de la imagen.
*/

.hero-content{
    background:rgba(0,0,0,.5);

    color:white;

    padding:40px;

    border-radius:15px;
}

/*
Título principal.
*/

.hero h1{
    font-size:3rem;
}

/*
Botón "Ver catálogo".
*/

.hero button{
    margin-top:20px;

    padding:12px 25px;

    border:none;

    background:#b8860b;

    color:white;

    cursor:pointer;

    border-radius:8px;
}

/* ================================================= */
/*                SECCIÓN PRODUCTOS                  */
/* ================================================= */

.productos{
    padding:60px 8%;
}

/*
Título de productos.
*/

.productos h2{
    text-align:center;
    margin-bottom:30px;
}

/*
Grid adaptable para escritorio y móvil.
*/

.grid{
    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(280px,1fr));

    gap:25px;
}

/* ================================================= */
/*              TARJETAS DE PRODUCTOS                */
/* ================================================= */

.card{
    background:white;

    border-radius:15px;

    overflow:hidden;

    box-shadow:
    0 5px 15px rgba(0,0,0,.1);
}

/*
Imagen del producto.
*/

.card img{
    width:100%;

    height:220px;

    object-fit:cover;
}

/*
Nombre y precio.
*/

.card h3,
.card p{
    padding:10px 20px;
}

/*
Botón agregar al carrito.
*/

.card button{
    width:90%;

    margin:15px;

    padding:12px;

    border:none;

    background:#2c2c2c;

    color:white;

    border-radius:8px;

    cursor:pointer;
}

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

/*
Contenedor principal del carrito.
*/

.carrito-section{
    padding:60px 8%;
    background:#f8f8f8;
}

/*
Título del carrito.
*/

.carrito-section h2{
    margin-bottom:25px;
    font-size:2rem;
}

/* ================================================= */
/*          TARJETA DE PRODUCTO EN CARRITO           */
/* ================================================= */

.item-carrito{
    background:white;
    border-radius:15px;

    padding:20px;

    margin-bottom:20px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    box-shadow:0 5px 15px rgba(0,0,0,.12);

    transition:.3s;
}

.item-carrito:hover{
    transform:translateY(-3px);
}




/*
Nombre del producto.
*/

.item-info h4{
    font-size:1.3rem;
    color:#2c2c2c;
    margin-bottom:8px;
}

.item-info p{
    color:#666;
    margin:3px 0;
}

.item-precio{
    font-size:1.4rem;
    font-weight:bold;
    color:#b8860b;
}
/*
Precio y cantidad.
*/

.item-carrito p{
    margin:5px 0;
}

/*
Botón eliminar.
*/

.btn-eliminar{
    background:#dc3545;
    color:white;

    border:none;

    padding:12px 18px;

    border-radius:10px;

    cursor:pointer;

    font-weight:bold;
}

.btn-eliminar:hover{
    background:#bb2d3b;
}

/* ================================================= */
/*                 CAJA DEL TOTAL                    */
/* ================================================= */

.total-box{
    background:white;

    padding:30px;

    border-radius:15px;

    margin-top:20px;

    box-shadow:0 5px 15px rgba(0,0,0,.12);

    text-align:center;
}


/*
Texto del total.
*/

.total-box h3{
    font-size:2.5rem;
    color:#2c2c2c;
    margin-bottom:20px;
}

/*
Botón WhatsApp.
*/

.total-box button{
    background:#25D366;

    color:white;

    border:none;

    padding:15px 30px;

    border-radius:12px;

    cursor:pointer;

    font-size:1rem;

    font-weight:bold;
}

.total-box button:hover{
    background:#1ebe5d;
}

/* ================================================= */
/*             NOSOTROS Y CONTACTO                   */
/* ================================================= */

.nosotros,
.contacto{
    padding:60px 8%;

    text-align:center;

    background:white;
}

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

footer{
    background:#2c2c2c;

    color:white;

    text-align:center;

    padding:20px;
}

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

/*
Reservado para futuras mejoras.
*/

.carrito{
    position:fixed;

    bottom:20px;

    right:20px;

    background:#b8860b;

    color:white;

    padding:15px;

    border-radius:50px;

    font-weight:bold;
}

/* ================================================= */
/*                 DISEÑO RESPONSIVE                 */
/* ================================================= */

@media(max-width:768px){

    /*
    Menú móvil desplegable.
    */

    nav{
        display:none;

        flex-direction:column;

        position:absolute;

        top:70px;

        left:0;

        width:100%;

        background:#2c2c2c;

        padding:20px;
    }

    nav.active{
        display:flex;
    }

    /*
    Mostrar botón hamburguesa.
    */

    .menu-btn{
        display:block;
    }

    /*
    Reducir tamaño del título principal.
    */

    .hero h1{
        font-size:2rem;
    }

    /*
    Productos del carrito en columna.
    */

    .item-carrito{
        flex-direction:column;
        align-items:flex-start;
    }
}
/* ================================================= */
/*                     LOGIN                          */
/* ================================================= */

#login{
    min-height:100vh;

    display:flex;
    justify-content:center;
    align-items:center;

    background:
    linear-gradient(
        rgba(0,0,0,.5),
        rgba(0,0,0,.5)
    ),
    url("https://images.unsplash.com/photo-1505693416388-ac5ce068fe85?w=1600")
    center/cover;

    padding:20px;
}

.login-box{

    width:100%;
    max-width:420px;

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

    backdrop-filter:blur(10px);

    border-radius:20px;

    padding:40px;

    box-shadow:
    0 15px 40px rgba(0,0,0,.25);

    text-align:center;
}

.login-box h2{

    font-size:2rem;

    margin-bottom:10px;

    color:#2c2c2c;
}

.login-box::before{

    content:"🪑";

    display:block;

    font-size:3rem;

    margin-bottom:15px;
}

.login-box p{

    color:#666;

    margin-bottom:20px;
}

.login-box input{

    width:100%;

    padding:14px;

    margin-bottom:15px;

    border:2px solid #ddd;

    border-radius:10px;

    font-size:1rem;

    transition:.3s;
}

.login-box input:focus{

    outline:none;

    border-color:#b8860b;

    box-shadow:
    0 0 10px rgba(184,134,11,.2);
}

.login-box button{

    width:100%;

    padding:14px;

    border:none;

    border-radius:10px;

    background:#b8860b;

    color:white;

    font-size:1rem;

    font-weight:bold;

    cursor:pointer;

    transition:.3s;
}

.login-box button:hover{

    background:#9c7109;

    transform:translateY(-2px);
}

#error{

    margin-top:15px;

    color:#e53935;

    font-weight:bold;
}

/* Texto decorativo */

.login-subtitle{

    color:#777;

    margin-bottom:25px;
}

/* Responsive */

@media(max-width:768px){

    .login-box{

        padding:30px 25px;
    }

    .login-box h2{

        font-size:1.6rem;
    }
}