/* ═══════════════════════════════════════════════════════════════════
   COMPRO PLATA SEVILLA — DESIGN SYSTEM v2 (Japanese Punk)
   ═══════════════════════════════════════════════════════════════════ */

/* ── DESIGN TOKENS ─────────────────────────────────────────────────── */
:root {
  /* Semantic tokens (new) */
  --bg-primary:        #0D0D0D;
  --bg-secondary:      #141414;
  --bg-dark:           #0D1117;
  --bg-card:           #0D1117;
  --text-primary:      #F5F5F0;
  --text-secondary:    #C0C0C0;
  --text-on-dark:      #F5F5F0;
  --border-color:      rgba(168,169,173,.25);
  --gold:              #A8A9AD;
  --gold-light:        #1a1e2a;
  --nav-bg:            #141414;
  --nav-text:          #C0C0C0;
  --price-band-bg:     #0a0a0a;
  --trust-bg:          #141414;
  --trust-border:      rgba(168,169,173,.25);
  --card-border:       rgba(168,169,173,.25);
  --review-bg:         #141414;
  --footer-bg:         #0a0a0a;
  --footer-text:       #aaaaaa;
  --table-header-bg:   #1A1A1A;
  --table-header-text: #A8A9AD;
  --table-row-alt:     #141414;
  --shadow:            0 2px 8px rgba(0,0,0,0.4);

  /* Bridge aliases — used throughout existing CSS rules */
  --bg:         #0D0D0D;
  --bg-2:       #141414;
  --bg-3:       #1A1A1A;
  --white:      #F5F5F0;
  --silver:     #C0C0C0;
  --neon:       #00FF88;
  --neon-dim:   rgba(0,255,136,.15);
  --red:        #C0392B;
  --red-dark:   #8B0000;
  --border:     rgba(168,169,173,.25);
  --border-hot: rgba(168,169,173,.7);
  --gold-dim:   rgba(168,169,173,.12);
  --gold-deep:  #A8A9AD;

  --font-head:   'Anton', Impact, 'Arial Black', Arial, sans-serif;
  --font-mono:   'JetBrains Mono', 'Courier New', Courier, monospace;
  --font-body:   'Inter', system-ui, -apple-system, sans-serif;

  --ticker-h:    36px;
  --nav-h:       56px;
  --radius:      4px;
  --container:   1400px;
}

/* Light mode — swap to bright palette while keeping punchy accents */
[data-theme="light"] {
  --bg-primary:   #F0F2F5;
  --bg-secondary: #E5E8EC;
  --bg-dark:      #1a1a1a;
  --bg-card:      #FFFFFF;
  --text-primary: #1A1A1A;
  --border-color: rgba(168,169,173,.3);
  --gold-light:   #eef0f5;
  --trust-bg:     #eef0f5;
  --review-bg:    #eef0f5;
  --table-row-alt: #eef0f5;
  --shadow:        0 2px 8px rgba(0,0,0,0.08);

  /* Bridge aliases in light mode */
  --bg:      #F0F2F5;
  --bg-2:    #EAEAE5;
  --bg-3:    #E0E0DA;
  --white:   #1A1A1A;
  --border:  rgba(168,169,173,.3);

  /* Contrast fixes for light bg — WCAG AA */
  --silver:         #555555;
  --text-secondary: #555555;
  --footer-text:    #555555;
}

/* Metal table rows in light mode */
[data-theme="light"] .metal-table tr { border-bottom-color: rgba(0,0,0,.08); }

/* ── BASE ──────────────────────────────────────────────────────────── */
html { scroll-behavior: smooth; }

body {
  font-family:      var(--font-body);
  background:       var(--bg, #0D0D0D);
  color:            var(--white, #F5F5F0);
  line-height:      1.6;
  font-size:        1rem;
  -webkit-font-smoothing: antialiased;
}

a       { color: var(--gold); text-decoration: none; }
a:hover { text-decoration: underline; }
img     { max-width: 100%; height: auto; display: block; }
*       { box-sizing: border-box; }

/* Scanline texture for dark sections — max 0.04 opacity */
.scanlines { position: relative; }
.scanlines::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent 0px,
    transparent 3px,
    rgba(0,0,0,.04) 3px,
    rgba(0,0,0,.04) 4px
  );
  pointer-events: none;
  z-index: 1;
}
.scanlines > * { position: relative; z-index: 2; }

/* ── TYPOGRAPHY ────────────────────────────────────────────────────── */
.font-head  { font-family: var(--font-head); }
.font-mono  { font-family: var(--font-mono); }
.all-caps   { text-transform: uppercase; letter-spacing: .06em; }
.price-num  { font-family: var(--font-mono); font-weight: 700; color: var(--gold); }

/* ── LAYOUT ────────────────────────────────────────────────────────── */
.container {
  max-width:     var(--container);
  width:         100%;
  margin:        0 auto;
  padding-left:  2rem;
  padding-right: 2rem;
}

/* ── SKIP LINK ─────────────────────────────────────────────────────── */
.skip-link {
  position: absolute; top: -40px; left: 0;
  background: var(--gold); color: #000;
  padding: .5rem 1rem; font-weight: 700; z-index: 9999;
  text-decoration: none; transition: top .15s;
}
.skip-link:focus { top: 0; }

/* ═══════════════════════════════════════════════════════════════════
   TICKER BAR
   ═══════════════════════════════════════════════════════════════════ */
.ticker-bar {
  background:  #1a0000;
  border-bottom: 2px solid var(--red);
  height:      var(--ticker-h);
  overflow:    hidden;
  position:    sticky;
  top:         0;
  z-index:     300;
  display:     flex;
  align-items: center;
  width:       100%;
  max-width:   100%;
}
.ticker-track {
  display:        inline-flex;
  align-items:    center;
  white-space:    nowrap;
  animation:      ticker-scroll 40s linear infinite;
  will-change:    transform;
}
.ticker-track:hover { animation-play-state: paused; }
.ticker-item {
  font-family:    var(--font-mono);
  font-size:      .78rem;
  font-weight:    700;
  color:          var(--gold);
  text-transform: uppercase;
  letter-spacing: .05em;
  padding:        0 2.5rem;
}
.ticker-item .ticker-sep { color: var(--red); margin: 0 .5rem; }
.ticker-item.hot         { color: var(--red); }

@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ═══════════════════════════════════════════════════════════════════
   NAVIGATION
   ═══════════════════════════════════════════════════════════════════ */
