/* ============================================================
   legal.css — Estilos de las páginas legales
   (Aviso legal, Política de privacidad, Política de cookies)
   ============================================================ */

.legal-page {
  max-width: 820px;
  margin:    0 auto;
  padding:   9.5rem max(4vw, 1.25rem) 6rem;
}

.legal-page .section-label { justify-content: flex-start; }

.legal-page h1 {
  font-family:    var(--font-display);
  font-size:      clamp(2rem, 5.5vw, 3.2rem);
  font-weight:    800;
  letter-spacing: -0.03em;
  line-height:    1.1;
  margin-bottom:  .8rem;
}

.legal-updated {
  font-size:     .82rem;
  color:         var(--muted);
  margin-bottom: 3rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--border);
}

.legal-page h2 {
  font-size:     clamp(1.25rem, 3vw, 1.6rem);
  margin-top:    3rem;
  margin-bottom: 1rem;
}

.legal-page h3 {
  font-family:   var(--font-display);
  font-size:     1.05rem;
  font-weight:   700;
  color:         var(--text);
  margin-top:    1.8rem;
  margin-bottom: .6rem;
}

.legal-page p,
.legal-page li {
  font-size:     .95rem;
  color:         #b9bed6;
  line-height:   1.75;
  margin-bottom: 1rem;
}

.legal-page ul,
.legal-page ol {
  padding-left:  1.4rem;
  margin-bottom: 1.2rem;
}

.legal-page li { margin-bottom: .45rem; }

.legal-page a {
  color:           var(--accent);
  text-decoration: none;
  transition:      color .2s;
}

.legal-page a:hover {
  color:           #6b86f9;
  text-decoration: underline;
}

.legal-page strong { color: var(--text); }

/* Caja de datos del titular */
.legal-card {
  background:    var(--surface2);
  border:        1px solid var(--border);
  border-radius: var(--radius-md);
  padding:       1.6rem 1.8rem;
  margin:        1.5rem 0 2rem;
}

.legal-card ul {
  list-style: none;
  padding:    0;
  margin:     0;
}

.legal-card li {
  display:       flex;
  flex-wrap:     wrap;
  gap:           .4rem;
  padding:       .45rem 0;
  margin:        0;
  border-bottom: 1px solid var(--border);
  font-size:     .9rem;
}

.legal-card li:last-child { border-bottom: none; }

.legal-card li span:first-child {
  min-width:      170px;
  font-weight:    600;
  color:          var(--muted);
  text-transform: uppercase;
  font-size:      .72rem;
  letter-spacing: .06em;
  padding-top:    .15rem;
}

/* Tabla de cookies */
.legal-table-wrap {
  overflow-x:    auto;
  margin:        1.5rem 0 2rem;
  border:        1px solid var(--border);
  border-radius: var(--radius-md);
}

.legal-table {
  width:           100%;
  border-collapse: collapse;
  font-size:       .85rem;
  min-width:       560px;
}

.legal-table th {
  text-align:     left;
  padding:        .85rem 1.1rem;
  background:     var(--surface2);
  color:          var(--text);
  font-weight:    700;
  font-size:      .74rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  border-bottom:  1px solid var(--border);
  white-space:    nowrap;
}

.legal-table td {
  padding:       .85rem 1.1rem;
  color:         #b9bed6;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  line-height:   1.6;
}

.legal-table tr:last-child td { border-bottom: none; }

.legal-table code {
  font-family: 'Courier New', monospace;
  font-size:   .82rem;
  background:  rgba(79, 110, 247, 0.1);
  color:       var(--accent2);
  padding:     .1rem .4rem;
  border-radius: 4px;
  white-space: nowrap;
}

/* Botón para reabrir el banner de cookies */
.legal-page .btn-cookies {
  display:       inline-block;
  background:    var(--accent);
  color:         #fff;
  font-family:   var(--font-body);
  font-size:     .9rem;
  font-weight:   600;
  padding:       .75rem 1.8rem;
  border:        none;
  border-radius: var(--radius-pill);
  cursor:        pointer;
  margin:        .5rem 0 1.5rem;
  transition:    background .2s, transform .2s;
  box-shadow:    0 0 30px rgba(79, 110, 247, 0.3);
}

.legal-page .btn-cookies:hover {
  background: #6b86f9;
  transform:  translateY(-2px);
}

@media (max-width: 600px) {
  .legal-page { padding: 7.5rem 5vw 4rem; }
  .legal-card li span:first-child { min-width: 100%; }
}