body{

    background:
    radial-gradient(
        circle at center,
        rgba(255,255,255,.15),
        transparent 55%
    ),
    linear-gradient(
        180deg,
        #1b78df 0%,
        #0d4fb0 45%,
        #08378a 75%,
        #03286f 100%
    );

    color:white;
    min-height:100vh;
}

/* NAVBAR */

.navbar{

    margin:15px;

    border-radius:20px;

    background:rgba(0,20,80,.8);

    backdrop-filter:blur(10px);

    padding:15px 25px;
}

.nombre-negocio{

    font-size:2.5rem;

    font-weight:bold;

    color:white;
}

.navbar-nav{

    margin-left:auto;
}

.nav-link{

    font-size:1.3rem;

    margin-left:25px;

    color:white !important;
}

/* HERO */

.hero{

    padding:70px 0;
}

.titulo-bienvenida{

    font-size:4rem;
    font-weight:800;
}

.titulo-negocio{

    font-family:'Great Vibes', cursive;

    font-size:6rem;

    color:#00d4ff;

    text-shadow:0 0 20px rgba(0,212,255,.4);
}

.descripcion-negocio{

    font-size:1.6rem;

    line-height:1.8;

    max-width:700px;

    margin-top:25px;
}

/* TARJETAS */

.card-custom{

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

    border-radius:25px;

    backdrop-filter:blur(10px);

    padding:15px;
}

.card-custom iframe{

    width:100%;

    height:400px;

    border:none;

    border-radius:20px;
}

.local-card{

    height:430px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;
}

.local-card i{

    font-size:6rem;

    color:#9ec3ff;
}

/* CONTACTOS */

.contacto-section{

    margin-top:50px;
}

.contacto-card{

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

    border-radius:25px;

    padding:35px;
}

.contacto-card h2{

    color:#00d4ff;

    margin-bottom:40px;

    font-weight:bold;
}

.contacto-grid{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    gap: 20px;
}

.contacto-item{
    display: flex;
    border-right: 1px solid rgba(255,255,255,0.15);
    padding-right: 20px;
    align-items: center;
    gap: 15px;
    flex: 1;
    min-width: 0;
}

.contacto-item:last-child{

    border-right:none;
}

.contacto-item:last-child{
    border-right: none;
}

.contacto-item a{

    color: white;

    text-decoration: none;
}

.contacto-item a:hover{

    color: #00d4ff;

    text-decoration: underline;
}


.contacto-icono{

    width:70px;

    height:70px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;
}

.contacto-icono i{

    font-size:2.5rem;

    color:white;
}

.whatsapp{

    background:#25D366;
}

.facebook{

    background:#1877F2;
}

.tiktok{

    background:#000;
}

.direccion{

    background:#0d6efd;
}

/* BOTON */

.btn-productos{

    background:#1b83ff;

    color:white;

    text-decoration:none;

    padding:15px 35px;

    border-radius:15px;

    font-size:1.3rem;

    display:inline-block;
}

.btn-productos:hover{

    color:white;

    background:#3390ff;
}

/* RESPONSIVE */

@media(max-width:992px){

    .titulo-negocio{

        font-size:4rem;
    }

    .contacto-grid{

        grid-template-columns:1fr;
    }

    .contacto-item{

        border-right:none;
    }
}

/* PRODUCTOS */

.producto-card{

    background: rgba(255,255,255,0.08);

    border: none;

    border-radius: 20px;

    overflow: hidden;

    backdrop-filter: blur(10px);

    transition: 0.3s;

    height: 100%;
}

.producto-card:hover{

    transform: translateY(-8px);

    box-shadow: 0 15px 30px rgba(0,0,0,0.3);
}

.card-img-top{

    width: 100%;

    height: 300px;

    min-height: 300px;

    max-height: 300px;

    object-fit: contain;

    background: #ffffff;

    display: block;
}

.producto-card .card-body{

    color: white;

    display: flex;

    flex-direction: column;

    min-height: 220px;
}

.producto-card h5{

    font-weight: bold;

    margin-bottom: 10px;

    min-height: 60px;

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;
}

.precio{

    color: #00d4ff;

    font-weight: bold;
}

.pagination .page-link{

    background: rgba(255,255,255,0.08);

    color: white;

    border: none;

    margin: 0 5px;
}

.pagination .active .page-link{

    background: #00d4ff;

    color: #04266f;

    font-weight: bold;
}

/* LOGIN */

.login-body{

    min-height:100vh;

    background:
    radial-gradient(
        circle at center,
        rgba(255,255,255,.15),
        transparent 55%
    ),
    linear-gradient(
        180deg,
        #1b78df 0%,
        #0d4fb0 45%,
        #08378a 75%,
        #03286f 100%
    );
}

.login-card{

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

    border:none;

    border-radius:20px;

    overflow:hidden;

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

.login-area{

    min-height:calc(100vh - 140px);

    display:flex;

    justify-content:center;

    align-items:center;
}

/* Dashboard */

.dashboard-body{

    background:
    radial-gradient(
        circle at center,
        rgba(255,255,255,.15),
        transparent 55%
    ),
    linear-gradient(
        180deg,
        #1b78df 0%,
        #0d4fb0 45%,
        #08378a 75%,
        #03286f 100%
    );

    min-height:100vh;
}

.dashboard-titulo{
    color:white;
    font-weight:bold;
}

.dashboard-subtitulo{
    color:rgba(255,255,255,.8);
}

.card-dashboard{
    background: rgba(255,255,255,0.12);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 25px;
    transition: 0.3s;
}

.card-dashboard:hover{
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(0,0,0,.25);
}

.card-dashboard h3{
    color:white;
    font-weight:bold;
}

.card-dashboard .btn{
    border-radius:12px;
}

/* ADMIN PRODUCTOS */

.titulo-admin{

    color:white;

    font-size:3rem;

    font-weight:bold;
}

.card-admin{

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

    border:none;

    border-radius:20px;

    overflow:hidden;
}

.card-admin{
    border:none;
    border-radius:25px;
    box-shadow:0 15px 40px rgba(0,0,0,.15);
}

.card{
    background: rgba(255,255,255,.12);
    backdrop-filter: blur(10px);
    color:white;
}

.dispay-2{
    color:#ffc107 !important;
}

table td{

    vertical-align: middle;
}

.dashboard-titulo{
    font-size: 3rem;
}

@media (max-width: 768px){

    .btn{

        margin-bottom: 8px;

    }

}

@media (max-width: 768px){

    .nombre-negocio{

        font-size: 1.5rem;

    }

}