/*
 * Páginas legales (/terms y /privacy — resources/views/legal/document.blade.php).
 * La plantilla "Personal" es de una sola página y sus <section> viven
 * posicionadas en absoluto, ocultas hasta que main.js las muestra por
 * hash, así que acá no se reusa ese mecanismo: el documento es un <main>
 * normal con flujo propio debajo del header compacto (.header-top, barra
 * fija de 80px). Archivo aparte para no tocar el style.css de
 * BootstrapMade.
 */

/* El header compacto es `position: fixed`, así que el contenido necesita
   su propio espacio arriba para no quedar debajo de la barra. */
main.legal {
  position: relative;
  z-index: 2;
  padding: 120px 0 60px;
}

main.legal .container {
  max-width: 900px;
  background: rgba(0, 0, 0, 0.9);
  padding: 40px;
}

/* Las <section> de style.css están pensadas para el show/hide por hash
   (absolutas, opacity 0). Acá son secciones de documento comunes. */
main.legal section.legal-section {
  position: static;
  overflow: visible;
  opacity: 1;
  width: auto;
  top: auto;
  bottom: auto;
  padding: 0;
  margin-top: 30px;
}

/* Los saltos a un ancla (#sandbox, el índice de docs) no deben dejar el
   título debajo de la barra fija de 80px. */
main.legal [id] {
  scroll-margin-top: 100px;
}

main.legal .legal-title {
  font-size: 32px;
  font-weight: 700;
  font-family: "Poppins", sans-serif;
  margin-bottom: 8px;
}

main.legal .legal-effective {
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
  margin-bottom: 25px;
}

main.legal .legal-intro {
  font-size: 16px;
  line-height: 1.7;
}

main.legal .legal-section h3 {
  font-size: 20px;
  font-weight: 600;
  font-family: "Poppins", sans-serif;
  color: #18d26e;
  margin-bottom: 12px;
}

main.legal p,
main.legal li {
  font-size: 15px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.85);
}

main.legal ul {
  padding-left: 22px;
}

main.legal li + li {
  margin-top: 8px;
}

main.legal li strong {
  color: #fff;
}

main.legal a {
  color: #18d26e;
  transition: 0.3s;
}

main.legal a:hover {
  color: #fff;
}

main.legal .legal-links {
  margin: 40px 0 0;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 14px;
}

main.legal .legal-links .sep {
  margin: 0 10px;
  color: rgba(255, 255, 255, 0.4);
}

@media (max-width: 768px) {
  main.legal {
    padding-top: 100px;
  }

  main.legal .container {
    padding: 25px 20px;
  }

  main.legal .legal-title {
    font-size: 26px;
  }
}

/* Links legales en la barra de créditos de la home (.credits en
   style.css es la franja fija inferior, alineada a la derecha). */
.credits .legal-nav a {
  color: rgba(255, 255, 255, 0.7);
}

.credits .legal-nav a:hover {
  color: #18d26e;
}

.credits .legal-nav .sep {
  margin: 0 8px;
  color: rgba(255, 255, 255, 0.4);
}