/* ==========================================================================
   site-internal.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 2026-09 (azul-negro + turquesa, tipografia de
   sistema). Sustituye a legacy-bold.css; se carga DESPUES de responsive.css.
   Tema unico oscuro: ignora [data-theme].
   ========================================================================== */

:root,
[data-theme="dark"],
[data-theme="light"] {
  /* Paleta del diseño nuevo */
  --color-primary:        #00E0B6;
  --color-primary-dark:   #00BCAE;
  --color-primary-light:  #34F5CD;
  --color-accent:         #00E0B6;
  --color-accent-dark:    #00BCAE;
  --color-accent-light:   #34F5CD;

  --color-bg:             #031316;
  --color-surface:        #0D2024;
  --color-surface-hover:  #11272B;
  --color-surface-active: #152A2E;

  --color-text-primary:   #F5F7F8;
  --color-text-secondary: #AABDC8;
  --color-text-tertiary:  #7D949E;
  --color-text-inverse:   #001412;

  --color-border:         #1D3438;
  --color-border-light:   rgba(255, 255, 255, 0.08);
  --color-border-strong:  #294247;

  /* Degradados anulados: color plano de marca */
  --gradient-primary:     linear-gradient(0deg, #00E0B6, #00E0B6);
  --gradient-primary-rev: linear-gradient(0deg, #00E0B6, #00E0B6);
  --gradient-cta:         linear-gradient(0deg, #00DFB2, #00DFB2);
  --gradient-text:        linear-gradient(0deg, #F5F7F8, #F5F7F8);
  --gradient-surface:     linear-gradient(0deg, #0D2024, #0D2024);
  --gradient-conic:       linear-gradient(0deg, #00E0B6, #00E0B6);

  /* Tipografia de sistema, como la homepage nueva */
  --font-family-heading:  Arial, 'Helvetica Neue', Helvetica, sans-serif;
  --font-family-display:  Arial, 'Helvetica Neue', Helvetica, sans-serif;
  --font-family-body:     Arial, 'Helvetica Neue', Helvetica, sans-serif;

  /* Sombras suaves oscuras, sin glow */
  --shadow-sm:    0 2px 6px rgba(0, 0, 0, 0.35);
  --shadow-md:    0 4px 12px rgba(0, 0, 0, 0.35);
  --shadow-lg:    0 8px 20px rgba(0, 0, 0, 0.40);
  --shadow-xl:    0 12px 28px rgba(0, 0, 0, 0.45);
  --shadow-2xl:   0 16px 36px rgba(0, 0, 0, 0.50);
  --shadow-glow:  none;
  --shadow-glow-accent: none;
  --shadow-inner: none;

  /* Glass anulado: superficies solidas */
  --glass-bg:           #0D2024;
  --glass-bg-light:     #0D2024;
  --glass-bg-strong:    #0D2024;
  --glass-blur:         0px;
  --glass-blur-strong:  0px;
  --glass-border:       #1D3438;
  --glass-border-top:   #1D3438;
  --glass-border-hover: #294247;
  --glass-shine:        none;

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

/* Texto con gradiente -> color plano */
.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: fondo azul-negro con linea sutil */
.navbar {
  background: var(--color-bg) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: 1px solid #152A2E !important;
  box-shadow: none !important;
}

/* Botones primarios: turquesa plano, sin borde duro */
.btn-primary {
  background: #00DFB2 !important;
  color: #001412 !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  box-shadow: none;
  font-weight: 700;
  transition: background 150ms ease, transform 150ms ease;
}
.btn-primary:hover {
  background: #34F5CD !important;
  transform: translateY(-2px);
  box-shadow: none;
  filter: none;
}
.btn-outline {
  background: transparent !important;
  color: var(--color-text-primary) !important;
  border: 1px solid var(--color-border-strong) !important;
  border-radius: 8px !important;
}
.btn-outline:hover { background: var(--color-surface-hover) !important; }

/* Tarjetas: superficie oscura con borde sutil */
.card {
  background: var(--color-surface) !important;
  border: 1px solid var(--color-border) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  border-radius: 14px;
}

/* Badges planos */
.badge,
.badge-primary,
.badge-accent,
.badge-success,
.badge-outline,
.legal-hero__badge {
  background: var(--color-surface) !important;
  color: #A8F1E6 !important;
  border: 1px solid var(--color-border) !important;
  box-shadow: none !important;
}

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

/* Logo unificado con la homepage: marca V (vexo-mark.svg) + "Vexo" */
.navbar__logo img, .footer__logo img { display: block; }
.navbar__logo, .footer__logo {
  color: var(--color-text-primary) !important;
  font-weight: 700;
  letter-spacing: -0.035em;
}

/* 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 de sections.css: 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%;
}