/* ============================================================
   Páginas legales (Condiciones de uso, Normas de publicación)
   Mismo tema oscuro que el mapa. Dentro del modal del formulario
   (html.en-modal) se ocultan cabecera y pie.
   ============================================================ */
:root {
  --bg: #070d14;
  --surface: #0f1720;
  --border: rgba(255, 255, 255, .08);
  --border-strong: rgba(255, 255, 255, .14);
  --text: #f1f5f9;
  --text-2: #b8c2cf;
  --text-3: #7d8896;
  --brand: #c8ff1a;
  --grave: #ff6b62;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text-2);
  font: 16px/1.7 Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
}
a { color: var(--brand); }
a:hover { color: #dcff6b; }

.legal-cabecera {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px max(16px, calc((100vw - 760px) / 2));
  background: rgba(7, 13, 20, .9);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
.legal-logo img { display: block; height: 38px; width: auto; }
.legal-volver {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 999px;
  border: 1px solid var(--border-strong);
  color: var(--text); font-size: .88rem; font-weight: 600; text-decoration: none;
}
.legal-volver:hover { color: var(--text); border-color: var(--brand); }

.legal { max-width: 760px; margin: 0 auto; padding: 40px 16px 56px; }
.legal-eyebrow { margin: 0 0 6px; font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--brand); }
.legal h1 { margin: 0 0 10px; font-size: clamp(1.8rem, 5vw, 2.4rem); line-height: 1.15; letter-spacing: -.02em; color: var(--text); }
.legal-fecha { margin: 0 0 28px; font-size: .86rem; color: var(--text-3); }
.legal-intro { font-size: 1.05rem; color: var(--text); }

.legal-indice {
  margin: 28px 0 36px; padding: 18px 22px;
  border: 1px solid var(--border); border-radius: 16px; background: var(--surface);
}
.legal .legal-indice h2 { margin: 0 0 8px; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.legal-indice ol { margin: 0; padding-left: 1.2rem; columns: 2; column-gap: 28px; font-size: .92rem; }
.legal-indice a { color: var(--text-2); text-decoration: none; }
.legal-indice a:hover { color: var(--brand); }

.legal section { scroll-margin-top: 80px; }
.legal h2 { margin: 36px 0 10px; font-size: 1.2rem; color: var(--text); }
.legal h3 { margin: 22px 0 6px; font-size: 1rem; color: var(--text); }
.legal strong { color: var(--text); }
.legal ul, .legal ol { padding-left: 1.3rem; }
.legal li { margin: 4px 0; }

.legal-nota {
  margin: 18px 0; padding: 14px 18px;
  border-left: 3px solid var(--brand); border-radius: 0 12px 12px 0;
  background: rgba(200, 255, 26, .06); color: var(--text);
}
.legal-pendiente { padding: 1px 6px; border-radius: 6px; background: rgba(255, 107, 98, .14); color: var(--grave); font-weight: 600; }

/* Normas: lo que sí y lo que no */
.legal-dos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 18px 0; }
.legal-caja { padding: 16px 18px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); }
.legal-caja h3 { margin: 0 0 8px; display: flex; align-items: center; gap: 8px; }
.legal-caja ul { margin: 0; padding-left: 1.1rem; font-size: .94rem; }
.legal-caja.si h3 i { color: var(--brand); }
.legal-caja.no h3 i { color: var(--grave); }

.legal-pie {
  padding: 24px 16px 32px; border-top: 1px solid var(--border);
  text-align: center; font-size: .86rem; color: var(--text-3);
}
.legal-pie nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; margin-bottom: 8px; }
.legal-pie a { color: var(--text-2); text-decoration: none; }
.legal-pie a:hover { color: var(--brand); }
.legal-pie p { margin: 0; }

@media (max-width: 600px) {
  .legal { padding-top: 28px; }
  .legal-indice ol { columns: 1; }
  .legal-dos { grid-template-columns: 1fr; }
  .legal-logo img { height: 32px; }
}

/* Dentro del modal del formulario */
.en-modal .legal-cabecera, .en-modal .legal-pie { display: none; }
.en-modal .legal { padding: 24px 22px 32px; }
.en-modal .legal h1 { font-size: 1.6rem; }