/* ============================================================
   DoorKnocker — layout de páginas legales (Términos, Privacidad)
   Requiere css/styles.css cargado ANTES (usa sus tokens y el
   footer compartido .site-foot).
   ============================================================ */

.legal { background: var(--bg); color: var(--text); }

/* Barra superior simple (logo + volver al inicio) */
.legal__topbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px clamp(20px, 5vw, 64px);
  background: rgba(10, 13, 18, .72);
  -webkit-backdrop-filter: blur(12px) saturate(1.2); backdrop-filter: blur(12px) saturate(1.2);
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.legal__logo { height: 48px; width: auto; display: block; }
.legal__home {
  font-family: var(--sans); font-size: 14px; color: var(--muted); text-decoration: none;
  display: inline-flex; align-items: center; gap: 8px; transition: color .2s;
}
.legal__home:hover { color: #fff; }
.legal__home svg {
  width: 18px; height: 18px; stroke: currentColor; fill: none;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}

/* Documento */
.legal__wrap { max-width: 820px; margin: 0 auto; padding: clamp(44px, 7vw, 84px) clamp(20px, 5vw, 40px) 24px; }
.legal__eyebrow {
  font-family: var(--mono); font-size: 12px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--dim);
}
.legal__title {
  font-family: var(--sans); font-weight: 500; letter-spacing: -.02em;
  font-size: clamp(32px, 5vw, 52px); color: #f3f4f6; margin: 14px 0 10px; line-height: 1.05;
}
.legal__updated { font-family: var(--mono); font-size: 12px; color: var(--dim); }
.legal__intro {
  margin: 22px 0 0; padding: 16px 18px;
  border: 1px solid rgba(255, 255, 255, .1); border-radius: 12px;
  background: rgba(255, 255, 255, .02);
  font-family: var(--sans); font-size: 14px; line-height: 1.6; color: var(--muted);
}

.legal__body { margin-top: 36px; font-family: var(--sans); color: var(--muted); }
.legal__body h2 {
  font-size: clamp(20px, 2.4vw, 26px); color: #f3f4f6; font-weight: 500;
  letter-spacing: -.01em; margin: 42px 0 14px;
}
.legal__body h3 { font-size: 17px; color: #e6e9ee; font-weight: 600; margin: 24px 0 10px; }
.legal__body p { font-size: 16px; line-height: 1.72; margin: 0 0 14px; }
.legal__body ul, .legal__body ol { margin: 0 0 16px; padding-left: 22px; line-height: 1.72; font-size: 16px; }
.legal__body li { margin: 0 0 8px; }
.legal__body strong { color: #e6e9ee; font-weight: 600; }
.legal__body a { color: #cfe3ff; text-decoration: underline; text-underline-offset: 2px; }
.legal__body a:hover { color: #fff; }

/* placeholders que el usuario debe completar: <span class="legal__ph">[RAZÓN SOCIAL]</span> */
.legal__ph {
  color: #cfe3ff; background: rgba(120, 155, 205, .12);
  padding: 1px 6px; border-radius: 4px; font-family: var(--mono); font-size: .88em;
}