/* ============================================================================
   ConectaLabIA · legal.css
   Páginas legales (aviso legal, privacidad y protección de datos) y
   enlaces legales del pie. Se apoya en tokens.css, base.css y layout.css.
   ========================================================================== */

/* ------------------------------- Cabecera -------------------------------- */

.legal-nav__logo {
  height: var(--logo-nav-alto);
  width: auto;
  display: block;
}

.legal-nav__acciones {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--e-2);
}

/* --------------------------------- Página -------------------------------- */

.legal {
  padding-top: calc(var(--alto-nav) + clamp(40px, 6vw, 76px));
  padding-bottom: clamp(24px, 4vw, 48px);
}

.legal__cabecera {
  padding-bottom: clamp(22px, 3.5vw, 38px);
  border-bottom: 1px solid var(--borde-suave);
  margin-bottom: clamp(26px, 4vw, 44px);
}

.legal__titulo {
  margin-bottom: var(--e-3);
}

.legal__fecha {
  font-family: var(--fuente-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texto-tenue);
  margin-bottom: var(--e-4);
}

.legal__intro {
  max-width: none;
  margin-bottom: 0;
}

/* -------------------------------- Índice --------------------------------- */

.legal__indice {
  border: 1px solid var(--borde);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.55);
  padding: var(--e-4) var(--e-5);
  margin-bottom: clamp(28px, 4vw, 46px);
}

.legal__indice > p {
  font-family: var(--fuente-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--texto-tenue);
  margin-bottom: var(--e-3);
}

.legal__indice ol {
  margin: 0;
  padding-left: 1.3rem;
  display: grid;
  gap: 6px;
}

.legal__indice li {
  margin: 0;
}

.legal__indice a {
  font-size: 0.92rem;
  color: var(--texto-medio);
}

.legal__indice a:hover {
  color: var(--texto);
}

/* -------------------------------- Secciones ------------------------------- */

.legal__seccion {
  margin-bottom: clamp(28px, 4vw, 44px);
  scroll-margin-top: calc(var(--alto-nav) + 24px);
}

.legal__seccion > h2 {
  font-size: clamp(1.16rem, 1rem + 0.6vw, 1.42rem);
  margin-bottom: var(--e-3);
}

.legal__seccion > h3 {
  font-size: 1.02rem;
  margin-top: var(--e-4);
  margin-bottom: var(--e-2);
}

.legal__seccion p,
.legal__seccion li {
  color: var(--texto-medio);
  font-size: 1rem;
  line-height: 1.75;
}

.legal__seccion p + p {
  margin-top: var(--e-3);
}

.legal__seccion ul,
.legal__seccion ol {
  margin: var(--e-3) 0 0;
  padding-left: 1.35rem;
  display: grid;
  gap: 8px;
}

.legal__seccion li::marker {
  color: var(--cian);
}

.legal__seccion a {
  color: var(--verde);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.legal__seccion a:hover {
  color: var(--texto);
}

/* --------------------------- Definiciones (datos) ------------------------- */

.legal__datos {
  display: grid;
  gap: 10px;
  margin: var(--e-3) 0 0;
}

.legal__datos div {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  font-size: 0.96rem;
}

.legal__datos dt {
  min-width: 220px;
  font-weight: 600;
  color: var(--texto);
}

.legal__datos dd {
  margin: 0;
  color: var(--texto-medio);
}

/* ------------------------------- Pie legal -------------------------------- */

.pie__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  flex-basis: 100%;
  margin-top: var(--e-3);
  padding-top: var(--e-3);
  border-top: 1px solid var(--borde-suave);
  font-size: inherit;
}

.pie__legal a {
  font-size: inherit;
  color: var(--texto-suave);
}

.pie__legal a:hover {
  color: var(--texto);
}

.pie__legal a[aria-current='page'] {
  color: var(--texto);
  font-weight: 600;
}

.pie__legal-sep {
  color: var(--texto-tenue);
}

/* ------------------------------- Responsive ------------------------------- */

@media (max-width: 640px) {
  .legal__seccion p,
  .legal__seccion li {
    font-size: 0.96rem;
  }

  .legal__datos dt {
    min-width: 100%;
  }

  .legal__indice {
    padding: var(--e-3) var(--e-4);
  }
}

@media print {
  .nav,
  .pie__legal {
    display: none;
  }
}