/* ==========================================================================
   legacy-bold.css — Puente de tema para las paginas internas
   (privacy, terms, cookies, support, roadmap).
   Remapea los design tokens del sistema anterior (variables.css) a la
   paleta del rediseño Bold: crema, tinta negra, Archivo, sin degradados,
   sin glows, sin glassmorphism. Se carga DESPUES de responsive.css.
   Tema unico: ignora [data-theme].
   ========================================================================== */

@font-face {
  font-family: 'Archivo';
  src: url('../assets/fonts/archivo-var.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root,
[data-theme="dark"],
[data-theme="light"] {
  /* Paleta Bold */
  --color-primary:        #0B7A4F;
  --color-primary-dark:   #085C3B;
  --color-primary-light:  #16C784;
  --color-accent:         #0B7A4F;
  --color-accent-dark:    #085C3B;
  --color-accent-light:   #16C784;

  --color-bg:             #FAF5EC;
  --color-surface:        #FFFFFF;
  --color-surface-hover:  #F3ECDD;
  --color-surface-active: #EAE0CC;

  --color-text-primary:   #111111;
  --color-text-secondary: #3D3D3D;
  --color-text-tertiary:  #6A6A6A;
  --color-text-inverse:   #FFFFFF;

  --color-border:         #111111;
  --color-border-light:   rgba(17, 17, 17, 0.15);
  --color-border-strong:  #111111;

  /* Degradados anulados: color plano de marca */
  --gradient-primary:     linear-gradient(0deg, #0B7A4F, #0B7A4F);
  --gradient-primary-rev: linear-gradient(0deg, #0B7A4F, #0B7A4F);
  --gradient-cta:         linear-gradient(0deg, #16C784, #16C784);
  --gradient-text:        linear-gradient(0deg, #111111, #111111);
  --gradient-surface:     linear-gradient(0deg, #FFFFFF, #FFFFFF);
  --gradient-conic:       linear-gradient(0deg, #0B7A4F, #0B7A4F);

  /* Tipografia Bold */
  --font-family-heading:  'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-family-display:  'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-family-body:     'Archivo', 'Helvetica Neue', Arial, sans-serif;

  /* Sombras duras, sin glow */
  --shadow-sm:    2px 2px 0 rgba(17, 17, 17, 0.9);
  --shadow-md:    3px 3px 0 rgba(17, 17, 17, 0.9);
  --shadow-lg:    4px 4px 0 rgba(17, 17, 17, 0.9);
  --shadow-xl:    5px 5px 0 rgba(17, 17, 17, 0.9);
  --shadow-2xl:   6px 6px 0 rgba(17, 17, 17, 0.9);
  --shadow-glow:  none;
  --shadow-glow-accent: none;
  --shadow-inner: none;

  /* Glass anulado: superficies solidas */
  --glass-bg:           #FFFFFF;
  --glass-bg-light:     #FFFFFF;
  --glass-bg-strong:    #FFFFFF;
  --glass-blur:         0px;
  --glass-blur-strong:  0px;
  --glass-border:       #111111;
  --glass-border-top:   #111111;
  --glass-border-hover: #111111;
  --glass-shine:        none;

  --radius-xl:  14px;
  --radius-2xl: 16px;
}

/* Texto con gradiente -> tinta plana */
.gradient-text,
[class*="gradient"] h1,
.legal-hero__title {
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: initial !important;
  color: var(--color-text-primary) !important;
}

/* Navbar: crema solida con borde negro */
.navbar {
  background: var(--color-bg) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: 2px solid #111111 !important;
  box-shadow: none !important;
}

/* Botones primarios: verde vivo, borde negro, sombra dura */
.btn-primary {
  background: #16C784 !important;
  color: #111111 !important;
  border: 2px solid #111111 !important;
  box-shadow: 4px 4px 0 #111111;
  font-weight: 800;
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.btn-primary:hover {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 #111111;
  filter: none;
}
.btn-outline {
  background: #FFFFFF !important;
  color: #111111 !important;
  border: 2px solid #111111 !important;
}

/* Tarjetas: blancas con borde negro 2px */
.card {
  background: #FFFFFF !important;
  border: 2px solid #111111 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: 4px 4px 0 #111111 !important;
}

/* Badges planos */
.badge,
.badge-primary,
.badge-accent,
.badge-success,
.badge-outline,
.legal-hero__badge {
  background: #FFFFFF !important;
  color: #111111 !important;
  border: 2px solid #111111 !important;
  box-shadow: none !important;
}

/* Footer */
.footer {
  background: var(--color-bg) !important;
  border-top: 2px solid #111111 !important;
}

/* Logo unificado con la homepage Bold: wordmark "Wallet" gris plano,
   sin text-clip degradado ni filtros sobre el SVG */
.navbar__logo .logo-wallet,
.footer__logo .logo-wallet {
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: initial !important;
  color: #5A5A5A !important;
}
.navbar__logo svg, .footer__logo svg { filter: none !important; }
.navbar__logo, .footer__logo { color: #111111 !important; }

/* El toggle de tema deja de aplicar (tema unico): se oculta */
.theme-toggle { display: none !important; }

/* Sin particulas/orbes/mesh si existieran en estas paginas */
.hero__canvas, .hero__orbs, .hero__orb3, .hero__mesh { display: none !important; }

/* Watermark de hexagonos (sections.css lo pinta en body y body::before):
   demasiado visible sobre crema — fuera */
body { background-image: none !important; }
body::before { display: none !important; }
.hero::after { display: none !important; }

/* TOC sticky solo en desktop. En movil (columna unica) WebKit/iOS usa el
   grid CONTENEDOR como constraint del sticky (no la fila propia, como
   Chrome), y el indice viaja superpuesto sobre todo el contenido. */
@media (max-width: 1023.98px) {
  .legal-toc { position: static !important; }
}

/* Los saltos de ancla del TOC no deben esconder el titulo bajo el navbar fijo */
.legal-content [id], .legal-content section, [id^="section"], h2[id], div[id] {
  scroll-margin-top: 96px;
}

/* Grid blowout en movil: las tablas con th nowrap inflan el min-content
   de .legal-content y ensanchan toda la columna mas alla del viewport.
   min-width:0 permite que 1fr encoja; la tabla scrollea en su propio
   overflow-x:auto */
.legal-layout > * { min-width: 0; }
@media (max-width: 640px) {
  .legal-table th { white-space: normal !important; }
}

/* Paginas legales sin TOC (support): el contenido no debe caer en la
   columna de 240px reservada al indice */
.legal-layout > .legal-content:only-child {
  grid-column: 1 / -1;
  max-width: 760px;
  margin-inline: auto;
  width: 100%;
}