@font-face {
    font-family: 'Mont';
    src: url('fonts/Mont-SemiBold.ttf') format('truetype');
    font-weight: 400 900;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: 'Cardium';
    src: url('fonts/CardiumA-Medium.ttf') format('truetype');
    font-weight: 400 900;
    font-style: normal;
    font-display: swap;
  }
  :root {
    --blue:  #1147bf;
    --red:   #ff1c4c;
    --teal:  #65ffed;
    --lime:  #c2ee73;
    --pink:  #ffc5d8;
    --bg:    #f5f7ff;
    --text:  #0d1630;
    --muted: #5a6380;
    --shadow: 0 4px 18px rgba(17,71,191,0.10);
    --font-body:    'Mont', system-ui, sans-serif;
    --font-display: 'Cardium', 'Mont', serif;
  }
  * { box-sizing:border-box; margin:0; padding:0; }
  body { font-family:var(--font-body); background:var(--bg); color:var(--text); }

  header { background:var(--blue); display:flex; flex-direction:column; align-items:center; }
  .header-logo-img { width:100%; max-width:420px; display:block; }
  .header-tagline {
    background:var(--blue); color:rgba(255,255,255,0.82);
    font-size:0.78rem; font-weight:600; text-align:center; padding:4px 16px 18px; width:100%;
  }

  .cats-wrap {
    background:white; padding:11px 10px;
    box-shadow:0 2px 10px rgba(17,71,191,0.10);
    position:sticky; top:0; z-index:100;
    overflow-x:auto; white-space:nowrap; scrollbar-width:none;
  }
  .cats-wrap::-webkit-scrollbar { display:none; }
  .cats-inner { display:inline-flex; gap:7px; padding:0 4px; }
  .cat-btn {
    border:2px solid #e0e6f5; border-radius:50px; padding:7px 15px;
    font-family:inherit; font-size:0.78rem; font-weight:700; cursor:pointer;
    transition:all 0.18s; background:var(--bg); color:var(--muted); white-space:nowrap;
  }
  .cat-btn:hover { border-color:var(--blue); color:var(--blue); }
  .cat-btn.active { background:var(--blue); border-color:var(--blue); color:white; }
  .cat-btn[data-cat="flores"].active { background:var(--red); border-color:var(--red); }
  .cat-btn[data-cat="ropa"].active   { background:#7c3aed; border-color:#7c3aed; }
  .cat-btn[data-cat="termos"].active { background:#059669; border-color:#059669; }
  .cat-btn[data-cat="globos"].active { background:#d97706; border-color:#d97706; }
  .cat-btn[data-cat="otros"].active  { background:var(--red); border-color:var(--red); }

  .section-title {
    font-size:0.63rem; font-weight:800; letter-spacing:0.18em; text-transform:uppercase;
    color:var(--muted); padding:20px 14px 6px; grid-column:1/-1;
  }
  .grid {
    display:grid; grid-template-columns:repeat(2,1fr);
    gap:10px; padding:4px 10px 110px;
  }
  @media(min-width:520px){ .grid { grid-template-columns:repeat(3,1fr); } }
  @media(min-width:740px){ .grid { grid-template-columns:repeat(4,1fr); } }
  @media(min-width:980px){ .grid { grid-template-columns:repeat(5,1fr); gap:14px; padding:4px 20px 110px; } }

  .card {
    background:white; border-radius:16px; overflow:hidden;
    box-shadow:var(--shadow); transition:transform 0.2s,box-shadow 0.2s; position:relative;
  }
  .card:hover { transform:translateY(-3px); box-shadow:0 10px 30px rgba(17,71,191,0.16); }
  .card-img { width:100%; aspect-ratio:1; object-fit:cover; display:block; }
  .card-body { padding:10px 10px 12px; }
  .card-name { font-weight:800; font-size:0.82rem; line-height:1.25; margin-bottom:2px; }
  .card-desc { font-size:0.67rem; color:var(--muted); line-height:1.35; margin-bottom:8px; }
  .card-footer { display:flex; align-items:center; justify-content:space-between; gap:6px; }
  .price-desde { font-size:0.57rem; font-weight:700; color:var(--muted); display:block; line-height:1; }
  .card-price { font-family:var(--font-display); font-weight:900; font-size:1.05rem; color:var(--blue); letter-spacing:-0.01em; }
  .price-cur { font-size:0.59rem; font-weight:700; color:var(--muted); }
  .add-btn {
    background:var(--red); color:white; border:none; border-radius:50%;
    width:32px; height:32px; font-size:1.3rem; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0; font-weight:900; line-height:1;
    transition:background 0.15s,transform 0.15s;
  }
  .add-btn:hover { background:#e8003a; transform:scale(1.1); }
  .add-btn:active { transform:scale(0.94); }
  .badge-qty {
    position:absolute; top:8px; right:8px; background:var(--red); color:white;
    border-radius:50px; padding:2px 8px; font-size:0.68rem; font-weight:800; display:none;
  }
  .card.in-cart::after {
    content:''; position:absolute; bottom:0; left:0; right:0;
    height:3px; background:var(--lime); border-radius:0 0 16px 16px;
  }

  #cart-fab {
    position:fixed; bottom:20px; right:14px;
    background:#25d366; color:white; border:none; border-radius:50px;
    padding:13px 18px; font-family:inherit; font-size:0.92rem; font-weight:800;
    cursor:pointer; display:flex; align-items:center; gap:9px;
    box-shadow:0 6px 22px rgba(37,211,102,0.45);
    transition:all 0.25s; z-index:999; min-width:178px;
  }
  #cart-fab:hover { transform:translateY(-2px); }
  #cart-fab.hidden { transform:translateY(130px); opacity:0; pointer-events:none; }
  .cart-count-badge {
    background:white; color:#25d366; border-radius:50%;
    width:22px; height:22px; display:flex; align-items:center; justify-content:center;
    font-size:0.72rem; font-weight:900; flex-shrink:0;
  }

  .modal-overlay {
    position:fixed; inset:0; background:rgba(13,22,48,0.55);
    z-index:1000; display:none; align-items:flex-end; justify-content:center;
  }
  .modal-overlay.open { display:flex; }
  .modal {
    background:white; border-radius:24px 24px 0 0;
    width:100%; max-width:520px; max-height:88vh; overflow-y:auto;
    padding:24px 18px 32px; animation:slideUp 0.28s ease;
  }
  @keyframes slideUp { from{transform:translateY(100%)} to{transform:translateY(0)} }
  .modal-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
  .modal-logo { height:36px; object-fit:contain; }
  .modal-close {
    background:var(--bg); border:none; border-radius:50%;
    width:36px; height:36px; font-size:1.1rem; cursor:pointer;
    display:flex; align-items:center; justify-content:center; color:var(--muted);
  }
  .cart-item { display:flex; align-items:center; gap:12px; padding:11px 0; border-bottom:1px solid #eef1fb; }
  .cart-item-img { width:58px; height:58px; object-fit:cover; border-radius:10px; flex-shrink:0; }
  .cart-item-info { flex:1; min-width:0; }
  .cart-item-name { font-weight:800; font-size:0.87rem; }
  .cart-item-price { font-size:0.78rem; color:var(--blue); font-weight:700; margin-top:1px; }
  .qty-controls { display:flex; align-items:center; gap:8px; flex-shrink:0; }
  .qty-btn {
    background:var(--bg); border:none; border-radius:50%;
    width:28px; height:28px; font-size:1rem; cursor:pointer; font-weight:900;
    display:flex; align-items:center; justify-content:center;
  }
  .qty-btn:hover { background:#dde5ff; }
  .qty-num { font-weight:900; min-width:20px; text-align:center; font-size:0.92rem; }
  .cart-total-row { display:flex; justify-content:space-between; align-items:center; padding:14px 0 6px; font-size:1rem; font-weight:800; }
  .total-amount { font-family:var(--font-display); color:var(--blue); font-size:1.4rem; font-weight:900; letter-spacing:-0.01em; }
  .note-label { font-size:0.78rem; font-weight:700; color:var(--muted); margin-top:14px; display:block; }
  .note-input {
    width:100%; border:2px solid #e8ecf8; border-radius:12px;
    padding:10px 13px; font-family:inherit; font-size:0.83rem;
    resize:none; outline:none; margin-top:6px; color:var(--text);
  }
  .note-input:focus { border-color:var(--blue); }
  .whatsapp-btn {
    display:flex; align-items:center; justify-content:center; gap:10px;
    background:#25d366; color:white; border:none; border-radius:50px;
    padding:15px 20px; font-family:inherit; font-size:1rem; font-weight:800;
    cursor:pointer; width:100%; margin-top:10px;
    box-shadow:0 4px 16px rgba(37,211,102,0.35); transition:all 0.2s;
  }
  .whatsapp-btn:hover { background:#1db954; transform:translateY(-1px); }
  .empty-cart { text-align:center; padding:40px 16px; color:var(--muted); }
  .empty-cart .ei { font-size:2.8rem; margin-bottom:10px; }
  .empty-cart p { font-weight:700; font-size:0.9rem; }
  @keyframes pulse { 0%{transform:scale(1)} 50%{transform:scale(1.28)} 100%{transform:scale(1)} }
  .pulse { animation:pulse 0.28s ease; }