/* =========================================================
   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{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
html,body{ margin:0; padding:0; max-width:100%; overflow-x:hidden; }
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; -webkit-appearance:none; appearance:none; }
img{ max-width:100%; display:block; }
.container{ width:min(1280px, calc(100% - 32px)); margin:0 auto; max-width:100%; }

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:rgba(255,255,255,.85); backdrop-filter:saturate(180%) blur(14px); -webkit-backdrop-filter:saturate(180%) blur(14px);
  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:22px; padding:16px 0; }
.brand{ display:flex; align-items:center; gap:11px; flex-shrink:0; }
.brand img{ width:44px; height:44px; border-radius:50%; box-shadow:0 0 0 3px var(--gold-light), 0 4px 14px rgba(11,31,58,.18); }
.brand strong{ font-family:var(--font-display); font-size:1.2rem; color:var(--navy); white-space:nowrap; letter-spacing:-.01em; }
.brand small{ display:block; color:var(--gold-dark); font-weight:800; font-size:.6rem; letter-spacing:.1em; 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-color:var(--gold-light); color:var(--navy); padding:0 28px 0 12px; font-size:.82rem; font-weight:600;
  border-right:1px solid var(--border); max-width:120px; min-height:44px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%230B1F3A'%3E%3Cpath d='M5 7l5 6 5-6z'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 8px center;
}
.search-form input{ flex:1; border:0; padding:11px 14px; outline:0; min-width:0; background:#fff; color:var(--text); font-size:16px; }
.search-form button{ border:0; background:var(--navy); color:#fff; padding:0 20px; cursor:pointer; display:flex; align-items:center; min-width:48px; justify-content:center; }
.search-form button:hover{ background:var(--navy-2); }

.header-actions{ display:flex; align-items:center; gap:14px; flex-shrink:0; }
.lang-select{
  border:1.5px solid #C7CDD6; border-radius:999px; padding:8px 28px 8px 12px; background-color:var(--surface); color:var(--text);
  font-weight:600; font-size:.82rem; cursor:pointer; min-height:38px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%235B6573'%3E%3Cpath d='M5 7l5 6 5-6z'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 8px center;
}
.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); position:relative; }
.category-nav::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:1px; background:linear-gradient(90deg, transparent, rgba(232,201,136,.35), transparent); }
.category-nav .container{ display:flex; gap:6px; overflow-x:auto; padding:10px 0; scrollbar-width:none; }
.category-nav .container::-webkit-scrollbar{ display:none; }
.category-nav a{ display:inline-flex; align-items:center; gap:7px; color:#b9c6db; font-size:.84rem; font-weight:600; padding:7px 14px; border-radius:999px; white-space:nowrap; transition:background .15s, color .15s; }
.category-nav a i{ font-size:.8rem; color:var(--gold-line); }
.category-nav a:hover{ background:rgba(255,255,255,.08); color:#fff; }
.category-nav a.active{ background:linear-gradient(135deg,var(--gold),var(--gold-dark)); color:#fff; box-shadow:0 4px 14px rgba(183,121,31,.35); }
.category-nav a.active i{ 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{
  position:relative; overflow:hidden; min-height:min(74vh, 620px); display:flex; align-items:center;
  background:#081420;
}
/* Fondo: imagen de marca real (moneda + escudo + red de nodos).
   Si la cambias, actualiza la ruta de abajo. */
.hero::before{ content:''; position:absolute; inset:0; background:var(--hero-bg-img, url('/assets/hero-bg.jpg')) center right/cover no-repeat;
  filter:saturate(1.12) contrast(1.05); }
.hero::after{ content:''; position:absolute; inset:0; z-index:0;
  background:linear-gradient(100deg, rgba(5,12,22,.92) 0%, rgba(5,12,22,.72) 30%, rgba(5,12,22,.25) 58%, rgba(5,12,22,.05) 78%); }
