/* Páginas legales (privacidad, soporte, términos, eliminar cuenta) y bloque legal del pie.
   Reutiliza las fuentes y colores de dood.css (--black, --white, --blue). */

/* Datos pendientes de la empresa: rojo + subrayado punteado para que no dependa solo del color.
   text-decoration (no border) para que el subrayado siga al texto en varias líneas. */
.dato {
  color: #ff6b6b;
  font-weight: 400;
  text-decoration: underline dashed 1px;
  text-underline-offset: 3px;
}

/* ---------- Páginas legales ---------- */

.legal-page {
  background-color: var(--black);
  color: var(--white);
  min-height: 100vh;
}

.legal-nav {
  display: flex;
  justify-content: center;
  padding-top: 5em;
}

.legal-nav img {
  width: 130px;
  display: block;
}

.legal {
  max-width: 760px;
  margin: 0 auto;
  padding: 6em 24px 8em;
  font-family: "Bw Aleta No 10", sans-serif;
  font-size: 1.05em;
  line-height: 1.6;
}

.legal_header {
  margin-bottom: 3.5em;
}

/* dood.css centra .data en móvil (columna + align-items: center). */
.legal_header .data {
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  margin-bottom: 1.5em;
}

.legal_header .h1 {
  margin: 0 0 .35em;
}

.legal_meta {
  color: #ffffffb3;
  font-size: .95em;
  margin: 0;
}

.legal_intro {
  font-size: 1.1em;
  margin: 1.5em 0 0;
}

.legal_toc {
  border-top: 1px solid #ffffff33;
  border-bottom: 1px solid #ffffff33;
  padding: 1.5em 0;
  margin-bottom: 3em;
}

.legal_toc ol {
  columns: 2;
  column-gap: 2em;
  margin: 0;
  padding-left: 1.4em;
}

.legal_toc a {
  color: var(--white);
  text-decoration: none;
}

.legal_toc a:hover {
  text-decoration: underline;
}

.legal section {
  margin-bottom: 2.75em;
  scroll-margin-top: 1.5em;
}

.legal h2 {
  font-family: Migra, Times New Roman, sans-serif;
  font-weight: 300;
  font-size: 2em;
  line-height: 1.1;
  margin: 0 0 .6em;
}

.legal h3 {
  font-family: "Bw Aleta No 10", sans-serif;
  font-size: 1em;
  font-weight: 700;
  letter-spacing: .02em;
  margin: 1.5em 0 .4em;
}

.legal p,
.legal ul,
.legal ol {
  margin: 0 0 1em;
}

.legal ul,
.legal ol {
  padding-left: 1.4em;
}

.legal li {
  margin-bottom: .45em;
}

.legal a {
  color: var(--white);
}

.legal strong {
  font-weight: 700;
}

/* Recuadro para lo que el usuario debe ver primero (pasos, contacto). */
.legal_box {
  background-color: #ffffff0f;
  border: 1px solid #ffffff26;
  border-radius: 12px;
  padding: 1.5em 1.75em;
  margin: 0 0 1.5em;
}

.legal_box > :last-child {
  margin-bottom: 0;
}

.legal_contact {
  list-style: none;
  padding-left: 0;
}

.legal_contact li {
  display: grid;
  grid-template-columns: 9em 1fr;
  gap: 1em;
}

.legal_contact li span:first-child {
  color: #ffffffb3;
}

.legal_steps {
  counter-reset: paso;
  list-style: none;
  padding-left: 0;
}

.legal_steps > li {
  counter-increment: paso;
  position: relative;
  padding-left: 2.75em;
  margin-bottom: 1em;
}

.legal_steps > li::before {
  content: counter(paso, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0;
  font-family: Migra, Times New Roman, sans-serif;
  font-size: 1.4em;
  line-height: 1.1;
  color: #5b93ff; /* --blue aclarado para contraste sobre fondo oscuro */
}

.legal details {
  border-bottom: 1px solid #ffffff26;
  padding: 1em 0;
}

.legal summary {
  cursor: pointer;
  font-weight: 700;
}

.legal details p {
  margin: .75em 0 0;
}

/* ---------- Pie de página: bloque legal ---------- */

/* dood.css fija la altura del pie en 250px; con el bloque legal debe crecer. */
.footer {
  height: auto;
  padding-bottom: 3em;
}

/* Sin los enlaces sociales, el texto de derechos queda solo en su columna: abajo, a la altura del logo. */
.div-block-2 {
  justify-content: flex-end;
}

.footer-legal {
  border-top: 1px solid #ffffff26;
  margin-top: 3em;
  padding-top: 1.75em;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1em 2em;
  font-family: "Bw Aleta No 10", sans-serif;
  font-size: .8em;
  line-height: 1.5;
  color: #ffffff8f;
}

.footer-legal_links {
  display: flex;
  flex-wrap: wrap;
  gap: .5em 1.5em;
}

.footer-legal_links a {
  color: var(--white);
  text-decoration: none;
}

.footer-legal_links a:hover {
  text-decoration: underline;
}

.footer-legal_id {
  margin: 0;
}

@media screen and (max-width: 767px) {
  .legal {
    padding-top: 4em;
  }

  .legal h2 {
    font-size: 1.6em;
  }

  .legal_toc ol {
    columns: 1;
  }

  .legal_contact li {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .footer-legal {
    padding: 1.75em 13px 0;
    justify-content: center;
    text-align: center;
  }

  .footer-legal_links {
    justify-content: center;
  }
}