:root {
  --bg-general: #ffffff;
  --primary: #1E40AF;
  --primary-dark: #172554;
  --secondary: #C084FC;
  --success: #10B981;
  --warning: #F59E0B;
  --danger: #EF4444;
  --whatsapp-green: #25D366;
  --gray-border: #D1D5DB;
  --gray-soft: #F9FAFB;
  --text-dark: #1F2937;
  --text-light: #6B7280;
  --white: #FFFFFF;
  --gradient-hero: linear-gradient(135deg, #1E40AF 0%, #C084FC 100%);
  --container-width: 1200px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.10), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 25px -10px rgba(30, 64, 175, 0.30);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--bg-general);
  color: var(--text-dark);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; transition: all .2s ease; }
button, input, select, textarea { font: inherit; }
ul { list-style: none; }
img { max-width: 100%; display: block; }

.container { max-width: var(--container-width); margin: 0 auto; padding: 0 20px; }
.section-padding { padding: 80px 0; }
.text-center { text-align: center; }
.text-primary { color: var(--primary); }
.text-secondary { color: var(--secondary); }
.text-success { color: var(--success); }
.text-gray { color: var(--text-light); }
.hidden { display: none !important; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 20px; border-radius: var(--radius-md); border: 1px solid transparent;
  font-weight: 700; cursor: pointer; transition: all .2s ease; min-height: 46px;
}
.btn:hover { transform: translateY(-1px); opacity: .95; }
.btn-primary { background: var(--primary); color: white; border-color: var(--primary); }
.btn-secondary { background: var(--secondary); color: white; border-color: var(--secondary); }
.btn-success { background: var(--success); color: white; border-color: var(--success); }
.btn-light { background: white; color: var(--primary); border-color: white; box-shadow: var(--shadow-md); }
.btn-outline { background: white; color: var(--primary); border-color: var(--gray-border); }
.btn-danger { background: var(--danger); color: white; border-color: var(--danger); }
.btn-small { padding: 8px 12px; font-size: .88rem; min-height: 36px; }
.btn-full { width: 100%; }

header.site-header {
  background: var(--white); color: var(--primary); border-bottom: 1px solid var(--gray-border);
  position: sticky; top: 0; z-index: 1000; box-shadow: var(--shadow-sm);
}
.nav-container { display: flex; justify-content: space-between; align-items: center; height: 80px; }
.logo-container { display: flex; align-items: center; gap: 12px; }
.logo-mark {
  width: 48px; height: 48px; border-radius: 14px; display:flex; align-items:center; justify-content:center;
  background: var(--gradient-hero); color:white; font-weight: 900; letter-spacing: -1px; box-shadow: var(--shadow-md);
}
.logo-text strong { display:block; color: var(--primary); font-weight: 800; line-height: 1.1; }
.logo-text span { display:block; font-size: .78rem; color: var(--text-light); }
.desktop-nav ul { display: flex; gap: 22px; align-items: center; }
.desktop-nav a { color: var(--primary); font-size: .95rem; font-weight: 600; }
.desktop-nav a:hover { color: var(--secondary); }
.mobile-toggle { display:none; background:none; border:none; color:var(--primary); font-size:1.5rem; cursor:pointer; }
.mobile-menu-overlay { position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:1001; opacity:0; visibility:hidden; transition:.3s; }
.mobile-menu-overlay.active { opacity:1; visibility:visible; }
.mobile-menu-content { position:fixed; top:0; right:0; width:300px; max-width:86vw; height:100%; background:white; z-index:1002; transform:translateX(100%); transition:.3s; padding:20px; box-shadow:-4px 0 15px rgba(0,0,0,.1); }
.mobile-menu-content.active { transform:translateX(0); }
.mobile-menu-header { display:flex; justify-content:space-between; align-items:center; padding-bottom:20px; border-bottom:1px solid var(--gray-border); margin-bottom:28px; }
.mobile-nav-links { display:flex; flex-direction:column; gap:18px; }
.mobile-nav-links a { font-weight:700; color:var(--text-dark); }
.close-menu-btn { border:0; background:transparent; font-size:1.4rem; color:var(--text-light); cursor:pointer; }

