:root {
  --bg: #ffffff;
  --surface: #fafafa;
  --muted: #f5f5f5;
  --text: #0a0a0a;
  --subtext: #525252;
  --primary: #000000;
  --accent: #e5e5e5;
  --border: #e0e0e0;
  --shadow: rgba(0,0,0,0.08);
  --shadow-lg: rgba(0,0,0,0.12);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  overflow-x: hidden;
}

/* Animaciones globales */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes slideUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

.container { width: min(1200px, 92%); margin: 0 auto; }

/* ===== NEW HEADER NAVIGATION ===== */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,0.98); backdrop-filter: blur(16px); border-bottom: 1px solid var(--border); box-shadow: 0 2px 8px var(--shadow); animation: slideDown 0.4s ease-out; }
.nav-container { display: flex; align-items: center; justify-content: space-between; max-width: 1400px; padding: 14px clamp(20px, 4vw, 60px); margin: 0 auto; gap: 20px; }

/* Hamburger button */
.hamburger { display: flex; flex-direction: column; justify-content: space-between; width: 28px; height: 22px; background: none; border: none; cursor: pointer; padding: 0; transition: all .3s; flex-shrink: 0; }
.hamburger span { display: block; width: 100%; height: 3px; background: var(--primary); border-radius: 3px; transition: all .3s; }
.hamburger:hover span { background: var(--subtext); }
.hamburger.active span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { transform: translateY(-10px) rotate(-45deg); }

/* Brand center */
.brand-center { display: flex; align-items: center; justify-content: center; text-decoration: none; flex: 1; }
.brand-text { font-size: clamp(1.25rem, 4vw, 1.65rem); font-weight: 800; letter-spacing: -.03em; color: var(--primary); font-family: 'Inter', sans-serif; transition: all .3s; white-space: nowrap; }
.brand-center:hover .brand-text { transform: scale(1.05); }