.hero-inner{ position:relative; z-index:1; width:min(640px, calc(100% - 40px)); margin:0; padding:60px 0; text-align:left; color:#fff; }
@media (min-width:720px){ .hero-inner{ margin-left:clamp(24px, 6vw, 80px); } }
.hero-eyebrow{ display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,.1); border:1px solid rgba(232,201,136,.45); color:var(--gold-line); padding:7px 18px; border-radius:999px; font-weight:700; font-size:.76rem; letter-spacing:.06em; text-transform:uppercase; backdrop-filter:blur(6px); }
.hero h1{ color:#fff; font-size:clamp(2.1rem,5.2vw,3.6rem); line-height:1.08; margin:20px 0 14px; letter-spacing:-.02em; text-shadow:0 4px 24px rgba(0,0,0,.45); }
.hero p{ color:#dbe4f0; max-width:480px; margin:0; font-size:clamp(1rem,1.5vw,1.1rem); line-height:1.6; text-shadow:0 2px 12px rgba(0,0,0,.4); }
.btn-lg{ padding:15px 30px; font-size:1rem; }
.btn-outline-light{ background:rgba(255,255,255,.06); border:1.5px solid rgba(255,255,255,.6); color:#fff; backdrop-filter:blur(6px); }
.btn-outline-light:hover{ background:#fff; color:var(--navy); }

/* ---------- 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(32px,4.5vw,60px) 0; }
.section-head{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:20px; gap:12px; flex-wrap:wrap; }
.section-head h2{ font-size:clamp(1.4rem,2.6vw,1.85rem); letter-spacing:-.015em; }
.section-head a{ color:var(--gold-dark); font-weight:700; font-size:.86rem; }

.filter-bar{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 12px; margin-bottom:18px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:12px 14px; }
.filter-bar .f-group{ display:flex; align-items:center; gap:8px; min-width:0; }
.f-sort-wrap{ flex:1 1 190px; }
.f-sort-wrap select{ width:100%; }
.filter-price-group{ flex:1 1 220px; }
.filter-price-group input{ flex:1; min-width:0; width:auto; }
.filter-actions{ flex:0 0 auto; margin-left:auto; gap:8px; }
.filter-bar select{ border:1.5px solid #C7CDD6; border-radius:999px; padding:9px 30px 9px 14px; background-color:#fff; font-size:.84rem; font-weight:600; min-height:42px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%235B6573'%3E%3Cpath d='M5 7l5 6 5-6z'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 10px center; }
.filter-bar input[type="number"]{ border:1.5px solid #C7CDD6; border-radius:999px; padding:9px 12px; font-size:15px; min-height:42px; background:#fff; min-width:64px; }
.filter-sep{ color:var(--muted); flex-shrink:0; }
@media (max-width:680px){
  .filter-bar{ flex-direction:column; align-items:stretch; }
  .f-sort-wrap, .filter-price-group, .filter-actions{ flex-basis:100%; width:100%; }
  .filter-actions{ margin-left:0; }
  .filter-actions .btn{ flex:1; }
}

/* ---------- Listing grid / cards ---------- */
.grid{ display:grid; grid-template-columns:1fr; gap:12px; }
@media (min-width:560px){ .grid{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px; } }
@media (min-width:860px){ .grid{ grid-template-columns:repeat(3, minmax(0,1fr)); } }
@media (min-width:1140px){ .grid{ grid-template-columns:repeat(4, minmax(0,1fr)); gap:20px; } }
.card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; transition:transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s; display:flex; flex-direction:column; box-shadow:0 1px 3px rgba(11,31,58,.05); }
.card:hover{ transform:translateY(-5px); box-shadow:0 22px 40px -12px rgba(11,31,58,.22); border-color:rgba(232,201,136,.5); }
.card-media{ aspect-ratio:1.08; background:var(--gold-light) center/cover no-repeat; position:relative; }
.card-media::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, transparent 60%, rgba(11,31,58,.08)); }
.card-media .fav-btn{ position:absolute; top:11px; right:11px; width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.95); display:grid; place-items:center; border:0; cursor:pointer; color:var(--muted); box-shadow:0 6px 14px rgba(0,0,0,.14); transition:transform .15s; }
.card-media .fav-btn:hover{ transform:scale(1.1); }
.card-media .fav-btn.active{ color:var(--danger); }
.card-media .pill{ position:absolute; top:11px; left:11px; background:linear-gradient(135deg,var(--gold),var(--gold-dark)); color:#fff; font-size:.66rem; font-weight:800; padding:5px 10px; border-radius:999px; box-shadow:0 4px 10px rgba(183,121,31,.4); letter-spacing:.02em; }
.card-body{ padding:16px; display:flex; flex-direction:column; gap:7px; flex:1; }
.card-body .cat{ color:var(--gold-dark); font-size:.66rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; }
.card-body .title{ font-weight:700; font-size:.94rem; color:var(--navy); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.5em; line-height:1.32; letter-spacing:-.005em; }
.card-rating{ display:flex; align-items:center; gap:4px; font-size:.7rem; color:var(--muted); font-weight:600; }
.card-rating i{ color:var(--success); }
.card-rating .stars{ color:var(--gold); letter-spacing:1px; font-size:.72rem; }
.card-rating .rate-num{ color:var(--navy); font-weight:800; }
.card-price{ display:flex; align-items:baseline; gap:6px; margin-top:auto; padding-top:6px; border-top:1px dashed var(--border); }
.card-price strong{ color:var(--gold-dark); font-family:var(--font-display); font-size:1.28rem; font-weight:800; }
.card-price span{ color:var(--muted); font-size:.72rem; font-weight:700; }
.card-meta{ display:flex; align-items:center; justify-content:space-between; color:var(--muted); font-size:.72rem; }
.card-meta i{ color:var(--gold); margin-right:3px; }

.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; }

