:root {
  --deep:    #0b2550;
  --mid:     #16458a;
  --cyan:    #2dc8e3;
  --gold:    #f3bf44;
  --ink:     #0a1a33;
  --surface: #ffffff;
  --cloud:   #f5f7fb;
  --line:    rgba(11,37,80,0.08);
  --accent:  #1f66c2;
  --mint:    #9ee6d0;
  --peach:   #f6d6b8;
}

*, *::before, *::after { box-sizing: border-box; }
html {
  overflow-x: hidden;
  width: 100%;
  max-width: 100%;
}

body {
  position: relative;
  overflow-x: hidden;
  width: 100%;
  max-width: 100%;
  font-family: "Outfit","Space Grotesk",system-ui,sans-serif;
  color: var(--ink);
  background:
    radial-gradient(circle at 12% 10%,rgba(158,230,208,0.35),transparent 42%),
    radial-gradient(circle at 88% 18%,rgba(246,214,184,0.35),transparent 40%),
    linear-gradient(140deg,#f6f7fb 0%,#eef2f8 40%,#e7edf6 100%);
}
body::before {
  content:""; position:fixed; inset:0; z-index:-1;
  background:
    radial-gradient(circle at 20% 20%,rgba(31,102,194,0.12),transparent 35%),
    radial-gradient(circle at 80% 30%,rgba(243,191,68,0.12),transparent 32%),
    radial-gradient(circle at 50% 90%,rgba(45,200,227,0.08),transparent 40%);
  filter:blur(0.3px);
}
h1,h2,h3,h4 { letter-spacing:-0.02em; }
main { font-family:"Outfit","Space Grotesk",system-ui,sans-serif; }

.glass {
  background:rgba(255,255,255,0.82); backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,0.7); box-shadow:0 18px 48px rgba(15,23,42,0.12);
}
.card-soft {
  border:1px solid var(--line); background:var(--surface);
  box-shadow:0 16px 40px rgba(15,23,42,0.08);
}
.gold-card {
  box-shadow: 0 22px 60px rgba(66,44,8,0.25);
}
/* 18K: leve toque anaranjado por los metales mezclados */
.gold-card-18 {
  background:
    radial-gradient(circle at 55% 60%, rgba(255,255,255,0.55), transparent 45%),
    radial-gradient(circle at 40% 45%, rgba(255,200,100,0.6), transparent 40%),
    linear-gradient(135deg, #ffe4a8 0%, #ffc958 45%, #f0a830 100%);
  box-shadow: 0 22px 60px rgba(66,44,8,0.25);
}
/* 24K: tono más amarillo-limpio, más puro */
.gold-card-24 {
  background:
    radial-gradient(circle at 55% 60%, rgba(255,255,255,0.55), transparent 45%),
    radial-gradient(circle at 40% 45%, rgba(255,228,80,0.6), transparent 40%),
    linear-gradient(135deg, #fff5a8 0%, #ffe050 45%, #f5c820 100%);
  box-shadow: 0 22px 60px rgba(66,44,8,0.25);
}
.gold-pill {
  background:linear-gradient(180deg,#1b2f57,#11284f);
  border:1px solid rgba(17,40,79,0.7); color:#e6efff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.12),0 6px 16px rgba(8,18,40,0.3);
}
.alert-pill {
  border:1px solid rgba(170,26,32,0.25); color:#991b1b;
  background:rgba(255,241,241,0.7);
}
.toggle-group {
  display:inline-flex; gap:.35rem; padding:.2rem; border-radius:999px;
  background:rgba(255,255,255,0.55); border:1px solid rgba(140,93,24,0.25);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.6);
}
.toggle-btn {
  border:1px solid rgba(140,93,24,0.3); border-radius:999px;
  padding:.35rem .8rem; font-size:12px; font-weight:700; color:#6b4308;
  background:rgba(255,255,255,0.85);
  transition:transform .2s ease,box-shadow .2s ease,background .2s ease;
}
.toggle-btn.active {
  background:linear-gradient(180deg,#ffe6a5,#f3c566);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.6),0 6px 16px rgba(66,44,8,0.25);
}
.news-card {
  border:1px solid rgba(100,90,70,0.18); background:#f5f0e8;
  box-shadow:0 8px 28px rgba(15,10,5,0.12);
}
/* Google Maps components */
.maps-card { box-shadow: 0 1px 6px rgba(32,33,36,0.1), 0 2px 10px rgba(32,33,36,0.06); }
.maps-action-btn {
  display: inline-flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 0.5rem 1rem; border-radius: 0.75rem;
  border: 1.5px solid #e8eaed; background: #fff;
  color: #1A73E8; font-size: 11px; font-weight: 600;
  transition: background 0.15s ease, box-shadow 0.15s ease;
  text-decoration: none; min-width: 72px;
}
.maps-action-btn:hover { background: #e8f0fe; box-shadow: 0 1px 4px rgba(26,115,232,0.2); }
.maps-review-card { box-shadow: 0 1px 3px rgba(32,33,36,0.08); }

.news-tag  { color:#dc2626; }
.news-alert { border:1px solid rgba(100,116,139,0.25); background:#ede8df; color:#1e293b; }
.news-live-prices { background:rgba(13,47,100,0.07); border:1px solid rgba(13,47,100,0.12); }
.cta-note {
  background:linear-gradient(135deg,#0d2f64,#1f66c2); color:#ffffff;
  box-shadow:0 12px 26px rgba(13,47,100,0.25);
}
.pill {
  border-radius:999px; padding:.35rem .8rem;
  border:1px solid rgba(15,23,42,0.08); background:rgba(255,255,255,0.65);
  backdrop-filter:blur(10px);
}
.hero-wrap {
  background:
    radial-gradient(circle at 15% 0%,rgba(255,255,255,0.25),transparent 55%),
    linear-gradient(130deg,#0d2f64,#15458a,#1f66c2);
}
.hero-shine::after {
  content:""; position:absolute; inset:-40%;
  background:radial-gradient(circle,rgba(255,255,255,0.35),transparent 60%);
  transform:translateX(-140%); filter:blur(18px); animation:sweep 6s linear infinite;
}
.soft-fade {
  opacity:0; transform:translateY(14px) scale(0.99);
  transition:opacity .7s ease,transform .7s ease;
}
.soft-fade.is-visible { opacity:1; transform:translateY(0) scale(1); }
.hover-lift { transition:transform .35s ease,box-shadow .35s ease; }
.hover-lift:hover { transform:translateY(-6px); box-shadow:0 20px 50px rgba(12,26,58,0.16); }
.btn-sheen { position:relative; overflow:hidden; }
.btn-sheen::after {
  content:""; position:absolute; inset:-80% -40%;
  background:linear-gradient(120deg,transparent 25%,rgba(255,255,255,0.35) 45%,transparent 65%);
  transform:translateX(-70%); transition:transform .6s ease;
}
.btn-sheen:hover::after { transform:translateX(60%); }

/* Trust cards sólidas */
.trust-blue  { background:#1f66c2; color:#fff; }
.trust-gold  { background:linear-gradient(135deg,#b8860b,#d4a017); color:#fff; }
.trust-dark  { background:#0b2550; color:#fff; }
.trust-icon-wrap {
  display:inline-flex; align-items:center; justify-content:center;
  width:2.25rem; height:2.25rem; border-radius:.625rem;
  background:rgba(255,255,255,0.18); flex-shrink:0;
}

.price-flash { animation:priceFlash .6s ease; }
@keyframes priceFlash { 0%{transform:translateY(2px);opacity:.6} 100%{transform:translateY(0);opacity:1} }
@media (prefers-reduced-motion:reduce) {
  .hero-shine::after,.floaty,.mini-candles .candle,.live-dot { animation:none!important; }
  .soft-fade { opacity:1; transform:none; }
}
.hint-arrow { animation:hintArrowNudge 1.8s ease-in-out infinite; }
.live-dot   { animation:pulse 1.25s ease-in-out infinite; }
.floaty     { animation:floaty 5s ease-in-out infinite; }
.ticker     { animation:ticker 18s linear infinite; }
.mini-candles .candle { animation:candlePulse 2.2s ease-in-out infinite; }

@keyframes hintArrowNudge { 0%,100%{transform:translateX(0)} 50%{transform:translateX(6px)} }
@keyframes pulse   { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.35);opacity:.7} }
@keyframes floaty  { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
@keyframes sweep   { 0%{transform:translateX(-140%)} 100%{transform:translateX(180%)} }
@keyframes ticker  { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
@keyframes candlePulse { 0%,100%{opacity:.95} 50%{opacity:.65} }

/* Skeleton */
.loading-skeleton {
  position:relative; color:transparent!important; border-radius:.375rem;
  overflow:hidden; display:inline-block; min-width:7rem; min-height:1.1em;
  pointer-events:none; user-select:none;
}
.loading-skeleton::after {
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg,rgba(160,110,10,.15) 0%,rgba(210,160,40,.5) 50%,rgba(160,110,10,.15) 100%);
  background-size:200% 100%; animation:skShimmer 1.5s ease-in-out infinite; border-radius:inherit;
}
.loading-skeleton.skeleton-dark::after {
  background:linear-gradient(90deg,rgba(255,255,255,.04) 0%,rgba(255,255,255,.13) 50%,rgba(255,255,255,.04) 100%);
  background-size:200% 100%;
}
@keyframes skShimmer { 0%{background-position:200% center} 100%{background-position:-200% center} }

/* Chart placeholder */
.chart-placeholder {
  display:flex; align-items:center; justify-content:center;
  color:#64748b; font-size:.8125rem; font-weight:600; gap:.5rem; height:100%;
}
@keyframes spin { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
.spin { animation:spin 1s linear infinite; }

/* Location banner — Google Maps style */
.loc-banner {
  background: #ffffff;
  border: 1.5px solid #e8eaed;
  box-shadow: 0 1px 6px rgba(32,33,36,0.1), 0 2px 10px rgba(32,33,36,0.06);
}
.loc-btn {
  background: #1A73E8;
  color: #ffffff;
  padding: 0.5rem 1.25rem;
  box-shadow: 0 2px 8px rgba(26,115,232,0.35);
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.loc-btn:hover {
  background: #1557b0;
  transform: scale(1.04);
  box-shadow: 0 4px 14px rgba(26,115,232,0.45);
}
.loc-btn:active {
  transform: scale(0.96);
  box-shadow: 0 1px 4px rgba(26,115,232,0.3);
}

/* Location dot */
.loc-dot {
  width:10px; height:10px; border-radius:50%; background:#16A34A;
  position:relative; flex-shrink:0;
}
.loc-dot::before {
  content:""; position:absolute; inset:-4px; border-radius:50%;
  background:rgba(22,163,74,.22); animation:locPulse 1.8s ease-in-out infinite;
}
@keyframes locPulse { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.8);opacity:0} }
.loc-pin-pulse { animation: pinPulse 1.6s ease-in-out infinite; transform-origin: center; }
@keyframes pinPulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.3)} }