/* =========================================================
   SuperCapitalismo Marketplace — Design System v2
   Tema claro · Identidad navy + oro (tomada del logo: escudo,
   moneda, flecha de crecimiento) · Inspirado en la claridad
   funcional de Amazon, sin copiar su paleta.
   ========================================================= */

:root{
  /* Navy: heredado del fondo del logo — ancla de marca, confianza */
  --navy:        #0B1F3A;
  --navy-2:      #13294B;
  --navy-soft:   #1C3A63;

  /* Oro: heredado de la moneda del logo. Más profundo y saturado
     que el dorado original (#f2c75c) para que tenga contraste real
     sobre fondo blanco — ese era el problema reportado. */
  --gold:        #B7791F;
  --gold-dark:   #8A5A12;
  --gold-light:  #FFF4E0;
  --gold-line:   #E8C988;

  --bg:          #F7F8FA;
  --surface:     #FFFFFF;
  --text:        #16202B;
  --muted:       #5B6573;
  --border:      #E4E7EC;
  --success:     #1E8E5A;
  --success-bg:  #E8F6EF;
  --danger:      #D64545;
  --danger-bg:   #FCEAEA;

  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 22px;
  --shadow: 0 8px 24px rgba(11,31,58,0.08);
  --shadow-lg: 0 18px 48px rgba(11,31,58,0.14);

  --font-display: 'Sora', ui-sans-serif, system-ui, sans-serif;
  --font-body: 'Inter', ui-sans-serif, system-ui, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
}
a{ color:inherit; text-decoration:none; }
button,input,select,textarea{ font:inherit; color:inherit; }
img{ max-width:100%; display:block; }
.container{ width:min(1280px, calc(100% - 32px)); margin:0 auto; }

h1,h2,h3,h4{ font-family:var(--font-display); margin:0; letter-spacing:-0.01em; color:var(--navy); }

::selection{ background:var(--gold-light); }

/* Focus visibility (accessibility) */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline:2px solid var(--gold); outline-offset:2px; border-radius:6px;
}
@media (prefers-reduced-motion: reduce){ *{ animation-duration:.001ms !important; transition-duration:.001ms !important; } }