.hero {
  background: var(--gradient-hero); color: white; padding: 90px 0 78px; position: relative; overflow: hidden;
}
.hero::before { content:""; position:absolute; width:360px; height:360px; border-radius:50%; background:rgba(255,255,255,.10); top:-150px; right:-100px; }
.hero::after { content:""; position:absolute; width:260px; height:260px; border-radius:50%; border:1px solid rgba(255,255,255,.28); bottom:-120px; left:7%; }
.hero-content { position:relative; z-index:1; max-width:900px; margin:0 auto; text-align:center; }
.hero-tagline { font-size:1rem; letter-spacing:2px; text-transform:uppercase; margin-bottom:16px; font-weight:700; color:rgba(255,255,255,.9); }
.hero h1 { font-size: clamp(2.25rem, 5vw, 4.4rem); font-weight: 900; line-height:1.05; margin-bottom:24px; letter-spacing:-.04em; }
.hero p { font-size:1.2rem; margin:0 auto 34px; opacity:.92; max-width:760px; }
.pill-badges { display:flex; justify-content:center; gap:12px; flex-wrap:wrap; margin-bottom:34px; }
.badge-pill, .badge { background:rgba(255,255,255,.18); backdrop-filter: blur(5px); padding:8px 16px; border-radius:999px; border:1px solid rgba(255,255,255,.36); font-size:.9rem; font-weight:700; }

.card { background:white; border:1px solid var(--gray-border); border-radius:var(--radius-lg); padding:28px; transition:all .25s ease; box-shadow:0 1px 0 rgba(0,0,0,.02); }
.card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:var(--secondary); }
.grid-2 { display:grid; grid-template-columns:repeat(2, 1fr); gap:24px; }
.grid-3 { display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; }
.grid-4 { display:grid; grid-template-columns:repeat(4, 1fr); gap:24px; }
.icon-box { width:58px; height:58px; border-radius:14px; background:rgba(30,64,175,.10); color:var(--primary); display:flex; align-items:center; justify-content:center; font-size:1.4rem; margin-bottom:18px; }
.section-title { max-width:780px; margin:0 auto 42px; text-align:center; }
.section-title h2 { font-size: clamp(1.9rem, 4vw, 2.7rem); color:var(--primary); line-height:1.15; letter-spacing:-.03em; margin-bottom:12px; }
.section-title p { color:var(--text-light); font-size:1.05rem; }

