/*================================================== RESET ==================================================*/ *{ margin:0; padding:0; box-sizing:border-box; } body{ font-family:'Poppins',sans-serif; background:#eef4ff; color:#222; } /*================================================== HEADER ==================================================*/ header{ background:#0057b8; color:white; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; padding:20px; gap:15px; box-shadow:0 4px 10px rgba(0,0,0,.2); position:sticky; top:0; z-index:1000; } /*================================================== LOGO ==================================================*/ .logo img{ width:90px; height:auto; } /*================================================== TITULO ==================================================*/ .titulo{ flex:1; text-align:center; } .titulo h1{ font-family:'Press Start 2P',cursive; font-size:18px; line-height:1.5; color:#ffe600; text-shadow: 3px 3px #003366; } /*================================================== WORDART ==================================================*/ .wordart img{ width:180px; max-width:100%; } /*================================================== BUSQUEDA ==================================================*/ .busqueda{ display:flex; align-items:center; background:white; border-radius:40px; overflow:hidden; border:3px solid #ffd500; } .busqueda input{ border:none; outline:none; padding:12px; width:280px; font-size:15px; } .busqueda button{ border:none; background:#ffd500; cursor:pointer; padding:12px 18px; font-size:18px; transition:.3s; } .busqueda button:hover{ background:#ffb700; } /*================================================== CARRITO ==================================================*/ .carrito{ display:flex; align-items:center; gap:10px; background:#003d80; padding:10px 15px; border-radius:15px; } .carrito button{ background:#ffd500; border:none; padding:10px; font-size:22px; border-radius:10px; cursor:pointer; transition:.3s; } .carrito button:hover{ transform:scale(1.08); } .carrito p{ font-size:14px; font-weight:bold; } #contador{ color:#ffe600; font-size:18px; } /*================================================== MENU ==================================================*/ nav{ display:flex; justify-content:center; flex-wrap:wrap; gap:18px; background:white; padding:20px; box-shadow:0 3px 8px rgba(0,0,0,.1); } .categoria{ width:120px; padding:12px; border-radius:15px; cursor:pointer; transition:.3s; text-align:center; } .categoria:hover{ background:#d7ebff; transform:translateY(-5px); } .categoria img{ width:65px; height:65px; object-fit:contain; margin-bottom:8px; } .categoria p{ font-weight:bold; font-size:14px; } /*================================================== BANNER ==================================================*/ .banner{ padding:20px; } .banner img{ width:100%; border-radius:20px; box-shadow:0 6px 12px rgba(0,0,0,.2); } /*================================================== PRODUCTOS ==================================================*/ .productos{ padding:40px 20px; } .productos h2{ text-align:center; font-size:34px; color:#0057b8; margin-bottom:30px; } /*================================================== GRID ==================================================*/ .contenedorProductos{ display:grid; grid-template-columns: repeat(auto-fit,minmax(250px,1fr)); gap:25px; } /*================================================== TARJETA ==================================================*/ .tarjeta{ background:white; border-radius:20px; padding:20px; position:relative; text-align:center; transition:.35s; box-shadow:0 6px 15px rgba(0,0,0,.12); } .tarjeta:hover{ transform:translateY(-8px); box-shadow:0 10px 25px rgba(0,0,0,.25); } .tarjeta img{ width:180px; height:180px; object-fit:contain; margin:auto; } /*================================================== CORAZON ==================================================*/ .favorito{ position:absolute; top:15px; right:15px; font-size:28px; cursor:pointer; transition:.3s; } .favorito:hover{ transform:scale(1.2); } /*================================================== TEXTO TARJETA ==================================================*/ .tarjeta h3{ margin-top:15px; font-size:20px; } .precio{ font-size:26px; font-weight:bold; color:#009933; margin:15px 0; } /*================================================== BOTON ==================================================*/ .tarjeta button{ background:#0057b8; color:white; border:none; padding:12px 25px; border-radius:12px; cursor:pointer; font-size:16px; transition:.3s; } .tarjeta button:hover{ background:#003f85; transform:scale(1.05); } /*================================================== OFERTAS ==================================================*/ .ofertas{ background:#dfeeff; padding:40px 20px; margin-top:40px; } .ofertas h2{ text-align:center; font-size:32px; color:#003f85; margin-bottom:25px; } .ofertasGrid{ display:grid; grid-template-columns: repeat(auto-fit,minmax(250px,1fr)); gap:20px; } .oferta{ background:white; padding:20px; border-radius:20px; text-align:center; box-shadow:0 4px 10px rgba(0,0,0,.15); transition:.3s; } .oferta:hover{ transform:scale(1.03); } .oferta img{ width:160px; height:160px; object-fit:contain; } .oferta h3{ margin-top:12px; } .oferta p{ font-size:26px; color:green; font-weight:bold; } /*================================================== LOGIN ==================================================*/ .loginEstado{ padding:40px; text-align:center; } .loginEstado h2{ color:#0057b8; margin-bottom:10px; } .loginEstado button{ margin-top:20px; background:#ffd500; border:none; padding:12px 30px; border-radius:10px; cursor:pointer; font-weight:bold; transition:.3s; } .loginEstado button:hover{ background:#ffbe0b; } /*================================================== PICKUP ==================================================*/ .pickup{ background:white; padding:40px; text-align:center; margin:30px; border-radius:20px; box-shadow:0 4px 10px rgba(0,0,0,.12); } .pickup h2{ color:#0057b8; margin-bottom:15px; } .pickup button{ margin-top:20px; background:#0057b8; color:white; border:none; padding:14px 30px; border-radius:12px; cursor:pointer; transition:.3s; } .pickup button:hover{ background:#003d80; } /*================================================== FOOTER ==================================================*/ footer{ margin-top:50px; background:#003366; color:white; text-align:center; padding:30px; } footer p{ margin:6px; } /*================================================== SCROLLBAR ==================================================*/ ::-webkit-scrollbar{ width:10px; } ::-webkit-scrollbar-track{ background:#dbe9ff; } ::-webkit-scrollbar-thumb{ background:#0057b8; border-radius:20px; } ::-webkit-scrollbar-thumb:hover{ background:#003f85; } /*================================================== RESPONSIVE ==================================================*/ @media(max-width:900px){ header{ justify-content:center; } .titulo{ order:1; width:100%; } .busqueda{ width:100%; } .busqueda input{ width:100%; } .wordart{ display:none; } } @media(max-width:600px){ .titulo h1{ font-size:11px; } .carrito{ width:100%; justify-content:center; } .categoria{ width:90px; } .tarjeta img{ width:140px; height:140px; } .productos h2{ font-size:24px; } }

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

.overlay{

position:fixed;

top:0;

left:0;

width:100%;

height:100%;

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

opacity:0;

visibility:hidden;

transition:.3s;

z-index:1000;

}

.overlay.activo{

opacity:1;

visibility:visible;

}

.carrito-panel{

position:fixed;

top:0;

right:-400px;

width:360px;

height:100%;

background:white;

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

transition:.3s;

z-index:1100;

display:flex;

flex-direction:column;

}

.carrito-panel.activo{

right:0;

}

.carrito-header{

display:flex;

justify-content:space-between;

align-items:center;

padding:15px;

background:#0057b8;

color:white;

}

.lista-carrito{

flex:1;

overflow-y:auto;

padding:10px;

}

.item-carrito{

display:flex;

align-items:center;

justify-content:space-between;

margin-bottom:10px;

padding:10px;

border-bottom:1px solid #ddd;

}

.item-carrito img{

width:50px;

height:50px;

object-fit:contain;

}

.cantidad{

display:flex;

align-items:center;

gap:5px;

}

.cantidad button{

padding:5px 8px;

border:none;

background:#0057b8;

color:white;

cursor:pointer;

border-radius:5px;

}

.eliminar{

background:red;

border:none;

color:white;

padding:5px 8px;

cursor:pointer;

border-radius:5px;

}

.carrito-footer{

padding:15px;

border-top:1px solid #ddd;

text-align:center;

}

.carrito-footer button{

background:#ffd500;

border:none;

padding:10px 20px;

font-weight:bold;

cursor:pointer;

border-radius:10px;

}

/*=========================================
MODAL PAQUETERIA MININO
=========================================*/

.modal{

position:fixed;

top:0;

left:0;

width:100%;

height:100%;

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

display:none;

justify-content:center;

align-items:center;

z-index:2000;

}

.modal.activo{

display:flex;

}

.modal-content{

background:white;

padding:25px;

border-radius:15px;

width:320px;

text-align:center;

box-shadow:0 10px 25px rgba(0,0,0,.3);

}

.modal-content h2{

color:#0057b8;

margin-bottom:10px;

}

.modal-content select,
.modal-content input{

width:100%;

padding:10px;

margin:8px 0;

border-radius:8px;

border:1px solid #ccc;

}

.modal-content button{

width:100%;

margin-top:10px;

padding:10px;

border:none;

border-radius:10px;

cursor:pointer;

}

.modal-content button:first-of-type{

background:#0057b8;

color:white;

}

.modal-content button:last-of-type{

background:red;

color:white;

}

.modalLogin{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.4);

    justify-content:center;
    align-items:center;
}

.loginBox{

    background:rgba(255,255,0,.3);

    backdrop-filter:blur(20px);

    padding:30px;

    border-radius:25px;

    border:2px solid rgba(255,255,255,.4);

    display:flex;

    flex-direction:column;

    gap:15px;

    width:350px;

    box-shadow:0 0 25px gold;
}

.modalLogin{

display:none;

position:fixed;

top:0;
left:0;

width:100%;
height:100%;

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

justify-content:center;

align-items:center;

}

.loginBox{

background:rgba(255,255,0,.3);

backdrop-filter:blur(15px);

padding:30px;

border-radius:25px;

display:flex;

flex-direction:column;

gap:15px;

width:300px;

}

.btn-regresar {
  display: inline-block;
  margin: 10px 0 15px 10px;
  padding: 10px 18px;
  background-color: #0071dc; /* azul tipo Walmart */
  color: white;
  text-decoration: none;
  font-weight: bold;
  border-radius: 20px;
  font-family: Arial, sans-serif;
  transition: all 0.2s ease-in-out;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

.btn-regresar:hover {
  background-color: #005bb5;
  transform: scale(1.05);
}