:root {
  --trd-navy: #07172d;
  --trd-blue: #123d6a;
  --trd-red: #c62832;
  --trd-red-bright: #ff7380;
  --trd-gold: #d5aa42;
  --trd-ivory: #f7f1df;
}

.skip-link {
  position: fixed;
  top: .5rem;
  left: .5rem;
  z-index: 100;
  transform: translateY(-150%);
  border-radius: 8px;
  padding: .75rem 1rem;
  color: #07172d;
  background: var(--trd-ivory);
  font-weight: 900;
}

.skip-link:focus { transform: translateY(0); }

.tablero-page {
  background:
    radial-gradient(circle at 12% 0%, rgba(198, 40, 50, .2), transparent 30rem),
    radial-gradient(circle at 88% 7%, rgba(213, 170, 66, .16), transparent 26rem),
    linear-gradient(180deg, #030914 0, var(--trd-navy) 34rem, #08111f 100%);
}

.tablero-page .eyebrow,
.tablero-page .feature-number { color: var(--trd-gold); }

.tablero-page .button.primary,
.tablero-page .card-action {
  color: #fff9f2;
  background: linear-gradient(135deg, var(--trd-red), #8e1722);
}

.tablero-page .button.secondary:focus-visible,
.tablero-page .button.secondary:hover {
  border-color: rgba(213, 170, 66, .8);
}

.tablero-hero { padding-bottom: 2.2rem; }

.tablero-emblem {
  position: relative;
  width: 142px;
  height: 142px;
  flex: 0 0 auto;
  border: 3px solid rgba(213, 170, 66, .72);
  border-radius: 28px;
  overflow: hidden;
  background: #2c1a13;
  box-shadow: 0 24px 54px rgba(0, 0, 0, .38), 0 0 34px rgba(213, 170, 66, .14);
}

.checkerboard-mark {
  position: absolute;
  inset: 0;
  background:
    conic-gradient(from 90deg, #f2dfbb 90deg, #573322 0 180deg, #f2dfbb 0 270deg, #573322 0) 0 0 / 50% 50%;
}

.piece {
  position: absolute;
  width: 36px;
  height: 36px;
  border: 4px solid rgba(213, 170, 66, .72);
  border-radius: 50%;
  box-shadow: inset 0 0 0 4px rgba(255, 255, 255, .1), 0 8px 16px rgba(0, 0, 0, .45);
}

.piece-red { top: 18px; right: 20px; background: var(--trd-red); }
.piece-black { bottom: 18px; left: 20px; background: #07111f; }

.status-banner {
  display: flex;
  gap: .9rem;
  align-items: flex-start;
  margin: 0 0 2rem;
  border: 1px solid rgba(213, 170, 66, .42);
  border-radius: 8px;
  padding: 1rem 1.1rem;
  background: linear-gradient(135deg, rgba(213, 170, 66, .11), rgba(198, 40, 50, .07)), var(--surface);
  box-shadow: var(--shadow);
}

.status-banner p { margin: .28rem 0 0; }

.status-dot {
  width: .8rem;
  height: .8rem;
  flex: 0 0 auto;
  margin-top: .3rem;
  border-radius: 50%;
  background: var(--trd-gold);
  box-shadow: 0 0 18px rgba(213, 170, 66, .55);
}

.feature-section { margin: 2.5rem 0 2rem; }

.tablero-feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1rem;
}

.tablero-feature-grid .detail-panel {
  margin: 0;
  background: linear-gradient(150deg, rgba(198, 40, 50, .1), rgba(213, 170, 66, .055)), var(--surface);
}

.feature-number {
  display: inline-flex;
  margin-bottom: .65rem;
  font-size: .8rem;
  font-weight: 950;
}

.legal-callout {
  display: grid;
  gap: 1rem;
  align-items: center;
  margin: 2rem 0;
  border: 1px solid rgba(213, 170, 66, .42);
  border-radius: 8px;
  padding: clamp(1.1rem, 3vw, 1.6rem);
  background: linear-gradient(135deg, rgba(198, 40, 50, .12), rgba(213, 170, 66, .09)), var(--surface);
  box-shadow: var(--shadow);
}

.legal-callout h2 { margin-bottom: .45rem; }
.legal-callout p { margin-bottom: 0; }

.tablero-brand-mark {
  width: auto;
  min-width: 54px;
  padding: 0 .55rem;
  color: #fff9f2;
  background: linear-gradient(135deg, var(--trd-red), #78141e);
}

.legal-hub { padding-bottom: 2rem; }
.legal-hero { max-width: 820px; padding: 3.4rem 0 2rem; }
.legal-hero h1 { max-width: 760px; }

.document-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
}

.document-card {
  display: grid;
  gap: .5rem;
  min-height: 210px;
  align-content: start;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 1.2rem;
  color: var(--text);
  background: linear-gradient(150deg, rgba(213, 170, 66, .1), rgba(198, 40, 50, .07)), var(--surface);
  box-shadow: var(--shadow);
  text-decoration: none;
}

.document-card:hover,
.document-card:focus-visible {
  transform: translateY(-3px);
  border-color: rgba(213, 170, 66, .75);
  outline: none;
}

.document-card span { color: var(--trd-gold); font-weight: 950; }
.document-card strong { font-size: 1.2rem; }
.document-card p { margin: 0; }
.danger-card { background: linear-gradient(150deg, rgba(198, 40, 50, .16), rgba(213, 170, 66, .055)), var(--surface); }
.compact-callout { margin-top: 2rem; }

@media (min-width: 780px) {
  .legal-callout { grid-template-columns: minmax(0, 1fr) auto; }
  .compact-callout { grid-template-columns: minmax(0, 1fr) auto; }
}

@media (max-width: 520px) {
  .tablero-emblem { width: 112px; height: 112px; border-radius: 22px; }
  .piece { width: 30px; height: 30px; }
}