.site-header {
  background:    var(--bg-2, #141414);
  border-bottom: 1px solid var(--border, rgba(168,169,173,.25));
  height:        var(--nav-h);
  position:      sticky;
  top:           var(--ticker-h);
  z-index:       200;
}
.header-inner {
  height:          var(--nav-h);
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             16px;
  max-width:       1440px;
  width:           100%;
  padding:         0 24px;
  margin:          0 auto;
}

/* Logo */
.logo {
  display:     flex;
  align-items: center;
  gap:         .6rem;
  text-decoration: none;
  flex-shrink: 0;
}
.logo-icon {
  font-size:  1.5rem;
  color:      var(--gold);
  line-height: 1;
}
.logo-text {
  font-family:    var(--font-head);
  font-size:      1rem;
  color:          var(--gold);
  text-transform: uppercase;
  letter-spacing: .04em;
  line-height:    1.15;
}
.logo-text small {
  display:     block;
  font-size:   .62rem;
  color:       var(--silver);
  font-family: var(--font-body);
  font-weight: 400;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* Nav phone (shown in nav on desktop) */
.nav-phone {
  font-family:    var(--font-mono);
  font-size:      .82rem;
  font-weight:    700;
  color:          var(--red);
  text-decoration: none;
  letter-spacing: .03em;
  border:         1px solid var(--red);
  padding:        .3rem .75rem;
  border-radius:  var(--radius);
  flex-shrink:    0;
  white-space:    nowrap;
  transition:     background .15s, color .15s;
}

/* Prevent any tel: link from wrapping mid-number */
a[href^="tel"] { white-space: nowrap; }
.nav-phone:hover {
  background:      var(--red);
  color:           #fff;
  text-decoration: none;
}

/* Main nav links */
.main-nav {
  flex:             1;
  display:          flex;
  justify-content:  center;
}
.main-nav ul {
  display:     flex;
  flex-wrap:   nowrap;
  align-items: center;
  gap:         16px;
  list-style:  none;
  margin:      0;
  padding:     0;
  white-space: nowrap;
}
.main-nav a {
  font-size:       10.5px;
  font-weight:     600;
  text-transform:  uppercase;
  letter-spacing:  0.5px;
  color:           var(--silver);
  padding:         .3rem .5rem;
  border-radius:   var(--radius);
  white-space:     nowrap;
  transition:      color .15s, background .15s;
  text-decoration: none;
}
.main-nav a:hover,
.main-nav a[aria-current="page"] {
  color:      var(--silver);
  background: var(--gold-dim);
  text-decoration: none;
}

/* Theme + lang toggles */
.nav-controls {
  display:     flex;
  align-items: center;
  gap:         10px;
  flex-shrink: 0;
  white-space: nowrap;
}

/* Language switcher */
.lang-switcher {
  display:     flex;
  align-items: center;
  gap:         6px;
}
.lang-active {
  color:          var(--gold);
  font-size:      12px;
  font-weight:    600;
  font-family:    var(--font-body);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.lang-link {
  color:          var(--silver);
  font-size:      12px;
  font-family:    var(--font-body);
  font-weight:    600;
  text-decoration: none;
  border:         1px solid var(--border);
  padding:        3px 8px;
  border-radius:  4px;
  text-transform: uppercase;
  letter-spacing: .04em;
  transition:     border-color .2s, color .2s;
}
.lang-link:hover {
  border-color:    var(--gold);
  color:           var(--gold);
  text-decoration: none;
}

/* Theme toggle */
.theme-toggle {
  background:    transparent;
  border:        1px solid var(--border);
  color:         var(--silver);
  width:         30px; height: 30px;
  border-radius: 50%;
  font-size:     .85rem;
  cursor:        pointer;
  display:       flex;
  align-items:   center;
  justify-content: center;
  transition:    border-color .15s;
  flex-shrink:   0;
}
.theme-toggle:hover { border-color: var(--gold); }

/* Show/hide sun/moon based on active theme */
[data-theme="dark"]  .icon-sun  { display: none; }
[data-theme="dark"]  .icon-moon { display: block; }
[data-theme="light"] .icon-sun  { display: block; }
[data-theme="light"] .icon-moon { display: none; }

#theme-toggle {
  background: transparent;
  border:     1px solid var(--border);
  color:      var(--silver);
  width:      30px; height: 30px;
  border-radius: 50%;
  font-size:  .9rem;
  cursor:     pointer;
  display:    flex;
  align-items: center;
  justify-content: center;
  transition: border-color .15s;
}
#theme-toggle:hover { border-color: var(--gold); }

/* Mobile hamburger */
.nav-toggle {
  display:         none;
  flex-direction:  column;
  gap:             5px;
  background:      transparent;
  border:          none;
  cursor:          pointer;
  padding:         6px;
}
.nav-toggle span {
  display:    block;
  width:      22px; height: 2px;
  background: var(--gold);
  transition: transform .2s, opacity .2s;
}

/* ═══════════════════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════════════════ */
.btn {
  display:         inline-flex;
  align-items:     center;
  gap:             .5rem;
  padding:         .7rem 1.4rem;
  border-radius:   var(--radius);
  font-family:     var(--font-head);
  font-size:       .95rem;
  letter-spacing:  .06em;
  text-transform:  uppercase;
  cursor:          pointer;
  border:          2px solid transparent;
  text-decoration: none;
  transition:      transform .15s, box-shadow .15s, background .15s;
  font-weight:     400; /* Anton is already heavy */
  white-space:     nowrap;
}
.btn:hover          { transform: translateY(-2px); text-decoration: none; }
.btn-red            { background: var(--red);  color: #fff; border-color: var(--red); }
.btn-red:hover      { box-shadow: 0 4px 20px rgba(192,57,43,.5); }
.btn-gold           { background: var(--gold); color: #000; border-color: var(--gold); }
.btn-gold:hover     { box-shadow: 0 4px 20px rgba(255,215,0,.5); }
.btn-neon           { background: #00A550; color: #fff; border-color: #00A550; }
.btn-neon:hover     { box-shadow: 0 4px 20px rgba(0,165,80,.5); }
.btn-outline        { background: transparent; color: var(--gold); border-color: var(--gold); }
.btn-outline:hover  { background: var(--gold-dim); }
.btn-whatsapp       { background: #00A550; color: #fff; border-color: #00A550; }
.btn-whatsapp:hover { box-shadow: 0 4px 20px rgba(0,165,80,.5); }
.btn-lg             { padding: .9rem 2rem; font-size: 1.1rem; }
.btn-xl             { padding: 1.1rem 2.5rem; font-size: 1.25rem; }

/* ═══════════════════════════════════════════════════════════════════
   HERO
   ═══════════════════════════════════════════════════════════════════ */
.hero-punk {
  min-height:       30vh;
  background-color: #0D0D0D;
  background-size:  cover;
  background-position: center;
  display:          flex;
  flex-direction:   column;
  align-items:      center;
  justify-content:  center;
  text-align:       center;
  padding:          3rem 1.25rem;
  position:         relative;
  overflow:         hidden;
}

/* Dark overlay — ensures text always readable over the photo */
.hero-punk::before {
  content:  '';
  position: absolute;
  inset:    0;
  background: rgba(0,0,0,.75);
  z-index:  0;
  pointer-events: none;
}

.hero-stamp {
  margin-bottom: 1.5rem;
  filter: drop-shadow(0 0 20px rgba(168,169,173,.3));
  animation: stamp-pulse 3s ease-in-out infinite;
}
@keyframes stamp-pulse {
  0%, 100% { filter: drop-shadow(0 0 20px rgba(168,169,173,.3)); }
  50%       { filter: drop-shadow(0 0 35px rgba(255,215,0,.6)); }
}

.hero-headline {
  font-family:    var(--font-head);
  font-size:      clamp(2.5rem, 7vw, 5rem);
  line-height:    .92;
  color:          #F5F5F0; /* hardcoded — must always be light on dark overlay */
  text-transform: uppercase;
  letter-spacing: .02em;
  margin-bottom:  .5rem;
}
.hero-headline .hl-gold { color: var(--gold); }
.hero-headline .hl-red  { color: var(--red);  }

.hero-sub {
  font-family:    var(--font-head);
  font-size:      clamp(1.2rem, 3.5vw, 1.75rem);
  color:          var(--gold);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom:  2rem;
}

/* Live price in hero — dark bg ensures gold text passes WCAG AA */
.hero-price {
  background:    rgba(0,0,0,.6);
  border:        2px solid #A8A9AD;
  border-radius: var(--radius);
  padding:       1.2rem 2rem;
  margin-bottom: 2rem;
  display:       inline-block;
  position:      relative;
}
.hero-price::before {
  content:        '● EN DIRECTO';
  position:       absolute;
  top:            -11px;
  left:           50%;
  transform:      translateX(-50%);
  background:     var(--red);
  color:          #fff;
  font-size:      .65rem;
  font-family:    var(--font-head);
  letter-spacing: .1em;
  padding:        2px 10px;
  border-radius:  20px;
}
.hero-price-label {
  font-family:    var(--font-mono);
  font-size:      .75rem;
  color:          var(--silver);
  text-transform: uppercase;
  letter-spacing: .1em;
  margin-bottom:  .25rem;
}
.hero-price-value {
  font-family:    var(--font-mono);
  font-size:      clamp(2rem, 5vw, 3rem);
  font-weight:    700;
  color:          var(--gold);
  line-height:    1;
}
.hero-price-change {
  font-family: var(--font-mono);
  font-size:   .78rem;
  color:       #00cc66;
  margin-top:  .3rem;
}

.hero-ctas {
  display:        flex;
  flex-wrap:      wrap;
  gap:            .75rem;
  justify-content: center;
  margin-bottom:  2rem;
}

/* Trust strip */
.hero-trust {
  display:        flex;
  flex-wrap:      wrap;
  gap:            1.25rem;
  justify-content: center;
  margin-top:     .5rem;
}
.hero-trust-item {
  font-family:    var(--font-body);
  font-size:      .8rem;
  font-weight:    600;
  color:          var(--silver);
  text-transform: uppercase;
  letter-spacing: .06em;
  display:        flex;
  align-items:    center;
  gap:            .4rem;
}
.hero-trust-item .badge-dot {
  width: 6px; height: 6px;
  background: var(--gold);
  border-radius: 50%;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════
   PRICE MATRIX SECTION
   ═══════════════════════════════════════════════════════════════════ */
.price-matrix-section {
  background:    var(--bg-2);
  padding:       3rem 0;
  border-top:    3px solid var(--gold);
  border-bottom: 3px solid var(--gold);
}
.section-label {
  font-family:    var(--font-head);
  font-size:      .8rem;
  color:          var(--gold);
  text-transform: uppercase;
  letter-spacing: .15em;
  text-align:     center;
  margin-bottom:  1.75rem;
  display:        flex;
  align-items:    center;
  justify-content: center;
  gap:            .75rem;
}
.section-label::before,
.section-label::after {
  content:    '';
  flex:       1;
  max-width:  120px;
  height:     1px;
  background: var(--border-hot);
}

/* Karat cards */
.karat-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap:                   1rem;
  margin-bottom:         2rem;
}
.karat-card {
  border:           3px solid var(--border-hot);
  border-radius:    var(--radius);
  overflow:         hidden;
  background:       var(--bg-card);
  box-shadow:       0 4px 24px rgba(168,169,173,.08);
  transition:       box-shadow .2s, border-color .2s;
}
.karat-card:hover {
  border-color: var(--gold);
  box-shadow:   0 6px 32px rgba(168,169,173,.2);
}
.karat-card-header {
  background:     var(--gold);
  color:          #000;
  padding:        .85rem 1.25rem;
  display:        flex;
  align-items:    center;
  justify-content: space-between;
}
.karat-card-title {
  font-family:    var(--font-head);
  font-size:      1.15rem;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.karat-card-note {
  font-size:  .68rem;
  color:      rgba(0,0,0,.6);
  font-family: var(--font-body);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.karat-tramos { width: 100%; border-collapse: collapse; }
.karat-tramos tr { border-bottom: 1px solid rgba(168,169,173,.08); }
.karat-tramos tr:last-child { border-bottom: none; }
.karat-tramos td {
  padding:     .65rem 1.25rem;
  font-size:   .85rem;
  vertical-align: middle;
}
.karat-tramos .td-range {
  color:       var(--silver);
  font-family: var(--font-body);
}
.karat-tramos .td-price {
  text-align:  right;
  font-family: var(--font-mono);
  font-weight: 700;
  color:       var(--gold);
  font-size:   .95rem;
  white-space: nowrap;
}
.karat-tramos tr.tramo-top {
  background: rgba(168,169,173,.07);
}
.karat-tramos tr.tramo-top .td-price {
  font-size: 1.05rem;
}
.tramo-star {
  color:       var(--red);
  font-size:   .65rem;
  vertical-align: super;
  margin-left: 2px;
}

/* Plata + Platino side tables */
.metal-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   1rem;
  margin-bottom:         1.75rem;
}
.metal-table-wrap {
  border:        2px solid var(--border);
  border-radius: var(--radius);
  overflow:      hidden;
  background:    var(--bg-card);
}
.metal-table-header {
  background:     #1a1a1a;
  border-bottom:  2px solid rgba(255,255,255,.15);
  padding:        .65rem 1rem;
  display:        flex;
  align-items:    center;
  justify-content: space-between;
}
.metal-table-header.platinum { border-bottom-color: rgba(255,255,255,.15); }
.metal-title {
  font-family:    var(--font-head);
  font-size:      .9rem;
  color:          #ffffff;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.metal-table { width: 100%; border-collapse: collapse; }
.metal-table td { padding: .55rem 1rem; font-size: .85rem; }
.metal-table tr { border-bottom: 1px solid rgba(255,255,255,.04); }
.metal-table .td-pureza { color: var(--silver); }
.metal-table .td-price  { text-align: right; font-family: var(--font-mono); font-weight: 700; color: var(--silver); white-space: nowrap; }

/* Red CTA banner */
.red-banner {
  background:  var(--red);
  padding:     1rem 1.25rem;
  text-align:  center;
  display:     flex;
  align-items: center;
  justify-content: center;
  flex-wrap:   wrap;
  gap:         1rem;
  margin-top:  .5rem;
}
.red-banner-text {
  font-family:    var(--font-head);
  font-size:      1rem;
  color:          #fff;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.red-banner-phone {
  font-family:    var(--font-mono);
  font-size:      1.1rem;
  font-weight:    700;
  color:          var(--gold);
  text-decoration: none;
}
.red-banner-phone:hover { text-decoration: underline; }

/* ═══════════════════════════════════════════════════════════════════
   TRUST WALL
   ═══════════════════════════════════════════════════════════════════ */
.trust-wall {
  background: var(--bg);
  padding:    2.5rem 0 1.5rem;
}
.trust-badges-grid {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   .75rem;
  margin-bottom:         2rem;
}
.trust-badge {
  border:        2px solid var(--border-hot);
  border-radius: var(--radius);
  background:    var(--bg-card);
  padding:       1.1rem;
  text-align:    center;
  transition:    border-color .2s, box-shadow .2s;
}
.trust-badge:hover {
  border-color: var(--gold);
  box-shadow:   0 4px 20px var(--gold-dim);
}
.trust-badge-icon {
  font-size:     1.75rem;
  margin-bottom: .5rem;
  line-height:   1;
}
.trust-badge-title {
  font-family:    var(--font-head);
  font-size:      .9rem;
  color:          var(--gold);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom:  .2rem;
}
.trust-badge-sub {
  font-size:  .72rem;
  color:      var(--silver);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
}

/* Scrolling items strip */
.items-strip-wrap {
  overflow:   hidden;
  background: var(--red-dark);
  border-top: 2px solid var(--red);
  border-bottom: 2px solid var(--red);
  padding:    .65rem 0;
}
.items-strip-track {
  display:     inline-flex;
  align-items: center;
  white-space: nowrap;
  animation:   ticker-scroll 25s linear infinite;
}
.items-strip-item {
  font-family:    var(--font-head);
  font-size:      .85rem;
  color:          var(--gold);
  text-transform: uppercase;
  letter-spacing: .1em;
  padding:        0 1.5rem;
}
.items-strip-item .sep { color: var(--red); margin: 0 .5rem; }

/* ═══════════════════════════════════════════════════════════════════
   WHAT WE BUY — Item Cards
   ═══════════════════════════════════════════════════════════════════ */
.items-section {
  background: var(--bg-2);
  padding:    3rem 0;
}
.items-grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   1rem;
}
.item-card {
  border:        3px solid var(--border);
  border-left:   4px solid var(--gold);
  border-radius: var(--radius);
  background:    var(--bg-card);
  overflow:      hidden;
  display:       flex;
  flex-direction: column;
  transition:    border-color .2s, transform .2s, box-shadow .2s;
}
.item-card:hover {
  border-color:  var(--gold);
  transform:     translateY(-3px);
  box-shadow:    0 8px 32px rgba(168,169,173,.15);
}
.item-card-img {
  width:      100%;
  height:     180px;
  object-fit: cover;
  display:    block;
  flex-shrink: 0;
}
.item-card-body {
  padding: 1rem 1.1rem 1.2rem;
  flex:    1;
}
.item-card h3 {
  font-family:    var(--font-head);
  font-size:      1rem;
  color:          var(--gold);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom:  .35rem;
}
.item-card h3 a { color: inherit; }
.item-price {
  font-family:    var(--font-mono);
  font-size:      .95rem;
  font-weight:    700;
  color:          var(--neon);
  margin-bottom:  .3rem;
}
.item-sub {
  font-size:  .78rem;
  color:      var(--silver);
  line-height: 1.4;
  margin: 0;
}

/* ═══════════════════════════════════════════════════════════════════
   TERMINAL TABLE — Coins & Bullion
   ═══════════════════════════════════════════════════════════════════ */
.terminal-section {
  background: var(--bg);
  padding:    3rem 0;
}
.terminal-panel {
  background:    var(--bg-card);
  border:        2px solid rgba(168,169,173,.3);
  border-radius: var(--radius);
  overflow:      hidden;
  font-family:   var(--font-mono);
}
.terminal-header {
  background:  var(--bg-3);
  border-bottom: 1px solid rgba(168,169,173,.2);
  padding:     .6rem 1rem;
  display:     flex;
  align-items: center;
  gap:         .5rem;
}
.terminal-dot {
  width:         10px; height: 10px;
  border-radius: 50%;
  flex-shrink:   0;
}
.terminal-dot-r { background: var(--red); }
.terminal-dot-y { background: var(--gold); }
.terminal-dot-g { background: var(--neon); }
.terminal-title {
  font-size:      .75rem;
  color:          var(--silver);
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-left:    .5rem;
}
.terminal-divider {
  border:     none;
  border-top: 1px solid rgba(168,169,173,.15);
  margin:     0;
}
.terminal-table { width: 100%; border-collapse: collapse; }
.terminal-table th {
  padding:        .5rem 1rem;
  text-align:     left;
  font-size:      .68rem;
  color:          var(--silver);
  text-transform: uppercase;
  letter-spacing: .1em;
  border-bottom:  1px solid rgba(168,169,173,.15);
  font-weight:    400;
}
.terminal-table th.th-r  { text-align: right; }
.terminal-table td {
  padding:   .55rem 1rem;
  font-size: .82rem;
  color:     var(--white);
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.terminal-table tr:last-child td { border-bottom: none; }
.terminal-table tr:hover td { background: rgba(168,169,173,.04); }
.td-buy  { text-align: right; color: #00cc66; font-weight: 700; white-space: nowrap; }
.td-sell { text-align: right; color: var(--gold); font-weight: 700; white-space: nowrap; }

.terminal-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   1.25rem;
}

/* ═══════════════════════════════════════════════════════════════════
   REVIEWS
   ═══════════════════════════════════════════════════════════════════ */
.reviews-section {
  background: var(--bg-2);
  padding:    3rem 0;
  border-top: 2px solid var(--border);
}
.reviews-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   1.25rem;
  margin-bottom:         1.5rem;
}
.review-card {
  border:        2px solid var(--border);
  border-left:   4px solid var(--gold);
  border-radius: var(--radius);
  background:    var(--bg-card);
  padding:       1.5rem;
  position:      relative;
}
.review-card::before {
  content:     '"';
  font-family: Georgia, serif;
  font-size:   5rem;
  line-height: 1;
  color:       rgba(168,169,173,.15);
  position:    absolute;
  top:         -.5rem;
  left:        1rem;
  user-select: none;
}
.review-stars {
  color:       var(--red);
  font-size:   1rem;
  margin-bottom: .75rem;
  letter-spacing: .1em;
}
.review-text {
  font-size:   .9rem;
  color:       var(--white);
  line-height: 1.7;
  font-style:  italic;
  margin-bottom: .75rem;
  position:    relative;
  z-index:     1;
}
.review-author {
  font-size:      .75rem;
  color:          var(--silver);
  font-weight:    600;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.reviews-aggregate {
  text-align:  center;
  border:      2px solid var(--border);
  border-radius: var(--radius);
  background:  var(--bg-card);
  padding:     1.25rem;
}
.agg-score {
  font-family:    var(--font-head);
  font-size:      3rem;
  color:          var(--gold);
  line-height:    1;
}
.agg-stars { color: var(--red); font-size: 1.1rem; margin: .3rem 0; }
.agg-count {
  font-size:  .78rem;
  color:      var(--silver);
  text-transform: uppercase;
  letter-spacing: .06em;
}

/* ═══════════════════════════════════════════════════════════════════
   HOW IT WORKS
   ═══════════════════════════════════════════════════════════════════ */
.how-section {
  background: var(--bg);
  padding:    3rem 0;
  position:   relative;
}
.how-grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   2rem;
  text-align:            center;
  position:              relative;
}
.how-step-num {
  font-family:       var(--font-head);
  font-size:         clamp(5rem, 10vw, 8rem);
  line-height:       .9;
  color:             transparent;
  -webkit-text-stroke: 2px var(--gold);
  text-stroke:         2px var(--gold);
  margin-bottom:     .75rem;
  user-select:       none;
}
.how-step-title {
  font-family:    var(--font-head);
  font-size:      1.1rem;
  color:          var(--gold);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom:  .6rem;
}
.how-step-desc {
  font-size:  .88rem;
  color:      var(--silver);
  line-height: 1.6;
  max-width:  240px;
  margin:     0 auto;
}

/* ═══════════════════════════════════════════════════════════════════
   MAP + CONTACT
   ═══════════════════════════════════════════════════════════════════ */
.map-contact {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  min-height:            480px;
}
.map-col iframe {
  width:   100%;
  height:  100%;
  display: block;
  min-height: 400px;
  border:  none;
  filter:  invert(1) hue-rotate(180deg); /* dark map on dark bg */
}
.contact-dossier {
  background: var(--bg-2);
  border-left: 3px solid var(--gold);
  padding:    2.5rem 2rem;
  display:    flex;
  flex-direction: column;
  justify-content: center;
}
.dossier-title {
  font-family:    var(--font-head);
  font-size:      1rem;
  color:          var(--gold);
  text-transform: uppercase;
  letter-spacing: .1em;
  margin-bottom:  1rem;
  padding-bottom: .75rem;
  border-bottom:  1px solid var(--border);
}
.dossier-row {
  display:       flex;
  gap:           .75rem;
  margin-bottom: .65rem;
  font-size:     .9rem;
  color:         var(--white);
}
.dossier-icon { flex-shrink: 0; font-size: 1rem; }
.dossier-label {
  font-family: var(--font-mono);
  font-size:   .7rem;
  color:       var(--silver);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: .15rem;
}
.dossier-value { font-size: .9rem; color: var(--white); }
.dossier-value a { color: var(--gold); }
.dossier-value .phone { color: var(--red); font-family: var(--font-mono); font-weight: 700; font-size: 1.05rem; }
.dossier-divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 1rem 0;
}
.dossier-ctas { display: flex; flex-direction: column; gap: .65rem; margin-top: 1rem; }

/* ═══════════════════════════════════════════════════════════════════
   SEO KEYWORD SECTION
   ═══════════════════════════════════════════════════════════════════ */
.seo-section {
  background:   var(--bg-3);
  border-top:   2px solid var(--border);
  padding:      2.5rem 0;
  text-align:   center;
}
.keyword-grid {
  display:        flex;
  flex-wrap:      wrap;
  gap:            .5rem;
  justify-content: center;
  margin-bottom:  1.5rem;
}
.keyword-chip {
  border:         1px solid var(--border-hot);
  color:          var(--gold);
  padding:        .3rem .85rem;
  border-radius:  20px;
  font-size:      .75rem;
  font-weight:    700;
  font-family:    var(--font-body);
  text-transform: uppercase;
  letter-spacing: .07em;
  cursor:         default;
  transition:     background .15s;
}
.keyword-chip:hover { background: var(--gold-dim); }
.keyword-chip a { color: inherit; text-decoration: none; }

.seo-headline {
  font-family:    var(--font-head);
  font-size:      1.4rem;
  color:          var(--white);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom:  .25rem;
}
.seo-subline {
  font-family:    var(--font-mono);
  font-size:      .8rem;
  color:          var(--silver);
  letter-spacing: .06em;
  margin-bottom:  1.25rem;
}
.seo-phone-big {
  font-family:    var(--font-head);
  font-size:      2rem;
  color:          var(--gold);
  text-decoration: none;
  display:        inline-block;
}
.seo-phone-big:hover { text-decoration: underline; }

/* ═══════════════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════════════ */
.site-footer {
  background:  var(--bg);
  border-top:  3px solid var(--gold);
  padding-top: 2.5rem;
}
.footer-inner {
  display:               grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap:                   2rem;
  padding-bottom:        2rem;
  border-bottom:         1px solid var(--border);
}
.footer-brand {
  font-family:    var(--font-head);
  font-size:      1.05rem;
  color:          var(--gold);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom:  .75rem;
}
.footer-col p, .footer-col address {
  font-size:    .82rem;
  color:        var(--silver);
  line-height:  1.65;
  font-style:   normal;
}
.footer-col a { color: var(--silver); }
.footer-col a:hover { color: var(--gold); text-decoration: none; }
.footer-col h3 {
  font-family:    var(--font-head);
  font-size:      .78rem;
  color:          var(--gold);
  text-transform: uppercase;
  letter-spacing: .1em;
  margin-bottom:  .85rem;
}
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: .4rem; }
.footer-col li a { font-size: .82rem; }

.footer-bottom {
  padding:    1rem 0;
  text-align: center;
  font-size:  .72rem;
  color:      rgba(255,255,255,.3);
}
.footer-bottom a { color: rgba(255,255,255,.3); }
.footer-bottom a:hover { color: var(--gold); text-decoration: none; }

/* ═══════════════════════════════════════════════════════════════════
   STICKY MOBILE BUTTONS
   ═══════════════════════════════════════════════════════════════════ */
.wa-sticky {
  display:         none;
  position:        fixed;
  bottom:          0; left: 0; right: 0;
  background:      #00A550;
  color:           #fff;
  font-family:     var(--font-head);
  font-size:       1rem;
  text-transform:  uppercase;
  letter-spacing:  .08em;
  text-align:      center;
  padding:         .85rem 1rem;
  z-index:         800;
  text-decoration: none;
  box-shadow:      0 -4px 20px rgba(0,165,80,.4);
}
.phone-sticky {
  display:         none;
  position:        fixed;
  bottom:          70px; right: 1rem;
  width:           52px; height: 52px;
  background:      var(--red);
  color:           #fff;
  border-radius:   50%;
  font-size:       1.3rem;
  text-align:      center;
  line-height:     52px;
  z-index:         800;
  text-decoration: none;
  box-shadow:      0 4px 16px rgba(192,57,43,.6);
  transition:      transform .15s;
}
.phone-sticky:hover { transform: scale(1.1); text-decoration: none; }

/* ═══════════════════════════════════════════════════════════════════
   BACK TO TOP
   ═══════════════════════════════════════════════════════════════════ */
#back-to-top {
  position:    fixed;
  bottom:      2rem; right: 2rem;
  width:       44px; height: 44px;
  background:  var(--gold);
  color:       #000;
  border:      none;
  border-radius: 50%;
  font-size:   1.3rem;
  font-weight: bold;
  cursor:      pointer;
  display:     none;
  align-items: center;
  justify-content: center;
  z-index:     500;
  box-shadow:  0 2px 8px rgba(0,0,0,.4);
  transition:  opacity .2s, transform .2s;
}
#back-to-top.visible  { display: flex; }
#back-to-top:hover    { transform: translateY(-2px); }

/* ═══════════════════════════════════════════════════════════════════
   SHARED COMPONENTS (used across section pages)
   ═══════════════════════════════════════════════════════════════════ */

/* Page hero (section pages) */
.hero {
  background:    var(--bg-2);
  padding:       2.5rem 0;
  border-bottom: 2px solid var(--border);
}


/* Urgency bar */
.urgency-bar {
  background: #1a0000;
  border-bottom: 2px solid var(--red);
  padding:    .65rem 1.25rem;
  display:    flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap:   wrap;
  gap:         .5rem;
  font-family: var(--font-mono);
  font-size:   .78rem;
  font-weight: 700;
  color:       var(--gold);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.urgency-price {
  font-size:  .88rem;
  background: rgba(0,0,0,.3);
  padding:    2px 10px;
  border-radius: 3px;
}

/* Prices band */
.prices-band {
  background:    var(--bg-3);
  border-bottom: 1px solid var(--border);
  padding:       1.25rem 0;
}
.prices-inner {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   1rem;
  text-align:            center;
}
.price-label { font-size: .72rem; color: var(--silver); text-transform: uppercase; letter-spacing: .07em; margin-bottom: .2rem; font-weight: 600; }
.price-value { font-family: var(--font-mono); font-size: 1.25rem; font-weight: 700; color: var(--gold); }
.price-unit  { font-size: .72rem; color: var(--silver); margin-top: .15rem; }
.live-dot    { font-size: .72rem; color: var(--silver); text-align: center; }

/* Price table (section pages) */
.prices-section { background: var(--bg-2); padding: 2.5rem 0; }
.price-table-section { background: var(--bg-2); padding: 2rem 0; }
.price-table-section h2 { color: var(--gold); margin-bottom: 1rem; }
.price-table { width: 100%; border-collapse: collapse; font-family: var(--font-mono); }
.price-table th { background: var(--bg-3); color: var(--gold); font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; padding: .65rem 1rem; text-align: left; border-bottom: 2px solid var(--border); font-weight: 400; }
.price-table td { padding: .6rem 1rem; font-size: .85rem; color: var(--white); border-bottom: 1px solid rgba(255,255,255,.05); }
.price-table .price-cell { color: var(--gold); font-weight: 700; }
.prices-subtitle { font-size: .82rem; color: var(--silver); margin-bottom: 1rem; }
.price-note { font-size: .75rem; color: rgba(255,255,255,.35); margin-top: .75rem; }

/* Generic section-page content wrapper */
.page-content { padding: 3rem 0; }
.page-content h1 { color: var(--gold); border-bottom: 2px solid var(--border); padding-bottom: .5rem; margin-bottom: 1.5rem; }

/* CTA band */
.cta-band { background: #0D1117; padding: 2.5rem 0; text-align: center; }
.cta-band h2 { font-family: var(--font-head); font-size: 1.4rem; color: #fff; text-transform: uppercase; letter-spacing: .06em; margin-bottom: .5rem; }
.cta-band p { color: rgba(255,255,255,.85); font-size: .9rem; margin-bottom: 1rem; }

/* FAQ */
.faq-item { border-bottom: 1px solid var(--border); padding: .85rem 0; }
.faq-item summary { font-weight: 600; font-size: .95rem; cursor: pointer; color: var(--white); list-style: none; padding-right: 1.5rem; position: relative; }
.faq-item summary::after { content: '+'; position: absolute; right: 0; color: var(--gold); font-size: 1.2rem; line-height: 1; top: 0; }
.faq-item[open] summary::after { content: '−'; }
.faq-item p { margin: .65rem 0 0; font-size: .88rem; color: var(--silver); line-height: 1.65; }

/* Gallery strip */
.gallery-strip { background: var(--bg-3); padding: .75rem 0; }
.gallery-scroll { display: flex; flex-wrap: nowrap; gap: 8px; overflow-x: scroll; overflow-y: hidden; padding: 0 1.25rem 8px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: var(--gold) #333; }
.gallery-scroll::-webkit-scrollbar { height: 4px; }
.gallery-scroll::-webkit-scrollbar-track { background: #333; }
.gallery-scroll::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 2px; }
.gallery-scroll img { flex: 0 0 auto; width: 240px; height: 180px; object-fit: cover; border-radius: var(--radius); scroll-snap-align: start; display: block; }

/* Contact page */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.contact-card { border: 2px solid var(--border); border-radius: var(--radius); background: var(--bg-card); padding: 1.5rem; }
.contact-card h3 { font-family: var(--font-head); font-size: .9rem; color: var(--gold); text-transform: uppercase; letter-spacing: .08em; margin-bottom: .85rem; }
.hours-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.hours-table td { padding: .35rem 0; color: var(--white); }
.hours-table td:last-child { text-align: right; color: var(--silver); font-family: var(--font-mono); }
.map-section { padding: 2rem 0; }
.map-embed { width: 100%; height: 380px; border: 2px solid var(--border); border-radius: var(--radius); filter: invert(1) hue-rotate(180deg); }

/* Bitcoin page */
.bitcoin-hero { background: #050a00; border-bottom: 2px solid var(--neon); padding: 3rem 0; text-align: center; }
.step-card { border: 2px solid var(--border); border-radius: var(--radius); background: var(--bg-card); padding: 1.5rem; text-align: center; }
.step-card .step-number { width: 40px; height: 40px; background: var(--gold); color: #000; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--font-head); font-size: 1.1rem; margin: 0 auto .75rem; }
.step-card h3 { font-family: var(--font-head); font-size: .95rem; color: var(--gold); text-transform: uppercase; margin-bottom: .4rem; }
.step-card p { font-size: .82rem; color: var(--silver); }
.steps-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }

/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE — MOBILE
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .trust-badges-grid          { grid-template-columns: repeat(2, 1fr); }
  .footer-inner               { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
  .karat-grid                 { grid-template-columns: 1fr; }
  .metal-grid                 { grid-template-columns: 1fr; }
  .terminal-grid              { grid-template-columns: 1fr; }
  .reviews-grid               { grid-template-columns: 1fr; }
  .how-grid                   { grid-template-columns: 1fr; gap: 1.5rem; }
  .map-contact                { grid-template-columns: 1fr; }
  .contact-grid               { grid-template-columns: 1fr; }
  .prices-inner               { grid-template-columns: 1fr; }
  .items-grid                 { grid-template-columns: 1fr 1fr; }
  .footer-inner               { grid-template-columns: 1fr; gap: 1.25rem; }
  .steps-grid                 { grid-template-columns: 1fr 1fr; }

  .main-nav                   { display: none; position: absolute; top: calc(var(--ticker-h) + var(--nav-h)); left: 0; right: 0; background: #141414; border-bottom: 2px solid var(--border, rgba(168,169,173,.25)); z-index: 190; }
  .main-nav.is-open           { display: block; }
  .main-nav ul                { flex-direction: column; gap: 0; }
  .main-nav a                 { display: block; padding: .85rem 1.25rem; border-radius: 0; border-bottom: 1px solid var(--border, rgba(255,215,0,.1)); color: #C0C0C0; }
  .nav-toggle                 { display: flex; }
  .nav-phone                  { display: none; }
  .nav-controls               { gap: .35rem; }

  .hero-headline              { font-size: clamp(2.5rem, 12vw, 4rem); }
  .hero-price-value           { font-size: 1.75rem; }

  body                        { padding-bottom: 60px; }
  .wa-sticky                  { display: block; }
  .phone-sticky               { display: block; }
  #back-to-top                { display: none !important; }
}

@media (max-width: 480px) {
  .items-grid                 { grid-template-columns: 1fr; }
  .trust-badges-grid          { grid-template-columns: 1fr 1fr; }
  .hero-ctas                  { flex-direction: column; align-items: center; }
  .hero-trust                 { gap: .75rem; }
  .urgency-bar                { flex-direction: column; gap: .25rem; text-align: center; }
  .hero-punk                  { min-height: 60vh; }
}

/* ═══════════════════════════════════════════════════════════════════
   ORO & PRECIO PAGE UTILITIES
   ═══════════════════════════════════════════════════════════════════ */

/* Section H2 title — gold, uppercase, wide tracking */
.section-title {
  font-family:    var(--font-head);
  font-size:      clamp(1.2rem, 2.5vw, 1.6rem);
  color:          var(--gold);
  text-transform: uppercase;
  letter-spacing: .08em;
  text-align:     center;
  margin-bottom:  2rem;
  line-height:    1.2;
}

/* Dark section block (#111111) */
.section-dark {
  background: #0D1117;
  padding:    3rem 0;
}

/* Light section block (subtle contrast against pure-dark bg) */
.section-light {
  background:    var(--bg-2);
  padding:       3rem 0;
  border-top:    1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

/* Section lead — subtitle below section-title */
.section-lead {
  font-size:   1.05rem;
  color:       var(--silver);
  text-align:  center;
  max-width:   680px;
  margin:      -1.25rem auto 2rem;
  line-height: 1.7;
}

/* Hero body paragraph (address / subtext) */
.hero-lead {
  font-size:   1.1rem;
  color:       rgba(245,245,240,.85);
  max-width:   600px;
  margin:      0 auto 1.75rem;
  line-height: 1.7;
  text-align:  center;
}

/* Metal table unit label (€/kg, €/gr) */
.metal-unit {
  font-size:   .7rem;
  color:       rgba(255,255,255,.4);
  font-family: var(--font-mono);
}

/* Trust badge description text (reusable) */
.trust-badge-desc {
  font-size:   .78rem;
  color:       var(--silver);
  line-height: 1.5;
  margin:      0;
}

/* Inner page hero (non-fullscreen, no bg image) */
.page-hero {
  background:    var(--bg-2);
  padding:       3.5rem 0 2.5rem;
  text-align:    center;
  border-bottom: 3px solid var(--gold);
}
.page-hero h1 {
  font-family:    var(--font-head);
  font-size:      clamp(1.8rem, 5vw, 3rem);
  color:          #F5F5F0;
  text-transform: uppercase;
  letter-spacing: .03em;
  margin-bottom:  .75rem;
  line-height:    1.1;
}

/* Dual price widget row in page hero */
.page-hero-prices {
  display:         flex;
  gap:             1.5rem;
  justify-content: center;
  flex-wrap:       wrap;
  margin:          1.5rem auto;
}
.page-hero-price-block {
  background:    rgba(0,0,0,.3);
  border:        2px solid var(--border-hot);
  border-radius: var(--radius);
  padding:       1.25rem 2rem;
  text-align:    center;
  min-width:     200px;
}
.page-hero-price-block.featured { border-color: var(--gold); }
.page-hero-price-karat {
  font-family:    var(--font-mono);
  font-size:      .7rem;
  color:          var(--silver);
  text-transform: uppercase;
  letter-spacing: .12em;
  margin-bottom:  .3rem;
}
.page-hero-price-val {
  font-family: var(--font-mono);
  font-size:   clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  color:       var(--gold);
  line-height: 1;
}
.page-hero-price-sub {
  font-size:  .72rem;
  color:      var(--silver);
  margin-top: .3rem;
}

/* 4-column "what we buy" card grid */
.what-buy-grid {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   1rem;
}
.what-buy-card {
  border:         2px solid var(--border-hot);
  border-radius:  var(--radius);
  background:     var(--bg-card);
  padding:        0;
  overflow:       hidden;
  display:        flex;
  flex-direction: column;
  transition:     border-color .2s, box-shadow .2s;
}
.what-buy-card:hover {
  border-color: var(--gold);
  box-shadow:   0 4px 20px var(--gold-dim);
}
.what-buy-card-img {
  width:       100%;
  height:      180px;
  object-fit:  cover;
  display:     block;
  flex-shrink: 0;
}
.what-buy-card-body {
  padding: 1.25rem 1.5rem 1.5rem;
  flex:    1;
}
.what-buy-card-icon {
  font-size:     2rem;
  margin-bottom: .75rem;
  line-height:   1;
}
.what-buy-card-title {
  font-family:    var(--font-head);
  font-size:      .95rem;
  color:          var(--gold);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom:  .5rem;
}
.what-buy-card-body p {
  font-size:   .85rem;
  color:       var(--silver);
  line-height: 1.6;
  margin:      0;
}

/* Step images in how-grid (220px, slight radius) */
.step-img {
  width:         100%;
  height:        220px;
  object-fit:    cover;
  border-radius: 8px;
  display:       block;
  margin-bottom: 1rem;
}

/* Two-column layout: how-grid beside a feature image */
.how-with-image {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   2.5rem;
  align-items:           center;
}
.how-grid-single {
  grid-template-columns: 1fr;
  gap:                   1.5rem;
}
.how-full-img {
  width:         100%;
  max-height:    400px;
  object-fit:    cover;
  border-radius: var(--radius);
  display:       block;
}

/* 5-column trust grid (oro page) */
.trust-items-grid {
  display:               grid;
  grid-template-columns: repeat(5, 1fr);
  gap:                   1rem;
  margin-bottom:         1.5rem;
}

/* FAQ with larger summary titles */
.faq-enhanced .faq-item summary {
  font-size: 1.05rem;
}
.faq-enhanced .faq-item p {
  font-size:   .92rem;
  color:       var(--silver);
  line-height: 1.7;
}

/* Price disclaimer block */
.price-disclaimer-text {
  font-size:   .82rem;
  color:       var(--silver);
  line-height: 1.6;
  text-align:  center;
  max-width:   720px;
  margin:      1rem auto;
}

/* Comparison table (3-col: joyería / casa de empeño / nosotros) */
.comparison-table {
  width:           100%;
  border-collapse: collapse;
  font-size:       .88rem;
  max-width:       820px;
  margin:          0 auto;
  background:      var(--bg-card);
  border:          2px solid var(--border);
  border-radius:   var(--radius);
  overflow:        hidden;
}
.comparison-table th {
  padding:        .85rem 1rem;
  font-family:    var(--font-head);
  font-size:      .8rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  border-bottom:  3px solid var(--border);
  text-align:     center;
  background:     var(--bg-3);
  color:          var(--silver);
  vertical-align: bottom;
}
.comparison-table th:first-child   { text-align: left; }
.comparison-table th.col-highlight { background: var(--gold); color: #000; border-bottom-color: rgba(0,0,0,.2); }
.comparison-table td {
  padding:        .65rem 1rem;
  color:          var(--silver);
  border-bottom:  1px solid rgba(255,255,255,.05);
  text-align:     center;
  vertical-align: middle;
}
.comparison-table td:first-child {
  text-align:  left;
  color:       var(--white);
  font-weight: 600;
}
.comparison-table tr:last-child td  { border-bottom: none; }
.comparison-table .col-highlight    { background: rgba(168,169,173,.06); }
.comparison-table .ct-yes           { color: var(--gold); font-size: 1.15rem; font-weight: 700; }
.comparison-table .ct-no            { color: var(--silver); opacity: .4; font-size: 1.15rem; }
.comparison-table .ct-partial       { color: #888; font-size: .82rem; }

/* Quilates educational table */
.karat-guide-table {
  width:           100%;
  border-collapse: collapse;
  font-size:       .9rem;
  max-width:       820px;
  margin:          0 auto;
  background:      var(--bg-card);
  border:          2px solid var(--border);
  border-radius:   var(--radius);
  overflow:        hidden;
}
.karat-guide-table th {
  background:     var(--gold);
  color:          #000;
  font-family:    var(--font-head);
  font-size:      .78rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding:        .75rem 1rem;
  text-align:     left;
}
.karat-guide-table td {
  padding:        .65rem 1rem;
  color:          var(--white);
  border-bottom:  1px solid rgba(255,255,255,.04);
  vertical-align: middle;
  line-height:    1.4;
}
.karat-guide-table tr:nth-child(even) td { background: rgba(255,255,255,.025); }
.karat-guide-table tr:last-child td      { border-bottom: none; }
.karat-guide-table .kg-karat {
  color:       var(--gold);
  font-family: var(--font-head);
  font-size:   1rem;
  font-weight: 400;
}
.karat-guide-table .kg-common { color: var(--silver); font-size: .82rem; }

/* Image placeholder for content photos */
.img-placeholder {
  background:    var(--bg-3);
  border:        2px dashed var(--border);
  border-radius: var(--radius);
  display:       flex;
  align-items:   center;
  justify-content: center;
  font-size:     .78rem;
  color:         var(--silver);
  font-family:   var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .06em;
  min-height:    180px;
  margin-bottom: 1rem;
}

/* Responsive — new grids */
@media (max-width: 1024px) {
  .what-buy-grid    { grid-template-columns: repeat(2, 1fr); }
  .trust-items-grid { grid-template-columns: repeat(3, 1fr); }
  .how-with-image   { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .what-buy-grid      { grid-template-columns: 1fr 1fr; }
  .trust-items-grid   { grid-template-columns: 1fr 1fr; }
  .page-hero-prices   { flex-direction: column; align-items: center; }
  .comparison-table,
  .karat-guide-table  { font-size: .8rem; }
  .comparison-table th,
  .comparison-table td { padding: .5rem .65rem; }
  .step-img           { height: 180px; }
  .how-full-img       { max-height: 260px; }
}
@media (max-width: 480px) {
  .what-buy-grid    { grid-template-columns: 1fr; }
  .trust-items-grid { grid-template-columns: 1fr 1fr; }
  .step-img         { height: 160px; }
}

/* ═══════════════════════════════════════════════════════════════════
   GUIDE PAGE — /guia-vender-oro-sevilla/
   ═══════════════════════════════════════════════════════════════════ */

/* § Hero */
.guia-hero {
  position:            relative;
  min-height:          55vh;
  background-color:    #0D1117;
  background-image:    url('/images/content/cliente-tienda.jpg');
  background-size:     cover;
  background-position: center;
  display:             flex;
  align-items:         center;
  padding:             5rem 0;
}
.guia-hero::before {
  content:  '';
  position: absolute;
  inset:    0;
  background: rgba(0,0,0,.6);
  z-index:  0;
  pointer-events: none;
}
.guia-hero-content {
  position:   relative;
  z-index:    1;
  text-align: center;
  max-width:  820px;
  margin:     0 auto;
}
.guia-h1 {
  font-family:    var(--font-head);
  font-size:      clamp(1.8rem, 4.5vw, 3rem);
  color:          #F5F5F0;
  text-transform: uppercase;
  letter-spacing: .04em;
  line-height:    1.1;
  margin-bottom:  1.25rem;
}
.guia-h1-accent { color: var(--gold); }
.guia-hero-lead {
  font-size:   1.15rem;
  color:       rgba(245,245,240,.85);
  line-height: 1.75;
  max-width:   680px;
  margin:      0 auto;
}

/* § Section containers */
.guia-section       { padding: 5rem 0; }
.guia-section-light { background: #F0F2F5; color: #1A1A1A; }
.guia-section-dark  { background: #0D1117; color: #ffffff; }

/* § Section titles */
.guia-section-title {
  font-family:    var(--font-head);
  font-size:      clamp(1.2rem, 2.5vw, 1.5rem);
  color:          var(--gold);
  text-transform: uppercase;
  letter-spacing: .08em;
  text-align:     center;
  margin-bottom:  2.5rem;
  line-height:    1.2;
}

/* § Body text — light sections */
.guia-body {
  font-size:     1.05rem;
  line-height:   1.8;
  color:         #444444;
  margin-bottom: 1rem;
}
.guia-body strong { color: #1A1A1A; font-weight: 700; }

/* § Body text — dark/bg sections */
.guia-body-dark {
  font-size:   1.05rem;
  line-height: 1.8;
  color:       var(--silver);
  margin:      0 auto 1rem;
  max-width:   640px;
  text-align:  center;
}

/* § Two-column layout */
.guia-two-col {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   3rem;
  align-items:           center;
  margin-bottom:         3rem;
}
.guia-col-img  { align-self: start; }
.guia-col-text { align-self: center; }

/* § Images */
.guia-img {
  width:         100%;
  height:        320px;
  object-fit:    cover;
  border-radius: 8px;
  display:       block;
}
.guia-img-tall { height: 280px; }

/* § Quilates table wrapper */
.guia-table-wrap { max-width: 820px; margin: 0 auto; }

/* § Error cards — 2×2 grid */
.guia-error-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   1.25rem;
}
.guia-error-card {
  background:    #1a1a1a;
  border:        2px solid #222222;
  border-radius: var(--radius);
  padding:       2rem;
  transition:    border-color .2s;
}
.guia-error-card:hover { border-color: var(--border-hot); }
.guia-error-num {
  font-family:         var(--font-head);
  font-size:           clamp(3.5rem, 8vw, 5.5rem);
  line-height:         .85;
  color:               transparent;
  -webkit-text-stroke: 2px var(--gold);
  margin-bottom:       .75rem;
  user-select:         none;
}
.guia-error-title {
  font-family:    var(--font-head);
  font-size:      1rem;
  color:          var(--gold);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom:  .65rem;
}
.guia-error-desc {
  font-size:   .9rem;
  color:       var(--silver);
  line-height: 1.7;
  margin:      0;
}

/* § Checklist (§4) */
.guia-checklist-group { margin-bottom: 2rem; }
.guia-checklist-label {
  font-family:     var(--font-head);
  font-size:       .72rem;
  color:           var(--gold);
  text-transform:  uppercase;
  letter-spacing:  .12em;
  display:         inline-block;
  margin-bottom:   .85rem;
  padding-bottom:  .45rem;
  border-bottom:   2px solid var(--gold);
}
.guia-checklist-label-opt {
  color:        var(--silver);
  border-color: var(--border-hot);
}
.guia-checklist {
  list-style: none;
  padding:    0;
  margin:     0;
}
.guia-checklist-item {
  display:       flex;
  align-items:   flex-start;
  gap:           .65rem;
  font-size:     1rem;
  line-height:   1.65;
  color:         #444444;
  margin-bottom: .7rem;
}
.guia-check {
  color:       var(--gold);
  font-weight: 700;
  font-size:   1rem;
  flex-shrink: 0;
  margin-top:  .15rem;
}
.guia-check-opt {
  color:       var(--silver);
  font-size:   1.1rem;
  flex-shrink: 0;
  margin-top:  .05rem;
}

/* § Background image section (§5) */
.guia-bg-section {
  position:            relative;
  background-image:    url('/images/content/oro-roto.jpg');
  background-size:     cover;
  background-position: center;
}
.guia-bg-section::before {
  content:        '';
  position:       absolute;
  inset:          0;
  background:     rgba(0,0,0,.7);
  z-index:        0;
  pointer-events: none;
}
.guia-bg-content {
  position:   relative;
  z-index:    1;
  text-align: center;
}

/* § Pull quote */
.guia-pull-quote {
  font-family:  Georgia, 'Times New Roman', serif;
  font-style:   italic;
  font-size:    clamp(1.35rem, 3vw, 2rem);
  color:        var(--gold);
  line-height:  1.45;
  text-align:   center;
  max-width:    580px;
  margin:       2.5rem auto 2.5rem;
  padding:      0;
  border:       none;
  position:     relative;
}
.guia-pull-quote::before {
  content:     '\201C';
  position:    absolute;
  top:         -2rem;
  left:        50%;
  transform:   translateX(-50%);
  font-size:   6rem;
  color:       rgba(168,169,173,.18);
  font-style:  normal;
  line-height: 1;
  pointer-events: none;
}

/* § Trust badges on light background override */
.guia-section-light .trust-badge {
  background: #ffffff;
}
.guia-section-light .trust-badge-desc { color: #555555; }

/* § Bottom full-width image (§6) */
.guia-bottom-img {
  display:       block;
  width:         100%;
  max-height:    300px;
  object-fit:    cover;
  border-radius: 8px;
  margin-top:    2.5rem;
}

/* § Next steps 3-column (§7) */
.guia-steps-grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   1.5rem;
}
.guia-step-card {
  border:         2px solid var(--border-hot);
  border-radius:  var(--radius);
  background:     #1a1a1a;
  padding:        2rem 1.5rem;
  text-align:     center;
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            .75rem;
}
.guia-step-icon  { font-size: 2.5rem; line-height: 1; }
.guia-step-title {
  font-family:    var(--font-head);
  font-size:      1rem;
  color:          var(--gold);
  text-transform: uppercase;
  letter-spacing: .05em;
}
.guia-step-desc {
  font-size:   .88rem;
  color:       var(--silver);
  line-height: 1.6;
  flex:        1;
  margin:      0;
}

/* § Responsive */
@media (max-width: 1024px) {
  .guia-error-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .guia-two-col     { grid-template-columns: 1fr; gap: 2rem; margin-bottom: 2rem; }
  .guia-error-grid  { grid-template-columns: 1fr; }
  .guia-steps-grid  { grid-template-columns: 1fr; gap: 1rem; }
  .guia-hero        { min-height: 45vh; }
  .guia-img,
  .guia-img-tall    { height: 220px; }
  .guia-bottom-img  { max-height: 220px; }
}
@media (max-width: 480px) {
  .guia-section     { padding: 3.5rem 0; }
  .guia-pull-quote  { font-size: 1.2rem; }
  .guia-img,
  .guia-img-tall    { height: 180px; }
}

/* ═══════════════════════════════════════════════════════════
   PLATA PAGE REDESIGN
   ═══════════════════════════════════════════════════════════ */

@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.3; }
}

/* Live price hero */
.plata-price-hero {
  border:        2px solid #A8A9AD;
  border-radius: 12px;
  padding:       32px 28px;
  max-width:     480px;
  margin:        0 auto 2rem;
  text-align:    center;
}
.plata-live-badge {
  display:        inline-flex;
  align-items:    center;
  gap:            8px;
  background:     #1a1a1a;
  border:         1.5px solid #C0392B;
  border-radius:  30px;
  padding:        6px 16px;
  margin-bottom:  24px;
  font-size:      13px;
  font-weight:    800;
  color:          #C0392B;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-family:    var(--font-head);
}
.plata-live-dot {
  display:       inline-block;
  width:         8px;
  height:        8px;
  border-radius: 50%;
  background:    #C0392B;
  animation:     pulse-dot 1.4s infinite;
  flex-shrink:   0;
}
.plata-price-label {
  font-family:    var(--font-mono);
  font-size:      11px;
  color:          #888;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom:  6px;
}
.plata-price-display {
  display:         flex;
  align-items:     flex-end;
  justify-content: center;
  gap:             8px;
}
.plata-price-value {
  font-family:    Georgia, 'Times New Roman', serif;
  font-size:      5.5rem;
  font-weight:    900;
  color:          #A8A9AD;
  line-height:    1;
  letter-spacing: -2px;
}
.plata-price-unit {
  font-size:      1.8rem;
  font-weight:    700;
  color:          #7a7b7e;
  padding-bottom: 10px;
}
.plata-price-ts {
  font-family: var(--font-mono);
  font-size:   12px;
  color:       #444;
  margin-top:  .6rem;
}

/* Trust pills bar */
.trust-pills-bar {
  background:      #0a0e13;
  border-top:      1px solid #1e2830;
  border-bottom:   1px solid #1e2830;
  padding:         16px 18px;
  display:         flex;
  flex-wrap:       wrap;
  justify-content: center;
  gap:             8px;
}
.trust-pill {
  background:    #131920;
  border:        1px solid #2a3040;
  border-radius: 20px;
  padding:       8px 16px;
  font-size:     13px;
  color:         #aaa;
  display:       inline-flex;
  align-items:   center;
  gap:           4px;
}
.trust-pill-icon { color: #A8A9AD; font-size: 15px; }

/* Qué compramos cards — scoped to avoid collision with old .what-buy-grid */
.what-buy-section { background: #f5f5f0; padding: 2.5rem 0; }
.what-buy-section h2 { text-align: center; color: #111; margin-bottom: 1.5rem; font-size: 1.25rem; }
.what-buy-section .what-buy-grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   1rem;
}
.what-buy-section .what-buy-card {
  background:     #fff;
  border:         1px solid #ddd;
  border-radius:  10px;
  padding:        16px 12px;
  text-align:     center;
  display:        block;
  overflow:       visible;
  transition:     none;
}
.what-buy-section .what-buy-card:hover { border-color: #ddd; box-shadow: none; }
.what-buy-section .what-buy-card-icon  { color: #7a7b7e; font-size: 22px; margin-bottom: .5rem; display: block; }
.what-buy-section .what-buy-card-title { font-size: 13px; font-weight: 700; color: #111; margin-bottom: .25rem; }
.what-buy-section .what-buy-card-sub   { font-size: 11px; color: #888; line-height: 1.4; }

/* Intro text block + markdown content */
.plata-content {
  background:    #fff;
  padding:       32px 24px;
  border-bottom: 1px solid #eee;
}
.plata-content > p {
  font-size:   16px;
  color:       #444;
  line-height: 1.8;
  max-width:   720px;
  margin:      0 auto 1.25rem;
}
.plata-content h2 {
  font-size:     1.3rem;
  font-weight:   900;
  color:         #111;
  margin:        1.75rem 0 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid #A8A9AD;
  max-width:     720px;
  margin-left:   auto;
  margin-right:  auto;
}
.plata-content ul {
  list-style: none;
  padding:    0;
  max-width:  720px;
  margin:     0 auto 1.25rem;
}
.plata-content li {
  font-size:    14px;
  color:        #444;
  padding:      6px 0 6px 20px;
  border-bottom: 1px solid #eee;
  position:     relative;
}
.plata-content li::before {
  content:     "→";
  color:       #A8A9AD;
  font-weight: 700;
  position:    absolute;
  left:        0;
}
.plata-content strong { color: #222; }

/* Price tables section */
.plata-prices-section { background: #f5f0e8; padding: 2.5rem 0; }
.plata-prices-section h2 { color: #333; font-size: 1.15rem; margin-bottom: .75rem; }
.plata-live-bar {
  display:      inline-flex;
  align-items:  center;
  gap:          8px;
  background:   #111;
  border-radius: 6px;
  padding:      8px 18px;
  margin-bottom: 1.25rem;
}
.plata-live-bar-dot {
  display:       inline-block;
  width:         7px;
  height:        7px;
  border-radius: 50%;
  background:    #5cb85c;
  animation:     pulse-dot 1.5s infinite;
  flex-shrink:   0;
}
.plata-live-bar-text {
  font-family:    var(--font-mono);
  font-size:      12px;
  font-weight:    700;
  color:          #A8A9AD;
  letter-spacing: 1px;
}
.plata-price-table-wrap {
  background:    #fff;
  border-radius: 10px;
  overflow:      hidden;
  border:        1px solid #ddd;
  margin-bottom: 1.5rem;
}
.plata-price-table { width: 100%; border-collapse: collapse; }
.plata-price-table thead th {
  background:     #1a1a1a;
  color:          #A8A9AD;
  font-size:      11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding:        10px 14px;
  text-align:     left;
  font-weight:    600;
}
.plata-price-table tbody td {
  padding:      12px 14px;
  font-size:    14px;
  color:        #333;
  border-bottom: 1px solid #f0f0f0;
}
.plata-price-table tbody tr:last-child td { border-bottom: none; }
.plata-price-table .pp-cell { text-align: right; }
.pp-num  { font-size: 22px; font-weight: 900; color: #7a7b7e; }
.pp-unit { font-size: 12px; color: #aaa; font-weight: 600; margin-left: 2px; }
.plata-price-note { font-size: 12px; color: #888; margin-top: .5rem; }

/* Domicilio strip */
.domicilio-strip {
  background:    #0D1117;
  padding:       28px 18px;
  border-top:    1px solid #1e2830;
  border-bottom: 1px solid #1e2830;
  text-align:    center;
}
.domicilio-strip h2 { color: #A8A9AD; font-size: 1.2rem; font-weight: 900; margin-bottom: .6rem; }
.domicilio-strip p  { color: #666; font-size: 13px; line-height: 1.6; margin-bottom: 16px; max-width: 500px; margin-left: auto; margin-right: auto; }

/* Responsive */
@media (max-width: 640px) {
  .plata-price-value  { font-size: 3.5rem; letter-spacing: -1px; }
  .plata-price-unit   { font-size: 1.4rem; }
  .what-buy-section .what-buy-grid { grid-template-columns: repeat(2, 1fr); }
}