/* ═══════════════════════════════════════════════════════════════
   UpGames · Documentos legales — Liquid Glass (v5)
   Usado por terminos_condiciones.html y politica-privacidad.html
═══════════════════════════════════════════════════════════════ */
:root {
  --g: #32D583; --g-rgb: 50,213,131;
  --cy: #5AC8FA; --cy-rgb: 90,200,250;
  --vi: #8B7CF6; --warn: #FFB547; --danger: #FF6B6B;
  --bg: #0A0B0F;
  --txt: #F4F5F7; --txt2: #A3A8B6; --txt3: #6C7180;
  --glass: rgba(28,31,40,.55);
  --glass-tint: rgba(255,255,255,.04);
  --bd: rgba(255,255,255,.09);
  --hi: inset 0 1px 0 rgba(255,255,255,.09);
  --ease-out: cubic-bezier(.22,1,.36,1);
  --ff: 'Manrope', -apple-system, 'Segoe UI', Roboto, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--bg); scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
  font-family: var(--ff); color: var(--txt2); line-height: 1.7; font-size: 15px;
  -webkit-font-smoothing: antialiased; background: transparent; min-height: 100vh;
  font-variant-ligatures: no-common-ligatures; /* Manrope convierte "(c)" en © */
}
body::before {
  content: ''; position: fixed; inset: -10%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(38% 28% at 10% 6%, rgba(var(--g-rgb),.11), transparent 70%),
    radial-gradient(34% 26% at 92% 14%, rgba(var(--cy-rgb),.09), transparent 70%),
    radial-gradient(44% 32% at 60% 100%, rgba(139,124,246,.08), transparent 70%),
    var(--bg);
}
a { color: var(--g); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
strong { color: var(--txt); font-weight: 700; }
::selection { background: rgba(var(--g-rgb),.3); color: #fff; }

/* Barra superior */
.lg-top {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 14px;
  padding: 12px 20px;
  background: rgba(10,11,15,.8);
  -webkit-backdrop-filter: blur(22px) saturate(170%); backdrop-filter: blur(22px) saturate(170%);
  border-bottom: 1px solid var(--bd);
}
.lg-logo { font-weight: 800; letter-spacing: -.02em; color: var(--txt); font-size: 1.05rem; }
.lg-logo b { color: var(--g); }
.lg-top nav { display: flex; gap: 4px; margin-left: auto; overflow-x: auto; scrollbar-width: none; }
.lg-top nav::-webkit-scrollbar { display: none; }
.lg-top nav a {
  color: var(--txt2); font-size: .8rem; font-weight: 650; padding: 7px 13px; border-radius: 999px; white-space: nowrap;
  transition: background .25s var(--ease-out), color .25s;
}
.lg-top nav a:hover { text-decoration: none; background: rgba(255,255,255,.06); color: var(--txt); }
.lg-top nav a.on { background: var(--txt); color: #0B0C10; }

.lg-wrap { max-width: 920px; margin: 0 auto; padding: 32px 18px 80px; }

/* Portada */
.lg-hero { padding: 26px 0 18px; animation: lgIn .7s var(--ease-out) both; }
.lg-kicker { font-size: .75rem; font-weight: 700; color: var(--g); letter-spacing: .04em; }
.lg-hero h1 { color: var(--txt); font-size: clamp(1.9rem, 5vw, 2.8rem); line-height: 1.12; letter-spacing: -.03em; font-weight: 800; margin: 8px 0 12px; }
.lg-hero p { max-width: 680px; font-size: 1rem; }
.lg-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.lg-meta span {
  font-size: .74rem; font-weight: 650; color: var(--txt2);
  padding: 6px 12px; border-radius: 999px; background: var(--glass-tint); border: 1px solid var(--bd);
}

/* Tarjetas de vidrio */
.lg-card {
  background: var(--glass);
  -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid var(--bd); border-radius: 22px; box-shadow: var(--hi);
  padding: 22px;
}
.lg-note {
  display: flex; gap: 12px; padding: 14px 16px; border-radius: 16px; margin: 14px 0;
  background: var(--glass-tint); border: 1px solid var(--bd); font-size: .9rem;
}
.lg-note .ic { font-size: 1.2rem; line-height: 1.4; flex-shrink: 0; }
.lg-note.g  { background: rgba(var(--g-rgb),.06);  border-color: rgba(var(--g-rgb),.24); }
.lg-note.cy { background: rgba(var(--cy-rgb),.06); border-color: rgba(var(--cy-rgb),.24); }
.lg-note.w  { background: rgba(255,181,71,.06);    border-color: rgba(255,181,71,.24); }
.lg-note.d  { background: rgba(255,107,107,.06);   border-color: rgba(255,107,107,.24); }

/* Índice */
.lg-toc { margin: 18px 0 8px; }
.lg-toc h2 { font-size: .8rem; color: var(--txt3); font-weight: 700; letter-spacing: .06em; margin-bottom: 10px; }
.lg-toc ol { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 4px 14px; counter-reset: t; }
.lg-toc a { color: var(--txt2); font-size: .86rem; display: flex; gap: 8px; padding: 5px 0; }
.lg-toc a::before { counter-increment: t; content: counter(t, decimal-leading-zero); color: var(--txt3); font-variant-numeric: tabular-nums; font-size: .78rem; padding-top: 1px; }
.lg-toc a:hover { color: var(--g); text-decoration: none; }

/* Secciones */
.lg-sec { margin-top: 18px; opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
.lg-sec.in { opacity: 1; transform: none; }
.lg-sec h2 { color: var(--txt); font-size: 1.22rem; letter-spacing: -.02em; font-weight: 800; margin-bottom: 10px; display: flex; align-items: baseline; gap: 10px; }
.lg-sec h2 .n { font-size: .78rem; color: var(--g); font-weight: 800; font-variant-numeric: tabular-nums; }
.lg-sec h3 { color: var(--txt); font-size: .98rem; font-weight: 750; margin: 16px 0 6px; }
.lg-sec p + p { margin-top: 10px; }
.lg-sec ul { margin: 8px 0 4px; padding-left: 0; list-style: none; display: grid; gap: 7px; }
.lg-sec ul li { position: relative; padding-left: 20px; }
.lg-sec ul li::before { content: ''; position: absolute; left: 4px; top: .7em; width: 6px; height: 6px; border-radius: 50%; background: var(--g); opacity: .8; }
.lg-sec ul.x li::before { background: var(--danger); }
.lg-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin-top: 10px; }
.lg-tile { padding: 14px; border-radius: 16px; background: var(--glass-tint); border: 1px solid var(--bd); font-size: .88rem; }
.lg-tile b { display: block; color: var(--txt); margin-bottom: 3px; }

.lg-table { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: .86rem; }
.lg-table th, .lg-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--bd); vertical-align: top; }
.lg-table th { color: var(--txt3); font-weight: 700; font-size: .74rem; letter-spacing: .04em; }
.lg-table td:first-child { color: var(--txt); font-weight: 650; }
.lg-scroll { overflow-x: auto; }

/* Certificado DNDA */
.lg-cert { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; }
.lg-cert .seal {
  width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; font-size: 1.8rem;
  background: rgba(var(--g-rgb),.12); border: 1px solid rgba(var(--g-rgb),.35); box-shadow: var(--hi);
}
.lg-cert dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; font-size: .86rem; margin-top: 10px; }
.lg-cert dt { color: var(--txt3); }
.lg-cert dd { color: var(--txt); font-weight: 650; }
.lg-btn {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 14px;
  padding: 10px 18px; border-radius: 999px; font-weight: 750; font-size: .86rem;
  background: var(--g); color: #04120A !important; text-decoration: none !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 10px 22px -12px rgba(var(--g-rgb),.7);
  transition: transform .25s cubic-bezier(.34,1.25,.64,1);
}
.lg-btn:active { transform: scale(.96); }

.lg-foot { margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--bd); font-size: .8rem; color: var(--txt3); text-align: center; }
.lg-foot a { color: var(--txt2); margin: 0 6px; }

@keyframes lgIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (max-width: 560px) {
  .lg-top { padding: 10px 14px; }
  .lg-card { padding: 18px; border-radius: 20px; }
  .lg-cert { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .lg-sec, .lg-hero { opacity: 1; transform: none; transition: none; animation: none; }
}
@media print {
  body::before, .lg-top { display: none; }
  body { color: #222; }
  .lg-card, .lg-note, .lg-tile { background: none; border-color: #ccc; }
  .lg-sec { opacity: 1; transform: none; }
}