/*
 * Páginas legales: centro de privacidad y las tres fichas.
 * Valores tomados de PrivacyCenter/PrivacyPolicy/PrivacyMobile/PrivacyVR.dc.html.
 *
 * Las cuatro comparten la portada (bloque rosa con eyebrow, titular y
 * entradilla); el centro añade la rejilla de tarjetas y las fichas, el cuerpo
 * del documento.
 */

/*
 * Las páginas legales pisan tres tamaños de la escala del tema con otros más
 * pequeños, iguales en las cinco (las cuatro de privacidad y la de cookies).
 * No es un descuido del diseño: un documento legal no lleva el titular de una
 * página de producto.
 */
.exr-legal {
  --fs-hero: clamp(2.125rem, 5vw, 3.25rem);        /* 34px → 52px */
  --fs-section-lg: clamp(1.5rem, 2.6vw, 2rem);     /* 24px → 32px */
  --fs-card-lg: clamp(1.0625rem, 1.6vw, 1.25rem);  /* 17px → 20px */
}

/* content-box: el ancho máximo del prototipo es el del contenido y el relleno
   va por fuera (ver CLAUDE.md, trampa nº 1). */
.exr-legal-hero,
.exr-legal-doc,
.exr-privacy-grid {
  box-sizing: content-box;
  margin: 0 auto;
}

/* ==========================================================================
   Portada
   ========================================================================== */

.exr-legal-hero {
  max-width: 760px;
  padding: clamp(40px, 8vw, 72px) clamp(20px, 5vw, 32px) clamp(28px, 5vw, 40px);
}

/* Enlace de vuelta al centro de privacidad */
.exr-legal-hero__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-muted);
  font-weight: 600;
  font-size: var(--fs-small);
  margin-bottom: 20px;
}

.exr-legal-hero__back:hover {
  color: var(--coral);
}

.exr-legal-hero__eyebrow {
  letter-spacing: 0.08em;
  margin-bottom: 16px;
}

.exr-legal-hero__title {
  font-weight: 700;
  font-size: var(--fs-hero);
  line-height: 1.15;
  color: var(--navy);
  margin: 0 0 16px;
}

/* La política web cierra con «Last updated…», que va más pegado al titular */
.exr-legal-hero__title--tight {
  margin-bottom: 12px;
}

.exr-legal-hero__lead {
  font-size: var(--fs-body-lg);
  color: var(--text-secondary);
  line-height: var(--lh-body);
  margin: 0;
  max-width: 620px;
}

.exr-legal-hero__meta {
  font-size: var(--fs-body);
  color: var(--text-muted);
  margin: 0;
}

/* ==========================================================================
   Centro de privacidad: rejilla de tarjetas
   ========================================================================== */

.exr-privacy-grid {
  max-width: var(--container-wide);
  padding: clamp(40px, 7vw, 64px) clamp(20px, 5vw, 56px) clamp(56px, 8vw, 96px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(20px, 3vw, 28px);
}

.exr-privacy-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.exr-privacy-card__title {
  font-weight: 700;
  font-size: var(--fs-card-lg);
  color: var(--navy);
  margin: 0;
}

/* flex:1 empuja los enlaces al fondo, para que las tres tarjetas los alineen */
.exr-privacy-card__desc {
  font-size: var(--fs-body);
  color: var(--text-secondary);
  line-height: var(--lh-body);
  margin: 0;
  flex: 1;
}

/* Una tarjeta puede llevar mas de un documento (eXRcise Mobile: privacidad y
   terminos y condiciones). Van agrupados y con menos aire entre si que el
   resto de la tarjeta, que separa sus piezas 16px. Con un solo enlace este
   envoltorio no cambia nada: sigue siendo un bloque a lo ancho de la tarjeta,
   igual que lo era el propio enlace cuando colgaba directo del flex. */
.exr-privacy-card__links {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.exr-privacy-card__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--coral);
  font-weight: 700;
  font-size: var(--fs-small);
}

