/* =========================================================
   GOLD SHIELD — Subasta holandesa
   Estética: joyería de lujo. Fondo oscuro, oro, serif con clase.
   Mobile-first. Sin build step.
   ========================================================= */

:root{
  --bg:            #0a0a0c;
  --bg-2:          #0f0f12;
  --panel:         #131317;
  --panel-2:       #17171c;
  --line:          #26262e;
  --line-soft:     #1d1d24;

  --ink:           #f2efe9;
  --ink-2:         #b9b4ab;
  --ink-3:         #7d7a74;

  --gold:          #d4af37;
  --gold-hi:       #f2d98a;
  --gold-lo:       #9a7b1e;
  --gold-glow:     rgba(212,175,55,.28);

  --ok:            #4ea87a;
  --warn:          #e0a83c;
  --bad:           #d1585b;

  --serif: "Cormorant Garamond", ui-serif, Georgia, "Times New Roman", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --r:  14px;
  --r-s: 10px;
  --shadow: 0 18px 50px rgba(0,0,0,.55);
  --sticky-h: 82px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%}

/* [hidden] TIENE QUE GANAR SIEMPRE.
   El navegador le da a [hidden] un `display:none` de su hoja de user-agent, y CUALQUIER
   regla de autor con `display:flex/grid/block` la pisa. Es decir: `.boot{display:flex}`
   y `.modal{display:flex}` hacian que un elemento con `hidden` SIGUIERA OCUPANDO la
   pantalla. El spinner de "Conectando…" no se iba nunca, y el fondo del modal cerrado
   se quedaba encima de la pagina comiendose cada clic — incluido el de COMPRAR.
   Una linea aqui arriba mata toda esa familia de bugs de una vez. */
[hidden]{display:none !important}

