/* Identidad espacial y tarjetas de subasta, octubre 2026. */
body {
  min-height: 100vh;
  background-color: #020713;
  background-image:
    linear-gradient(180deg, rgba(1, 5, 14, .2) 0, rgba(1, 7, 18, .42) 46%, rgba(1, 7, 18, .88) 100%),
    url('assets/japeru-space-background.webp');
  background-position: left -140px;
  background-size: auto calc(100vh + 140px);
  background-attachment: fixed;
  background-repeat: no-repeat;
}

.demo-band {
  position: relative;
  z-index: 10;
  padding: 5px 16px;
  border-bottom: 0;
  background: #020812;
  color: #80b4c9;
  font-size: 10px;
  letter-spacing: .08em;
}

.top {
  position: relative;
  z-index: 9;
  min-height: 78px;
  border-bottom: 0;
  background: #020812;
  box-shadow: none;
  backdrop-filter: none;
}

.top::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 0 -1px;
  /* Paint full bleed without 100vw including the vertical scrollbar width.
     Decorative box shadows do not enlarge the document's scrollable area. */
  box-shadow: 0 0 0 100vmax #020812;
  clip-path: inset(0 -100vmax);
  border-bottom: 0;
  background: #020812;
  pointer-events: none;
}

.brand {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  color: inherit;
  font-size: inherit;
  line-height: 1;
  letter-spacing: normal;
  text-shadow: none;
  -webkit-text-stroke: 0;
}

.brand-image {
  display: block;
  width: clamp(150px, 15vw, 220px);
  height: auto;
  object-fit: contain;
}

.brand::after {
  content: none;
}

.brand small {
  max-width: 128px;
  margin-top: 0;
  color: #bdc5cf;
  letter-spacing: 1.65px;
  line-height: 1.3;
  text-shadow: none;
  -webkit-text-stroke: 0;
}

nav {
  align-self: center;
  gap: 7px;
  padding: 5px;
  border: 1px solid rgba(77, 123, 153, .28);
  border-radius: 999px;
  background: rgba(7, 20, 36, .78);
}

.nav {
  min-height: 39px;
  padding: 7px 15px;
  border: 0;
  border-radius: 999px;
  color: #b4c1ce;
  font-size: 13px;
  font-weight: 750;
}

.nav.active {
  border: 0;
  background: linear-gradient(180deg, #ffe36c, #ffbd1e);
  color: #221600;
  box-shadow: 0 0 17px rgba(255, 200, 37, .25);
}

.nav span {
  background: rgba(5, 17, 32, .25);
  color: inherit;
}

.top-actions { gap: 8px; }

.account,
.audio,
.pill {
  border: 1px solid rgba(84, 126, 151, .4);
  border-radius: 999px;
  background: rgba(7, 21, 36, .78);
  color: #cfe2ee;
  padding: 7px 11px;
}

.pill {
  color: #7ff0b8;
  border-color: rgba(55, 184, 122, .42);
  background: rgba(8, 56, 42, .78);
}

.pill.guest {
  color: #ffe096;
  border-color: rgba(186, 140, 42, .45);
  background: rgba(66, 48, 14, .78);
}

.audio { font-size: 11px; }
main.shell { position: relative; z-index: 1; }
#auctionMain { padding-bottom: 40px; }

.heading,
.guide {
  border-radius: 16px;
  background: rgba(1, 10, 23, .56);
  backdrop-filter: blur(8px);
}

.heading {
  margin-top: 18px;
  padding: 18px 20px 13px;
  border: 1px solid rgba(48, 216, 238, .12);
  border-bottom: 0;
  border-radius: 16px 16px 0 0;
}

.guide {
  margin: 0 0 22px;
  padding: 8px 20px 14px;
  border: 1px solid rgba(48, 216, 238, .12);
  border-top: 0;
  border-radius: 0 0 16px 16px;
}

.grid { gap: 22px; }

.grid > .card {
  position: relative;
  overflow: hidden;
  padding: 14px;
  border: 1px solid #20dff2;
  border-radius: 22px;
  background: linear-gradient(160deg, rgba(5, 25, 47, .97), rgba(2, 11, 26, .98) 72%);
  box-shadow:
    0 0 0 1px rgba(45, 229, 248, .2),
    0 0 22px rgba(0, 217, 255, .32),
    0 20px 48px rgba(0, 0, 0, .52),
    inset 0 0 32px rgba(0, 182, 232, .08);
}

.grid > .card::before,
.grid > .card::after {
  content: "";
  position: absolute;
  z-index: 3;
  top: -24px;
  width: 78px;
  height: 78px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff9bd 0 4%, #ffd84f 6%, rgba(255, 196, 25, .52) 22%, transparent 66%);
  filter: blur(.2px);
  pointer-events: none;
}

.grid > .card::before { left: -34px; }
.grid > .card::after { right: -34px; }

.grid > .card .photo {
  z-index: 1;
  aspect-ratio: 1.02;
  border: 1px solid rgba(168, 251, 255, .95);
  border-radius: 15px;
  background: #07172b;
  box-shadow: 0 0 0 3px rgba(0, 217, 242, .16), 0 8px 18px rgba(255, 191, 22, .2);
}

.grid > .card .photo::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, transparent 62%, rgba(1, 9, 21, .35));
  pointer-events: none;
}

