/* ===========================================================================
   Renacia Clinic's — layout de las páginas de contenido: listado de blog,
   artículos y páginas legales. Complementa a assets/site.css (que trae los
   tokens y el chrome) y lo cargan las 10 subpáginas.

   Las tres variantes comparten el mismo cuerpo de texto (.body) y se
   diferencian solo por su contenedor: .page (listado), article (post),
   main (legal).
   =========================================================================== */

/* --- CONTENEDORES -------------------------------------------------------- */
.page{ max-width: 880px; margin: 0 auto; padding: 80px 24px 60px; }
article{ max-width: 720px; margin: 0 auto; padding: 72px 24px 40px; }
main{ max-width: 720px; margin: 0 auto; padding: 64px 24px 80px; }

/* --- CABECERA DE PÁGINA -------------------------------------------------- */
.eyebrow{
  font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gold); font-weight: 600;
}
.page h1{ font-size: clamp(2.4rem, 5vw, 3.4rem); margin-top: 10px; letter-spacing: -0.01em; }
article h1{ font-size: clamp(2rem, 4.4vw, 2.9rem); margin-top: 10px; }
main h1{ font-size: clamp(1.9rem, 4vw, 2.6rem); }
.lede{ color: var(--ink-soft); max-width: 60ch; margin-top: 18px; font-size: 1.08rem; }
.meta{ color: var(--ink-faint); font-size: 0.84rem; margin-top: 16px; }
.updated{ color: var(--ink-faint); font-size: 0.84rem; margin-top: 14px; }

/* --- CUERPO DE TEXTO ----------------------------------------------------- */
.body{ margin-top: 40px; display: flex; flex-direction: column; gap: 24px; }
article .body{ margin-top: 44px; gap: 22px; max-width: 68ch; }
main .body{ gap: 28px; }
.body p{ color: var(--ink-soft); font-size: 1.02rem; }
.body h2{ color: var(--ink); font-size: 1.5rem; margin-top: 14px; }
main .body h2{ font-size: 1.25rem; margin-top: 0; }
.body ul{
  margin: 0; padding-left: 22px; color: var(--ink-soft);
  display: flex; flex-direction: column; gap: 10px;
}
main .body ul{ margin: 10px 0 0; gap: 8px; }
.body li::marker{ color: var(--gold); }
.body strong{ color: var(--ink); }
.body a{ color: var(--gold); }

/* --- LLAMADA A LA ACCIÓN AL PIE DEL ARTÍCULO ----------------------------- */
.cta{
  max-width: 68ch; margin: 56px auto 0; padding: 32px;
  border: 1px solid var(--line); border-radius: 4px; background: var(--bg-2);
  text-align: center; display: flex; flex-direction: column; gap: 14px; align-items: center;
}
.cta p{ color: var(--ink-soft); }

/* --- TABLAS DENTRO DEL CONTENIDO ----------------------------------------- */
.table-wrap{ overflow-x: auto; }
.body table{ width: 100%; border-collapse: collapse; font-size: 0.93rem; margin-top: 8px; }
.body th, .body td{
  text-align: left; padding: 11px 9px; border-bottom: 1px solid var(--line);
  color: var(--ink-soft); vertical-align: top;
}
.body th{
  color: var(--gold); font-weight: 600; font-size: 0.77rem;
  letter-spacing: 0.04em; text-transform: uppercase;
}

/* --- PÁGINAS LEGALES ----------------------------------------------------- */
main .body p, main .body li{ font-size: 0.98rem; }
.warn{
  margin-top: 44px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 4px;
  background: var(--bg-2); color: var(--ink-faint); font-size: 0.86rem;
}

/* dato fiscal aún sin rellenar en las páginas legales — visible a propósito */
.placeholder{
  background: rgba(232,208,168,0.12); border: 1px dashed var(--gold); border-radius: 3px;
  padding: 1px 6px; color: var(--gold); font-weight: 600;
}

/* estas páginas separan el contenido del pie */
footer{ margin-top: 60px; }