body{
  background:
    radial-gradient(1100px 620px at 50% -12%, #1b1710 0%, rgba(27,23,16,0) 62%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
  background-attachment: fixed;
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  padding-bottom: calc(var(--sticky-h) + env(safe-area-inset-bottom, 0px) + 12px);
  overflow-x:hidden;
}

.serif{font-family:var(--serif); font-weight:600; letter-spacing:.01em}
.muted{color:var(--ink-2)}
.small{font-size:13px}
img{max-width:100%; display:block}
button{font-family:inherit}

.wrap{width:100%; max-width:1080px; margin:0 auto; padding:0 16px}

.skip{position:absolute; left:-9999px}
.skip:focus{left:12px; top:12px; z-index:99; background:var(--gold); color:#111; padding:10px 14px; border-radius:8px}

/* ---------- Topbar ---------- */
.topbar{
  position:sticky; top:0; z-index:40;
  background:rgba(10,10,12,.86);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-soft);
}
.topbar-in{display:flex; align-items:center; justify-content:space-between; height:58px; gap:12px}
.brand{display:flex; align-items:center; gap:9px; min-width:0}
.brand-mark{
  color:var(--gold); font-size:15px; line-height:1;
  filter:drop-shadow(0 0 8px var(--gold-glow));
}
.brand-name{
  font-family:var(--serif); font-weight:700; font-size:19px;
  letter-spacing:.22em; white-space:nowrap;
  background:linear-gradient(100deg, var(--gold-lo), var(--gold-hi) 45%, var(--gold) 70%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.event-meta{
  display:flex; align-items:center; gap:8px;
  font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2);
  min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

.live-dot{
  width:8px; height:8px; border-radius:50%; flex:0 0 auto;
  background:var(--gold);
  box-shadow:0 0 0 0 var(--gold-glow);
  animation:pulseDot 2.2s ease-out infinite;
}
.live-dot.off{background:var(--ink-3); animation:none; box-shadow:none}
@keyframes pulseDot{
  0%{box-shadow:0 0 0 0 rgba(212,175,55,.45)}
  70%{box-shadow:0 0 0 9px rgba(212,175,55,0)}
  100%{box-shadow:0 0 0 0 rgba(212,175,55,0)}
}

/* ---------- Ticker ---------- */
.ticker{
  border-bottom:1px solid var(--line-soft);
  background:linear-gradient(90deg, rgba(212,175,55,.07), rgba(212,175,55,.02));
  font-size:13px; color:var(--ink-2); text-align:center;
  padding:9px 0;
}
.ticker strong{color:var(--gold-hi); font-weight:600}

/* ---------- Estados ---------- */
.boot{display:flex; flex-direction:column; align-items:center; gap:16px; padding:80px 0; color:var(--ink-2)}
.spinner{
  width:34px; height:34px; border-radius:50%;
  border:2px solid var(--line); border-top-color:var(--gold);
  animation:spin .9s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.empty{text-align:center; margin-top:40px}
.empty h2{margin:0 0 8px; font-size:28px}

/* ---------- Layout de la gema ---------- */
.gem{padding-top:18px}

@media (min-width:900px){
  .gem{
    display:grid;
    grid-template-columns: 1.05fr .95fr;
    grid-template-areas:
      "gallery head"
      "gallery price"
      "gallery bet"
      "ship    price"
      "specs   rules"
      "legal   legal"
      "feed    feed";
    gap:20px 28px;
    align-items:start;
    padding-top:28px;
  }
  .gallery{grid-area:gallery; position:sticky; top:74px}
  .head{grid-area:head}
  .pricebox{grid-area:price}
  .bet{grid-area:bet}
  .ship{grid-area:ship}
  .gem > .panel:not(.feed-panel):not(.ship){grid-area:specs}
  .rules{grid-area:rules}
  .legal{grid-area:legal}
  .feed-panel{grid-area:feed}
}

/* ---------- Galería ---------- */
.stage{
  position:relative;
  border-radius:var(--r);
  overflow:hidden;
  border:1px solid var(--line);
  background:
    radial-gradient(120% 90% at 50% 0%, #1c1a17 0%, #0e0e11 70%);
  aspect-ratio:1/1;
  box-shadow:var(--shadow);
}
/* El VIDEO y la FOTO ocupan el mismo hueco: se intercambian, no se empujan. */
.stage-media{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  transition:opacity .35s ease;
}
.stage-media[hidden]{display:none}
.photo-main.swap{opacity:0}
#gem-video{background:#0e0e11}

.stage-badges{position:absolute; left:12px; top:12px; display:flex; gap:8px; flex-wrap:wrap; z-index:2}
.badge{
  font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  padding:6px 10px; border-radius:999px;
  background:rgba(10,10,12,.72); backdrop-filter:blur(6px);
  border:1px solid rgba(212,175,55,.4); color:var(--gold-hi);
}
.badge.vid{
  border-color:rgba(255,255,255,.28); color:var(--ink);
  display:inline-flex; align-items:center; gap:6px;
}
.badge.vid::before{
  content:""; width:0; height:0; border-style:solid;
  border-width:4px 0 4px 6px; border-color:transparent transparent transparent currentColor;
}
.thumb.is-video{position:relative}
.thumb.is-video::after{
  content:""; position:absolute; inset:0; margin:auto;
  width:0; height:0; border-style:solid;
  border-width:6px 0 6px 10px;
  border-color:transparent transparent transparent #fff;
  filter:drop-shadow(0 0 3px rgba(0,0,0,.8));
}

.thumbs{
  display:flex; gap:8px; margin-top:10px;
  overflow-x:auto; scroll-snap-type:x mandatory;
  padding-bottom:4px;
  scrollbar-width:none;
}
.thumbs::-webkit-scrollbar{display:none}
.thumb{
  flex:0 0 68px; width:68px; height:68px; padding:0;
  border-radius:var(--r-s); overflow:hidden; cursor:pointer;
  border:1px solid var(--line); background:#111;
  scroll-snap-align:start; opacity:.6; transition:opacity .2s, border-color .2s;
}
.thumb img{width:100%; height:100%; object-fit:cover}
.thumb[aria-selected="true"]{opacity:1; border-color:var(--gold)}

/* ---------- Cabecera ---------- */
.head{padding-top:18px}
.head-row{display:flex; align-items:baseline; justify-content:space-between; gap:12px}
.gem-title{
  margin:0; font-size:32px; line-height:1.12; font-weight:600;
  letter-spacing:.005em;
}
@media (min-width:900px){ .gem-title{font-size:40px} }
.sku{
  font-size:11px; letter-spacing:.16em; color:var(--ink-3);
  white-space:nowrap; text-transform:uppercase;
}
.viewers{
  display:flex; align-items:center; gap:8px;
  margin:12px 0 0; font-size:13px; color:var(--ink-2);
}
.viewers strong{color:var(--ink); font-weight:600}

/* ---------- EL PRECIO ---------- */
.pricebox{
  margin-top:18px;
  border:1px solid rgba(212,175,55,.24);
  border-radius:var(--r);
  background:
    linear-gradient(180deg, rgba(212,175,55,.055), rgba(212,175,55,0) 55%),
    var(--panel);
  padding:18px 16px 16px;
  box-shadow:var(--shadow);
}
.pricebox-top{display:flex; align-items:center; justify-content:space-between; gap:10px}
.price-label{font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3)}
.chip{
  font-size:10px; letter-spacing:.16em; text-transform:uppercase; font-weight:600;
  padding:5px 9px; border-radius:999px; border:1px solid var(--line);
  color:var(--ink-2); background:var(--panel-2);
}
.chip.live{color:var(--gold-hi); border-color:rgba(212,175,55,.45); background:rgba(212,175,55,.08)}
.chip.sold{color:#f3c9ca; border-color:rgba(209,88,91,.5); background:rgba(209,88,91,.12)}
.chip.ended{color:var(--ink-2)}

.price-now{
  display:flex; align-items:baseline; gap:6px;
  margin:6px 0 4px;
  font-family:var(--serif); font-weight:700;
  font-size:clamp(48px, 15vw, 76px);
  line-height:1.02;
  letter-spacing:-.01em;
  background:linear-gradient(96deg, #b08c22 0%, var(--gold-hi) 38%, var(--gold) 62%, #b08c22 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  font-variant-numeric:tabular-nums;
  transform-origin:left center;
}
.price-cur{font-size:.55em; opacity:.85}
.price-mxn{
  font-family:var(--sans); font-size:13px; font-weight:600; letter-spacing:.14em;
  color:var(--ink-3); -webkit-text-fill-color:var(--ink-3);
  align-self:flex-end; padding-bottom:.9em;
}
.price-now.drop{animation:priceDrop .55s cubic-bezier(.2,.9,.2,1)}
@keyframes priceDrop{
  0%{transform:scale(1)}
  22%{transform:scale(1.045); filter:drop-shadow(0 0 22px var(--gold-glow))}
  100%{transform:scale(1); filter:none}
}
@media (prefers-reduced-motion:reduce){
  .price-now.drop{animation:none}
  .live-dot{animation:none}
}

.next-step{margin-top:10px}
.next-line{font-size:15px; color:var(--ink-2)}
.next-line strong{color:var(--gold-hi); font-weight:600; font-variant-numeric:tabular-nums}
.countdown{
  font-variant-numeric:tabular-nums; font-weight:700; color:var(--ink);
  background:var(--panel-2); border:1px solid var(--line);
  padding:2px 8px; border-radius:7px; margin-left:2px;
  display:inline-block; min-width:58px; text-align:center;
}
.bar{height:3px; border-radius:99px; background:var(--line-soft); margin-top:10px; overflow:hidden}
.bar-fill{
  height:100%; width:100%;
  background:linear-gradient(90deg, var(--gold-lo), var(--gold-hi));
  transform-origin:left center;
}
.floor-note{
  margin:10px 0 0; font-size:14px; color:var(--gold-hi);
  border-left:2px solid var(--gold); padding-left:10px;
}
.dilemma{
  margin:14px 0 16px; padding:12px 14px;
  border-radius:var(--r-s);
  background:rgba(255,255,255,.02);
  border:1px solid var(--line-soft);
  font-family:var(--serif); font-size:19px; color:var(--ink);
  line-height:1.35;
}
.micro{margin:12px 0 0; font-size:12px; color:var(--ink-3); line-height:1.5}
.micro strong{color:var(--ink-2)}

/* ---------- Botones ---------- */
.btn{
  appearance:none; border:1px solid transparent; cursor:pointer;
  border-radius:12px; font-weight:700; font-size:15px;
  padding:14px 18px; color:#15120a;
  transition:transform .12s ease, filter .18s ease, box-shadow .18s ease;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  letter-spacing:.03em;
}
.btn:active{transform:translateY(1px) scale(.995)}
.btn.gold{
  background:linear-gradient(180deg, var(--gold-hi), var(--gold) 55%, #b8912a 100%);
  box-shadow:0 8px 26px rgba(212,175,55,.22), inset 0 1px 0 rgba(255,255,255,.45);
}
.btn.gold:hover{filter:brightness(1.06)}
.btn.ghost{
  background:transparent; color:var(--ink); border-color:var(--line);
}
.btn.ghost:hover{border-color:var(--gold); color:var(--gold-hi)}
.btn[disabled]{opacity:.55; cursor:not-allowed; filter:grayscale(.35)}
.btn.big{width:100%; padding:16px; font-size:16px}
.btn.buy{
  width:100%; margin-top:4px; padding:17px 18px;
  font-size:15px; letter-spacing:.08em; text-transform:uppercase;
}
.buy-price{
  font-variant-numeric:tabular-nums; font-weight:800;
  padding-left:10px; margin-left:2px;
  border-left:1px solid rgba(21,18,10,.28);
}
.btn.buy[data-locked="1"]{
  background:var(--panel-2); color:var(--ink-3);
  box-shadow:none; border-color:var(--line); cursor:not-allowed;
}

/* ---------- Paneles ---------- */
.panel{
  margin-top:22px; padding:18px 16px;
  border:1px solid var(--line); border-radius:var(--r);
  background:var(--panel);
}
.panel-title{margin:0 0 14px; font-size:24px; font-weight:600}

.specs{display:grid; grid-template-columns:1fr 1fr; gap:1px; margin:0; background:var(--line-soft); border:1px solid var(--line-soft); border-radius:var(--r-s); overflow:hidden}
.spec{background:var(--panel-2); padding:12px 13px; min-width:0}
.spec dt{font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); margin:0 0 4px}
.spec dd{margin:0; font-family:var(--serif); font-size:19px; font-weight:600; color:var(--ink); overflow-wrap:anywhere}
.desc{margin:16px 0 0; color:var(--ink-2); font-size:15px; line-height:1.65; white-space:pre-line}

/* ---------- Reglas ---------- */
.rules{
  margin-top:22px; border:1px solid rgba(212,175,55,.28); border-radius:var(--r);
  background:linear-gradient(180deg, rgba(212,175,55,.05), rgba(212,175,55,0) 60%), var(--panel);
  overflow:hidden;
}
.rules summary{
  cursor:pointer; padding:16px; list-style:none;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.rules summary::-webkit-details-marker{display:none}
.rules summary .serif{font-size:22px}
.sum-hint{font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); white-space:nowrap}
.rules[open] summary{border-bottom:1px solid var(--line-soft)}
.rules-list{margin:0; padding:14px 16px 18px 34px; color:var(--ink-2); font-size:14.5px; line-height:1.6}
.rules-list li{margin-bottom:10px}
.rules-list li::marker{color:var(--gold); font-weight:700}
.rules-list strong{color:var(--ink)}

/* ---------- Legal ---------- */
.legal{display:grid; gap:12px; margin-top:22px}
@media (min-width:760px){ .legal{grid-template-columns:repeat(3,1fr)} }
.legal-card{
  border:1px solid var(--line); border-radius:var(--r-s);
  background:var(--panel); padding:14px 15px;
}
.legal-card.important{
  border-color:rgba(212,175,55,.45);
  background:linear-gradient(180deg, rgba(212,175,55,.09), rgba(212,175,55,.02));
}
.legal-card h3{
  margin:0 0 7px; font-size:14px; font-weight:700;
  letter-spacing:.02em; color:var(--gold-hi);
}
.legal-card p{margin:0; font-size:13.5px; color:var(--ink-2); line-height:1.55}
.legal-card strong{color:var(--ink)}

/* ---------- Rail ---------- */
.rail{display:flex; gap:12px; overflow-x:auto; padding-bottom:6px; scroll-snap-type:x mandatory; scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.rail-card{
  flex:0 0 150px; text-align:left; padding:0; cursor:pointer;
  background:var(--panel-2); border:1px solid var(--line); border-radius:var(--r-s);
  overflow:hidden; scroll-snap-align:start;
  transition:border-color .2s, transform .12s;
}
.rail-card:hover{border-color:var(--gold)}
.rail-card:active{transform:scale(.985)}
.rail-card[aria-current="true"]{border-color:var(--gold); box-shadow:0 0 0 1px var(--gold) inset}
.rail-card img{width:100%; aspect-ratio:1/1; object-fit:cover; background:#111}
.rail-body{padding:9px 10px}
.rail-title{
  font-family:var(--serif); font-size:15px; font-weight:600; color:var(--ink);
  margin:0 0 3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.rail-price{font-size:14px; font-weight:700; color:var(--gold-hi); font-variant-numeric:tabular-nums}
.rail-state{font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); margin-top:3px}
.rail-card.is-sold img, .rail-card.is-ended img{filter:grayscale(1) brightness(.55)}
.rail-card.is-sold .rail-price{color:var(--bad)}
.rail-card.is-ended .rail-price{color:var(--ink-3)}

/* ---------- Overlay estado ---------- */
.overlay{
  position:absolute; inset:0; z-index:5;
  display:flex; align-items:center; justify-content:center; padding:20px;
  background:rgba(8,8,10,.86); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  animation:fadeIn .3s ease;
}
@keyframes fadeIn{from{opacity:0} to{opacity:1}}
.overlay-card{text-align:center; max-width:340px}
.overlay-icon{font-size:26px; color:var(--gold); margin-bottom:10px}
.overlay-card h2{margin:0 0 8px; font-size:30px; line-height:1.15}
.overlay-card p{margin:0 0 18px; font-size:14px; line-height:1.55}

/* ---------- Sticky móvil ---------- */
.sticky{
  position:fixed; left:0; right:0; bottom:0; z-index:45;
  background:rgba(10,10,12,.93);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-top:1px solid rgba(212,175,55,.22);
  padding:10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
}
.sticky-in{
  max-width:1080px; margin:0 auto;
  display:flex; align-items:center; gap:12px;
}
.sticky-info{display:flex; flex-direction:column; min-width:0; flex:0 0 auto}
.sticky-label{font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3)}
.sticky-sub{font-size:13px; color:var(--ink-2); font-variant-numeric:tabular-nums; white-space:nowrap}
.sticky-btn{flex:1; margin-top:0; padding:15px 14px}
@media (min-width:900px){
  .sticky{display:none}
  body{padding-bottom:24px}
}
@media (min-width:900px){ #buy-desktop{display:inline-flex} }
@media (max-width:899px){ #buy-desktop{display:inline-flex} } /* también visible en el flujo */

/* ---------- Modal ---------- */
.modal{position:fixed; inset:0; z-index:60; display:flex; align-items:flex-end; justify-content:center}

/* CRITICO. `display:flex` de la regla de arriba GANA sobre el `display:none` que el
   navegador le da a [hidden] (regla de autor > hoja del user-agent). Sin esta linea, el
   modal "cerrado" sigue ocupando la pantalla completa con su `.modal-back` encima de
   todo — invisible, pero comiendose CADA CLIC de la pagina, incluido el de COMPRAR.
   No es teorico: el navegador headless no pudo clickear nada hasta que se agrego. */
.modal[hidden]{display:none}
@media (min-width:700px){ .modal{align-items:center} }
.modal-back{position:absolute; inset:0; background:rgba(5,5,7,.72); backdrop-filter:blur(6px); animation:fadeIn .2s ease}
.modal-card{
  position:relative; width:100%; max-width:460px;
  max-height:92vh; overflow-y:auto;
  background:var(--panel); border:1px solid var(--line);
  border-radius:18px 18px 0 0; padding:22px 18px calc(22px + env(safe-area-inset-bottom,0px));
  box-shadow:var(--shadow);
  animation:slideUp .28s cubic-bezier(.2,.9,.25,1);
}
@media (min-width:700px){ .modal-card{border-radius:18px; padding-bottom:22px} }
@keyframes slideUp{from{transform:translateY(28px); opacity:0} to{transform:none; opacity:1}}
.modal-card h2{margin:0 0 14px; font-size:27px}
.modal-x{
  position:absolute; right:12px; top:12px; width:34px; height:34px;
  border-radius:50%; border:1px solid var(--line); background:var(--panel-2);
  color:var(--ink-2); cursor:pointer; font-size:14px;
}
.modal-gem{display:flex; gap:12px; align-items:center; margin-bottom:16px}
.modal-gem img{width:64px; height:64px; border-radius:10px; object-fit:cover; border:1px solid var(--line); background:#111; flex:0 0 auto}
.modal-gem-title{margin:0 0 3px; font-family:var(--serif); font-size:18px; font-weight:600}
.modal-gem-price{margin:0; font-size:13px; color:var(--ink-2)}
.modal-gem-price strong{color:var(--gold-hi); font-size:17px; font-variant-numeric:tabular-nums}
.modal-warn{margin:6px 0 0; font-size:12px; color:var(--warn); line-height:1.4}

.field{display:block; margin-bottom:13px}
.field > span{display:block; font-size:12px; letter-spacing:.05em; color:var(--ink-2); margin-bottom:6px}
.field .opt{color:var(--ink-3); font-style:normal}
.field input{
  width:100%; padding:13px 14px; font-size:16px; /* 16px evita zoom en iOS */
  color:var(--ink); background:var(--bg-2);
  border:1px solid var(--line); border-radius:10px;
  outline:none; transition:border-color .18s, box-shadow .18s;
}
.field input:focus{border-color:var(--gold); box-shadow:0 0 0 3px rgba(212,175,55,.12)}
.field input::placeholder{color:#55534e}
.field input[aria-invalid="true"]{border-color:var(--bad)}
.form-err{
  margin:0 0 12px; padding:10px 12px; border-radius:10px;
  background:rgba(209,88,91,.12); border:1px solid rgba(209,88,91,.4);
  color:#f0b7b8; font-size:13px;
}
.modal-legal{
  margin:16px 0 0; padding:14px 14px 14px 30px;
  border:1px solid var(--line-soft); border-radius:var(--r-s);
  background:var(--panel-2);
  font-size:12.5px; color:var(--ink-2); line-height:1.55;
}
.modal-legal li{margin-bottom:7px}
.modal-legal li:last-child{margin-bottom:0}
.modal-legal strong{color:var(--ink)}

/* ---------- Toast ---------- */
.toast{
  position:fixed; left:50%; transform:translateX(-50%);
  bottom:calc(var(--sticky-h) + env(safe-area-inset-bottom,0px) + 16px);
  z-index:70; max-width:min(92vw, 420px);
  padding:12px 16px; border-radius:12px;
  background:#1b1b20; border:1px solid var(--line);
  color:var(--ink); font-size:14px; box-shadow:var(--shadow);
  animation:slideUp .25s ease;
}
.toast.bad{border-color:rgba(209,88,91,.5); background:#241a1b}
.toast.good{border-color:rgba(78,168,122,.5); background:#17241d}

/* ---------- Footer ---------- */
.foot{margin-top:44px; padding:28px 0 34px; border-top:1px solid var(--line-soft); background:rgba(0,0,0,.25)}
.foot-brand{margin:0 0 10px; font-size:18px; letter-spacing:.2em; color:var(--gold)}
.foot p{margin:0 0 8px; max-width:70ch}

/* =========================================================
   SUBASTA LENTA · MULTI-MONEDA · MULTI-PAIS
   ========================================================= */

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ---------- Selector de pais/idioma (topbar) ---------- */
.topbar-right{display:flex; align-items:center; gap:12px; min-width:0}
@media (max-width:520px){ .event-meta{display:none} }

.mkt-btn{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 10px; border-radius:999px; cursor:pointer;
  background:var(--panel-2); border:1px solid var(--line);
  color:var(--ink-2); font-size:12px; font-weight:600; letter-spacing:.04em;
  white-space:nowrap; transition:border-color .18s, color .18s;
}
.mkt-btn:hover{border-color:var(--gold); color:var(--gold-hi)}
.mkt-caret{font-size:9px; opacity:.7}

.mkt-card{max-width:480px}
.mkt-group{margin:16px 0}
.mkt-legend{
  margin:0 0 8px; font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-3);
}
.mkt-list{display:flex; flex-direction:column; gap:8px}
.mkt-item{
  display:flex; align-items:center; gap:10px; width:100%;
  padding:12px 13px; cursor:pointer; text-align:left;
  background:var(--panel-2); border:1px solid var(--line); border-radius:var(--r-s);
  color:var(--ink); font-size:15px;
  transition:border-color .18s, background .18s;
}
.mkt-item:hover{border-color:var(--gold)}
.mkt-item.on{border-color:var(--gold); background:rgba(212,175,55,.08)}
.mkt-item.off{opacity:.62}
.mkt-f{font-size:20px; line-height:1}
.mkt-n{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.mkt-c{font-size:12px; color:var(--ink-3); font-variant-numeric:tabular-nums}
.mkt-x{
  font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--bad); border:1px solid rgba(209,88,91,.4);
  padding:3px 7px; border-radius:999px;
}
.mkt-note{margin:12px 0; line-height:1.5}

/* ---------- Pieza única ---------- */
.unique-line{
  margin:8px 0 0; font-family:var(--serif); font-size:17px;
  color:var(--gold-hi); letter-spacing:.01em;
}

/* ---------- FX ---------- */
.fx-note{
  margin:8px 0 0; font-size:12.5px; line-height:1.5; color:var(--ink-3);
  border-left:2px solid var(--line); padding-left:9px;
}
.fx-note strong{color:var(--ink-2)}
.fx-note.warn{
  color:#e8c98d; border-left-color:var(--warn);
  background:rgba(224,168,60,.06); padding:8px 10px; border-radius:0 8px 8px 0;
}

/* ---------- La barra del escalón (3h, no 15s) ---------- */
.next-line{font-size:15px; color:var(--ink-2); line-height:1.5}
.next-line strong{color:var(--gold-hi); font-weight:600; font-variant-numeric:tabular-nums}

/* ---------- Compra bloqueada por país ---------- */
.buy-blocked{
  margin:12px 0 0; padding:12px 14px; border-radius:var(--r-s);
  background:rgba(209,88,91,.08); border:1px solid rgba(209,88,91,.35);
  color:#f0c4c5; font-size:13.5px; line-height:1.55;
}
.buy-blocked strong{color:#fff}

/* ---------- ESPERAR ES UNA APUESTA (la tensión del formato lento) ---------- */
.bet{
  margin-top:22px; padding:18px 16px;
  border:1px solid rgba(212,175,55,.3); border-radius:var(--r);
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(212,175,55,.10), rgba(212,175,55,0) 60%),
    var(--panel);
}
.bet-title{margin:0 0 8px; font-size:25px; color:var(--gold-hi)}
.bet-body{margin:0; font-size:15px; line-height:1.65; color:var(--ink-2)}
.bet-body strong{color:var(--ink)}
.bet-stat{
  margin:14px 0 0; padding-top:12px; border-top:1px solid var(--line-soft);
  font-size:14px; color:var(--ink-2);
}
.bet-stat strong{
  color:var(--gold-hi); font-size:17px; font-weight:700;
  font-variant-numeric:tabular-nums;
}

/* ---------- Envío / entrega ---------- */
.ship-list{margin:0; padding:0; list-style:none; display:grid; gap:10px}
.ship-list li{
  position:relative; padding-left:20px;
  font-size:14px; line-height:1.55; color:var(--ink-2);
}
.ship-list li::before{
  content:"◆"; position:absolute; left:0; top:0;
  color:var(--gold); font-size:9px; line-height:1.9;
}
.ship-list strong{color:var(--ink)}

/* ---------- EL FEED ---------- */
.feed-head{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:12px; flex-wrap:wrap; margin-bottom:14px;
}
.feed-head .panel-title{margin:0 0 2px}
.feed-sub{margin:0}
.feed-sort select{
  background:var(--panel-2); color:var(--ink);
  border:1px solid var(--line); border-radius:9px;
  padding:9px 11px; font-size:13px; font-family:inherit; cursor:pointer;
}
.feed-sort select:focus{outline:none; border-color:var(--gold)}

.feed{
  display:grid; gap:12px;
  grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));
}
.fcard{
  display:flex; flex-direction:column; text-align:left; padding:0; cursor:pointer;
  background:var(--panel-2); border:1px solid var(--line); border-radius:var(--r-s);
  overflow:hidden; transition:border-color .2s, transform .12s;
}
.fcard:hover:not(:disabled){border-color:var(--gold); transform:translateY(-2px)}
.fcard[aria-current="true"]{border-color:var(--gold); box-shadow:0 0 0 1px var(--gold) inset}
.fcard:disabled{cursor:default}
.fcard-img{position:relative; aspect-ratio:1/1; background:#111}
.fcard-img img{width:100%; height:100%; object-fit:cover}
.fcard-tag{
  position:absolute; inset:auto 0 0 0;
  padding:6px 8px; font-size:10px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; text-align:center;
  backdrop-filter:blur(4px);
}
.fcard-tag.sold{background:rgba(209,88,91,.85); color:#fff}
.fcard-tag.ended{background:rgba(20,20,24,.88); color:var(--ink-2)}
.fcard-body{padding:9px 10px}
.fcard-title{
  font-family:var(--serif); font-size:15px; font-weight:600; color:var(--ink);
  margin:0 0 3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.fcard-price{
  margin:0; font-size:14px; font-weight:700; color:var(--gold-hi);
  font-variant-numeric:tabular-nums;
}
.fcard-state{
  margin:3px 0 0; font-size:10px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-3);
}
/* Las VENDIDAS se quedan a la vista, apagadas. Le ensenan al que duda lo que
   cuesta esperar. Solo las que de verdad se vendieron. */
.fcard.is-sold img, .fcard.is-ended img{filter:grayscale(1) brightness(.5)}
.fcard.is-sold .fcard-price{color:var(--bad)}
.fcard.is-ended .fcard-price{color:var(--ink-3)}
.fcard.is-sold, .fcard.is-ended{opacity:.85}

/* ---------- Desglose en el modal (los 3 números SIEMPRE cuadran) ---------- */
.breakdown{
  margin:0 0 14px; padding:12px 13px;
  border:1px solid var(--line-soft); border-radius:var(--r-s);
  background:var(--panel-2);
}
.brk-row{display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:7px}
.brk-row:last-child{margin-bottom:0}
.brk-row dt{font-size:13px; color:var(--ink-2); margin:0}
.brk-row dd{margin:0; font-size:14px; color:var(--ink); font-variant-numeric:tabular-nums}
.brk-row.total{
  margin-top:9px; padding-top:9px; border-top:1px solid var(--line);
}
.brk-row.total dt{font-weight:600; color:var(--ink)}
.brk-row.total dd{font-size:19px; font-weight:700; color:var(--gold-hi)}

.fx-lock{
  margin:0 0 14px; padding:11px 13px; border-radius:var(--r-s);
  background:rgba(212,175,55,.07); border:1px solid rgba(212,175,55,.3);
  color:var(--ink-2); font-size:13px; line-height:1.55;
}
.fx-lock strong{color:var(--gold-hi)}

/* =========================================================
   Compra: direccion + aceptacion de terminos + identidad
   ========================================================= */
.field-group-title{
  margin:18px 0 8px; font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-3, #7d7a74); font-weight:700;
}
.field-row{ display:grid; grid-template-columns:1fr 1fr .8fr; gap:10px; }
@media (max-width:520px){ .field-row{ grid-template-columns:1fr 1fr; } .field-zip{ grid-column:1 / -1; } }

/* La aceptacion de los 30-45 dias. Va ARRIBA del boton de pagar (art. 76 BIS) y NUNCA
   pre-marcada: un checkbox pre-marcado no es una aceptacion afirmativa y vale cero en
   una disputa. */
.accept{
  display:flex; gap:10px; align-items:flex-start; margin:14px 0 4px; padding:12px 14px;
  border-radius:11px; cursor:pointer;
  background:rgba(212,175,55,.07); border:1px solid rgba(212,175,55,.32);
  font-size:13.5px; line-height:1.5;
}
.accept input[type="checkbox"]{
  width:20px; height:20px; margin:1px 0 0; flex:0 0 auto; accent-color:#d4af37; cursor:pointer;
}
.accept span strong{ color:var(--gold-hi, #f2d98a); }
.accept:has(input:invalid){ border-color:rgba(209,88,91,.5); }

.modal-foot{ margin:12px 0 0; text-align:center; }
.foot-merchant{ margin-top:10px; opacity:.85; }
.foot-merchant a{ color:inherit; }

/* Chip de una gema que AUN NO ARRANCA. No es "EN SUBASTA" y no se puede comprar. */
.chip.queued{
  color:#9dc3ef; border-color:rgba(91,143,209,.5); background:rgba(91,143,209,.12);
}

/* =========================================================
   /gracias — el comprobante
   ========================================================= */
.ok-wrap{ padding-top:28px; padding-bottom:60px; }
.ok-card{ max-width:620px; margin:0 auto; text-align:center; }
.ok-mark{
  width:62px; height:62px; margin:0 auto 14px; border-radius:50%;
  display:grid; place-items:center; font-size:30px; font-weight:800;
  background:rgba(78,168,122,.14); border:1px solid rgba(78,168,122,.5); color:#7fd3a6;
}
.ok-mark.wait{ background:rgba(224,168,60,.12); border-color:rgba(224,168,60,.5); color:#e0a83c; }
.ok-title{ font-size:clamp(24px,5vw,32px); margin:0 0 6px; }
.ok-gem{
  display:flex; gap:14px; align-items:center; text-align:left; margin:20px 0;
  padding:14px; border-radius:12px; background:rgba(255,255,255,.03);
  border:1px solid var(--line, #26262e);
}
.ok-gem img{ width:74px; height:74px; object-fit:cover; border-radius:9px; flex:0 0 auto; background:#141418; }
.ok-gem-title{ margin:0 0 4px; font-weight:600; }
.ok-price{ margin:0; color:var(--ink-2, #b9b4ab); font-size:14px; }
.ok-price strong{ color:var(--gold-hi, #f2d98a); font-size:17px; }
.ok-delivery, .ok-card .legal-card{ text-align:left; margin:12px 0; }
.ok-wa{ display:inline-block; margin-top:8px; text-decoration:none; }
.ok-merchant{ margin-top:14px; }
.ok-back{ margin-top:18px; }
.ok-back a{ color:var(--ink-2, #b9b4ab); }