/* ---------- Top utility bar (trust signals, like Amazon's top strip) ---------- */
.util-bar{
  background:var(--navy); color:#cfd9e8; font-size:.78rem;
  padding:6px 0;
}
.util-bar .container{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.util-bar span{ display:inline-flex; align-items:center; gap:6px; }
.util-bar i{ color:var(--gold); }

/* ---------- Header ---------- */
header.site-header{
  background:var(--surface); border-bottom:1px solid var(--border);
  position:sticky; top:0; z-index:40; box-shadow:0 1px 0 rgba(11,31,58,.02);
}
.header-row{ display:flex; align-items:center; gap:18px; padding:14px 0; }
.brand{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
.brand img{ width:42px; height:42px; border-radius:50%; box-shadow:0 0 0 2px var(--gold-line); }
.brand strong{ font-family:var(--font-display); font-size:1.12rem; color:var(--navy); white-space:nowrap; }
.brand small{ display:block; color:var(--gold-dark); font-weight:700; font-size:.62rem; letter-spacing:.06em; text-transform:uppercase; }

.search-form{ flex:1; display:flex; min-width:0; border:1.5px solid var(--navy); border-radius:999px; overflow:hidden; background:var(--surface); }
.search-form select{ border:0; background:var(--gold-light); color:var(--navy); padding:0 12px; font-size:.82rem; font-weight:600; border-right:1px solid var(--border); max-width:120px; }
.search-form input{ flex:1; border:0; padding:11px 14px; outline:0; min-width:0; }
.search-form button{ border:0; background:var(--navy); color:#fff; padding:0 20px; cursor:pointer; display:flex; align-items:center; }
.search-form button:hover{ background:var(--navy-2); }

.header-actions{ display:flex; align-items:center; gap:14px; flex-shrink:0; }
.lang-select{ border:1px solid var(--border); border-radius:999px; padding:8px 12px; background:var(--surface); font-weight:600; font-size:.82rem; cursor:pointer; }
.icon-link{ display:flex; flex-direction:column; align-items:center; gap:2px; color:var(--navy); font-size:.7rem; font-weight:600; position:relative; }
.icon-link i{ font-size:1.05rem; }
.icon-link .badge{ position:absolute; top:-6px; right:-10px; background:var(--gold); color:#fff; border-radius:999px; font-size:.62rem; padding:1px 5px; font-weight:800; }
.btn-token{
  display:inline-flex; align-items:center; gap:8px; background:linear-gradient(135deg,var(--gold),var(--gold-dark));
  color:#fff; padding:9px 16px; border-radius:999px; font-weight:800; font-size:.84rem; border:0; cursor:pointer;
  box-shadow:0 8px 18px rgba(183,121,31,.32);
}
.btn-token:hover{ filter:brightness(1.05); }

.category-nav{ background:var(--navy); }
.category-nav .container{ display:flex; gap:4px; overflow-x:auto; padding:9px 0; scrollbar-width:none; }
.category-nav .container::-webkit-scrollbar{ display:none; }
.category-nav a{ color:#cfd9e8; font-size:.84rem; font-weight:600; padding:6px 12px; border-radius:999px; white-space:nowrap; }
.category-nav a:hover, .category-nav a.active{ background:rgba(255,255,255,.08); color:#fff; }

/* ---------- Buttons (general) ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; border-radius:999px; padding:11px 20px; font-weight:700; cursor:pointer; border:1.5px solid transparent; font-size:.92rem; }
.btn-primary{ background:var(--navy); color:#fff; }
.btn-primary:hover{ background:var(--navy-2); }
.btn-gold{ background:linear-gradient(135deg,var(--gold),var(--gold-dark)); color:#fff; box-shadow:0 10px 24px rgba(183,121,31,.3); }
.btn-gold:hover{ filter:brightness(1.04); }
.btn-outline{ background:transparent; border-color:var(--navy); color:var(--navy); }
.btn-outline:hover{ background:var(--navy); color:#fff; }
.btn-ghost{ background:transparent; color:var(--muted); }
.btn-danger{ background:var(--danger); color:#fff; }
.btn-block{ width:100%; }
.btn:disabled{ opacity:.5; cursor:not-allowed; }
.btn-sm{ padding:7px 14px; font-size:.8rem; }

/* ---------- Hero ---------- */
.hero{ background:linear-gradient(120deg,var(--navy) 0%, var(--navy-2) 55%, var(--navy-soft) 100%); color:#fff; padding:clamp(36px,7vw,72px) 0; position:relative; overflow:hidden; }
.hero::after{ content:''; position:absolute; right:-80px; top:-80px; width:320px; height:320px; border-radius:50%;
  background:radial-gradient(circle, rgba(183,121,31,.45), transparent 70%); }
.hero-grid{ display:grid; grid-template-columns:1.2fr .8fr; gap:32px; align-items:center; position:relative; z-index:1; }
.hero-eyebrow{ display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,.08); border:1px solid rgba(232,201,136,.35); color:var(--gold-line); padding:6px 14px; border-radius:999px; font-weight:700; font-size:.78rem; letter-spacing:.03em; }
.hero h1{ color:#fff; font-size:clamp(1.9rem,4vw,3rem); line-height:1.08; margin:16px 0 12px; }
.hero p{ color:#cfd9e8; max-width:520px; font-size:1.02rem; }
.hero-stats{ display:flex; gap:26px; margin-top:22px; flex-wrap:wrap; }
.hero-stats div strong{ display:block; font-family:var(--font-display); font-size:1.4rem; color:var(--gold-line); }
.hero-stats div span{ color:#9fb0c8; font-size:.78rem; }
.hero-badge-coin{ justify-self:center; width:min(260px,80%); aspect-ratio:1; border-radius:50%; background:var(--surface); display:grid; place-items:center; box-shadow:var(--shadow-lg); border:6px solid var(--gold-light); }
.hero-badge-coin img{ width:78%; border-radius:50%; }

/* ---------- Trust strip ---------- */
.trust-strip{ background:var(--surface); border-bottom:1px solid var(--border); }
.trust-strip .container{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; padding:18px 0; }
.trust-item{ display:flex; align-items:center; gap:10px; font-size:.82rem; color:var(--muted); font-weight:600; }
.trust-item i{ color:var(--gold); font-size:1.1rem; }

/* ---------- Section heads ---------- */
.section{ padding:clamp(28px,4vw,52px) 0; }
.section-head{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:18px; gap:12px; flex-wrap:wrap; }
.section-head h2{ font-size:clamp(1.3rem,2.4vw,1.7rem); }
.section-head a{ color:var(--gold-dark); font-weight:700; font-size:.86rem; }

/* ---------- Listing grid / cards ---------- */
.grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; transition:transform .15s, box-shadow .15s; display:flex; flex-direction:column; }
.card:hover{ transform:translateY(-3px); box-shadow:var(--shadow); }
.card-media{ aspect-ratio:1.15; background:var(--gold-light) center/cover no-repeat; position:relative; }
.card-media .fav-btn{ position:absolute; top:10px; right:10px; width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.92); display:grid; place-items:center; border:0; cursor:pointer; color:var(--muted); box-shadow:0 4px 10px rgba(0,0,0,.12); }
.card-media .fav-btn.active{ color:var(--danger); }
.card-media .pill{ position:absolute; top:10px; left:10px; background:var(--navy); color:#fff; font-size:.68rem; font-weight:800; padding:4px 9px; border-radius:999px; }
.card-body{ padding:14px; display:flex; flex-direction:column; gap:6px; flex:1; }
.card-body .cat{ color:var(--gold-dark); font-size:.7rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em; }
.card-body .title{ font-weight:600; font-size:.92rem; color:var(--text); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.5em; }
.card-price{ display:flex; align-items:baseline; gap:6px; margin-top:auto; }
.card-price strong{ color:var(--gold-dark); font-family:var(--font-display); font-size:1.18rem; font-weight:800; }
.card-price span{ color:var(--muted); font-size:.72rem; }
.card-meta{ display:flex; align-items:center; justify-content:space-between; color:var(--muted); font-size:.74rem; }

.empty{ grid-column:1/-1; text-align:center; padding:48px 16px; color:var(--muted); border:1.5px dashed var(--border); border-radius:var(--radius); }
.empty i{ font-size:1.8rem; color:var(--gold-line); margin-bottom:10px; display:block; }

/* ---------- Skeleton loaders ---------- */
.skeleton{ background:linear-gradient(90deg,#eef0f3,#f6f7f9,#eef0f3); background-size:200% 100%; animation:shine 1.3s infinite; border-radius:var(--radius); }
@keyframes shine{ 0%{background-position:200% 0} 100%{background-position:-200% 0} }
.skeleton-card{ height:280px; }

/* ---------- Auth / forms ---------- */
.auth-wrap{ display:grid; place-items:center; padding:clamp(30px,6vw,60px) 0; }
.auth-card{ width:min(420px,100%); background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:32px; box-shadow:var(--shadow); }
.auth-card .brand{ justify-content:center; margin-bottom:18px; }
.auth-card h1{ font-size:1.3rem; text-align:center; margin-bottom:4px; }
.auth-card .sub{ text-align:center; color:var(--muted); font-size:.86rem; margin-bottom:18px; }
.field{ display:flex; flex-direction:column; gap:6px; margin-bottom:14px; }
.field label{ font-size:.8rem; font-weight:700; color:var(--text); }
.field input, .field select, .field textarea{
  border:1.5px solid var(--border); border-radius:var(--radius-sm); padding:11px 13px; outline:0; background:var(--surface);
}
.field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--gold); }
.field .error{ color:var(--danger); font-size:.76rem; }
.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.alert{ padding:11px 14px; border-radius:var(--radius-sm); font-size:.86rem; margin-bottom:14px; }
.alert-error{ background:var(--danger-bg); color:#a02d2d; }
.alert-success{ background:var(--success-bg); color:#176b46; }
.switch-link{ text-align:center; font-size:.86rem; color:var(--muted); margin-top:12px; }
.switch-link a{ color:var(--gold-dark); font-weight:700; }

/* ---------- Wallet ---------- */
.wallet-hero{ background:linear-gradient(120deg,var(--navy),var(--navy-2)); color:#fff; border-radius:var(--radius-lg); padding:30px; display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-bottom:24px; }
.wallet-hero .balance strong{ font-family:var(--font-display); font-size:2.6rem; color:var(--gold-line); }
.wallet-hero .balance span{ color:#9fb0c8; font-weight:700; letter-spacing:.04em; font-size:.8rem; }
.package-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.package-card{ background:var(--surface); border:1.5px solid var(--border); border-radius:var(--radius); padding:22px; text-align:center; display:flex; flex-direction:column; gap:8px; }
.package-card.popular{ border-color:var(--gold); box-shadow:0 0 0 3px var(--gold-light); position:relative; }
.package-card.popular::before{ content:'★ Popular'; position:absolute; top:-12px; left:50%; transform:translateX(-50%); background:var(--gold); color:#fff; font-size:.66rem; font-weight:800; padding:3px 10px; border-radius:999px; }
.package-card .tokens{ font-family:var(--font-display); font-size:1.7rem; color:var(--navy); font-weight:800; }
.package-card .usd{ color:var(--gold-dark); font-weight:700; }
.ledger-row{ display:flex; align-items:center; justify-content:space-between; padding:12px 0; border-bottom:1px solid var(--border); font-size:.86rem; }
.ledger-row .amt-pos{ color:var(--success); font-weight:800; }
.ledger-row .amt-neg{ color:var(--danger); font-weight:800; }

/* ---------- Listing detail ---------- */
.detail-grid{ display:grid; grid-template-columns:1fr 1fr; gap:36px; }
.detail-media{ border-radius:var(--radius-lg); overflow:hidden; background:var(--gold-light); aspect-ratio:1; display:grid; place-items:center; }
.detail-media img{ width:100%; height:100%; object-fit:cover; }
.detail-panel .cat{ color:var(--gold-dark); font-weight:800; font-size:.78rem; text-transform:uppercase; letter-spacing:.04em; }
.detail-panel h1{ font-size:clamp(1.5rem,3vw,2.1rem); margin:8px 0 14px; }
.detail-price{ display:flex; align-items:baseline; gap:8px; background:var(--gold-light); border:1px solid var(--gold-line); border-radius:var(--radius); padding:18px 20px; margin:14px 0; }
.detail-price strong{ font-family:var(--font-display); font-size:2.1rem; color:var(--gold-dark); }
.seller-box{ display:flex; align-items:center; gap:12px; padding:14px; border:1px solid var(--border); border-radius:var(--radius); margin:18px 0; }
.seller-box .avatar{ width:42px; height:42px; border-radius:50%; background:var(--navy); color:#fff; display:grid; place-items:center; font-weight:800; }
.action-row{ display:flex; gap:10px; flex-wrap:wrap; }

/* ---------- Dashboard / Admin / tables ---------- */
.dash-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:24px; }
.stat-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:20px; }
.stat-card strong{ display:block; font-family:var(--font-display); font-size:1.7rem; color:var(--navy); }
.stat-card span{ color:var(--muted); font-size:.8rem; font-weight:600; }
.table-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); overflow-x:auto; }
table{ width:100%; border-collapse:collapse; font-size:.86rem; }
th,td{ padding:13px 14px; text-align:left; border-bottom:1px solid var(--border); white-space:nowrap; }
th{ color:var(--muted); font-weight:700; text-transform:uppercase; font-size:.7rem; letter-spacing:.04em; }
.status-tag{ padding:3px 9px; border-radius:999px; font-size:.7rem; font-weight:800; }
.status-published{ background:var(--success-bg); color:var(--success); }
.status-draft{ background:#eef0f3; color:var(--muted); }
.status-rejected, .status-paused{ background:var(--danger-bg); color:var(--danger); }

/* ---------- Footer ---------- */
footer.site-footer{ background:var(--navy); color:#cfd9e8; margin-top:40px; }
footer .container{ padding:40px 0 24px; display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:24px; }
footer h4{ color:#fff; font-size:.9rem; margin-bottom:12px; }
footer a{ color:#9fb0c8; display:block; padding:4px 0; font-size:.86rem; }
footer .legal{ border-top:1px solid rgba(255,255,255,.1); padding:16px 0; text-align:center; font-size:.76rem; color:#8195af; }

/* ---------- Toast ---------- */
#toast-wrap{ position:fixed; bottom:18px; right:18px; display:flex; flex-direction:column; gap:8px; z-index:100; }
.toast{ background:var(--navy); color:#fff; padding:12px 18px; border-radius:var(--radius-sm); box-shadow:var(--shadow-lg); font-size:.86rem; font-weight:600; display:flex; align-items:center; gap:8px; animation:toast-in .2s ease; }
.toast.error{ background:var(--danger); }
.toast.success{ background:var(--success); }
@keyframes toast-in{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:translateY(0); } }

/* ---------- Misc ---------- */
.spc{ font-weight:800; color:var(--gold-dark); }
.center{ text-align:center; }
.flex{ display:flex; align-items:center; gap:10px; }
.gap-wrap{ flex-wrap:wrap; }
.mt-24{ margin-top:24px; } .mb-24{ margin-bottom:24px; }
.loader-page{ display:grid; place-items:center; min-height:60vh; color:var(--muted); }
.spinner{ width:36px; height:36px; border:3px solid var(--border); border-top-color:var(--gold); border-radius:50%; animation:spin .7s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* =========================================================
   RESPONSIVE — iPhone SE (320) hasta tablets/desktop, e
   incluso pantallas "raras" (plegables, ultra-anchas) usando
   clamp() y grids fluidos en lugar de breakpoints fijos donde
   sea posible.
   ========================================================= */
@media (max-width: 1100px){
  .grid{ grid-template-columns:repeat(3,1fr); }
  .package-grid{ grid-template-columns:repeat(2,1fr); }
  .dash-grid{ grid-template-columns:repeat(2,1fr); }
  footer .container{ grid-template-columns:1fr 1fr; }
}
@media (max-width: 860px){
  .hero-grid{ grid-template-columns:1fr; text-align:center; }
  .hero p{ margin-inline:auto; }
  .hero-stats{ justify-content:center; }
  .hero-badge-coin{ width:180px; }
  .detail-grid{ grid-template-columns:1fr; }
  .trust-strip .container{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 720px){
  .header-row{ flex-wrap:wrap; }
  .search-form{ order:3; width:100%; }
  .brand strong{ font-size:1rem; }
  .grid{ grid-template-columns:repeat(2,1fr); gap:10px; }
  .two-col{ grid-template-columns:1fr; }
}
@media (max-width: 480px){
  .container{ width:calc(100% - 20px); }
  .util-bar{ display:none; }
  .header-actions span.lbl{ display:none; }
  .grid{ grid-template-columns:repeat(2,1fr); gap:8px; }
  .card-body{ padding:10px; }
  .package-grid{ grid-template-columns:1fr 1fr; }
  .dash-grid{ grid-template-columns:1fr 1fr; }
  .hero h1{ font-size:1.6rem; }
}
/* Pantallas extra angostas (plegables cerrados, ~280px) */
@media (max-width: 300px){
  .grid, .package-grid, .dash-grid{ grid-template-columns:1fr; }
}
/* Pantallas muy anchas: limitar densidad para que no se vea vacío */
@media (min-width: 1600px){
  .grid{ grid-template-columns:repeat(5,1fr); }
}