/* Right section: Icon buttons */
.nav-right { display: flex !important; align-items: center; gap: 24px; flex-shrink: 0; visibility: visible; }
.icon-btn { display: inline-flex !important; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 0; background: transparent; border: none; color: var(--text) !important; text-decoration: none; transition: all .3s; position: relative; cursor: pointer; flex-shrink: 0; padding: 8px; visibility: visible; opacity: 1; }
.icon-btn:hover { background: transparent; color: var(--primary) !important; transform: translateY(-2px); }
.icon-btn i { font-size: 1.6rem !important; transition: all .3s; display: block !important; font-family: "Font Awesome 6 Free"; font-weight: 900 !important; line-height: 1; visibility: visible !important; opacity: 1 !important; }
.icon-btn:hover i { transform: scale(1.2); }
.icon-btn.cart-icon .cart-count { position: absolute; top: -2px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: #ff3b30; color: #fff; font-weight: 700; font-size: 10px; display: grid; place-items: center; box-shadow: 0 2px 8px rgba(255,59,48,0.4); border: 2px solid #fff; z-index: 10; }

/* Search Modal */
.search-modal { position: fixed; top: 0; left: 0; right: 0; background: rgba(255,255,255,0.98); backdrop-filter: blur(20px); border-bottom: 1px solid var(--border); padding: 20px 0; z-index: 51; transform: translateY(-100%); opacity: 0; visibility: hidden; transition: all .35s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 8px 24px var(--shadow-lg); }
.search-modal.open { transform: translateY(0); opacity: 1; visibility: visible; }
.search-modal-content { max-width: 800px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 60px); }
.search-modal-input-wrapper { position: relative; display: flex; align-items: center; gap: 12px; }
.search-modal-input-wrapper i { position: static; color: var(--subtext); font-size: 1.2rem; pointer-events: none; flex-shrink: 0; }
.search-modal-input-wrapper input { width: 100%; padding: 18px 64px 18px 18px; border-radius: 16px; border: 2px solid var(--border); background: var(--bg); font-size: 1.1rem; transition: all .3s; font-weight: 500; color: var(--text); }
.search-modal-input-wrapper input:focus { outline: none; border-color: var(--primary); box-shadow: 0 4px 20px var(--shadow); }
.search-modal-input-wrapper input::placeholder { color: var(--subtext); }
.close-search-btn { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border-radius: 50%; background: var(--muted); border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 24px; line-height: 1; color: var(--subtext); transition: all .3s; }
.close-search-btn:hover { background: var(--primary); color: #fff; }
.search-modal-results { max-height: 60vh; overflow-y: auto; margin-top: 16px; display: none; }
.search-modal-results.show { display: block; }
.search-modal-results .result-item { display: flex; gap: 12px; padding: 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg); margin-bottom: 10px; transition: all .3s; text-decoration: none; color: var(--text); }
.search-modal-results .result-item:hover { background: var(--surface); box-shadow: 0 4px 12px var(--shadow); transform: translateY(-2px); }
.search-modal-results .result-item.active { outline: 2px solid var(--primary); background: var(--surface); }
.search-modal-results .result-item img { width: 80px; height: 60px; object-fit: cover; border-radius: 8px; background: var(--muted); }
.search-modal-results .result-item .info { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.search-modal-results .result-item .name { font-weight: 600; font-size: .95rem; }
.search-modal-results .result-item .badge { font-size: .8rem; }
.search-modal-results .empty { text-align: center; padding: 40px 20px; color: var(--subtext); }
.search-modal-results .loading { text-align: center; padding: 20px; color: var(--subtext); }
 .search-modal-results mark { background:#ffe066; color:#000; padding:0 2px; border-radius:3px; }

/* Sidebar menu */
.sidebar { position: fixed; top: 0; left: -300px; width: 280px; height: 100vh; background: var(--bg); box-shadow: 4px 0 16px var(--shadow-lg); z-index: 100; transition: left .35s cubic-bezier(0.4, 0, 0.2, 1); display: flex; flex-direction: column; }
.sidebar.open { left: 0; }
.sidebar-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 18px; border-bottom: 1px solid var(--border); }
.sidebar-brand { display: inline-flex; align-items: center; gap: 12px; }
.sidebar-logo { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; }
.sidebar-brand-text { font-weight: 800; font-size: 1.05rem; letter-spacing: -.01em; color: var(--text); }
.sidebar-close { background: none; border: none; font-size: 32px; line-height: 1; cursor: pointer; color: var(--subtext); transition: all .3s; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 8px; }
.sidebar-close:hover { background: var(--surface); color: var(--primary); }
.sidebar-nav { display: flex; flex-direction: column; padding: 12px 0; }
.sidebar-nav a { display: flex; align-items: center; gap: 14px; padding: 16px 20px; color: var(--text); text-decoration: none; font-weight: 500; font-size: 1rem; transition: all .3s; border-left: 3px solid transparent; }
.sidebar-nav a:hover { background: var(--surface); border-left-color: var(--primary); color: var(--primary); }
.sidebar-nav a i { font-size: 1.1rem; width: 24px; }
.sidebar-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 99; opacity: 0; visibility: hidden; transition: all .3s; }
.sidebar-overlay.open { opacity: 1; visibility: visible; }

/* Sidebar social */
.sidebar-social { padding: 8px 20px 18px; border-top: 1px solid var(--border); }
.sidebar-social-title { margin: 6px 0 10px; font-weight: 700; font-size: .95rem; color: var(--subtext); }
.sidebar-social-links { display: grid; gap: 8px; }
.sidebar-social-links a { display: inline-flex; align-items: center; gap: 10px; padding: 10px 0; color: var(--text); text-decoration: none; border-radius: 8px; }
.sidebar-social-links a i { font-size: 1.1rem; width: 22px; }
.sidebar-social-links a:hover { color: var(--primary); }

