/* =========================================================================
   Luxe Clean — Páginas legales (aviso de privacidad y términos de uso).
   -------------------------------------------------------------------------
   Hoja PROPIA y autocontenida: estas páginas NO cargan styles.css, así que
   es imposible que un cambio aquí afecte al diseño aprobado de la app del
   cliente. Toma los mismos tokens de marca para que se vean de la familia.

   Criterio: documento serio y legible. Una sola columna angosta (66
   caracteres por línea es lo cómodo para leer), tipografía del sistema,
   jerarquía por peso y espacio — sin adornos que compitan con el texto.
   ========================================================================= */

:root {
  --navy:      #0a1f44;
  --navy-2:    #102a63;
  --header:    #2e3238;   /* mismo gris carbón de la barra de la app */
  --lime:      #9fe015;
  --lime-ink:  #4e7a06;
  --bg:        #f7f9fc;
  --surface:   #ffffff;
  --line:      #e6ecf4;
  --ink:       #16233a;   /* 14.6:1 sobre blanco */
  --ink-soft:  #33475f;
  --muted:     #5c6b7e;   /* 5.44:1 sobre blanco */
  --font:      "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

/* ------------------------------------------------------------- barra --- */
.lg-bar {
  background: var(--header);
  padding: 14px 20px;
  padding-top: calc(14px + env(safe-area-inset-top));
  display: flex; align-items: center; gap: 14px;
}
.lg-bar img { height: 42px; width: auto; display: block; }
.lg-bar .spacer { flex: 1; }
.lg-bar a {
  color: #dfe6f1; text-decoration: none; font-size: .88rem; font-weight: 600;
  border: 1px solid rgba(255,255,255,.22); border-radius: 999px; padding: 7px 15px;
  transition: background .15s ease;
}
.lg-bar a:hover { background: rgba(255,255,255,.1); color: #fff; }

/* ------------------------------------------------------------ página --- */
.lg-wrap { max-width: 760px; margin: 0 auto; padding: 40px 22px 72px; }

.lg-head { margin-bottom: 34px; }
.lg-kicker {
  font-size: .72rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: var(--lime-ink);
}
.lg-head h1 {
  margin: 10px 0 0;
  font-size: clamp(1.7rem, 5vw, 2.3rem);
  line-height: 1.15; letter-spacing: -.03em; font-weight: 800;
  color: var(--navy);
}
.lg-head .lg-sub { margin: 12px 0 0; color: var(--muted); font-size: .95rem; }
.lg-rule { height: 3px; width: 54px; background: var(--lime); border-radius: 2px; margin: 22px 0 0; }

/* Ficha del responsable: el dato que la ley pide destacado. */
.lg-ficha {
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
  padding: 22px 24px; margin: 30px 0 38px;
}
.lg-ficha dl { margin: 0; display: grid; gap: 14px; }
.lg-ficha dt {
  font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 2px;
}
.lg-ficha dd { margin: 0; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.lg-ficha a { color: var(--navy-2); text-decoration: none; font-weight: 700; }
.lg-ficha a:hover { text-decoration: underline; }

h2 {
  margin: 44px 0 0; font-size: 1.18rem; font-weight: 800; letter-spacing: -.015em;
  color: var(--navy); line-height: 1.3;
}
h2 .lg-num {
  display: block; font-size: .7rem; font-weight: 800; letter-spacing: .14em;
  color: var(--lime-ink); margin-bottom: 5px;
}
h3 { margin: 26px 0 0; font-size: 1rem; font-weight: 800; color: var(--ink); }
p { margin: 14px 0 0; }
ul { margin: 14px 0 0; padding-left: 22px; }
li { margin-top: 8px; }
li::marker { color: var(--lime-ink); }
strong, b { font-weight: 700; color: var(--ink); }
a { color: var(--navy-2); }

/* Bloque de énfasis para lo que el usuario debe saber sin leer todo. */
.lg-nota {
  background: var(--surface); border-left: 3px solid var(--lime);
  border-radius: 0 12px 12px 0; padding: 16px 20px; margin: 22px 0 0;
  color: var(--ink-soft); font-size: .95rem;
}
.lg-nota strong { color: var(--ink); }

table {
  width: 100%; border-collapse: collapse; margin: 18px 0 0;
  font-size: .93rem; background: var(--surface);
  border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
}
th, td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { background: #f1f5fa; font-size: .74rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); font-weight: 800; }
tr:last-child td { border-bottom: none; }

/* Tablas anchas: nunca hacen scrollear la página, solo su propio contenedor. */
.lg-tabla { overflow-x: auto; margin: 18px 0 0; }
.lg-tabla table { margin: 0; }

.lg-pie {
  margin-top: 56px; padding-top: 26px; border-top: 1px solid var(--line);
  color: var(--muted); font-size: .88rem;
}
.lg-pie a { color: var(--navy-2); font-weight: 600; }
.lg-pie .lg-vig { font-weight: 700; color: var(--ink-soft); }

@media (min-width: 700px) {
  .lg-wrap { padding: 56px 24px 88px; }
  .lg-ficha dl { grid-template-columns: 1fr 1fr; gap: 18px 28px; }
  .lg-ficha .lg-ancho { grid-column: 1 / -1; }
}

/* Impresión: sin barra ni fondos, para que se pueda archivar en papel. */
@media print {
  body { background: #fff; font-size: 11pt; }
  .lg-bar, .lg-pie a { display: none; }
  .lg-wrap { max-width: none; padding: 0; }
  .lg-ficha, table, .lg-nota { border-color: #ccc; }
  h2 { page-break-after: avoid; }
}