/* ============================================================
   estilos.css — MAZCOTAZ
   Paleta de colores:
     Verde vibrante : rgb(126, 195, 79)   → #7EC34F
     Verde claro    : rgb(169, 211, 148)  → #A9D394
     Negro          : rgb(0, 0, 0)        → #000000
     Blanco         : #FFFFFF
     Gris suave     : #F5F5F5
   ============================================================ */

/* ── Variables CSS ─────────────────────────────────────── */
:root {
    --verde-vibrante : #7EC34F;
    --verde-claro    : #A9D394;
    --negro          : #000000;
    --blanco         : #FFFFFF;
    --gris-fondo     : #F5F7F2;
    --gris-borde     : #DDEEDD;
    --gris-texto     : #444444;
    --sombra-navbar  : 0 3px 12px rgba(126, 195, 79, 0.35);
    --radio-card     : 12px;
    --transicion     : 0.3s ease;
    --fuente-base    : 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* ── Reset y base ──────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
    font-family : var(--fuente-base);
    background  : var(--gris-fondo);
    color       : var(--gris-texto);
    line-height : 1.6;
}

a { text-decoration: none; color: inherit; }
ul { list-style: none; }
img { max-width: 100%; display: block; }

/* ── BARRA DE NAVEGACIÓN SUPERIOR ─────────────────────── */
.navbar {
    position        : fixed;
    top             : 0;
    left            : 0;
    width           : 100%;
    z-index         : 1000;
    background      : var(--blanco);
    display         : flex;
    align-items     : center;
    justify-content : space-between;
    padding         : 0 20px;
    height          : 62px;
    box-shadow      : 0 2px 8px rgba(0,0,0,0.06);
    border-bottom   : 5px solid var(--verde-vibrante);
}

.navbar-spacer { height: 62px; }

/* Botón hamburguesa */
.navbar-toggle {
    background  : transparent;
    border      : none;
    color       : var(--verde-vibrante);
    font-size   : 1.5rem;
    cursor      : pointer;
    padding     : 6px 10px;
    border-radius: 6px;
    transition  : background var(--transicion);
}
.navbar-toggle:hover { background: var(--gris-fondo); }

/* Logo centrado */
.navbar-logo {
    position  : absolute;
    left      : 50%;
    transform : translateX(-50%);
    display   : flex;
    align-items: center;
}
.navbar-logo-img {
    height       : 46px;
    width        : auto;
    display      : block;
    border-radius: 50%;
}

/* Acciones derecha */
.navbar-actions {
    display     : flex;
    align-items : center;
    gap         : 10px;
}

/* Botón iniciar sesión */
.btn-login {
    display     : flex;
    align-items : center;
    gap         : 6px;
    background  : var(--verde-vibrante);
    color       : var(--blanco);
    padding     : 7px 14px;
    border-radius: 20px;
    font-weight : 600;
    font-size   : 0.88rem;
    transition  : background var(--transicion), color var(--transicion);
}
.btn-login:hover { background: var(--negro); color: var(--blanco); }

/* Botón carrito */
.btn-carrito {
    position    : relative;
    color       : var(--verde-vibrante);
    font-size   : 1.4rem;
    padding     : 6px 10px;
    border-radius: 6px;
    transition  : background var(--transicion);
}
.btn-carrito:hover { background: var(--gris-fondo); }

.carrito-badge {
    position    : absolute;
    top         : 0;
    right       : 0;
    background  : var(--negro);
    color       : var(--blanco);
    font-size   : 0.65rem;
    font-weight : 700;
    min-width   : 18px;
    height      : 18px;
    border-radius: 50%;
    display     : flex;
    align-items : center;
    justify-content: center;
    line-height : 1;
}