/* Cart Drawer */
.cart-drawer { position: fixed; top: 0; right: -420px; width: 400px; max-width: 90vw; height: 100vh; background: var(--bg); box-shadow: -4px 0 20px var(--shadow-lg); z-index: 100; transition: right .35s cubic-bezier(0.4, 0, 0.2, 1); display: flex; flex-direction: column; border-left: 1px solid var(--border); }
.cart-drawer.open { right: 0; }
.cart-drawer-header { display: flex; align-items: center; justify-content: space-between; padding: 20px; border-bottom: 1px solid var(--border); background: var(--surface); }
.cart-drawer-header h3 { margin: 0; font-size: 1.2rem; font-weight: 700; display: flex; align-items: center; gap: 10px; }
.cart-drawer-close { background: none; border: none; font-size: 32px; line-height: 1; cursor: pointer; color: var(--subtext); transition: all .3s; width: 40px; height: 40px; border-radius: 8px; display: flex; align-items: center; justify-content: center; }
.cart-drawer-close:hover { background: var(--muted); color: var(--primary); transform: scale(1.1); }
.cart-drawer-body { flex: 1; overflow-y: auto; padding: 16px; padding-bottom: 20px; display: flex; flex-direction: column; gap: 14px; }
.cart-drawer-empty { text-align: center; padding: 40px 20px; }
.cart-drawer-empty .muted { margin-bottom: 20px; }
.cart-drawer-list { display: flex; flex-direction: column; gap: 12px; }
.cart-drawer-list .item { display: flex; flex-direction: column; gap: 12px; border: 1px solid var(--border); border-radius: 14px; padding: 14px; background: var(--surface); transition: all .3s; }
.cart-drawer-list .item:hover { box-shadow: 0 4px 12px var(--shadow); }
.cart-drawer-list .item img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 10px; background: var(--muted); }
.cart-drawer-list .item .info { display: flex; flex-direction: column; gap: 8px; }
.cart-drawer-list .item .badge { align-self: flex-start; }
.cart-drawer-list .item .name { font-weight: 600; font-size: 1rem; margin: 0; }
.cart-drawer-list .item .meta { color: var(--subtext); font-size: .95rem; }
.cart-drawer-list .item .actions { display: flex; gap: 10px; width: 100%; }
.cart-drawer-list .item .actions .btn { flex: 1; padding: 12px 16px; font-size: .95rem; display: flex; align-items: center; justify-content: center; gap: 6px; border-radius: 10px; }
.cart-drawer-footer { border-top: 1px solid var(--border); padding: 16px; display: flex; flex-direction: column; gap: 12px; background: var(--surface); position: sticky; bottom: 0; z-index: 10; box-shadow: 0 -4px 12px var(--shadow); }
.cart-drawer-footer .btn { width: 100%; min-height: 52px; padding: 14px 20px; font-size: 1rem; display: flex !important; align-items: center; justify-content: center; gap: 8px; border-radius: 12px; font-weight: 600; transition: all .3s; cursor: pointer; text-decoration: none; border: none; }
.cart-drawer-footer .btn-primary { background: var(--primary); color: #fff; }
.cart-drawer-footer .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,0.3); }
.cart-drawer-footer .btn-danger { background: #dc2626; color: #fff; }
.cart-drawer-footer .btn-danger:hover { background: #b91c1c; transform: translateY(-2px); }
.cart-drawer-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 99; opacity: 0; visibility: hidden; transition: all .3s; backdrop-filter: blur(2px); }
.cart-drawer-overlay.open { opacity: 1; visibility: visible; }

/* Hero (banner con fondo) */
.hero { position: relative; width: 100%; min-height: clamp(420px, 70vh, 760px); display: grid; place-items: center; padding: 110px 0 90px; animation: fadeIn 0.6s ease-out; background-image: var(--hero-bg, none); background-size: cover; background-position: center; background-repeat: no-repeat; overflow: hidden; }
.hero-overlay { position: absolute; inset: 0; background: radial-gradient(80% 80% at 50% 20%, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.55) 60%, rgba(0,0,0,0.65) 100%); backdrop-filter: blur(1px); }
.hero-content { position: relative; z-index: 2; text-align: center; display: flex; flex-direction: column; align-items: center; }
.hero .title { color: #fff; font-size: clamp(2.4rem, 6vw, 4rem); line-height: 1.08; margin: 0 0 18px; font-weight: 800; letter-spacing: -.04em; animation: slideUp 0.6s ease-out 0.2s both; max-width: 900px; text-shadow: 0 6px 22px rgba(0,0,0,0.45); }
.hero .subtitle { color: rgba(255,255,255,0.9); margin: 0 0 40px; font-size: clamp(1.05rem, 2.5vw, 1.25rem); line-height: 1.7; animation: slideUp 0.6s ease-out 0.28s both; max-width: 760px; text-shadow: 0 4px 16px rgba(0,0,0,0.35); }
.hero .cta { display: inline-flex; align-items: center; gap: 12px; padding: 16px 36px; border: 1px solid rgba(255,255,255,0.18); color: #fff; background: linear-gradient(135deg, #121212 0%, #000000 100%); font-weight: 700; border-radius: 14px; text-decoration: none; box-shadow: 0 10px 30px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.05); transition: all .3s; animation: slideUp 0.6s ease-out 0.36s both; position: relative; overflow: hidden; font-size: 1.07rem; letter-spacing: .2px; }
.hero .cta:before { content: ''; position: absolute; top: 50%; left: 50%; width: 0; height: 0; border-radius: 50%; background: rgba(255,255,255,0.22); transition: width .6s, height .6s, top .6s, left .6s; }
.hero .cta:hover:before { width: 420px; height: 420px; top: -210px; left: -210px; }
.hero .cta:hover { transform: translateY(-3px); box-shadow: 0 16px 42px rgba(0,0,0,0.55); }
.hero .cta i { transition: transform .3s; }
.hero .cta:hover i { transform: translateX(5px); }
.hero-shape { position: absolute; inset: auto -20% -25% -20%; height: 55%; background: radial-gradient(50% 50% at 50% 50%, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0) 70%); z-index: 1; }
.hero-glow { position: absolute; width: 80vmax; height: 80vmax; left: 50%; top: 60%; transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(255,255,255,0.12), rgba(255,255,255,0)); filter: blur(40px); z-index: 1; pointer-events: none; }
.hero .social { display: flex; gap: 16px; margin-top: 48px; animation: slideUp 0.6s ease-out 0.44s both; justify-content: center; flex-wrap: wrap; }

