/* ============================================================
   content.css — contenido rico y muro de pago (core de Brisa)
   ------------------------------------------------------------
   Solo lo genérico: el hueco del cuerpo, el aviso del muro y el
   estado de carga. Los estilos propios de cada sitio van en su
   hoja (`site_extra_css`), no aquí.

   Usa las variables de tema (`--color-*`, `--accent`) para que
   herede la paleta configurada en el panel.
   ============================================================ */

/* ── El hueco del cuerpo ──────────────────────────────────── */

.content-body {
  position: relative;
}

/* Mientras se pide el fragmento. Sin spinner: la petición es corta y un
   spinner que parpadea 200 ms se percibe peor que nada. */
.content-body.is-loading {
  opacity: .55;
  transition: opacity .15s ease-out;
}

/* Al inyectar el cuerpo, una entrada suave: el salto seco de un hueco a
   varios miles de palabras se lee como un fallo de maquetación. */
.content-body[data-unlocked] {
  animation: content-reveal .25s ease-out;
}

@keyframes content-reveal {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .content-body[data-unlocked] { animation: none; }
  .content-body.is-loading { transition: none; }
}

/* ── Entradilla pública ───────────────────────────────────── */

.content-teaser {
  font-size: 1.125rem;
  line-height: 1.7;
  color: var(--text-primary, #1a1a1a);
}

/* El desvanecido marca dónde se corta lo público. Es honesto: no oculta
   nada —debajo no hay nada que ocultar— solo señala el corte. */
.content-teaser > p:last-child {
  position: relative;
}

/* ── El aviso del muro ────────────────────────────────────── */

.content-paywall {
  margin: 2rem 0;
  padding: 2rem 1.5rem;
  border: 1px solid var(--color-light, #d9d9d9);
  border-radius: 8px;
  background: var(--color-pale, #f7f7f7);
  text-align: center;
}

.content-paywall__title {
  margin: 0 0 .5rem;
  font-size: 1.25rem;
  line-height: 1.3;
}

.content-paywall__text {
  margin: 0 auto 1.25rem;
  max-width: 44ch;
  color: var(--text-secondary, #4a4a4a);
}

.content-paywall__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 1.25rem;
  align-items: center;
  justify-content: center;
  margin: 0;
}

.content-paywall__login {
  font-size: .9375rem;
  color: var(--text-secondary, #4a4a4a);
}

/* El motivo por el que no se llega cambia el tono del aviso. Lo pone
   `content-access.js` tras preguntar a la API. */
.content-paywall[data-reason="level_insufficient"],
.content-paywall[data-reason="purchase_required"] {
  border-color: var(--accent, #d52828);
}

@media (min-width: 600px) {
  .content-paywall { padding: 2.5rem 2rem; }
}