/* ═══════════════════════════════════════════════════════════
   YouPlanFit · páginas legales
   ═══════════════════════════════════════════════════════════
   Hoja aparte y no un bloque <style> repetido tres veces: terminos,
   privacidad y reembolsos comparten exactamente la misma maquetación, y
   tres copias del mismo CSS son tres sitios donde arreglar lo mismo.

   Va DESPUÉS de portada.css, de la que hereda colores, tipografías y la
   barra de navegación. Aquí solo está lo que un texto largo necesita y una
   página de venta no: ancho de línea corto, jerarquía de títulos legible y
   la marca de lo que todavía está por decidir.
   ═══════════════════════════════════════════════════════════ */

/* La barra es position:fixed en estas páginas (.nav--solida), así que el
   texto empezaría debajo de ella. */
.legal { padding: calc(var(--nav-h) + 40px) 0 clamp(72px, 10vw, 120px); }

.legal__cab { margin-bottom: clamp(34px, 5vw, 52px); }
.legal__cab .t { font-size: clamp(2rem, 5vw, 3.2rem); margin-bottom: 14px; }
.legal__fecha {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--humo); margin: 0;
}

/* 68ch es el ancho donde el ojo encuentra solo el principio de la línea
   siguiente. Más largo y se relee la misma línea dos veces, que en un texto
   de tres mil palabras es exactamente lo que hace que se abandone. */
.legal__cuerpo { max-width: 68ch; }
.legal__cuerpo p,
.legal__cuerpo li { font-size: 1.02rem; line-height: 1.7; }
.legal__cuerpo p { margin: 0 0 18px; }

.legal__cuerpo h2 {
  font-family: var(--display); font-stretch: 118%; font-weight: 900;
  font-size: clamp(1.25rem, 2.6vw, 1.6rem); line-height: 1.15;
  letter-spacing: -.015em; margin: clamp(44px, 6vw, 62px) 0 16px;
  padding-top: 22px; border-top: 1px solid var(--linea);
}
.legal__cuerpo h2:first-child { margin-top: 0; border-top: 0; padding-top: 0; }

.legal__cuerpo h3 {
  font-family: var(--body); font-weight: 700; font-size: 1.05rem;
  margin: 30px 0 10px;
}

.legal__cuerpo ul { margin: 0 0 18px; padding-left: 22px; }
.legal__cuerpo li { margin-bottom: 9px; }
.legal__cuerpo a { color: var(--fucsia); text-decoration: underline; text-underline-offset: 3px; }

/* Los nombres técnicos —la cookie de sesión, las claves del navegador— van en
   monoespaciada: son literales que alguien puede querer buscar en su
   navegador, y en la tipografía del texto se leen como una palabra más. */
.legal__cuerpo code {
  font-family: var(--mono); font-size: .86em;
  background: var(--papel-2); padding: 2px 6px; border-radius: 5px;
  overflow-wrap: anywhere;
}

/* Tabla de terceros. Se desplaza dentro de su caja y no arrastra la página:
   en un móvil de 320 px, tres columnas no caben de ninguna manera. */
.legal__tabla-wrap { overflow-x: auto; margin: 0 0 22px; }
.legal__tabla { border-collapse: collapse; width: 100%; min-width: 520px; font-size: .92rem; }
.legal__tabla th, .legal__tabla td {
  text-align: left; vertical-align: top; padding: 11px 14px 11px 0;
  border-bottom: 1px solid var(--linea); line-height: 1.5;
}
.legal__tabla th {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--fucsia); white-space: nowrap;
}

/* ── El aviso de salud ──
   Es el párrafo que no puede leerse como letra pequeña. Va con fondo propio
   y borde a la izquierda para que se encuentre hojeando, sin buscarlo. */
.legal__salud {
  background: var(--papel-2); border-left: 4px solid var(--fucsia);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  padding: 22px 24px; margin: 0 0 22px;
}
.legal__salud p:last-child { margin-bottom: 0; }

/* ── Lo que falta por decidir ──
   Amarillo de verdad, no un gris discreto: esto tiene que doler a la vista
   mientras siga ahí. Una página legal publicada con un hueco sin rellenar
   promete algo que nadie ha decidido. */
mark.pendiente {
  background: #FFE9A8; color: #4A3B00; padding: 2px 7px;
  border-radius: 5px; font-weight: 700; font-size: .95em;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
.legal__pendientes {
  background: #FFF6DC; border: 2px dashed #D8A800; border-radius: var(--r-sm);
  padding: 22px 24px; margin: 0 0 clamp(34px, 5vw, 48px);
}
.legal__pendientes h2 {
  margin: 0 0 12px; border: 0; padding: 0;
  font-family: var(--body); font-weight: 700; font-size: 1.02rem; color: #4A3B00;
}
.legal__pendientes ul { margin: 0; padding-left: 20px; }
.legal__pendientes li { font-size: .95rem; line-height: 1.55; color: #4A3B00; }

/* Las otras dos páginas legales, al final de cada una: quien llega a
   reembolsos por un anuncio no debería tener que volver al pie para
   encontrar la privacidad. */
.legal__hermanas {
  display: flex; gap: 10px; flex-wrap: wrap;
  margin-top: clamp(44px, 6vw, 62px); padding-top: 26px; border-top: 1px solid var(--linea);
}
.legal__hermanas a {
  font-family: var(--mono); font-size: .7rem; letter-spacing: .12em;
  text-transform: uppercase; text-decoration: none; color: var(--tinta);
  border: 1px solid var(--linea); border-radius: 999px; padding: 10px 18px;
}
.legal__hermanas a:hover { border-color: var(--fucsia); color: var(--fucsia); }