.catalog-toolbar { display:grid; grid-template-columns: 1.4fr .8fr .8fr auto; gap:14px; margin-bottom:24px; align-items:end; }
.form-group { margin-bottom:18px; }
.form-label { display:block; margin-bottom:8px; font-weight:700; color:var(--text-dark); font-size:.92rem; }
.form-input, .form-select, .form-textarea {
  width:100%; padding:12px 14px; border:1px solid var(--gray-border); border-radius:var(--radius-md); background:white; color:var(--text-dark); outline:none;
}
.form-textarea { min-height:110px; resize:vertical; }
.form-input:focus, .form-select:focus, .form-textarea:focus { border-color:var(--primary); box-shadow:0 0 0 4px rgba(30,64,175,.10); }
.form-hint { color:var(--text-light); font-size:.85rem; margin-top:6px; }
.alert { padding:12px 14px; border-radius:var(--radius-md); border:1px solid var(--gray-border); background:#F9FAFB; margin:14px 0; }
.alert-success { background:#ECFDF5; color:#047857; border-color:#A7F3D0; }
.alert-danger { background:#FEF2F2; color:#B91C1C; border-color:#FECACA; }
.alert-info { background:#EFF6FF; color:#1D4ED8; border-color:#BFDBFE; }

.product-card { display:flex; flex-direction:column; overflow:hidden; padding:0; }
.product-img { height:210px; background:linear-gradient(135deg, rgba(30,64,175,.10), rgba(192,132,252,.16)); display:flex; align-items:center; justify-content:center; padding:22px; }
.product-img img { max-height:170px; object-fit:contain; }
.product-body { padding:22px; display:flex; flex:1; flex-direction:column; }
.product-meta { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px; }
.product-chip { display:inline-flex; align-items:center; border-radius:999px; background:#EFF6FF; color:var(--primary); font-size:.75rem; font-weight:800; padding:5px 10px; }
.promo-chip { background:#F5F3FF; color:#7C3AED; }
.product-title { color:var(--primary); font-size:1.15rem; font-weight:800; line-height:1.25; margin-bottom:8px; }
.product-description { color:var(--text-light); font-size:.94rem; margin-bottom:16px; flex:1; }
.price-row { display:flex; align-items:baseline; gap:10px; margin-bottom:14px; flex-wrap:wrap; }
.price { font-size:1.35rem; font-weight:900; color:var(--text-dark); }
.old-price { color:var(--text-light); text-decoration:line-through; font-weight:600; }
.stock { color:var(--text-light); font-size:.85rem; margin-bottom:14px; }

.cart-fab { position:fixed; right:22px; bottom:22px; z-index:900; border-radius:999px; box-shadow:var(--shadow-lg); }
.cart-count { display:inline-flex; align-items:center; justify-content:center; min-width:23px; height:23px; border-radius:999px; background:white; color:var(--primary); font-size:.78rem; margin-left:6px; padding:0 6px; }
.cart-drawer { position:fixed; top:0; right:0; width:420px; max-width:96vw; height:100vh; background:white; z-index:1100; transform:translateX(105%); transition:.28s ease; box-shadow:-12px 0 40px rgba(0,0,0,.2); display:flex; flex-direction:column; }
.cart-drawer.open { transform:translateX(0); }
.cart-overlay { position:fixed; inset:0; background:rgba(15,23,42,.54); z-index:1090; opacity:0; pointer-events:none; transition:.25s; }
.cart-overlay.open { opacity:1; pointer-events:auto; }
.cart-header { padding:20px; border-bottom:1px solid var(--gray-border); display:flex; justify-content:space-between; align-items:center; }
.cart-body { padding:20px; overflow-y:auto; flex:1; }
.cart-footer { padding:20px; border-top:1px solid var(--gray-border); }
.cart-item { display:grid; grid-template-columns:62px 1fr auto; gap:12px; padding:14px 0; border-bottom:1px solid #E5E7EB; }
.cart-item img { width:62px; height:62px; object-fit:contain; background:#F9FAFB; border-radius:12px; padding:8px; }
.qty-control { display:inline-flex; align-items:center; border:1px solid var(--gray-border); border-radius:999px; overflow:hidden; }
.qty-control button { width:30px; height:30px; border:0; background:#F9FAFB; cursor:pointer; font-weight:800; }
.qty-control span { min-width:32px; text-align:center; font-weight:800; }
.close-btn { background:transparent; border:0; color:var(--text-light); font-size:1.4rem; cursor:pointer; }

.checkout-layout { display:grid; grid-template-columns:1.35fr .75fr; gap:28px; align-items:start; }
.summary-box { position:sticky; top:100px; }
.summary-line { display:flex; justify-content:space-between; gap:14px; padding:10px 0; border-bottom:1px solid #E5E7EB; }
.summary-line.total { font-size:1.25rem; font-weight:900; border-bottom:0; color:var(--primary); }

.auth-shell { min-height: calc(100vh - 80px); display:grid; grid-template-columns:1fr 1fr; }
.auth-brand { background:var(--gradient-hero); color:white; display:flex; align-items:center; padding:60px; position:relative; overflow:hidden; }
.auth-brand::after { content:""; position:absolute; width:300px; height:300px; background:rgba(255,255,255,.12); border-radius:50%; right:-90px; top:-60px; }
.auth-panel { display:flex; align-items:center; justify-content:center; padding:50px 20px; background:#F9FAFB; }
.auth-card { width:100%; max-width:480px; background:white; border:1px solid var(--gray-border); border-radius:var(--radius-xl); padding:30px; box-shadow:var(--shadow-lg); }
.tabs { display:grid; grid-template-columns:1fr 1fr; background:#F3F4F6; border-radius:12px; padding:5px; margin-bottom:22px; }
.tab-btn { border:0; border-radius:10px; padding:10px; cursor:pointer; font-weight:800; color:var(--text-light); background:transparent; }
.tab-btn.active { background:white; color:var(--primary); box-shadow:var(--shadow-sm); }

.admin-body { background:#F3F4F6; }
.admin-layout { display:grid; grid-template-columns:260px 1fr; min-height:100vh; }
.admin-sidebar { background:white; border-right:1px solid var(--gray-border); padding:22px; position:sticky; top:0; height:100vh; }
.admin-main { padding:30px; }
.admin-nav { display:flex; flex-direction:column; gap:8px; margin-top:24px; }
.admin-nav a { padding:12px 14px; border-radius:12px; color:var(--text-dark); font-weight:700; }
.admin-nav a:hover, .admin-nav a.active { background:#EFF6FF; color:var(--primary); }
.table-wrap { overflow:auto; border:1px solid var(--gray-border); border-radius:var(--radius-lg); background:white; }
table { border-collapse:collapse; width:100%; font-size:.93rem; }
th, td { text-align:left; padding:13px 14px; border-bottom:1px solid #E5E7EB; vertical-align:top; }
th { background:#F9FAFB; color:var(--primary); font-size:.82rem; text-transform:uppercase; letter-spacing:.04em; }
.status-pill { display:inline-flex; border-radius:999px; padding:5px 10px; font-weight:800; font-size:.76rem; background:#EFF6FF; color:var(--primary); }
.status-paid { background:#ECFDF5; color:#047857; }
.status-pending { background:#FFFBEB; color:#B45309; }
.status-danger { background:#FEF2F2; color:#B91C1C; }
.admin-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; }

footer { background:#F9FAFB; padding:70px 0 28px; border-top:1px solid var(--gray-border); }
.footer-grid { display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:30px; margin-bottom:40px; }
.footer-bottom { text-align:center; border-top:1px solid var(--gray-border); padding-top:22px; color:var(--text-light); font-size:.9rem; }
.whatsapp-float { position:fixed; width:58px; height:58px; bottom:92px; right:22px; background:var(--whatsapp-green); color:white; border-radius:50%; text-align:center; font-size:28px; box-shadow:2px 2px 10px rgba(0,0,0,.20); z-index:901; display:flex; align-items:center; justify-content:center; }

@media (max-width: 992px) {
  .grid-4, .grid-3 { grid-template-columns:repeat(2, 1fr); }
  .checkout-layout, .auth-shell, .admin-layout, .admin-grid { grid-template-columns:1fr; }
  .auth-brand { padding:44px 22px; }
  .summary-box, .admin-sidebar { position:static; height:auto; }
  .admin-nav { flex-direction:row; flex-wrap:wrap; }
  .catalog-toolbar { grid-template-columns:1fr 1fr; }
}
@media (max-width: 768px) {
  .desktop-nav { display:none; }
  .mobile-toggle { display:block; }
  .grid-4, .grid-3, .grid-2, .footer-grid, .catalog-toolbar { grid-template-columns:1fr; }
  .hero { padding:62px 0; }
  .section-padding { padding:58px 0; }
  .cart-drawer { width:100%; }
}