/* =========================================================
 * PÁGINAS DE TEXTO · UMBRELLA GENOMICS
 *
 * Da el diseño de la web a las páginas NORMALES de WordPress (las que
 * se escriben en el editor): política de privacidad, términos, libro de
 * reclamaciones… El texto se sigue editando en WordPress como siempre.
 *
 * - Arriba, una franja oscura con el título (como las demás páginas).
 * - Debajo, el texto en una columna cómoda de leer.
 *
 * No toca: la portada, las páginas de Code Builder, la tienda, el
 * carrito, Mi cuenta, las páginas de cursos (Tutor LMS) ni las entradas.
 * Colores y letra: los de la Base (--navy, --blue, --font-sans…).
 * ========================================================= */

/* Solo páginas normales con texto (no las que traen una tienda, cursos o un diseño de Code Builder) */
body.page-template-default:not(.home):not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account):has(main .entry-content):not(:has(main [class*="tutor-"], main .woocommerce, main .ccb-project)) {
  --tx-dark: var(--navy, #071B3F);
  --tx-on-dark: var(--on-dark, #E6EDFA);
  --tx-glow: rgba(0, 87, 231, .35);
  --tx-ink: var(--ink, #0B1530);
  --tx-muted: var(--muted, #4A5873);
  --tx-accent: var(--blue, #0057E7);
  --tx-accent-hover: var(--blue-hover, #0047C2);
  --tx-surface: var(--surface, #F4F8FD);
  --tx-line: var(--line, #DCE5F2);
  --tx-font: var(--font-sans, system-ui, sans-serif);

  & main { margin-top: 0 !important; overflow-x: clip; padding-bottom: clamp(56px, 8vw, 96px); }
  & main > .wp-block-group:first-child { padding-top: 0 !important; }

  /* ---------- Franja oscura con el título ---------- */
  & h1.wp-block-post-title {
    position: relative;
    isolation: isolate;
    max-width: 760px;
    margin: 0 auto clamp(32px, 5vw, 56px) !important;
    padding: clamp(48px, 7vw, 88px) 0 clamp(40px, 5vw, 64px);
    font: 600 clamp(34px, 4.6vw, 54px) / 1.06 var(--tx-font);
    letter-spacing: -.035em;
    color: #FFFFFF;
    text-wrap: balance;
  }
  & h1.wp-block-post-title::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 100vw;
    transform: translateX(-50%);
    background:
      radial-gradient(circle at 85% 0%, var(--tx-glow), transparent 55%),
      linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px) 0 0 / 56px 56px,
      linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px) 0 0 / 56px 56px,
      var(--tx-dark);
  }

  /* ---------- Texto ---------- */
  & .entry-content { font: 400 17px / 1.75 var(--tx-font); color: var(--tx-muted); }
  & .entry-content > * { max-width: 760px; }
  & .entry-content p { margin: 0 0 18px; }
  & .entry-content h2 {
    margin: 44px auto 14px;
    padding-top: 28px;
    border-top: 1px solid var(--tx-line);
    font: 600 clamp(22px, 2.4vw, 26px) / 1.25 var(--tx-font);
    letter-spacing: -.02em;
    color: var(--tx-ink);
  }
  & .entry-content h3 { margin: 28px auto 10px; font: 600 19px / 1.35 var(--tx-font); color: var(--tx-ink); }
  & .entry-content strong { font-weight: 600; color: var(--tx-ink); }
  & .entry-content a { color: var(--tx-accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
  & .entry-content a:hover { color: var(--tx-accent-hover); }
  & .entry-content ul, & .entry-content ol { margin-bottom: 20px; padding-left: 1.25em; }
  & .entry-content li + li { margin-top: 8px; }
  & .entry-content li::marker { color: var(--tx-accent); }
  & .entry-content blockquote { margin: 24px auto; padding: 16px 20px; border-left: 3px solid var(--tx-accent); border-radius: 0 10px 10px 0; background: var(--tx-surface); color: var(--tx-ink); }
  & .entry-content table { width: 100%; border-collapse: collapse; font-size: 15px; }
  & .entry-content th, & .entry-content td { padding: 10px 12px; border-bottom: 1px solid var(--tx-line); text-align: left; }
  & .entry-content th { color: var(--tx-ink); font-weight: 600; background: var(--tx-surface); }

  /* «Última actualización: …» (un primer párrafo solo en cursiva) se ve como una etiqueta */
  & .entry-content > p:first-child:has(> em:only-child) em {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--tx-surface);
    font-style: normal;
    font-size: 14px;
    color: var(--tx-muted);
  }
}