/* Menú desplegable de usuario */
.user-menu { position: relative; }
.btn-usuario {
    display     : flex;
    align-items : center;
    gap         : 6px;
    background  : var(--gris-fondo);
    border      : 1px solid var(--gris-borde);
    color       : var(--gris-texto);
    padding     : 7px 12px;
    border-radius: 20px;
    cursor      : pointer;
    font-size   : 0.88rem;
    font-weight : 600;
    transition  : background var(--transicion);
}
.btn-usuario:hover { background: var(--verde-claro); }
.user-name { max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.user-dropdown {
    display     : none;
    position    : absolute;
    top         : calc(100% + 8px);
    right       : 0;
    background  : var(--blanco);
    border      : 1px solid var(--gris-borde);
    border-radius: 10px;
    min-width   : 180px;
    box-shadow  : 0 6px 20px rgba(0,0,0,0.12);
    overflow    : hidden;
    z-index     : 2000;
}
.user-dropdown.dropdown-visible { display: block; }
.user-dropdown a {
    display     : flex;
    align-items : center;
    gap         : 8px;
    padding     : 10px 16px;
    color       : var(--gris-texto);
    font-size   : 0.9rem;
    transition  : background var(--transicion);
}
.user-dropdown a:hover { background: var(--gris-fondo); }
.user-dropdown hr { border: none; border-top: 1px solid var(--gris-borde); }
.logout-link { color: #e74c3c !important; }

/* ── SIDEBAR (menú lateral) ────────────────────────────── */
.sidebar {
    position   : fixed;
    top        : 0;
    left       : -280px;
    width      : 280px;
    height     : 100%;
    background : var(--negro);
    z-index    : 1100;
    transition : left 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    display    : flex;
    flex-direction: column;
    overflow-y : auto;
}
.sidebar.sidebar-open { left: 0; }

.sidebar-overlay {
    display    : none;
    position   : fixed;
    inset      : 0;
    background : rgba(0,0,0,0.5);
    z-index    : 1050;
    backdrop-filter: blur(2px);
}
.sidebar-overlay.overlay-visible { display: block; }

.sidebar-header {
    display         : flex;
    align-items     : center;
    justify-content : space-between;
    padding         : 18px 20px;
    background      : var(--verde-vibrante);
}
.sidebar-logo-img {
    height       : 42px;
    width        : 42px;
    object-fit   : cover;
    border-radius: 50%;
    background   : var(--blanco);
}
.sidebar-close {
    background  : transparent;
    border      : none;
    color       : var(--blanco);
    font-size   : 1.3rem;
    cursor      : pointer;
}

.sidebar-menu { padding: 16px 0; flex: 1; }
.sidebar-menu li a {
    display     : flex;
    align-items : center;
    gap         : 12px;
    padding     : 14px 24px;
    color       : #CCCCCC;
    font-size   : 1rem;
    transition  : background var(--transicion), color var(--transicion);
}
.sidebar-menu li a:hover {
    background : var(--verde-vibrante);
    color      : var(--blanco);
}

.sidebar-redes {
    display         : flex;
    justify-content : center;
    gap             : 20px;
    padding         : 20px;
    border-top      : 1px solid #333;
}
.sidebar-redes a {
    color       : #AAAAAA;
    font-size   : 1.4rem;
    transition  : color var(--transicion);
}
.sidebar-redes a:hover { color: var(--verde-vibrante); }

/* ── CONTENEDOR PRINCIPAL ──────────────────────────────── */
.container {
    max-width : 1200px;
    margin    : 0 auto;
    padding   : 0 20px;
}

/* ── SECCIÓN HERO / BANNER PUBLICITARIO ────────────────── */
.hero-banner {
    background      : linear-gradient(135deg, var(--verde-vibrante) 0%, var(--verde-claro) 100%);
    color           : var(--blanco);
    text-align      : center;
    padding         : 70px 20px;
    position        : relative;
    overflow        : hidden;
}
.hero-banner::before {
    content    : '';
    position   : absolute;
    inset      : 0;
    background : url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.07'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.hero-banner h1 { font-size: 2.8rem; font-weight: 800; margin-bottom: 12px; position: relative; }
.hero-banner p  { font-size: 1.15rem; opacity: 0.9; position: relative; }

/* ── BANNER PRINCIPAL COMO IMAGEN (configurable desde el admin) ── */
.hero-banner-img-section {
    padding    : 20px 4px;
}
.hero-banner-img-wrap {
    display    : block;
    max-width  : 1200px;
    margin     : 0 auto;
    border     : none;
    outline    : none;
}
.hero-banner-img {
    width        : 100%;
    height       : auto;      /* nunca se recorta: respeta su proporción original */
    display      : block;
    border       : none;
    outline      : none;
}

/* ── Carrusel de banners: se desplazan solos cada 5 segundos ── */
.hero-carrusel {
    position: relative;
    overflow: hidden;
}
.hero-carrusel-slide {
    display    : none;
    border     : none;
    outline    : none;
}
.hero-carrusel-slide.activo { display: block; animation: heroFade 0.6s ease; }
.hero-carrusel-slide img {
    width  : 100%;
    height : auto;
    display: block;
    border : none;
}
@keyframes heroFade {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.hero-carrusel-puntos {
    position       : absolute;
    bottom         : 12px;
    left           : 50%;
    transform      : translateX(-50%);
    display        : flex;
    gap            : 8px;
}
.hero-carrusel-puntos .punto {
    width         : 9px;
    height        : 9px;
    border-radius : 50%;
    background    : rgba(255,255,255,0.6);
    cursor        : pointer;
    transition    : background var(--transicion), transform var(--transicion);
}
.hero-carrusel-puntos .punto.activo {
    background : var(--blanco);
    transform  : scale(1.3);
}

/* ── CÍRCULOS DE CATEGORÍAS (página principal) ─────────── */
.categorias-section {
    padding    : 50px 20px;
    text-align : center;
}
.categorias-section h2 {
    font-size     : 1.8rem;
    color         : var(--negro);
    margin-bottom : 36px;
}
/* Una sola fila que ocupa todo el ancho de la página. En pantallas
   angostas (celular) se permite que baje de línea (flex-wrap) para
   que no queden los círculos aplastados o encimados. */
.categorias-grid {
    display         : flex;
    flex-wrap       : wrap;
    justify-content : space-between;
    align-items     : flex-start;
    gap             : 16px;
    width           : 100%;
}
.categoria-item {
    display         : flex;
    flex-direction  : column;
    align-items     : center;
    gap             : 10px;
    cursor          : pointer;
    text-decoration : none;
    color           : var(--gris-texto);
    transition      : transform var(--transicion);
    flex            : 1 1 0;
    min-width       : 100px;
}
.categoria-item:hover { transform: translateY(-6px); }
.categoria-circulo {
    width           : 110px;
    height          : 110px;
    max-width       : 100%;
    border-radius   : 50%;
    background      : var(--verde-claro);
    display         : flex;
    align-items     : center;
    justify-content : center;
    font-size       : 2.8rem;
    box-shadow      : 0 4px 16px rgba(126,195,79,0.3);
    transition      : background var(--transicion), box-shadow var(--transicion);
    overflow        : hidden;
    aspect-ratio     : 1 / 1;
}
.categoria-item:hover .categoria-circulo {
    background : var(--verde-vibrante);
    box-shadow : 0 6px 20px rgba(126,195,79,0.5);
}
.categoria-circulo img { width: 100%; height: 100%; object-fit: cover; }
.categoria-nombre { font-weight: 600; font-size: 0.95rem; }

@media (max-width: 640px) {
    .categorias-grid { justify-content: center; }
    .categoria-item   { flex: 1 1 30%; min-width: 90px; }
    .categoria-circulo{ width: 80px; height: 80px; font-size: 2rem; }
}

/* ── TARJETAS DE PRODUCTOS ─────────────────────────────── */
.productos-grid {
    display               : grid;
    grid-template-columns : repeat(auto-fill, minmax(220px, 1fr));
    gap                   : 24px;
    padding               : 20px 0;
}
.producto-card {
    background    : var(--blanco);
    border-radius : var(--radio-card);
    overflow      : hidden;
    box-shadow    : 0 2px 10px rgba(0,0,0,0.07);
    transition    : transform var(--transicion), box-shadow var(--transicion);
    display       : flex;
    flex-direction: column;
}
.producto-card:hover {
    transform  : translateY(-4px);
    box-shadow : 0 8px 24px rgba(126,195,79,0.25);
}
.producto-img {
    width  : 100%;
    height : 180px;
    object-fit : cover;
    background : var(--gris-fondo);
}
.producto-img-placeholder {
    width           : 100%;
    height          : 180px;
    background      : var(--verde-claro);
    display         : flex;
    align-items     : center;
    justify-content : center;
    font-size       : 3rem;
    color           : var(--blanco);
}
.producto-body {
    padding : 14px;
    flex    : 1;
    display : flex;
    flex-direction: column;
    gap     : 6px;
}
.producto-codigo { font-size: 0.75rem; color: #888; }
.producto-nombre { font-weight: 700; font-size: 0.95rem; color: var(--negro); }
.producto-desc   { font-size: 0.82rem; color: #666; flex: 1; }
.producto-precio {
    font-size   : 1.15rem;
    font-weight : 800;
    color       : var(--verde-vibrante);
}
.producto-precio-mayoreo {
    font-size   : 0.85rem;
    color       : #888;
    text-decoration: line-through;
}
.btn-agregar-carrito {
    display         : flex;
    align-items     : center;
    justify-content : center;
    gap             : 6px;
    background      : var(--verde-vibrante);
    color           : var(--blanco);
    border          : none;
    padding         : 9px;
    border-radius   : 8px;
    cursor          : pointer;
    font-weight     : 600;
    font-size       : 0.9rem;
    transition      : background var(--transicion);
    margin-top      : 8px;
    width           : 100%;
}
.btn-agregar-carrito:hover { background: #5fa832; }

/* ── FILTROS DE PRODUCTOS ──────────────────────────────── */
.productos-layout {
    display : flex;
    gap     : 24px;
    padding : 30px 20px;
    max-width: 1200px;
    margin  : 0 auto;
}
.filtros-panel {
    width         : 220px;
    flex-shrink   : 0;
    background    : var(--blanco);
    border-radius : var(--radio-card);
    padding       : 20px;
    box-shadow    : 0 2px 10px rgba(0,0,0,0.07);
    height        : fit-content;
    position      : sticky;
    top           : 80px;
}
.filtros-panel h3 {
    font-size     : 1rem;
    font-weight   : 700;
    margin-bottom : 14px;
    color         : var(--negro);
    border-bottom : 2px solid var(--verde-claro);
    padding-bottom: 8px;
}
.filtros-panel label {
    display       : flex;
    align-items   : center;
    gap           : 8px;
    margin-bottom : 8px;
    font-size     : 0.88rem;
    cursor        : pointer;
}
.filtros-panel input[type="checkbox"] { accent-color: var(--verde-vibrante); }
.productos-contenido { flex: 1; }

/* ── PAGINACIÓN ────────────────────────────────────────── */
.paginacion {
    display         : flex;
    justify-content : center;
    gap             : 8px;
    padding         : 30px 0;
}
.paginacion a, .paginacion span {
    padding       : 8px 14px;
    border-radius : 8px;
    background    : var(--blanco);
    border        : 1px solid var(--gris-borde);
    font-size     : 0.9rem;
    color         : var(--gris-texto);
    transition    : background var(--transicion);
}
.paginacion a:hover, .paginacion .activo {
    background : var(--verde-vibrante);
    color      : var(--blanco);
    border-color: var(--verde-vibrante);
}

/* ── FORMULARIOS ───────────────────────────────────────── */
.form-card {
    background    : var(--blanco);
    border-radius : var(--radio-card);
    padding       : 36px;
    box-shadow    : 0 4px 20px rgba(0,0,0,0.1);
    max-width     : 480px;
    margin        : 40px auto;
}
.form-card-logo {
    text-align    : center;
    font-size     : 1.8rem;
    font-weight   : 800;
    color         : var(--verde-vibrante);
    margin-bottom : 24px;
    letter-spacing: 2px;
}
.form-group {
    margin-bottom : 18px;
}
.form-group label {
    display       : block;
    font-size     : 0.88rem;
    font-weight   : 600;
    margin-bottom : 6px;
    color         : var(--negro);
}
.form-group input,
.form-group select,
.form-group textarea {
    width         : 100%;
    padding       : 10px 14px;
    border        : 1.5px solid var(--gris-borde);
    border-radius : 8px;
    font-size     : 0.95rem;
    font-family   : var(--fuente-base);
    transition    : border-color var(--transicion);
    outline       : none;
    background    : var(--gris-fondo);
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color : var(--verde-vibrante);
    background   : var(--blanco);
}
.form-group textarea { resize: vertical; min-height: 100px; }

.btn-primary {
    width           : 100%;
    padding         : 12px;
    background      : var(--verde-vibrante);
    color           : var(--blanco);
    border          : none;
    border-radius   : 8px;
    font-size       : 1rem;
    font-weight     : 700;
    cursor          : pointer;
    transition      : background var(--transicion);
}
.btn-primary:hover { background: #5fa832; }

.btn-secondary {
    display         : inline-flex;
    align-items     : center;
    gap             : 6px;
    padding         : 10px 20px;
    background      : var(--blanco);
    color           : var(--verde-vibrante);
    border          : 2px solid var(--verde-vibrante);
    border-radius   : 8px;
    font-weight     : 600;
    cursor          : pointer;
    transition      : all var(--transicion);
    font-size       : 0.9rem;
}
.btn-secondary:hover { background: var(--verde-vibrante); color: var(--blanco); }

.btn-danger {
    display         : inline-flex;
    align-items     : center;
    gap             : 6px;
    padding         : 8px 16px;
    background      : var(--blanco);
    color           : #b94a3f;
    border          : 1.5px solid #e4c4c0;
    border-radius   : 8px;
    font-weight     : 600;
    cursor          : pointer;
    transition      : background var(--transicion), border-color var(--transicion);
    font-size       : 0.88rem;
}
.btn-danger:hover { background: #fbf0ef; border-color: #d9a8a2; }

.form-link {
    text-align  : center;
    margin-top  : 16px;
    font-size   : 0.88rem;
    color       : #666;
}
.form-link a { color: var(--verde-vibrante); font-weight: 600; }

/* Mensajes de alerta */
.alerta {
    padding       : 12px 16px;
    border-radius : 8px;
    margin-bottom : 16px;
    font-size     : 0.9rem;
    font-weight   : 500;
}
.alerta-error   { background: #fdecea; color: #c0392b; border: 1px solid #f5c6cb; }
.alerta-exito   { background: #eafaf1; color: #27ae60; border: 1px solid #a9dfbf; }
.alerta-info    { background: #eaf4fb; color: #2980b9; border: 1px solid #aed6f1; }

/* ── CARRITO DE COMPRAS ────────────────────────────────── */
.carrito-tabla {
    width         : 100%;
    border-collapse: collapse;
    background    : var(--blanco);
    border-radius : var(--radio-card);
    overflow      : hidden;
    box-shadow    : 0 2px 10px rgba(0,0,0,0.07);
}
.carrito-tabla th {
    background  : var(--verde-vibrante);
    color       : var(--blanco);
    padding     : 12px 16px;
    text-align  : left;
    font-size   : 0.9rem;
}
.carrito-tabla td {
    padding     : 12px 16px;
    border-bottom: 1px solid var(--gris-borde);
    font-size   : 0.9rem;
    vertical-align: middle;
}
.carrito-tabla tr:last-child td { border-bottom: none; }
.carrito-tabla tr:hover td { background: var(--gris-fondo); }

.carrito-resumen {
    background    : var(--blanco);
    border-radius : var(--radio-card);
    padding       : 24px;
    box-shadow    : 0 2px 10px rgba(0,0,0,0.07);
}
.carrito-resumen h3 {
    font-size     : 1.1rem;
    margin-bottom : 16px;
    border-bottom : 2px solid var(--verde-claro);
    padding-bottom: 8px;
}
.resumen-linea {
    display         : flex;
    justify-content : space-between;
    margin-bottom   : 10px;
    font-size       : 0.92rem;
}
.resumen-total {
    display         : flex;
    justify-content : space-between;
    font-size       : 1.15rem;
    font-weight     : 800;
    color           : var(--verde-vibrante);
    border-top      : 2px solid var(--gris-borde);
    padding-top     : 12px;
    margin-top      : 8px;
}

/* ── PEDIDOS / HISTORIAL ───────────────────────────────── */
.pedido-card {
    background    : var(--blanco);
    border-radius : var(--radio-card);
    padding       : 20px;
    margin-bottom : 16px;
    box-shadow    : 0 2px 10px rgba(0,0,0,0.07);
    border-left   : 4px solid var(--verde-vibrante);
}
.pedido-header {
    display         : flex;
    justify-content : space-between;
    align-items     : center;
    margin-bottom   : 10px;
    flex-wrap       : wrap;
    gap             : 8px;
}
.pedido-folio { font-weight: 700; font-size: 1rem; color: var(--negro); }
.pedido-fecha { font-size: 0.82rem; color: #888; }

/* Badges de estado */
.badge {
    display       : inline-block;
    padding       : 4px 12px;
    border-radius : 20px;
    font-size     : 0.78rem;
    font-weight   : 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.badge-pedido                  { background: #fff3cd; color: #856404; }
.badge-pago_completado         { background: #d1ecf1; color: #0c5460; }
.badge-listo_recoger           { background: #cce5ff; color: #004085; }
.badge-entregado                { background: #d4edda; color: #155724; }
.badge-cancelacion_solicitada  { background: #ffe5d0; color: #8a4b08; }
.badge-cancelado                { background: #f8d7da; color: #721c24; }
.badge-devolucion_solicitada   { background: #e2d9f3; color: #432874; }
.badge-devuelto                 { background: #d8c7f0; color: #3a1f66; }

/* ── SECCIÓN ATENCIÓN AL CLIENTE ───────────────────────── */
.atencion-grid {
    display               : grid;
    grid-template-columns : 1fr 1fr;
    gap                   : 30px;
    max-width             : 900px;
    margin                : 40px auto;
    padding               : 0 20px;
}
@media (max-width: 680px) { .atencion-grid { grid-template-columns: 1fr; } }

.atencion-info {
    background    : var(--blanco);
    border-radius : var(--radio-card);
    padding       : 28px;
    box-shadow    : 0 2px 10px rgba(0,0,0,0.07);
}
.atencion-info h3 { font-size: 1.1rem; margin-bottom: 14px; color: var(--negro); }
.atencion-info p  { font-size: 0.9rem; margin-bottom: 10px; }
.atencion-info i  { color: var(--verde-vibrante); margin-right: 6px; }

/* ── PIE DE PÁGINA ─────────────────────────────────────── */
.footer {
    background  : var(--negro);
    color       : #CCCCCC;
    padding-top : 50px;
    margin-top  : 60px;
}
.footer-container {
    display               : grid;
    grid-template-columns : repeat(auto-fit, minmax(200px, 1fr));
    gap                   : 30px;
    max-width             : 1200px;
    margin                : 0 auto;
    padding               : 0 20px 40px;
}
.footer-logo {
    font-size     : 1.6rem;
    font-weight   : 800;
    color         : var(--blanco);
    margin-bottom : 12px;
}
.footer-logo span { color: var(--verde-vibrante); }
.footer-col p  { font-size: 0.88rem; line-height: 1.7; }
.footer-col h4 { color: var(--blanco); margin-bottom: 14px; font-size: 1rem; }
.footer-col ul li { margin-bottom: 8px; }
.footer-col ul li a {
    color      : #AAAAAA;
    font-size  : 0.88rem;
    transition : color var(--transicion);
}
.footer-col ul li a:hover { color: var(--verde-vibrante); }
.footer-redes { display: flex; flex-direction: column; gap: 10px; }
.footer-redes a {
    display     : flex;
    align-items : center;
    gap         : 8px;
    color       : #AAAAAA;
    font-size   : 0.9rem;
    transition  : color var(--transicion);
}
.footer-redes a:hover { color: var(--verde-vibrante); }
.footer-bottom {
    text-align  : center;
    padding     : 16px 20px;
    border-top  : 1px solid #222;
    font-size   : 0.82rem;
    color       : #666;
}

/* ── PÁGINA SOBRE MAZCOTAZ ─────────────────────────────── */
.sobre-section {
    max-width : 860px;
    margin    : 40px auto;
    padding   : 0 20px;
}
.sobre-section h2 {
    font-size     : 1.8rem;
    color         : var(--negro);
    margin-bottom : 16px;
}
.sobre-section p {
    font-size     : 0.95rem;
    line-height   : 1.8;
    margin-bottom : 16px;
    color         : var(--gris-texto);
}

/* ── CANTIDAD EN CARRITO ───────────────────────────────── */
.qty-control {
    display     : flex;
    align-items : center;
    gap         : 6px;
}
.qty-btn {
    width           : 28px;
    height          : 28px;
    border-radius   : 50%;
    border          : 1.5px solid var(--verde-vibrante);
    background      : var(--blanco);
    color           : var(--verde-vibrante);
    font-size       : 1rem;
    font-weight     : 700;
    cursor          : pointer;
    display         : flex;
    align-items     : center;
    justify-content : center;
    transition      : all var(--transicion);
}
.qty-btn:hover { background: var(--verde-vibrante); color: var(--blanco); }
.qty-input {
    width      : 46px;
    text-align : center;
    border     : 1.5px solid var(--gris-borde);
    border-radius: 6px;
    padding    : 4px;
    font-size  : 0.95rem;
}

/* ── RESPONSIVE ────────────────────────────────────────── */
@media (max-width: 768px) {
    .hero-banner h1 { font-size: 2rem; }
    .productos-layout { flex-direction: column; }
    .filtros-panel { width: 100%; position: static; }
    .btn-login span { display: none; }
    .user-name { display: none; }
    .form-card { padding: 24px 18px; margin: 20px 12px; }
    .atencion-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
    .categorias-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; }
    .categoria-circulo { width: 80px; height: 80px; font-size: 2rem; }
    .carrito-tabla { font-size: 0.8rem; }
    .carrito-tabla th, .carrito-tabla td { padding: 8px 10px; }
}

/* ── NOTIFICACIONES TOAST (agregar al carrito, etc.) ────── */
#toast-container {
    position  : fixed;
    top       : 80px;
    right     : 16px;
    z-index   : 9999;
    display   : flex;
    flex-direction: column;
    gap       : 10px;
    max-width : 320px;
}
.toast-notificacion {
    display        : flex;
    align-items    : center;
    gap            : 10px;
    padding        : 12px 16px;
    border-radius  : 10px;
    color          : #fff;
    font-size      : 0.9rem;
    box-shadow     : 0 4px 14px rgba(0,0,0,0.18);
    opacity        : 0;
    transform      : translateX(30px);
    transition     : opacity 0.25s ease, transform 0.25s ease;
}
.toast-notificacion.toast-visible { opacity: 1; transform: translateX(0); }
.toast-exito { background: #27ae60; }
.toast-error { background: #e74c3c; }
.toast-info  { background: #3498db; }

@media (max-width: 480px) {
    #toast-container { left: 12px; right: 12px; max-width: none; top: 70px; }
}