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

body { background-color: #f6f6f6; color: #333; overflow-x: hidden; display: flex; flex-direction: column; min-height: 100vh;}

/* -- HEADER BLANCO -- */
.main-header {
    background: white;
    padding: 1.5rem 1rem;
    display: flex;
    justify-content: center;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    margin-bottom: 2rem;
}

.header-brand { display: flex; align-items: center; gap: 15px; }
.shell-logo { width: 50px; height: auto; }
.header-titles h1 { font-weight: 700; font-size: 1.8rem; color: #dd1d21; line-height: 1; }
.header-titles p { color: #eb5c68; font-size: 0.9rem; font-weight: 500;}

/* En PC agregamos margen inferior para que no tape el botón flotante */
main { display: flex; flex-wrap: wrap; padding: 0 1.5rem 6rem 1.5rem; gap: 2rem; max-width: 1200px; margin: 0 auto; flex-grow: 1; width: 100%;}
.contenedor-principal { width: 100%; flex: 1 1 100%; display: flex; flex-direction: column; min-width: 0; }

/* -- HERO BANNER -- */
.hero-section { margin-bottom: 2rem; width: 100%; }
.hero-banner { width: 100%; height: 200px; object-fit: cover; border-radius: 20px; box-shadow: 0 4px 15px rgba(0,0,0,0.08); }

/* -- CATEGORÍAS CIRCULARES -- */
.categorias-nav { display: flex; gap: 1.5rem; justify-content: flex-start; overflow-x: auto; padding-bottom: 1rem; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.categorias-nav::-webkit-scrollbar { display: none; }

.categoria-item { display: flex; flex-direction: column; align-items: center; cursor: pointer; gap: 0.5rem; min-width: 80px;}
.cat-img-wrapper { 
    width: 80px; height: 80px; border-radius: 50%; background: white; 
    display: flex; align-items: center; justify-content: center; 
    box-shadow: 0 4px 10px rgba(0,0,0,0.06); border: 2px solid transparent; 
    transition: all 0.3s ease; overflow: hidden;
}
.cat-img-wrapper img { width: 90%; height: 90%; object-fit: cover; }
.cat-img-wrapper img.logo-contain { width: 50%; height: 50%; object-fit: contain; }

.categoria-item:hover .cat-img-wrapper { background-color: #FFD500;  box-shadow: 0 6px 15px rgba(0,0,0,0.1); }
.categoria-item.activa .cat-img-wrapper { border-color: #dd1d21; }
.categoria-item span { font-size: 0.85rem; font-weight: 600; color: #666; transition: color 0.3s ease;}
.categoria-item.activa span { color: #dd1d21; }

/* -- GRILLA PRODUCTOS -- */
.productos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1.5rem; }

.producto-card { background: white; border-radius: 12px; padding: 1rem; box-shadow: 0 4px 15px rgba(0,0,0,0.04); display: flex; flex-direction: column; animation: fadeIn 0.4s ease forwards; transition: transform 0.3s ease;}
.producto-card:hover { transform: translateY(-4px); box-shadow: 0 8px 25px rgba(0,0,0,0.08); }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.producto-img { width: 100%; height: 150px; object-fit: cover; border-radius: 8px; background-color: #e0e0e0; margin-bottom: 1rem; }
.producto-info { display: flex; flex-direction: column; flex-grow: 1; justify-content: space-between; gap: 1rem; text-align: left;}
.producto-info h3 { font-size: 1rem; color: #222; font-weight: 700; line-height: 1.2; margin-bottom: 0.2rem;}
/* Estilo para la nueva descripción */
.producto-desc {
    font-size: 0.85rem !important;
    color: #777 !important;
    font-weight: 400 !important;
    line-height: 1.3 !important;
    margin-bottom: 0.8rem !important;
    display: block;
}

/* Ajuste al precio para que resalte más al lado de la descripción */
.precio-destacado {
    font-weight: 700 !important;
    font-size: 1.2rem !important;
    color: #dd1d21 !important;
}
.producto-info p { font-weight: 500; font-size: 1.1rem; color: #555;}

.btn-agregar { background-color: #dd1d21; color: white; border: none; padding: 0.8rem; border-radius: 8px; font-weight: 600; cursor: pointer; transition: background 0.2s ease; width: 100%; display: flex; justify-content: center; align-items: center; gap: 8px;}
.btn-agregar:hover { background-color: #b91518; }

/* -- PANEL DEL CARRITO LATERAL (PARA PC Y CELULAR) -- */
#carrito-container {
    position: fixed; top: 0; right: -100%; width: 100%; max-width: 420px; height: 100vh;
    background: white; box-shadow: -5px 0 30px rgba(0,0,0,0.15);
    z-index: 1500; transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex; flex-direction: column; margin: 0; border-radius: 0;
}
#carrito-container.abierto { right: 0; }

.overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 1400; transition: opacity 0.3s ease; opacity: 1; backdrop-filter: blur(2px);}
.overlay.oculta { opacity: 0; pointer-events: none; }

#btn-cerrar-carrito { background: none; border: none; font-size: 1.5rem; color: #555; cursor: pointer; transition: color 0.2s; }
#btn-cerrar-carrito:hover { color: #dd1d21; }

.carrito-header { padding: 1.5rem; border-bottom: 1px solid #eee; display: flex; justify-content: space-between; align-items: center; }
.carrito-body { padding: 1rem 1.5rem; overflow-y: auto; flex-grow: 1; }
.carrito-footer { padding: 1.5rem; background: #fafafa; border-top: 1px solid #eee; }

#lista-carrito { list-style: none; }
.carrito-item { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.2rem; }
.item-detalles { flex-grow: 1; padding-right: 10px;}
.item-nombre { font-size: 0.9rem; font-weight: 500; display: block; color: #333;}
.item-precio { color: #dd1d21; font-weight: 700; font-size: 0.9rem; }
.item-controles { display: flex; align-items: center; gap: 0.5rem; background: #f1f3f5; border-radius: 20px; padding: 0.2rem 0.5rem; }
.btn-cantidad { background: white; border: none; box-shadow: 0 1px 3px rgba(0,0,0,0.1); font-size: 1rem; color: #333; cursor: pointer; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; border-radius: 50%;}
.carrito-vacio { text-align: center; color: #999; padding: 2rem 0; font-size: 0.95rem; }

.carrito-total { font-size: 1.2rem; font-weight: 700; display: flex; justify-content: space-between; margin-bottom: 1.2rem; color: #222; }
#btn-checkout { background-color: #dd1d21; color: white; border: none; padding: 1.2rem; width: 100%; font-size: 1.1rem; font-weight: 600; border-radius: 12px; cursor: pointer; transition: background 0.3s ease;}
#btn-checkout:disabled { background-color: #e9ecef; color: #adb5bd; cursor: not-allowed; }

/* -- BOTÓN FLOTANTE ESTILO APP (PC) -- */
#btn-flotante-carrito {
    position: fixed; bottom: 30px; right: 30px; width: auto; min-width: 200px;
    background-color: #dd1d21; color: white; border: none; border-radius: 30px; padding: 1rem 1.5rem;
    font-size: 1.1rem; font-weight: 600; box-shadow: 0 4px 15px rgba(221, 29, 33, 0.3);
    z-index: 1000; display: flex; justify-content: center; align-items: center; gap: 10px; cursor: pointer;
    transition: transform 0.2s, background-color 0.2s;
}
#btn-flotante-carrito:hover { background-color: #b91518; transform: translateY(-3px); }
.badge { background: #fddb00; color: #222; font-size: 0.85rem; font-weight: 700; padding: 2px 10px; border-radius: 20px; margin-left: 5px; }

/* -- FOOTER -- */
.main-footer { background-color: white; padding: 3rem 1.5rem; border-top: 1px solid #eaeaea; margin-top: auto;}
.footer-content { max-width: 1200px; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2rem; }
.footer-logo { width: 60px; }
.footer-links-col h4, .footer-social-col h4 { color: #dd1d21; font-weight: 700; margin-bottom: 1rem; font-size: 1rem;}
.footer-links-col ul { list-style: none; }
.footer-links-col ul li { margin-bottom: 0.5rem; }
.footer-links-col ul li a { color: #666; text-decoration: none; font-size: 0.9rem; transition: color 0.2s;}
.footer-links-col ul li a:hover { color: #dd1d21; }
.social-icons { display: flex; gap: 1rem; }
.social-icons a { color: #fddb00; font-size: 1.5rem; transition: color 0.2s; }
.social-icons a:hover { color: #dd1d21; }

/* -- MODALES Y TOASTS -- */
.modal { display: flex; position: fixed; z-index: 2000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.6); justify-content: center; align-items: center; backdrop-filter: blur(4px);}
.modal.oculta { display: none; }
.modal-contenido { background-color: white; padding: 2.5rem; border-radius: 20px; width: 90%; max-width: 420px; position: relative; text-align: center; box-shadow: 0 10px 40px rgba(0,0,0,0.2); }
.cerrar-modal { position: absolute; top: 15px; right: 20px; font-size: 1.5rem; cursor: pointer; color: #888; }
.opciones-pago { display: flex; flex-direction: column; gap: 1rem; margin-top: 1.5rem;}
.btn-pago { padding: 1rem; border: none; border-radius: 10px; font-size: 1rem; font-weight: 600; cursor: pointer; color: white; display: flex; align-items: center; justify-content: center; gap: 10px;}
.btn-pago.mp { background-color: #009ee3; }
.btn-pago.transferencia { background-color: #6f42c1; }
.btn-pago.efectivo { background-color: #28a745; }
.btn-volver { background-color: #555; margin-top: 15px; width: 100%;}
.numero-pedido { font-size: 2.5rem; font-weight: 700; color: #dd1d21; margin: 1rem 0; background: #fff3f3; padding: 1rem; border-radius: 10px; border: 2px dashed #dd1d21; }
.mensaje-instrucciones { font-size: 0.95rem; color: #444; line-height: 1.5; margin-bottom: 1.5rem; }
.btn-ig { display: flex; align-items: center; justify-content: center; gap: 10px; background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); color: white; border:none; padding: 1rem; border-radius: 10px; font-weight: 600; width: 100%; cursor: pointer;}

#toast-container { position: fixed; bottom: 80px; right: 20px; display: flex; flex-direction: column; gap: 10px; z-index: 3000; }
.toast { background-color: #333; color: white; padding: 12px 20px; border-radius: 8px; box-shadow: 0 4px 10px rgba(0,0,0,0.2); font-size: 0.9rem; animation: slideIn 0.3s ease forwards; opacity: 0; transform: translateX(100%); }
@keyframes slideIn { to { opacity: 1; transform: translateX(0); } }

.oculta { display: none !important; }

/* --- RESPONSIVE MOBILE (Centramos el botón flotante en celular) --- */
@media (max-width: 768px) {
    main { padding: 0 1rem 6rem 1rem; }
    .footer-content { flex-direction: column; gap: 1.5rem; text-align: center; }
    .social-icons { justify-content: center; }
    
    #btn-flotante-carrito {
        left: 50%; right: auto; transform: translateX(-50%); width: 90%; max-width: 340px; bottom: 20px;
    }
    #btn-flotante-carrito:hover { transform: translateX(-50%) translateY(-3px); }
}

@media (max-width: 480px) {
    /* Ajustamos el tamaño de las categorías para pantallas muy chicas */
    .categoria-item { min-width: 70px; }
    .cat-img-wrapper { width: 65px; height: 65px; }
    .categoria-item span { font-size: 0.75rem; }
    
    /* Hacemos que la grilla de productos pase a 1 sola columna si la pantalla es ínfima */
    .productos-grid { grid-template-columns: 1fr; gap: 1rem; }
    
    /* Hacemos el botón flotante más cómodo para tocar con el pulgar */
    #btn-flotante-carrito { width: 95%; bottom: 15px; padding: 1.2rem; font-size: 1.2rem; }
    
    /* Ajustamos el título del hero banner */
    .header-titles h1 { font-size: 1.5rem; }
}