/* Tarjeta horizontal tipo "feed" en celulares angostos — una sola columna,
   imagen a la izquierda, info a la derecha. Mucho más legible y premium
   que cuadritos apretados en pantallas de 320-420px (iPhone SE, Android
   compactos, móviles chinos de gama media). */
@media (max-width:559px){
  .card{ flex-direction:row; align-items:stretch; border-radius:var(--radius); }
  .card-media{ width:128px; min-width:128px; max-width:128px; aspect-ratio:1; }
  .card-media::after{ display:none; }
  .card-media .pill{ font-size:.58rem; padding:3px 7px; top:7px; left:7px; }
  .card-media .fav-btn{ width:30px; height:30px; top:7px; right:7px; }
  .card-body{ padding:12px 14px; gap:5px; justify-content:center; }
  .card-body .title{ font-size:.9rem; -webkit-line-clamp:2; min-height:0; }
  .card-price{ border-top:none; padding-top:2px; }
  .card-price strong{ font-size:1.12rem; }
  .card-meta{ font-size:.7rem; }
}

/* ---------- 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 #C7CDD6; border-radius:var(--radius-sm); padding:12px 13px; outline:0;
  background:#fff; color:var(--text); width:100%; display:block; font-size:16px; min-height:46px;
}
.field select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%235B6573'%3E%3Cpath d='M5 7l5 6 5-6z'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; padding-right:36px;
}
.field textarea{ min-height:90px; resize:vertical; }
input[type="file"]{
  border:1.5px dashed #C7CDD6; border-radius:var(--radius-sm); padding:10px; background:#fafbfc; width:100%; font-size:14px;
}
.field input::placeholder, .field textarea::placeholder{ color:#9aa6b4; }
.field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--gold); box-shadow:0 0 0 3px var(--gold-light); }
.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(auto-fit, minmax(150px, 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(auto-fit, minmax(140px, 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; border-top:1px solid rgba(232,201,136,.15); }
footer .footer-top{ padding:44px 0 26px; display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:28px; }
footer h4{ color:#fff; font-size:.88rem; margin-bottom:14px; letter-spacing:.02em; }
footer a{ color:#9fb0c8; display:block; padding:5px 0; font-size:.86rem; transition:color .15s; }
footer a:hover{ color:var(--gold-line); }
.footer-payments{ display:flex; gap:14px; margin-top:16px; flex-wrap:wrap; }
.footer-payments span{ display:inline-flex; align-items:center; gap:6px; font-size:.74rem; font-weight:700; color:#b9c6db; background:rgba(255,255,255,.06); padding:6px 12px; border-radius:999px; border:1px solid rgba(255,255,255,.1); }
.footer-payments i{ color:var(--gold-line); }
.footer-langs{ margin-top:12px; font-size:.76rem; color:#7e93b3; }
footer .legal{ border-top:1px solid rgba(255,255,255,.08); padding:18px 0; text-align:center; font-size:.76rem; color:#8195af; }
@media (max-width:860px){ footer .footer-top{ grid-template-columns:1fr 1fr; } }
@media (max-width:480px){ footer .footer-top{ grid-template-columns:1fr; gap:22px; } }

/* ---------- 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: 860px){
  .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; }
  .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{ 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){
}