/* Familias de presentación para páginas administrables en WordPress. */
.lx-page-template {
  --lx-template-accent: var(--lx-orange-600);
  --lx-template-accent-soft: var(--lx-orange-100);
  --lx-template-reading: 850px;
  color: var(--lx-body);
  background: var(--lx-surface-soft);
}

.lx-page-template--guide { --lx-template-accent: var(--lx-orange-600); --lx-template-accent-soft: var(--lx-orange-100); }
.lx-page-template--hub { --lx-template-accent: var(--lx-blue-600); --lx-template-accent-soft: var(--lx-blue-100); --lx-template-reading: 1060px; }
.lx-page-template--reference { --lx-template-accent: var(--lx-blue-800); --lx-template-accent-soft: var(--lx-blue-50); --lx-template-reading: 780px; }
.lx-page-template--tool { --lx-template-accent: var(--lx-blue-700); --lx-template-accent-soft: var(--lx-blue-100); --lx-template-reading: 1120px; }

.lx-template-main { min-height: 60vh; }
.lx-template-hero { position: relative; overflow: hidden; padding: clamp(52px, 7vw, 92px) 0; background: linear-gradient(135deg, var(--lx-blue-950), var(--lx-blue-800)); }
.lx-template-hero::after { content: ""; position: absolute; right: -90px; top: -150px; width: 380px; height: 380px; border: 62px solid rgba(255, 255, 255, .06); border-radius: 50%; }
.lx-template-hero-inner { position: relative; z-index: 1; width: min(var(--lx-content), calc(100% - 48px)); }
.lx-template-hero .lx-crumbs { margin: 0 0 28px; }
.lx-template-hero .lx-crumbs ol { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .16); box-shadow: none; }
.lx-template-hero .lx-crumbs a,
.lx-template-hero .lx-crumbs span { color: rgba(255, 255, 255, .86); }
.lx-template-kicker { margin: 0 0 12px; color: #ffab82; font-size: .76rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.lx-template-hero h1 { max-width: 900px; margin: 0; color: #fff; font-size: clamp(2.4rem, 5.2vw, 4.8rem); font-weight: 900; line-height: 1.02; letter-spacing: -.052em; text-wrap: balance; }
.lx-template-lead { max-width: 760px; margin: 20px 0 0; color: rgba(255, 255, 255, .74); font-size: clamp(1rem, 1.5vw, 1.17rem); line-height: 1.7; }

.lx-template-content { padding: clamp(48px, 7vw, 84px) 0 clamp(70px, 9vw, 110px); }
.lx-template-layout { width: min(var(--lx-template-reading), calc(100% - 48px)); }
.lx-template-article { padding: clamp(26px, 5vw, 54px); background: #fff; border: 1px solid var(--lx-line); border-top: 5px solid var(--lx-template-accent); border-radius: var(--lx-radius-xl); box-shadow: var(--lx-shadow-md); }
.lx-template-article > :first-child { margin-top: 0; }
.lx-template-article > :last-child { margin-bottom: 0; }
.lx-template-cover { margin: 0 0 36px; overflow: hidden; border-radius: var(--lx-radius-lg); }
.lx-template-cover img { display: block; width: 100%; height: auto; }
.lx-template-article :where(h2, h3, h4) { color: var(--lx-blue-900); font-weight: 900; line-height: 1.16; letter-spacing: -.025em; text-wrap: balance; }
.lx-template-article h2 { margin: 2.4em 0 .65em; padding-top: 1.25em; border-top: 1px solid var(--lx-line); font-size: clamp(1.65rem, 3vw, 2.35rem); }
.lx-template-article h3 { margin: 1.8em 0 .55em; font-size: clamp(1.25rem, 2vw, 1.55rem); }
.lx-template-article :where(p, li) { color: var(--lx-body); font-size: 1.04rem; line-height: 1.78; }
.lx-template-article a { color: var(--lx-blue-800); font-weight: 800; text-underline-offset: 3px; }
.lx-template-article :where(ul, ol) { padding-left: 1.35em; }
.lx-template-article blockquote { margin: 30px 0; padding: 22px 24px; color: var(--lx-blue-900); background: var(--lx-template-accent-soft); border-left: 4px solid var(--lx-template-accent); border-radius: 0 var(--lx-radius-md) var(--lx-radius-md) 0; }
.lx-template-article :where(table) { width: 100%; border-collapse: collapse; }
.lx-template-article :where(th, td) { padding: 13px 15px; border: 1px solid var(--lx-line); text-align: left; }
.lx-template-article th { color: var(--lx-blue-900); background: var(--lx-blue-50); }

/* Las páginas con portada propia conservan su composición, pero heredan la misma base tipográfica y de controles. */
.lx-page-template--full { background: #fff; }
.lx-page-template--full :where(h1, h2, h3, h4) { font-family: var(--lx-font); text-wrap: balance; }
.lx-page-template--full :where(button, input, select, textarea) { font-family: var(--lx-font); }
.lx-page-template--full :where(a, button):focus-visible { outline: 3px solid rgba(22, 119, 204, .4); outline-offset: 3px; }

@media (max-width: 700px) {
  .lx-template-hero { padding: 42px 0 54px; }
  .lx-template-hero-inner,
  .lx-template-layout { width: calc(100% - 30px); }
  .lx-template-hero .lx-crumbs { margin-bottom: 22px; }
  .lx-template-hero h1 { font-size: clamp(2.15rem, 11vw, 3.25rem); }
  .lx-template-content { padding: 30px 0 62px; }
  .lx-template-article { padding: 25px 20px; border-radius: 21px; }
  .lx-template-article :where(p, li) { font-size: 1rem; }
  .lx-template-article :where(table) { display: block; overflow-x: auto; }
}