/* Social */
.social { display: flex; gap: 14px; animation: slideUp 0.6s ease-out 0.5s both; justify-content: center; flex-wrap: wrap; }
.social a { display: inline-flex; align-items: center; gap: 10px; padding: 12px 20px; border: 1px solid var(--border); border-radius: 12px; color: var(--text); text-decoration: none; background: var(--bg); transition: all .3s; box-shadow: 0 2px 8px var(--shadow); position: relative; overflow: hidden; font-size: 1rem; }
.social a:before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent); transition: left .5s; }
.social a:hover:before { left: 100%; }
.social a:hover { background: var(--surface); box-shadow: 0 6px 16px var(--shadow-lg); transform: translateY(-3px); }
.social a svg { transition: transform .3s; }
.social a:hover svg { transform: scale(1.15); }

/* Section headings */
.section { padding: 48px 0 24px; }
.section h2 { font-size: 1.75rem; margin: 0 0 12px; font-weight: 700; letter-spacing: -.02em; animation: slideUp 0.5s ease-out; }
.section h2 i { margin-right: 8px; color: var(--primary); }
.section.center h2 { text-align: center; font-size: 2.5rem; }
.section.center .muted { text-align: center; }
.muted { color: var(--subtext); font-size: 1.05rem; }

/* Filters */
.filters { display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0 32px; }
.chip { padding: 10px 18px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg); color: var(--text); text-decoration: none; font-weight: 500; transition: all .3s; box-shadow: 0 1px 3px var(--shadow); position: relative; }
.chip:hover { background: var(--surface); transform: translateY(-2px); box-shadow: 0 3px 8px var(--shadow); }
.chip.active { background: var(--primary); color: #fff; border-color: var(--primary); box-shadow: 0 3px 12px rgba(0,0,0,0.25); animation: scaleIn 0.3s ease-out; }
.chip.active:after { content: '✓'; margin-left: 6px; font-weight: 700; }

/* Search bar */
.search-bar { display: flex; gap: 12px; margin: 20px 0 8px; flex-wrap: wrap; animation: slideUp 0.4s ease-out both; }
.search-bar input[type="text"] { flex: 1 1 240px; padding: 13px 16px; border-radius: 12px; border: 1px solid var(--border); background: var(--bg); font-size: .95rem; transition: all .3s; }
.search-bar input[type="text"]:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 4px rgba(0,0,0,0.05); }
.search-bar .btn { height: 48px; }
.search-bar .btn.ghost { background: var(--muted); }
.search-bar .btn.ghost:hover { background: var(--surface); }
/* Enhanced search */
.search-bar.enhanced { gap: 16px; align-items: stretch; }
.search-wrapper { position: relative; flex: 1 1 320px; display: flex; align-items: center; gap: 10px; }
.search-wrapper i { position: static; color: var(--subtext); font-size: 1rem; flex-shrink: 0; }
.search-wrapper input { width: 100%; padding: 14px 52px 14px 16px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface); font-size: 1rem; font-weight: 500; transition: all .3s; }
.search-wrapper input:focus { outline: none; background: #fff; border-color: var(--primary); box-shadow: 0 4px 18px var(--shadow); }
.clear-btn { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; border-radius: 50%; background: var(--muted); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 18px; line-height: 1; color: var(--subtext); transition: all .3s; }
.clear-btn:hover { background: var(--primary); color: #fff; border-color: var(--primary); }
.search-actions { display: flex; gap: 10px; }
.search-feedback { margin-top: 12px; font-size: .9rem; color: var(--subtext); animation: fadeIn .3s ease-out; }
.search-feedback.loading { color: var(--primary); }
.empty-msg { grid-column: 1 / -1; }
mark { background: #ffe066; color: #000; padding: 0 2px; border-radius: 3px; }
/* Spinner */
.spinner { display:inline-block; width:16px; height:16px; border:3px solid var(--border); border-top-color: var(--primary); border-radius:50%; animation: spin .7s linear infinite; margin-right:6px; vertical-align:middle; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Product grid */
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.card { background: var(--bg); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; transition: all .4s; box-shadow: 0 2px 8px var(--shadow); animation: slideUp 0.5s ease-out both; position: relative; }
.card:nth-child(1) { animation-delay: 0.1s; }
.card:nth-child(2) { animation-delay: 0.2s; }
.card:nth-child(3) { animation-delay: 0.3s; }
.card:nth-child(4) { animation-delay: 0.4s; }
.card:nth-child(5) { animation-delay: 0.5s; }
.card:nth-child(6) { animation-delay: 0.6s; }
.card:hover { transform: translateY(-8px) scale(1.02); box-shadow: 0 12px 32px var(--shadow-lg); }
.card .cover { aspect-ratio: 4 / 3; width: 100%; object-fit: cover; background: var(--muted); transition: all .4s; }
.card:hover .cover { transform: scale(1.1); }
.card .content { padding: 18px; display: grid; gap: 10px; }
.badge { display: inline-block; font-size: .85rem; color: var(--primary); background: var(--muted); padding: 6px 12px; border-radius: 999px; font-weight: 600; transition: all .3s; }
.card:hover .badge { background: var(--primary); color: #fff; }
.card h3 { margin: 0; font-size: 1.05rem; font-weight: 600; transition: color .3s; }
.card:hover h3 { color: var(--primary); }
.card[data-href] { cursor: pointer; }
.actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 8px; }
.btn { text-align: center; padding: 11px 16px; border-radius: 10px; text-decoration: none; font-weight: 600; transition: all .3s; position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.btn i { transition: transform .3s; }
.btn.primary { background: var(--primary); color: #fff; box-shadow: 0 2px 6px rgba(0,0,0,0.15); }
.btn.primary:hover i { transform: translateX(3px); }
.btn.ghost { background: transparent; border: 1px solid var(--border); color: var(--text); }
.btn.ghost:hover i { transform: scale(1.1); }
.btn.primary:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,0.3); }
.btn.ghost:hover { background: var(--surface); border-color: var(--primary); color: var(--primary); }

/* Product detail */
.detail { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; animation: fadeIn 0.5s ease-out; }
.detail .heroimg { width: 100%; border-radius: 16px; border: 1px solid var(--border); background: var(--muted); object-fit: cover; box-shadow: 0 4px 16px var(--shadow); transition: all .4s; animation: scaleIn 0.5s ease-out; }
.detail .heroimg:hover { transform: scale(1.03); box-shadow: 0 8px 24px var(--shadow-lg); }
.gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.gallery img { width: 100%; border-radius: 12px; border: 1px solid var(--border); background: var(--muted); aspect-ratio: 1/1; object-fit: cover; transition: all .3s; cursor: pointer; animation: slideUp 0.4s ease-out both; }
.gallery img:nth-child(1) { animation-delay: 0.1s; }
.gallery img:nth-child(2) { animation-delay: 0.2s; }
.gallery img:nth-child(3) { animation-delay: 0.3s; }
.gallery img:nth-child(4) { animation-delay: 0.4s; }
.gallery img:hover { transform: scale(1.15) rotate(2deg); box-shadow: 0 6px 20px var(--shadow-lg); z-index: 10; }

/* Forms */
form .row { display: grid; gap: 8px; margin-bottom: 18px; animation: slideUp 0.4s ease-out both; }
form .row:nth-child(1) { animation-delay: 0.1s; }
form .row:nth-child(2) { animation-delay: 0.2s; }
form .row:nth-child(3) { animation-delay: 0.3s; }
form .row:nth-child(4) { animation-delay: 0.4s; }
label { font-size: .95rem; color: var(--subtext); font-weight: 500; }
label i { margin-right: 6px; color: var(--primary); }
input[type="text"], input[type="email"], select, textarea, input[type="password"] {
  width: 100%; padding: 13px 16px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg); color: var(--text); transition: all .3s;
}
input[type="text"]:focus, input[type="email"]:focus, select:focus, textarea:focus, input[type="password"]:focus {
  outline: none; border-color: var(--primary); box-shadow: 0 0 0 4px rgba(0,0,0,0.05); transform: translateY(-1px);
}
textarea { min-height: 140px; resize: vertical; }
input[type="file"] { color: var(--subtext); padding: 10px 0; }

/* Footer */
.site-footer { border-top: 1px solid var(--border); margin-top: 80px; background: var(--surface); animation: fadeIn 0.5s ease-out; }
.site-footer .container { padding: 32px 0; }
.site-footer p { color: var(--subtext); margin: 0; text-align: center; font-size: .95rem; }
.site-footer p i { margin: 0 4px; color: #e74c3c; animation: pulse 2s infinite; }

/* WhatsApp floating */
.wa-float { position: fixed; right: 20px; bottom: 20px; width: 64px; height: 64px; display: grid; place-items: center; background: linear-gradient(135deg, #000000 0%, #1a1a1a 100%); color: #fff; border-radius: 50%; text-decoration: none; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4); transition: all .4s; z-index: 100; animation: slideUp 0.5s ease-out 0.8s both; border: 2px solid #fff;
}
.wa-float:before { content: ''; position: absolute; inset: -4px; border-radius: 50%; background: linear-gradient(135deg, #000, #333); opacity: 0; animation: pulse 2s infinite; }
.wa-float i { font-size: 32px; position: relative; z-index: 1; }
.wa-float:hover { transform: translateY(-6px) scale(1.1); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5); background: linear-gradient(135deg, #1a1a1a 0%, #000000 100%); }
.wa-float:hover:before { opacity: 0.3; }

/* Cart floating */
.cart-float { position: fixed; right: 20px; bottom: 96px; width: 56px; height: 56px; display: grid; place-items: center; background: var(--primary); color: #fff; border-radius: 50%; text-decoration: none; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35); transition: all .3s; z-index: 100; border: 2px solid #fff; }
.cart-float:hover { transform: translateY(-4px) scale(1.06); box-shadow: 0 10px 28px rgba(0,0,0,0.45); }
.cart-float i { font-size: 22px; }
.cart-float .count { position: absolute; top: -6px; right: -6px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: #ff3b30; color: #fff; font-weight: 700; font-size: 12px; display: grid; place-items: center; box-shadow: 0 2px 8px rgba(0,0,0,0.35); border: 2px solid #fff; }

/* Admin */
.admin-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; flex-wrap: wrap; gap: 12px; animation: slideDown 0.4s ease-out; }
.table { width: 100%; border-collapse: collapse; background: var(--bg); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; box-shadow: 0 2px 8px var(--shadow); animation: fadeIn 0.5s ease-out; }
.table th, .table td { padding: 14px; border-bottom: 1px solid var(--border); text-align: left; transition: all .3s; }
.table tbody tr { animation: slideUp 0.3s ease-out both; }
.table tbody tr:nth-child(1) { animation-delay: 0.05s; }
.table tbody tr:nth-child(2) { animation-delay: 0.1s; }
.table tbody tr:nth-child(3) { animation-delay: 0.15s; }
.table tbody tr:nth-child(4) { animation-delay: 0.2s; }
.table tbody tr:nth-child(5) { animation-delay: 0.25s; }
.table tbody tr:hover { background: var(--surface); transform: scale(1.01); box-shadow: 0 2px 8px var(--shadow); }
.table th { color: var(--text); background: var(--surface); font-weight: 600; }
.table td { color: var(--subtext); }
.table img { transition: all .3s; }
.table tr:hover img { transform: scale(1.1); box-shadow: 0 4px 12px var(--shadow-lg); }

/* Responsive */
@media (min-width: 641px) {
  /* Force icon visibility on desktop */
  .nav-right { display: flex !important; visibility: visible !important; opacity: 1 !important; }
  .icon-btn { display: inline-flex !important; visibility: visible !important; opacity: 1 !important; }
  .icon-btn i { display: block !important; visibility: visible !important; opacity: 1 !important; color: var(--text) !important; }
  /* Menos zoom del fondo del hero en pantallas grandes */
  .hero { background-size: 60vmin; background-position: center top; }
}
@media (max-width: 980px) {
  .detail { grid-template-columns: 1fr; }
  .gallery { grid-template-columns: repeat(3, 1fr); }
  .grid { grid-template-columns: repeat(2, 1fr); }
  .hero { padding: 90px 0 70px; min-height: clamp(380px, 60vh, 620px); }
  .hero .title { font-size: clamp(2rem, 6vw, 3.2rem); }
  /* Header tablet */
  .nav-container { padding: 12px clamp(16px, 3vw, 40px); }
  .brand-text { font-size: 1.4rem; }
  .icon-btn { width: 42px; height: 42px; }
  .icon-btn i { font-size: 1.15rem; }
}
@media (max-width: 640px) {
  .nav-container { padding: 14px 18px; gap: 14px; }
  .brand-text { font-size: 1.35rem; }
  .nav-right { gap: 12px; display: flex !important; }
  .icon-btn { width: 44px; height: 44px; background: transparent; border: none; padding: 8px; display: inline-flex !important; }
  .icon-btn i { font-size: 1.5rem !important; display: block !important; }
  .hamburger { width: 26px; height: 20px; }
  .hamburger span { height: 2.5px; }
  .hamburger.active span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .hamburger.active span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }
  /* Search modal mobile */
  .search-modal { padding: 16px 0; }
  .search-modal-content { padding: 0 16px; }
  .search-modal-input-wrapper { gap: 10px; }
  .search-modal-input-wrapper i { font-size: 1.05rem; }
  .search-modal-input-wrapper input { padding: 16px 52px 16px 16px; font-size: 16px; border-radius: 14px; }
  .close-search-btn { width: 32px; height: 32px; right: 12px; font-size: 22px; }
  /* Hero mobile + tarjetas compactas */
  .grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .card { border-radius: 14px; }
  .card .cover { aspect-ratio: 1 / 1; }
  .card .content { padding: 14px; gap: 8px; }
  .badge { font-size: 0.7rem; padding: 5px 10px; }
  .card h3 { font-size: 0.9rem; }
  .actions { grid-template-columns: 1fr 1fr; gap: 8px; }
  .btn { padding: 9px 12px; font-size: 0.75rem; }
  .btn i { font-size: 0.85rem; }
  .hero { padding: 64px 0 48px; min-height: 56vh; background-position: center top; }
  .hero-overlay { background: radial-gradient(90% 80% at 50% 15%, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.7) 55%, rgba(0,0,0,0.75) 100%); }
  .hero-shape, .hero-glow { display: none; }
  .hero-content { padding: 0 12px; }
  .hero .title { font-size: clamp(1.8rem, 7.2vw, 2.3rem); margin-bottom: 12px; text-shadow: 0 4px 14px rgba(0,0,0,0.5); }
  .hero .subtitle { font-size: 0.98rem; margin-bottom: 24px; color: rgba(255,255,255,0.92); max-width: 95%; }
  .hero .cta { padding: 14px 24px; font-size: 1rem; border-radius: 12px; box-shadow: 0 8px 28px rgba(0,0,0,0.5); }
  .social { gap: 10px; margin-top: 28px; }
  .section.center h2 { font-size: 1.7rem; }
  .search-bar { flex-direction: column; align-items: stretch; gap: 12px; }
  .search-bar .btn { width: 100%; padding: 14px; font-size: 1rem; }
  .search-wrapper { flex: 1 1 100%; width: 100%; }
  .search-wrapper { gap: 8px; }
  .search-wrapper input { font-size: 16px; padding: 14px 52px 14px 14px; }
  .search-actions { width: 100%; }
  .search-actions .btn { width: 100%; }
  .filters { gap: 8px; }
  .chip { font-size: 0.9rem; padding: 10px 16px; }
  /* Cart drawer mobile */
  .cart-drawer { width: 100vw; max-width: 100vw; right: -100vw; }
  .cart-drawer-header { padding: 16px; }
  .cart-drawer-header h3 { font-size: 1.1rem; }
  .cart-drawer-body { padding: 12px; gap: 12px; }
  .cart-drawer-list .item { padding: 12px; }
  .cart-drawer-list .item .actions { flex-direction: column; gap: 10px; }
  .cart-drawer-list .item .actions .btn { width: 100%; padding: 14px 16px; font-size: 1rem; }
  .cart-drawer-footer { padding: 16px 14px 18px; gap: 12px; }
  .cart-drawer-footer .btn { min-height: 56px !important; padding: 16px 20px !important; font-size: 1.05rem !important; font-weight: 700 !important; }
  .cart-drawer-footer .btn i { font-size: 1.2rem; }
}
/* Extra pequeño: una sola columna y aún más compactas */
@media (max-width: 480px) {
  .grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .card .cover { aspect-ratio: 4 / 3; }
  .card .content { padding: 12px; }
  .badge { font-size: 0.65rem; padding: 4px 8px; }
  .card h3 { font-size: 0.85rem; }
  .actions { grid-template-columns: 1fr; }
  .btn { padding: 8px 11px; font-size: 0.72rem; }
}