.grid > .card .clock-band {
  position: relative;
  inset: auto;
  z-index: 2;
  margin: -1px 7px 0;
  padding: 10px 14px;
  border: 1px solid #28dff0;
  border-top: 1px solid #28dff0;
  border-radius: 0 0 14px 14px;
  background: linear-gradient(180deg, rgba(2, 22, 43, .98), rgba(4, 13, 29, .98));
  color: #5feeff;
  box-shadow: 0 0 14px rgba(0, 216, 242, .32), inset 0 0 15px rgba(26, 205, 237, .08);
  backdrop-filter: blur(8px);
}

.grid > .card .clock-band.warn {
  color: #ffe464;
  border-color: #ffc928;
  background: linear-gradient(180deg, #3c2b0e, #171306);
}

.grid > .card .clock-band.final {
  color: var(--timer-color);
  border-color: var(--timer-color);
  background: #071c25;
}

.grid > .card .clock {
  font-size: 31px;
  font-weight: 900;
  text-shadow: 0 0 12px currentColor;
}

.grid > .card .clock-message {
  color: #b5d9e6;
  font-weight: 700;
}

.grid > .card .track {
  background: #122f44;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .7);
}

.grid > .card .card-body { padding: 16px 7px 4px; }

.grid > .card .product-title {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 20px;
  font-weight: 900;
  line-height: 1.14;
  text-shadow: 0 2px 5px rgba(0, 0, 0, .65);
}

.grid > .card .product-title::before {
  content: "";
  width: 10px;
  height: 16px;
  flex: 0 0 10px;
  border: 2px solid #ffd33e;
  border-radius: 2px;
  box-shadow: 0 0 8px rgba(255, 205, 45, .55);
  transform: skew(-8deg);
}

.grid > .card .description {
  min-height: 18px;
  color: #91a9bb;
}

.grid > .card .bid-info {
  margin: 17px 0 10px;
  padding-top: 15px;
  border-top: 1px solid rgba(68, 205, 224, .36);
}

.grid > .card .leader-label {
  color: #ffd852;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.grid > .card .bid-info > div:first-child {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
}

.grid > .card .leader-label::before {
  content: "♛";
  margin-right: 5px;
  font-size: 13px;
}

.grid > .card .price {
  color: #ffd852;
  font-size: 31px;
  font-weight: 950;
  text-shadow: 0 0 11px rgba(255, 205, 47, .24);
}

.grid > .card .personal {
  text-align: center;
  color: #8fb2c6;
}

.grid > .card .coins {
  gap: 12px;
  margin: 12px 0 15px;
}

.grid > .card .coin {
  flex-basis: 58px;
  width: 58px;
  max-width: 58px;
  border: 2px solid #27dfee;
  background: radial-gradient(circle at 40% 32%, #153c57, #07162a 68%);
  color: #f4fbff;
  box-shadow: 0 0 12px rgba(0, 217, 242, .26), inset 0 0 12px rgba(49, 210, 235, .08);
}

.grid > .card .coin[aria-pressed="true"] {
  border-color: #ffcf32;
  background: radial-gradient(circle at 40% 32%, #694e0a, #211802 70%);
  color: #fff1a8;
  box-shadow: 0 0 16px rgba(255, 201, 28, .45);
}

.grid > .card .bid-button {
  min-height: 54px;
  border: 1px solid #fff093;
  border-radius: 10px;
  background: linear-gradient(180deg, #ffe971, #f4b91b);
  color: #201600;
  box-shadow: 0 0 18px rgba(255, 198, 25, .34), inset 0 1px 0 #fffbd1;
  font-size: 18px;
  font-weight: 900;
}

.grid > .card .bid-button:disabled {
  background: linear-gradient(180deg, #705f35, #403516);
  color: #d4c68f;
  border-color: #8f7940;
  box-shadow: none;
  opacity: .68;
}

.grid > .card .details-link {
  border-color: rgba(50, 218, 239, .42);
  background: rgba(5, 29, 48, .72);
  color: #67e8f7;
}

.grid > .card .lot { display: none !important; }

@media (max-width: 1100px) {
  .top { padding-top: 12px; padding-bottom: 10px; }
  nav { order: 3; width: auto; height: auto; margin-top: 5px; }
  .top-actions { margin-left: auto; }
}

@media (max-width: 760px) {
  body { background-position: 12% -120px; background-size: auto calc(100vh + 120px); }
  .demo-band { font-size: 9px; }
  .top { min-height: 82px; padding-top: 12px; padding-bottom: 12px; }
  .brand { gap: 7px; }
  .brand-image { width: 142px; }
  .brand small { max-width: 76px; font-size: 6px; letter-spacing: .9px; }
  nav {
    order: 3;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
    padding: 4px;
  }
  .nav { min-width: 0; padding: 7px 6px; font-size: 11px; }
  .top-actions { gap: 5px; }
  .account, .audio, .pill { padding: 5px 8px; font-size: 10px; }
  .heading { margin-top: 13px; padding: 15px 14px 10px; }
  .guide { padding: 7px 14px 12px; }
  .grid { gap: 24px; }
  .grid > .card { padding: 12px; border-radius: 19px; }
  .grid > .card .photo { aspect-ratio: 1.22; }
  .grid > .card .clock { font-size: 29px; }
  .grid > .card .product-title { font-size: 20px; }
  .grid > .card .price { font-size: 30px; }
  .grid > .card .coin { flex-basis: 57px; width: 57px; max-width: 57px; }
}

@media (prefers-reduced-motion: reduce) {
  body { background-attachment: scroll; }
}

/* Acceso visible a TikTok, enlazado con el estado del reloj de jornada. */
.brand-home {
  display: block;
  flex: 0 0 auto;
  border-radius: 12px;
}

.tiktok-live-link {
  position: relative;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-width: 196px;
  min-height: 52px;
  padding: 7px 10px 7px 8px;
  overflow: hidden;
  border: 1px solid rgba(87, 222, 231, .34);
  border-radius: 15px;
  background: linear-gradient(145deg, rgba(15, 29, 43, .96), rgba(5, 13, 25, .98));
  box-shadow: inset 0 1px rgba(255, 255, 255, .05), 0 8px 20px rgba(0, 0, 0, .25);
  color: #f7fbff;
  text-decoration: none;
  font-style: normal;
  line-height: 1.1;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.tiktok-live-link::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 20%, rgba(37, 244, 238, .08), transparent 75%);
  pointer-events: none;
}

.tiktok-live-link:hover {
  transform: translateY(-2px);
  border-color: rgba(37, 244, 238, .72);
  box-shadow: inset 0 1px rgba(255, 255, 255, .07), 0 10px 26px rgba(0, 0, 0, .32);
}

.tiktok-live-icon {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 11px;
  background: #060a12;
}

.tiktok-live-icon svg { width: 25px; height: 25px; overflow: visible; }
.tiktok-note-cyan { fill: #25f4ee; transform: translate(-1px, 1px); }
.tiktok-note-pink { fill: #fe2c55; transform: translate(1px, -1px); }
.tiktok-note-main { fill: #fff; }

.tiktok-live-copy {
  position: relative;
  z-index: 1;
  display: block;
  min-width: 0;
}

.tiktok-live-copy strong {
  display: block;
  color: #fff;
  font-size: 12px;
  font-weight: 850;
  letter-spacing: .02em;
  white-space: nowrap;
}

.tiktok-live-copy small {
  display: block;
  margin-top: 4px;
  overflow: hidden;
  color: #aab9c8;
  font-size: 8px;
  font-weight: 650;
  letter-spacing: .04em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tiktok-live-arrow {
  position: relative;
  z-index: 1;
  color: #78e7eb;
  font-size: 14px;
  font-style: normal;
}

.tiktok-live-badge {
  position: absolute;
  z-index: 2;
  top: 3px;
  right: 5px;
  display: none;
  align-items: center;
  gap: 3px;
  padding: 2px 5px;
  border-radius: 999px;
  background: #ff315b;
  color: #fff;
  font-size: 7px;
  font-style: normal;
  font-weight: 900;
  letter-spacing: .08em;
}

.tiktok-live-badge i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
}

.tiktok-live-link.is-live {
  border-color: rgba(255, 49, 91, .85);
  background: linear-gradient(145deg, rgba(63, 8, 31, .97), rgba(16, 7, 20, .99));
  box-shadow: inset 0 1px rgba(255, 255, 255, .08), 0 0 0 1px rgba(37, 244, 238, .18), 0 0 24px rgba(255, 49, 91, .24);
  animation: tiktokLiveGlow 1.8s ease-in-out infinite;
}

.tiktok-live-link.is-live .tiktok-live-badge { display: flex; }
.tiktok-live-link.is-live .tiktok-live-copy strong { color: #fff; padding-right: 27px; }
.tiktok-live-link.is-live .tiktok-live-copy small { color: #ffc0ce; }
.tiktok-live-link.is-live .tiktok-live-arrow { color: #fff; }

@keyframes tiktokLiveGlow {
  50% { box-shadow: inset 0 1px rgba(255, 255, 255, .08), 0 0 0 1px rgba(37, 244, 238, .28), 0 0 32px rgba(255, 49, 91, .4); }
}

@media (max-width: 1220px) {
  .brand { gap: 8px; }
  .brand-image { width: clamp(145px, 14vw, 185px); }
  .tiktok-live-link { min-width: 168px; }
  .tiktok-live-copy small { max-width: 106px; }
}

@media (max-width: 760px) {
  .brand { width: 100%; justify-content: space-between; }
  .brand-image { width: 136px; }
  .tiktok-live-link { min-width: 0; width: 166px; min-height: 46px; padding: 6px 8px 6px 6px; grid-template-columns: 31px minmax(0, 1fr) auto; gap: 6px; border-radius: 13px; }
  .tiktok-live-icon { width: 31px; height: 31px; border-radius: 10px; }
  .tiktok-live-icon svg { width: 23px; height: 23px; }
  .tiktok-live-copy strong { font-size: 10px; }
  .tiktok-live-copy small { max-width: 91px; margin-top: 3px; font-size: 7px; }
  .tiktok-live-arrow { font-size: 12px; }
}

@media (max-width: 390px) {
  .brand-image { width: 126px; }
  .tiktok-live-link { width: 153px; }
  .tiktok-live-copy small { max-width: 80px; }
}

@media (prefers-reduced-motion: reduce) {
  .tiktok-live-link { transition: none; }
  .tiktok-live-link.is-live { animation: none; }
}

/* Acabado fino de las tarjetas: conserva intacta el área de fotografía. */
.grid > .card {
  border-color: #28e9f8;
  background:
    radial-gradient(circle at 0 0, rgba(255, 218, 55, .38), transparent 45px),
    radial-gradient(circle at 100% 0, rgba(255, 218, 55, .38), transparent 45px),
    radial-gradient(circle at 0 100%, rgba(255, 218, 55, .24), transparent 46px),
    radial-gradient(circle at 100% 100%, rgba(255, 218, 55, .24), transparent 46px),
    linear-gradient(165deg, rgba(2, 24, 44, .98), rgba(1, 10, 24, .99) 70%);
  box-shadow:
    0 0 0 1px rgba(90, 244, 255, .22),
    0 0 13px rgba(0, 226, 255, .52),
    0 0 34px rgba(0, 175, 224, .24),
    0 22px 48px rgba(0, 0, 0, .6),
    inset 0 0 30px rgba(0, 201, 239, .08);
}

.grid > .card::before,
.grid > .card::after {
  top: -28px;
  width: 88px;
  height: 88px;
  background: radial-gradient(circle, #fffbd0 0 3%, #ffe45d 7%, rgba(255, 194, 22, .62) 21%, transparent 64%);
  filter: blur(.3px);
}

.grid > .card .clock-band {
  margin: 8px 0 0;
  padding: 8px 10px;
  border: 1px solid #26e8f7;
  border-radius: 11px;
  background: linear-gradient(180deg, rgba(3, 40, 61, .98), rgba(1, 18, 35, .98));
  box-shadow:
    0 0 0 1px rgba(40, 231, 246, .12),
    0 0 15px rgba(0, 221, 247, .34),
    inset 0 0 16px rgba(18, 218, 242, .08);
}

.grid > .card .clock-row {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.grid > .card .clock {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #66f2ff;
  font-size: 30px;
  font-weight: 950;
  letter-spacing: .015em;
  text-shadow: 0 0 7px rgba(60, 239, 255, .86), 0 0 17px rgba(0, 204, 244, .54);
}

.grid > .card .clock::before,
.grid > .card .clock-message::before,
.grid > .card .product-title::before,
.grid > .card .leader-label::before {
  content: "";
  display: inline-block;
  flex: 0 0 auto;
  background-color: currentColor;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
}

.grid > .card .clock::before {
  width: 18px;
  height: 18px;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='black' stroke-width='2.4'/%3E%3Cpath d='M12 7v5l3.5 2' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.4'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='black' stroke-width='2.4'/%3E%3Cpath d='M12 7v5l3.5 2' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.4'/%3E%3C/svg%3E");
}

.grid > .card .clock-message {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 100%;
  max-width: none;
  min-height: 30px;
  padding: 5px 9px;
  border: 1px solid rgba(42, 229, 244, .72);
  border-radius: 999px;
  background: rgba(2, 34, 52, .9);
  color: #9cf7ff;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.1;
  text-align: center;
  box-shadow: inset 0 0 10px rgba(31, 216, 241, .1);
}

.grid > .card .clock-message::before {
  width: 12px;
  height: 12px;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 2h6M12 5a8 8 0 1 1-5.65 2.35A8 8 0 0 1 12 5Zm0 3v4l3 2' fill='none' stroke='black' stroke-linecap='round' stroke-width='2.2'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 2h6M12 5a8 8 0 1 1-5.65 2.35A8 8 0 0 1 12 5Zm0 3v4l3 2' fill='none' stroke='black' stroke-linecap='round' stroke-width='2.2'/%3E%3C/svg%3E");
}

.grid > .card .track {
  height: 5px;
  margin-top: 7px;
  background: #102c3e;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .8), 0 0 6px rgba(43, 227, 245, .18);
}

.grid > .card .card-body { padding: 14px 2px 4px; }

.grid > .card .product-title {
  gap: 9px;
  color: #f6f8fb;
  font-size: 21px;
  font-weight: 900;
  text-shadow: 0 2px 6px rgba(0, 0, 0, .75);
}

.grid > .card .product-title::before {
  width: 17px;
  height: 21px;
  color: #ffdd35;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  transform: rotate(-8deg);
  filter: drop-shadow(0 0 5px rgba(255, 212, 39, .58));
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 28'%3E%3Crect x='4' y='2' width='16' height='24' rx='2.5' fill='none' stroke='black' stroke-width='2.4'/%3E%3Ccircle cx='12' cy='14' r='3.2' fill='black'/%3E%3Cpath d='M8 6h8M8 22h8' stroke='black' stroke-width='1.8'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 28'%3E%3Crect x='4' y='2' width='16' height='24' rx='2.5' fill='none' stroke='black' stroke-width='2.4'/%3E%3Ccircle cx='12' cy='14' r='3.2' fill='black'/%3E%3Cpath d='M8 6h8M8 22h8' stroke='black' stroke-width='1.8'/%3E%3C/svg%3E");
}

.grid > .card .description {
  margin-top: 5px;
  padding-left: 26px;
  color: #91a9bb;
  font-size: 12px;
}

.grid > .card .bid-info {
  align-items: center;
  margin: 17px 0 0;
  padding: 15px 1px 10px;
  border-top: 1px solid rgba(45, 218, 237, .65);
}

.grid > .card .leader-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 5px;
  color: #ffdc37;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.grid > .card .leader-label::before {
  width: 14px;
  height: 12px;
  margin: 0;
  color: #ffdc37;
  filter: drop-shadow(0 0 4px rgba(255, 211, 41, .42));
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 20'%3E%3Cpath d='M3 6l5 4 4-7 4 7 5-4-2 11H5L3 6Zm3 13h12v-2H6v2Z' fill='black'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 20'%3E%3Cpath d='M3 6l5 4 4-7 4 7 5-4-2 11H5L3 6Zm3 13h12v-2H6v2Z' fill='black'/%3E%3C/svg%3E");
}

.grid > .card .leader {
  display: flex;
  width: max-content;
  max-width: 100%;
  margin-top: 0;
  color: #f4f7fb;
  font-size: 19px;
  font-weight: 900;
}

.grid > .card .leader--empty {
  display: flex;
  width: max-content;
  color: #f4f7fb;
  font-size: 19px;
  font-weight: 900;
}

.grid > .card .price {
  color: #ffdd35;
  font-size: 33px;
  font-weight: 950;
  letter-spacing: -.045em;
  text-shadow: 0 0 7px rgba(255, 215, 49, .52), 0 2px 0 rgba(94, 59, 0, .65);
}

.grid > .card .personal {
  height: auto;
  min-height: 25px;
  margin: 0 0 6px;
  color: #9cb7c8;
  font-size: 11px;
  line-height: 1.35;
  text-align: center;
}

.grid > .card .coins {
  gap: 13px;
  margin: 7px 0 15px;
}

.grid > .card .coin,
.grid > .card .coin:disabled {
  flex-basis: 59px;
  width: 59px;
  max-width: 59px;
  border: 1px solid #25dff0;
  background: radial-gradient(circle at 42% 34%, #12364d, #061526 70%);
  color: #dffcff;
  font-size: 15px;
  font-weight: 850;
  opacity: 1;
  box-shadow: 0 0 10px rgba(0, 221, 242, .35), inset 0 0 11px rgba(35, 222, 241, .09);
}

.grid > .card .coin:disabled { color: #a9dce3; box-shadow: 0 0 9px rgba(0, 218, 239, .27), inset 0 0 10px rgba(35, 222, 241, .06); }

.grid > .card .coin[aria-pressed="true"] {
  border-color: #ffe052;
  background: radial-gradient(circle at 42% 34%, #75590d, #251b02 72%);
  color: #fff4ad;
  box-shadow: 0 0 14px rgba(255, 207, 40, .55), inset 0 0 10px rgba(255, 225, 100, .1);
}

.grid > .card .bid-button,
.grid > .card .bid-button:disabled {
  min-height: 53px;
  border: 1px solid #fff08b;
  border-radius: 9px;
  background: linear-gradient(180deg, #ffe95c, #d6a400 74%, #a27b00);
  color: #201700;
  font-size: 17px;
  font-weight: 950;
  opacity: 1;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .34);
  box-shadow: 0 0 8px rgba(255, 232, 97, .75), 0 0 20px rgba(255, 194, 16, .52), inset 0 1px 0 #fffbd0;
}

.grid > .card .bid-button:disabled {
  color: #59460a;
  filter: saturate(.86) brightness(.88);
  cursor: not-allowed;
}

.grid > .card .details-link {
  margin: 16px auto 3px;
  padding: 8px 15px;
  min-height: 38px;
  border: 1px solid rgba(38, 218, 238, .72);
  border-radius: 8px;
  background: rgba(4, 35, 54, .8);
  color: #8af3ff;
  font-size: 11px;
  font-weight: 800;
  box-shadow: inset 0 0 10px rgba(37, 214, 236, .08);
}

@media (max-width: 760px) {
  .grid > .card .clock-row { gap: 7px; }
  .grid > .card .clock { font-size: 28px; }
  .grid > .card .clock-message { padding-inline: 7px; font-size: 9px; }
  .grid > .card .product-title { font-size: 20px; }
  .grid > .card .coins { gap: 11px; }
  .grid > .card .coin,
  .grid > .card .coin:disabled { flex-basis: 56px; width: 56px; max-width: 56px; }
}

/* Tarjetas mate: el color intenso queda reservado para los últimos 7 segundos. */
.grid > .card {
  border-color: #42566b;
  background: linear-gradient(160deg, #17263a, #0e1928 72%);
  box-shadow: 0 18px 38px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255, 255, 255, .035);
  transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}

.grid > .card::before,
.grid > .card::after { display: none; }

.grid > .card .photo {
  border-color: #4a6075;
  box-shadow: 0 7px 17px rgba(0, 0, 0, .34);
}

.grid > .card .clock-band {
  border-color: #465d73;
  background: #142336;
  color: #d8e3ed;
  box-shadow: none;
}

.grid > .card .clock {
  color: #e2e9f0;
  text-shadow: none;
  transition: color .12s ease, font-size .12s ease, transform .12s ease, text-shadow .12s ease;
}

.grid > .card .clock-message {
  border-color: #4b6176;
  background: #1b2b3d;
  color: #cbd6e0;
  box-shadow: none;
}

.grid > .card .track {
  background: #26384a;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .65);
}

.grid > .card .bid-info { border-top-color: #384d61; }
.grid > .card .leader-label { color: #c4ab6d; }
.grid > .card .leader-label::before,
.grid > .card .product-title::before { filter: none; }

.grid > .card .price {
  color: #dfc06a;
  text-shadow: none;
}

.grid > .card .coin,
.grid > .card .coin:disabled {
  border-color: #536a80;
  background: #192a3c;
  color: #e1e8ef;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}

.grid > .card .coin:disabled {
  color: #9eacba;
  box-shadow: none;
}

.grid > .card .coin[aria-pressed="true"] {
  border-color: #c8a84f;
  background: #4c4021;
  color: #fff0b8;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}

.grid > .card .bid-button,
.grid > .card .bid-button:disabled {
  border-color: #d3b55d;
  background: #d5b34e;
  color: #241d0d;
  text-shadow: none;
  box-shadow: none;
}

.grid > .card .bid-button:disabled {
  border-color: #6f6547;
  background: #5d5439;
  color: #bdb394;
  filter: none;
}

.grid > .card .details-link {
  border-color: #50677b;
  background: #17293a;
  color: #c2d2de;
  box-shadow: none;
}

.grid > .card.is-warning { border-color: #887541; }

.grid > .card .clock-band.warn {
  border-color: #9a8140;
  background: #332b19;
  color: #e6c96d;
  box-shadow: none;
}

.grid > .card.is-closing {
  border-color: var(--timer-color);
  background: linear-gradient(160deg, #182637, #101923 72%);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--timer-color) 42%, transparent),
    0 0 34px color-mix(in srgb, var(--timer-color) 54%, transparent),
    0 18px 42px rgba(0, 0, 0, .5);
  animation: closing-card-pulse .72s ease-in-out infinite alternate;
}

.grid > .card .clock-band.final {
  border: 2px solid var(--timer-color);
  background: #17202a;
  background: color-mix(in srgb, var(--timer-color) 22%, #111820);
  color: var(--timer-color);
  box-shadow: 0 0 24px color-mix(in srgb, var(--timer-color) 58%, transparent), inset 0 0 18px color-mix(in srgb, var(--timer-color) 16%, transparent);
}

.grid > .card .clock-band.final .clock {
  color: var(--timer-color);
  font-size: 36px;
  transform: scale(1.04);
  text-shadow: 0 0 8px currentColor, 0 0 18px currentColor;
}

.grid > .card .clock-band.final .clock-message {
  border-color: var(--timer-color);
  background: #1b252d;
  background: color-mix(in srgb, var(--timer-color) 25%, #141b22);
  color: #fff;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .04em;
  box-shadow: 0 0 12px color-mix(in srgb, var(--timer-color) 45%, transparent);
}

.grid > .card .clock-band.final .track {
  height: 9px;
  background: #202932;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .8), 0 0 11px color-mix(in srgb, var(--timer-color) 42%, transparent);
}

.grid > .card .clock-band.final .bar {
  background: var(--timer-color);
  box-shadow: 0 0 13px currentColor;
}

@keyframes closing-card-pulse {
  from { transform: translateY(0) scale(1); }
  to { transform: translateY(-2px) scale(1.012); }
}

@media (max-width: 760px) {
  .grid > .card .clock-band.final .clock { font-size: 34px; }
}

@media (prefers-reduced-motion: reduce) {
  .grid > .card.is-closing { animation: none; }
}

/* Two-row site header. Layout only; all role controls retain their own gates. */
header.top.header-two-row{display:flex;flex-direction:column;align-items:stretch;gap:0;min-height:0;padding-top:10px;padding-bottom:8px;border-bottom:1px solid #32cadd}
.header-two-row .header-primary{display:grid;grid-template-columns:160px minmax(0,1fr) minmax(140px,240px);align-items:center;gap:14px;min-width:0;padding-bottom:8px}
.header-two-row .brand{width:auto;min-width:0;gap:0;justify-content:flex-start}
.header-two-row .brand-home{max-width:100%;border-radius:7px}
.header-two-row .brand-image{width:156px;max-width:100%;height:auto}
.header-two-row nav{display:flex;flex-wrap:wrap;align-items:center;align-self:center;justify-content:flex-start;gap:4px;order:0;width:auto;min-width:0;margin:0;padding:0 0 0 14px;border:0;border-left:1px solid #25415a;border-radius:0;background:transparent}
.header-two-row .nav{flex:0 1 auto;min-width:0;min-height:44px;padding:9px 12px;font-size:12px;line-height:1.35;white-space:normal;overflow-wrap:anywhere}
.header-two-row .nav.active{background:linear-gradient(180deg,#ffe36c,#ffcf3f);color:#221600;box-shadow:none}
.header-two-row .header-account{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:6px;min-width:0}
.header-two-row #access{max-width:100%;margin:0;padding:7px 10px;font-size:11px;line-height:1.4;overflow-wrap:anywhere;white-space:normal;text-align:right}
.header-two-row #profileSettings{min-height:44px}
.header-two-row .header-secondary{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 16px;min-width:0;padding-top:8px;border-top:1px solid #1e3e52}
.header-two-row .tiktok-live-link{flex:0 1 230px;width:230px;min-width:0;max-width:100%;min-height:44px;padding:5px 9px;grid-template-columns:28px minmax(0,1fr) auto;border-radius:8px;box-shadow:none}
.header-two-row .tiktok-live-icon{width:28px;height:28px;border-radius:7px}
.header-two-row .tiktok-live-icon svg{width:23px;height:23px}
.header-two-row .tiktok-live-copy strong{font-size:11px}
.header-two-row .tiktok-live-copy small{max-width:none;font-size:8px;letter-spacing:normal;margin-top:2px}
.header-two-row .top-actions{display:flex;flex-direction:row;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:7px;margin:0 0 0 auto;min-width:0;max-width:100%}
.header-two-row .account,.header-two-row .audio{min-height:44px;max-width:100%;padding:8px 11px;border-radius:7px;border-color:#295069;font-size:12px;line-height:1.35;white-space:normal;overflow-wrap:anywhere;text-align:center}
.header-two-row #account{border-left-color:#54cbdf;margin-left:6px}
.header-two-row button:focus-visible,.header-two-row a:focus-visible{outline:3px solid #7aeaff;outline-offset:3px}
/* Respect native hidden on dynamically gated nav/account controls. */
.header-two-row [hidden]{display:none!important}
@media(max-width:1100px){
 .header-two-row .header-primary{grid-template-columns:minmax(130px,1fr) minmax(140px,1fr);gap:8px 12px}
 .header-two-row .header-account{grid-column:2;grid-row:1}
 .header-two-row nav{grid-column:1 / -1;grid-row:2;padding:8px 0 0;border-left:0;border-top:1px solid #1e3e52}
}
@media(max-width:760px){
 header.top.header-two-row{padding-top:8px;padding-bottom:8px}
 .header-two-row .brand-image{width:140px}
 .header-two-row nav{display:flex;gap:5px}
 .header-two-row .nav{flex:1 1 140px;padding:8px;font-size:12px}
 .header-two-row .header-secondary{gap:8px}
 .header-two-row .top-actions{flex:1 1 100%;justify-content:flex-start;margin:0}
 .header-two-row .account,.header-two-row .audio{flex:0 1 auto;font-size:12px}
 .header-two-row #account{margin-left:0}
}
@media(max-width:390px){
 .header-two-row .header-primary{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:8px}
 .header-two-row .brand-image{width:120px}
 .header-two-row #access{padding:6px;font-size:10px}
 .header-two-row .nav{flex-basis:110px}
}

/* Account disclosure: keep all existing controls and their role gates. */
.header-two-row .account-dropdown{position:relative;flex:0 0 auto;max-width:100%}
.header-two-row .account-menu-toggle{display:flex;align-items:center;justify-content:center;gap:12px;min-width:100px;color:#e5f9ff;background:#0b2034;border:1px solid #36738d}
.header-two-row .account-menu-toggle[aria-expanded="true"]{border-color:#5bdded;background:#103047;box-shadow:0 0 0 1px #5bdded33}
.header-two-row .account-menu-toggle .account-menu-chevron{display:block;flex:0 0 16px;width:16px;height:16px;align-self:center;transform-origin:center;transition:transform .15s}
.header-two-row .account-menu-toggle[aria-expanded="true"] .account-menu-chevron{transform:rotate(180deg)}
.header-two-row .top-actions.account-menu{position:fixed;z-index:20;right:auto;top:0;display:flex;flex-direction:column;align-items:stretch;flex-wrap:nowrap;gap:4px;width:270px;max-width:calc(100vw - 32px);max-height:calc(100dvh - 16px);overflow-y:auto;margin:0;padding:8px;border:1px solid #32627e;border-radius:12px;background:#071728;box-shadow:0 16px 38px #0009}
.header-two-row .account-menu>.account,.header-two-row .account-menu>.audio{flex:0 0 auto;width:100%;min-height:46px;padding:11px 13px;text-align:left;border:1px solid transparent;border-radius:7px;background:transparent;color:#e3f1fa;font-size:13px}
.header-two-row .account-menu>button:hover,.header-two-row .account-menu>button:focus-visible{background:#143249;border-color:#34718a;outline-offset:-3px}
.header-two-row .account-menu>#account{margin:4px 0 0;border-top:1px solid #284457;border-left-color:transparent;border-radius:0 0 7px 7px;color:#ffb4ad}
.header-two-row .account-menu>#sound{color:#9be9f0}
@media(prefers-reduced-motion:reduce){.header-two-row .account-menu-toggle .account-menu-chevron{transition:none}}

/* Centered masthead: equal side tracks keep the original logo on the true center. */
.header-two-row .header-primary{grid-template-columns:minmax(0,1fr) 260px minmax(0,1fr);gap:12px 20px;padding:2px 0 10px}
.header-two-row .header-primary>.tiktok-live-link{grid-column:1;grid-row:1;justify-self:start}
.header-two-row .brand{grid-column:2;grid-row:1;justify-content:center;justify-self:center;width:100%}
.header-two-row .brand-image{width:260px;max-width:100%;height:auto}
.header-two-row .header-account{grid-column:3;grid-row:1;justify-self:end;max-width:100%}
.header-two-row .header-secondary{justify-content:center;padding-top:8px}
.header-two-row nav{grid-column:auto;grid-row:auto;justify-content:center;width:100%;padding:0;border:0;gap:6px}
.header-two-row .nav{flex:0 1 auto;padding:9px 18px}
@media(max-width:900px){
 .header-two-row .header-primary{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;padding-top:2px}
 .header-two-row .brand{grid-column:1 / -1;grid-row:1}
 .header-two-row .brand-image{width:240px}
 .header-two-row .header-primary>.tiktok-live-link{grid-column:1;grid-row:2}
 .header-two-row .header-account{grid-column:2;grid-row:2}
}
@media(max-width:760px){
 .header-two-row .header-primary{gap:10px 12px}
 .header-two-row .brand-image{width:220px}
 .header-two-row .header-primary>.tiktok-live-link{width:230px}
 .header-two-row .nav{flex:0 1 auto;padding:9px 12px}
}
@media(max-width:390px){
 .header-two-row .header-primary{gap:10px 8px}
 .header-two-row .brand-image{width:210px}
 .header-two-row .nav{padding:9px 10px;font-size:11px}
}
@media(max-width:520px){
 .header-two-row .header-primary>.tiktok-live-link{grid-template-columns:28px minmax(0,1fr);gap:6px}
 .header-two-row .tiktok-live-arrow{display:none}
 .header-two-row .tiktok-live-copy strong,.header-two-row .tiktok-live-copy small{white-space:normal;overflow-wrap:anywhere;line-height:1.3}
 .header-two-row .tiktok-live-link.is-live{padding-top:17px}
 .header-two-row .tiktok-live-link.is-live .tiktok-live-copy strong{padding-right:0}
}

/* Unified catalog cart: presentation only; original checkout remains in both catalogs. */
.header-two-row .shared-cart-toggle{display:flex;align-items:center;justify-content:center;gap:7px;min-height:44px;max-width:100%;padding:8px 10px;border:1px solid #45627c;border-radius:9px;background:#10243a;color:#e7f6ff;font-family:inherit;font-size:12px;font-weight:700;cursor:pointer}
.header-two-row .shared-cart-toggle svg{flex:0 0 22px}
.header-two-row .shared-cart-toggle.has-items{border-color:#ffd95b;box-shadow:0 0 0 1px #ffd95b33;background:#233047}
.shared-cart-toggle b{display:grid;place-items:center;min-width:24px;height:24px;padding:0 5px;border-radius:20px;background:#ffdb56;color:#241b00;font-size:12px}
.shared-cart-dialog{box-sizing:border-box;position:fixed;inset:0 0 0 auto;margin:0;width:min(440px,100%);height:100%;height:100dvh;max-width:100%;max-height:100dvh;padding:0;border:1px solid #3b6076;border-radius:18px 0 0 18px;background:#081b2d;color:#e7f4ff;box-shadow:-15px 0 60px #0006;overflow:hidden}
.shared-cart-dialog[open]{display:flex;flex-direction:column}
.shared-cart-dialog::backdrop{background:#0009}
.shared-cart-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:20px;border-bottom:1px solid #294258;flex:none}
.shared-cart-heading h2{margin:0;font-size:24px}.shared-cart-heading p{margin:5px 0 0;color:#a8c2d4;font-size:13px}.shared-cart-heading button{min-width:44px;min-height:44px}
.shared-cart-items{list-style:none;margin:0;padding:0 18px;overflow:auto;overscroll-behavior:contain;flex:1;min-height:0}
.shared-cart-item{display:grid;grid-template-columns:70px minmax(0,1fr) auto;gap:12px;align-items:center;padding:16px 0;border-bottom:1px solid #294258}
.shared-cart-picture{width:70px;height:78px;border:1px solid #365267;border-radius:9px;overflow:hidden;background:#12273d}.shared-cart-picture img{width:100%;height:100%;object-fit:contain;display:block}
.shared-cart-copy{min-width:0;overflow-wrap:anywhere}.shared-cart-copy strong{display:block;font-size:14px}.shared-cart-copy small{display:block;margin-top:5px;color:#adc2d1;font-size:12px}.shared-cart-price{display:block;margin-top:8px;color:#ffe27a;font-size:15px}
.shared-cart-remove{min-height:44px;padding:7px;color:#ffb8af;background:transparent;border:0;text-decoration:underline;cursor:pointer}.shared-cart-remove:disabled{opacity:.5;cursor:wait}
.shared-cart-footer{flex:none;padding:16px 20px max(16px,env(safe-area-inset-bottom));border-top:1px solid #365267;background:#0c2236;max-height:60dvh;overflow:auto}
.shared-cart-footer p{font-size:12px;color:#b5cad8;line-height:1.5;margin:0 0 12px}.shared-cart-total{display:flex;justify-content:space-between;gap:8px;margin:14px 0;font-size:17px}.shared-cart-total strong{color:#ffe27a}
#sharedCartReview{width:100%;min-height:48px;font-weight:800;background:#ffdb56;color:#231b00;border-color:#ffdb56}#sharedCartReview:disabled{opacity:.5;cursor:not-allowed}
.shared-cart-browse{display:flex;gap:8px;margin:10px 0}.shared-cart-browse button{flex:1;min-height:44px;font-size:12px}.shared-cart-footer>small{display:block;color:#9fb6c8;font-size:11px;line-height:1.5}
.shared-cart-dialog button:focus-visible{outline:3px solid #7aeaff;outline-offset:2px}.shared-cart-dialog [hidden]{display:none!important}
@media(max-width:520px){.header-two-row .header-account{gap:5px}.header-two-row .shared-cart-toggle{font-size:11px;gap:5px;padding:7px}.shared-cart-heading{padding:16px}.shared-cart-item{grid-template-columns:58px minmax(0,1fr) auto;gap:8px}.shared-cart-picture{width:58px;height:68px}.shared-cart-footer{padding:12px 16px max(12px,env(safe-area-inset-bottom))}}

body.shared-cart-open{overflow:hidden}

/* Presentation only: admin accounts do not need customer cart controls. */
.catalog-shopping-hidden #sharedCartToggle,.catalog-shopping-hidden #binderPreviewCart,.catalog-shopping-hidden #figureCart,.catalog-shopping-hidden #figureCartShortcut{display:none!important}
@media(max-width:700px){.catalog-shopping-hidden.has-catalog-cart #binderCatalogPublic{padding-bottom:0}}

/* One checkout surface after its drawer is installed; keep canonical handlers intact. */
.unified-cart-ready #binderPreviewCart,.unified-cart-ready #figureCart{display:none!important}
.catalog-shopping-hidden #binderCartShortcut{display:none!important}
#binderCartShortcut[hidden]{display:none!important}
#binderCartShortcut{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;margin:12px 0;border:1px solid #365267;border-radius:12px;background:#10243a}
#binderCartShortcut>span{min-width:0;font-size:14px;color:#dbeeff}
#binderCartShortcut button{flex:none;min-height:44px}
#sharedCartClear{width:100%;margin:8px 0;min-height:44px}
@media(max-width:700px){.unified-cart-ready.has-catalog-cart #binderCatalogPublic{padding-bottom:0}}