.exr-privacy-card__link:hover {
  color: var(--coral-hover);
}


/* ==========================================================================
   Fichas: cuerpo del documento
   ==========================================================================
   Estas cuatro páginas se escriben desde el editor de WordPress, así que aquí
   no se maqueta bloque a bloque: se da estilo a lo que salga del editor
   (títulos, párrafos y grupos) con un ritmo vertical único. Es la diferencia
   con el prototipo, que espacia cada bloque a mano; a cambio, el cliente puede
   añadir y quitar párrafos sin descuadrar nada. */

.exr-legal-doc {
  max-width: 760px;
  padding: clamp(40px, 7vw, 64px) clamp(20px, 5vw, 32px) clamp(56px, 8vw, 96px);
  color: var(--text-primary);
  font-size: var(--fs-body-lg);
  line-height: 1.65;
}

.exr-legal-doc > :first-child {
  margin-top: 0;
}

.exr-legal-doc > :last-child {
  margin-bottom: 0;
}

/*
 * EL INTERLINEADO VA EN LOS PÁRRAFOS, NO EN LOS TITULARES.
 *
 * El prototipo no pone `line-height:1.65` en el documento entero sino en cada
 * grupo de párrafos, así que sus h2 y h3 se quedan en `normal`. Aquí la regla
 * cuelga de `.exr-legal-doc` y los titulares la heredaban: cada h2 medía 52,8px
 * en vez de 48 y cada h3, 33 en vez de 30. Es la misma trampa que en el resto
 * del sitio (ver CLAUDE.md): la irregularidad del diseño se copia, no se
 * uniforma.
 */
.exr-legal-doc h2,
.exr-legal-doc h3 {
  line-height: normal;
}

/* Cada sección abre con un h2 y su filete, menos la primera */
.exr-legal-doc h2 {
  font-weight: 700;
  font-size: var(--fs-section-lg);
  color: var(--navy);
  margin: 40px 0 16px;
  border-top: 1px solid var(--border-neutral);
  padding-top: 32px;
}

.exr-legal-doc h2:first-child {
  margin-top: 0;
  border-top: none;
  padding-top: 0;
}

.exr-legal-doc h3 {
  font-weight: 700;
  font-size: var(--fs-card-lg);
  color: var(--navy);
  margin: 28px 0 10px;
}

/*
 * Un apartado justo debajo del titular de sección no lleva los 28px, pero
 * tampoco va pegado: el prototipo deja 20 entre los dos. Se declaran los 20
 * enteros, y no los 4 que faltan sobre el margen del h2, porque los márgenes
 * verticales COLAPSAN: el hueco es el mayor de los dos, no la suma.
 */
.exr-legal-doc h2 + h3 {
  margin-top: 20px;
}

.exr-legal-doc p {
  margin: 0 0 14px;
}

/*
 * Bloque sangrado: definiciones y enumeraciones. No es una lista con viñetas:
 * el marcador («–», «(a)»…) forma parte del texto legal. En el editor es un
 * grupo, así que el cliente puede añadirle o quitarle párrafos.
 */
.exr-legal-doc .exr-legal-indent {
  padding-left: 4px;
  margin-bottom: 14px;
}

.exr-legal-doc .exr-legal-indent p {
  margin-bottom: 8px;
}

/*
 * El diseño no separa todos estos bloques igual: tres de la política web van
 * con 12px entre párrafos en vez de 8, y son bloques largos, así que la página
 * salía 88px más corta. Lo marca tools/legales-bloques.php a partir del «gap»
 * del prototipo.
 */
.exr-legal-doc .exr-legal-indent--12 p {
  margin-bottom: 12px;
}

.exr-legal-doc .exr-legal-indent p:last-child {
  margin-bottom: 0;
}

.exr-legal-doc a {
  color: var(--coral);
  font-weight: 600;
}

.exr-legal-doc a:hover {
  color: var(--coral-hover);
}