/* ============================================================================
   PÁGINAS LEGALES
   ----------------------------------------------------------------------------
   Un contrato no es una página de marketing: se lee entero, se busca un
   apartado concreto y a menudo se imprime antes de pagar. Todo lo de aquí sale
   de esas tres cosas.
   ============================================================================ */

.legal {
  --legal-measure: 34rem;      /* ~65 caracteres: la medida de lectura larga */
  --legal-rule: #E1E6E1;
  --legal-ink: #14181A;
  --legal-soft: #5A635E;
  background: #fff;
  color: var(--legal-ink);
}

.wrap--legal { max-width: 72rem; margin: 0 auto; padding: 0 24px; }

/* --- Cabecera -------------------------------------------------------------- */
.legal__hd {
  padding: clamp(56px, 8vw, 96px) 0 clamp(28px, 4vw, 44px);
  border-bottom: 1px solid var(--legal-rule);
  margin-bottom: clamp(32px, 5vw, 56px);
}
.legal__kicker {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--legal-soft); margin: 0 0 14px;
}
.legal__title {
  font-family: var(--display, Georgia, serif);
  font-size: clamp(32px, 5.5vw, 54px); line-height: 1.05;
  letter-spacing: -.02em; margin: 0 0 12px; max-width: 20ch;
}
.legal__meta {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 12px; color: var(--legal-soft); margin: 0;
}
.legal__badge {
  display: inline-block; padding: 1px 7px; border-radius: 2px;
  background: #F7EFDC; color: #7A5A12; font-weight: 600;
}

/* --- Rejilla: índice + documento -------------------------------------------
   El índice va a la izquierda y fijo: la pregunta real es «¿qué pasa si
   cancelo?», y sin él hay que recorrer diez apartados para encontrarlo. */
.legal__grid {
  display: grid;
  grid-template-columns: 15rem minmax(0, var(--legal-measure));
  gap: clamp(32px, 6vw, 80px);
  align-items: start;
}
@media (max-width: 900px) {
  .legal__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}

.legal__toc { position: sticky; top: 88px; }
@media (max-width: 900px) {
  .legal__toc {
    position: static; padding: 18px 20px;
    background: #F6F7F5; border: 1px solid var(--legal-rule); border-radius: 3px;
  }
}
.legal__toc-t {
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--legal-soft); margin: 0 0 12px; font-weight: 600;
}
.legal__toc ol { list-style: none; padding: 0; margin: 0; counter-reset: toc; }
.legal__toc li { counter-increment: toc; margin-bottom: 8px; }
.legal__toc a {
  display: grid; grid-template-columns: 1.6rem 1fr; gap: 6px;
  font-size: 13.5px; line-height: 1.4; color: var(--legal-soft);
  text-decoration: none; padding: 3px 0;
  border-left: 2px solid transparent; padding-left: 10px; margin-left: -12px;
  transition: color .18s ease, border-color .18s ease;
}
.legal__toc a::before {
  content: counter(toc) '.';
  font-family: var(--mono, ui-monospace, monospace); font-size: 11px;
  color: #9AA39E;
}
.legal__toc a:hover,
.legal__toc a:focus-visible { color: var(--legal-ink); border-left-color: var(--legal-ink); }

/* --- El documento ----------------------------------------------------------- */
.legal__doc { max-width: var(--legal-measure); font-size: 16px; line-height: 1.75; }

.legal__doc section { counter-increment: sec; margin-bottom: 40px; scroll-margin-top: 96px; }
.legal__doc h2 {
  font-size: 20px; line-height: 1.25; letter-spacing: -.01em;
  margin: 0 0 14px; padding-bottom: 10px;
  border-bottom: 1px solid var(--legal-rule);
}
.legal__doc h3 { font-size: 16px; margin: 26px 0 8px; }
.legal__doc p  { margin: 0 0 16px; }
.legal__doc ul, .legal__doc ol { margin: 0 0 16px; padding-left: 22px; }
.legal__doc li { margin-bottom: 8px; }
.legal__doc strong { font-weight: 650; }
.legal__doc a { color: inherit; text-underline-offset: 3px; }

/* Tablas de penalizaciones y plazos: se consultan, no se leen en prosa. */
.legal__doc table {
  width: 100%; border-collapse: collapse; margin: 0 0 20px;
  font-size: 14.5px;
}
.legal__doc th, .legal__doc td {
  padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--legal-rule);
  vertical-align: top;
}
.legal__doc thead th {
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--legal-soft); background: #F6F7F5; border-bottom-width: 2px;
}
.legal__doc tbody tr:last-child td { border-bottom: 0; }

/* --- Datos sin rellenar -----------------------------------------------------
   Se marcan en el propio texto. Un hueco en blanco parecería intencionado; así
   se ve que falta un dato del negocio. */
.legal__gap {
  background: #F7EFDC; color: #7A5A12;
  padding: 0 5px; border-radius: 2px;
  font-family: var(--mono, ui-monospace, monospace); font-size: .86em;
  font-weight: 600; white-space: nowrap;
}

/* --- Aviso de borrador ------------------------------------------------------ */
.legal__warn {
  border: 1px solid var(--legal-rule); border-left: 3px solid #B94E33;
  background: #FCFAF8; padding: 20px 22px; margin-bottom: 36px;
  max-width: var(--legal-measure);
}
.legal__warn-t { font-weight: 700; margin: 0 0 10px; }
.legal__warn p { margin: 0 0 12px; line-height: 1.65; font-size: 15px; }
.legal__warn p:last-child { margin-bottom: 0; }

.legal__draftlist { line-height: 1.7; }
.legal__draftlist li { margin-bottom: 10px; }

/* --- Pie: versión y huella --------------------------------------------------
   La huella identifica el texto exacto que el cliente aceptó al reservar: es
   la prueba del consentimiento. */
.legal__foot {
  margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--legal-rule);
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 11.5px; color: var(--legal-soft); line-height: 1.7;
}
.legal__foot code { background: #F6F7F5; padding: 1px 5px; border-radius: 2px; }
.legal__foot-n { font-family: inherit; }

/* --- Navegación entre documentos --------------------------------------------- */
.legal__nav {
  display: flex; flex-wrap: wrap; gap: 20px;
  margin-top: 64px; padding: 24px 0 80px;
  border-top: 1px solid var(--legal-rule); font-size: 14px;
}
.legal__navlink { color: var(--legal-soft); text-decoration: none; }
.legal__navlink:hover { color: var(--legal-ink); text-decoration: underline; }
.legal__navlink.is-current { color: var(--legal-ink); font-weight: 600; }

/* --- Impresión ---------------------------------------------------------------
   Mucha gente imprime las condiciones antes de pagar, y lo que imprime debe
   servir como copia del contrato: con versión, huella y sin navegación. */
@media print {
  .legal__toc, .legal__nav, header, footer, nav { display: none !important; }
  .legal { font-size: 11pt; }
  .legal__grid { display: block; }
  .legal__doc { max-width: none; }
  .legal__hd { padding: 0 0 12pt; margin-bottom: 18pt; }
  .legal__title { font-size: 22pt; }
  .legal__doc section { break-inside: avoid-page; margin-bottom: 18pt; }
  .legal__doc h2 { break-after: avoid-page; font-size: 13pt; }
  .legal__doc table { break-inside: avoid; }
  .legal__gap { background: none; border: 1px solid #999; }
  .legal__warn { border: 1pt solid #000; }
  a[href^="http"]::after { content: ' (' attr(href) ')'; font-size: 9pt; }
}