/* ============================================================================
   AppCreator Pro — hoja única del tema.
   Sin dependencias externas: todo el CSS viaja en un fichero cacheado por
   filemtime. Propiedades LÓGICAS (inline-start/end) en vez de left/right en
   todo lo direccional: hay 3 locales RTL (ar, he, fa) y un sidebar "izquierdo"
   fijo se rompería en ellos.
   ========================================================================= */

/* ── Tokens ───────────────────────────────────────────────────────────────── */
:root {
  --ac-bg: #ffffff;
  --ac-bg-soft: #f6f8fb;
  --ac-surface: #ffffff;
  --ac-text: #0e1420;
  --ac-text-muted: #5a6678;
  --ac-border: #e3e8ef;
  --ac-primary: #3b62f6;
  --ac-primary-ink: #ffffff;
  --ac-accent: #ff7a36;

  --ac-radius: 14px;
  --ac-radius-sm: 9px;
  --ac-shadow: 0 1px 2px rgb(14 20 32 / 6%), 0 8px 24px rgb(14 20 32 / 6%);

  --ac-header-h: 64px;
  --ac-aside-w: 268px;
  --ac-gap: clamp(1.25rem, 3vw, 2.5rem);
  --ac-max: 1320px;

  --ac-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, "Noto Sans", sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ac-bg: #0b1020;
    --ac-bg-soft: #111830;
    --ac-surface: #141c33;
    --ac-text: #eef2f9;
    --ac-text-muted: #9aa7bd;
    --ac-border: #24304e;
    --ac-primary: #6f8dff;
    --ac-shadow: 0 1px 2px rgb(0 0 0 / 30%), 0 10px 28px rgb(0 0 0 / 35%);
  }
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  font-family: var(--ac-font);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ac-text);
  background: var(--ac-bg);
  -webkit-font-smoothing: antialiased;
}

img, svg, video, iframe { max-width: 100%; }
img, video { height: auto; }

a { color: var(--ac-primary); text-underline-offset: .18em; }

:where(h1, h2, h3, h4) {
  line-height: 1.2;
  text-wrap: balance;
  margin: 0 0 .5em;
}
h1 { font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3rem); letter-spacing: -.02em; }
h2 { font-size: clamp(1.4rem, 1.1rem + 1.3vw, 2rem); letter-spacing: -.01em; }
h3 { font-size: 1.15rem; }

p { text-wrap: pretty; }

.ac-skip {
  position: absolute;
  inset-inline-start: -9999px;
  top: 0;
  z-index: 999;
  padding: .75rem 1rem;
  background: var(--ac-primary);
  color: var(--ac-primary-ink);
}
.ac-skip:focus { inset-inline-start: 0; }

:where(a, button, input, select, textarea):focus-visible {
  outline: 2px solid var(--ac-primary);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── Botones ──────────────────────────────────────────────────────────────── */
.ac-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .7rem 1.15rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-weight: 600;
  font-size: .95rem;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.ac-btn--primary { background: var(--ac-primary); color: var(--ac-primary-ink); }
.ac-btn--primary:hover { transform: translateY(-1px); box-shadow: var(--ac-shadow); }
.ac-btn--ghost { background: transparent; color: var(--ac-text); border-color: var(--ac-border); }
.ac-btn--sm { padding: .5rem .9rem; font-size: .875rem; }

/* ── Header ───────────────────────────────────────────────────────────────── */
.ac-header {
  position: sticky;
  top: 0;
  z-index: 50;
  min-height: var(--ac-header-h);
  background: color-mix(in srgb, var(--ac-bg) 88%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--ac-border);
}
.ac-header__inner {
  max-width: var(--ac-max);
  margin-inline: auto;
  padding: .6rem var(--ac-gap);
  display: flex;
  align-items: center;
  gap: 1rem;
}
.ac-brand { display: inline-flex; align-items: center; flex: 0 0 auto; text-decoration: none; color: inherit; }
.ac-brand__name { font-weight: 800; font-size: 1.1rem; letter-spacing: -.02em; white-space: nowrap; }
/* El logo del Customizer llega a tamaño completo (aquí, 1300 px de alto) y sin
   este tope revienta el header y empuja toda la página. `.custom-logo-link` es
   el envoltorio que pinta `the_custom_logo()`. */
.ac-brand .custom-logo-link { display: block; line-height: 0; }
/* Tope por ALTURA con `height` fija, no solo `max-height`: el logo llega a
   tamaño completo (1300 px de alto aquí) y `max-height` sin `width:auto` en la
   misma regla dejaba el hueco reservado. También se cubre `.custom-logo` suelto
   por si el marcado cambia. */
.ac-brand img,
.ac-header .custom-logo {
  display: block;
  height: 40px;
  width: auto;
  max-width: 190px;
  object-fit: contain;
}
.ac-header__nav { flex: 1 1 auto; min-width: 0; }
/* `flex: 0 0 auto` + nowrap: sin esto el botón del CTA se comprime hasta
   volverse un círculo con el texto encima del menú. */
.ac-header__end { display: flex; align-items: center; gap: .6rem; flex: 0 0 auto; margin-inline-start: auto; }
.ac-header__cta { white-space: nowrap; }

.ac-menu {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ac-menu a {
  color: var(--ac-text);
  text-decoration: none;
  font-size: .95rem;
  font-weight: 500;
  padding: .35rem 0;
}
.ac-menu a:hover { color: var(--ac-primary); }

.ac-burger {
  display: none;
  flex-direction: column;
  gap: 4px;
  width: 40px;
  height: 40px;
  padding: 10px 8px;
  background: none;
  border: 1px solid var(--ac-border);
  border-radius: var(--ac-radius-sm);
  cursor: pointer;
}
.ac-burger span { display: block; height: 2px; background: var(--ac-text); border-radius: 2px; }

/* ── Shell de dos columnas ────────────────────────────────────────────────── */
.ac-shell {
  max-width: var(--ac-max);
  margin-inline: auto;
  padding: var(--ac-gap);
}
.ac-shell--sidebar {
  display: grid;
  grid-template-columns: var(--ac-aside-w) minmax(0, 1fr);
  gap: var(--ac-gap);
}
.ac-shell--wide { display: block; }
.ac-shell__main { min-width: 0; }

/* La columna lateral DEBE estirarse a todo el alto de la fila. `position:sticky`
   solo se desplaza dentro de la caja de su padre: con la columna ajustada a su
   contenido (lo que hacía `align-items:start`) el recorrido era cero y el
   sidebar se iba hacia arriba con la página. Con `stretch` recorre el artículo
   entero y se queda fijo. */
.ac-shell__aside {
  align-self: stretch;
  /* `overflow` aquí ROMPERÍA el sticky del hijo: el scroll propio va dentro. */
}

/* EL SIDEBAR STICKY. `top` deja hueco al header pegajoso; `max-height` + scroll
   propio para que un catálogo largo no obligue a hacer scroll de la página. */
.ac-shell__aside-sticky {
  position: sticky;
  top: calc(var(--ac-header-h) + 1rem);
  max-height: calc(100vh - var(--ac-header-h) - 2rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

/* ── Navegación de plantillas (sidebar + drawer) ──────────────────────────── */
.ac-tpl-nav {
  background: var(--ac-bg-soft);
  border: 1px solid var(--ac-border);
  border-radius: var(--ac-radius);
  padding: .5rem 0;
}
.ac-tpl-nav__head { padding: .75rem 1rem; border-bottom: 1px solid var(--ac-border); }
.ac-tpl-nav__title { margin: 0; font-size: .78rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ac-text-muted); }
.ac-tpl-nav__list { margin: 0; padding: .35rem 0; list-style: none; }

.ac-tpl-nav__link {
  display: block;
  padding: .6rem 1rem;
  color: var(--ac-text);
  text-decoration: none;
  /* Lógico, no `border-left`: en árabe/hebreo/persa la marca va a la derecha. */
  border-inline-start: 3px solid transparent;
  transition: background-color .15s ease, border-color .15s ease;
}
.ac-tpl-nav__link:hover { background: color-mix(in srgb, var(--ac-primary) 8%, transparent); }
.ac-tpl-nav__link.is-active {
  background: color-mix(in srgb, var(--ac-primary) 12%, transparent);
  border-inline-start-color: var(--ac-primary);
}
.ac-tpl-nav__link.is-active .ac-tpl-nav__name { color: var(--ac-primary); }
.ac-tpl-nav__name { display: block; font-weight: 600; font-size: .95rem; line-height: 1.25; }
.ac-tpl-nav__niche {
  display: block;
  font-size: .78rem;
  color: var(--ac-text-muted);
  /* El nicho es contexto, no debe partir la fila en dos líneas. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ac-tpl-nav__all {
  display: block;
  padding: .75rem 1rem .5rem;
  font-size: .85rem;
  font-weight: 600;
  text-decoration: none;
  border-top: 1px solid var(--ac-border);
  margin-top: .35rem;
}

.ac-aside-widgets { margin-top: 1rem; }
.ac-widget {
  background: var(--ac-bg-soft);
  border: 1px solid var(--ac-border);
  border-radius: var(--ac-radius);
  padding: 1rem;
  margin-bottom: 1rem;
}
.ac-widget__title { display: block; font-size: .78rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ac-text-muted); margin-bottom: .5rem; }

/* ── Drawer (móvil) ───────────────────────────────────────────────────────── */
.ac-drawer { position: fixed; inset: 0; z-index: 60; }
.ac-drawer[hidden] { display: none; }
.ac-drawer__backdrop { position: absolute; inset: 0; background: rgb(4 8 18 / 55%); }
.ac-drawer__panel {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: min(86vw, 340px);
  background: var(--ac-bg);
  border-inline-end: 1px solid var(--ac-border);
  padding: 1rem;
  overflow-y: auto;
  animation: ac-slide-in .18s ease-out;
}
@keyframes ac-slide-in { from { transform: translateX(-100%); } to { transform: none; } }
.ac-rtl .ac-drawer__panel { animation-name: ac-slide-in-rtl; }
@keyframes ac-slide-in-rtl { from { transform: translateX(100%); } to { transform: none; } }
.ac-drawer__close {
  position: absolute;
  inset-block-start: .5rem;
  inset-inline-end: .5rem;
  width: 40px; height: 40px;
  font-size: 1.6rem; line-height: 1;
  background: none; border: 0; color: var(--ac-text); cursor: pointer;
}

/* ── Contenido ────────────────────────────────────────────────────────────── */
.ac-prose { max-width: 72ch; }
.ac-prose :where(p, ul, ol, blockquote, figure, pre) { margin-block: 0 1.1em; }
.ac-prose :where(h2, h3) { margin-block-start: 1.8em; scroll-margin-top: calc(var(--ac-header-h) + 1rem); }
.ac-prose img { border-radius: var(--ac-radius); }
.ac-prose pre { overflow-x: auto; padding: 1rem; border-radius: var(--ac-radius-sm); background: var(--ac-bg-soft); }
.ac-prose table { display: block; overflow-x: auto; border-collapse: collapse; }
.ac-prose :where(th, td) { border: 1px solid var(--ac-border); padding: .5rem .75rem; }

.ac-entry-meta { color: var(--ac-text-muted); font-size: .9rem; margin-bottom: 1.5rem; }

.ac-card {
  background: var(--ac-surface);
  border: 1px solid var(--ac-border);
  border-radius: var(--ac-radius);
  padding: 1.1rem;
}

.ac-grid { display: grid; gap: 1rem; }
.ac-grid--posts { grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.ac-features-grid { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); }
.ac-showcase-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); }
.ac-showcase-card { display: block; text-align: center; text-decoration: none; color: inherit; }
/* `display:block` es OBLIGATORIO: el marco se pinta con un <span>, y un elemento
   inline IGNORA width/height, así que la captura salía a tamaño natural y las
   tarjetas se desbordaban de su columna. `max-width` lo mantiene dentro. */
.ac-showcase-card__frame {
  display: block;
  margin-inline: auto;
  max-width: 100%;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--ac-border);
}
.ac-showcase-card__frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ac-showcase-card__name { display: block; margin-top: .5rem; font-size: .9rem; font-weight: 600; }

/* ── Marco de teléfono + prueba interactiva ───────────────────────────────── */
.ac-phone {
  --ac-phone-w: 320px;
  width: var(--ac-phone-w);
  max-width: 100%;
  aspect-ratio: 412 / 915;
  position: relative;
  margin-inline: auto;
  background: #0b0d14;
  border: 10px solid #0b0d14;
  border-radius: 38px;
  box-shadow: var(--ac-shadow);
  overflow: hidden;
}
.ac-phone__screen { position: absolute; inset: 0; border-radius: 28px; overflow: hidden; background: var(--ac-bg); }
.ac-phone__frame { width: 100%; height: 100%; border: 0; display: block; }
.ac-phone__notch {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  width: 110px; height: 20px;
  background: #0b0d14;
  border-radius: 0 0 12px 12px;
  z-index: 2;
}
.ac-try { display: grid; gap: 1rem; justify-items: center; }
.ac-try__hint { font-size: .9rem; color: var(--ac-text-muted); text-align: center; max-width: 40ch; margin: 0; }
.ac-try__actions { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: center; }

/* Carrusel de capturas (reserva cuando no hay documento exportado) */
.ac-phone__slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .4s ease; }
.ac-phone__slide.is-visible { opacity: 1; }

.ac-screenshot-gallery {
  display: grid;
  gap: .75rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 160px), 1fr));
}
.ac-screenshot-gallery img { width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--ac-border); }

.ac-faq-item { border-top: 1px solid var(--ac-border); padding: 1rem 0; }
.ac-faq-item h3 { margin-bottom: .35rem; }
.ac-faq-item p { margin: 0; color: var(--ac-text-muted); }

/* ── Footer ───────────────────────────────────────────────────────────────── */
.ac-footer { border-top: 1px solid var(--ac-border); background: var(--ac-bg-soft); margin-top: 3rem; }
.ac-footer__inner {
  max-width: var(--ac-max);
  margin-inline: auto;
  padding: 2.5rem var(--ac-gap) 1.5rem;
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}
.ac-footer__tagline { color: var(--ac-text-muted); font-size: .9rem; margin: .35rem 0 0; }
.ac-footer__menu { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.ac-footer__menu a { color: var(--ac-text); text-decoration: none; font-size: .92rem; }
.ac-footer__legal {
  max-width: var(--ac-max);
  margin-inline: auto;
  padding: 1rem var(--ac-gap) 2rem;
  color: var(--ac-text-muted);
  font-size: .85rem;
  border-top: 1px solid var(--ac-border);
}

/* ── Responsive ───────────────────────────────────────────────────────────── */
/* ≤991 px: el sidebar deja de ocupar columna y su contenido pasa al drawer del
   header. iatools lo OCULTA sin más; aquí no se pierde la navegación. */
@media (max-width: 991px) {
  .ac-shell--sidebar { grid-template-columns: minmax(0, 1fr); }
  .ac-shell__aside { display: none; }
  .ac-burger { display: flex; }
  .ac-header__nav { display: none; }
  .ac-header__cta { display: none; }
}

@media (min-width: 992px) {
  .ac-drawer { display: none !important; }
}

/* Aviso de idioma del preview: la demo se sirve en otro idioma y se dice. */
.ac-try__note {
  margin: 0;
  padding: .3rem .75rem;
  border: 1px solid var(--ac-border);
  border-radius: 999px;
  font-size: .78rem;
  color: var(--ac-text-muted);
  background: var(--ac-bg-soft);
}

/* ── Portada ──────────────────────────────────────────────────────────────── */
.ac-hero {
  padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(2rem, 4vw, 3rem);
  text-align: center;
  max-width: 52rem;
  margin-inline: auto;
}
.ac-hero__eyebrow {
  margin: 0 0 .75rem;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ac-primary);
}
.ac-hero__title { margin: 0 0 .75rem; }
.ac-hero__desc {
  margin: 0 auto 1.75rem;
  max-width: 44ch;
  font-size: clamp(1rem, .95rem + .3vw, 1.2rem);
  color: var(--ac-text-muted);
}
.ac-hero__actions {
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
  justify-content: center;
}
/* Los CTA del plugin vienen como botones de bloque (`wp-block-button__link`).
   Se estilizan GLOBALMENTE, no solo dentro del hero: el mismo shortcode aparece
   en las fichas de plantilla y en el sidebar, y allí salía con el gris por
   defecto de WordPress en vez del azul de marca. */
.wp-block-button__link,
.wp-element-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .7rem 1.15rem;
  border: 0;
  border-radius: 999px;
  background: var(--ac-primary);
  color: var(--ac-primary-ink);
  font-weight: 600;
  font-size: .95rem;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
}
.wp-block-button__link:hover,
.wp-element-button:hover { box-shadow: var(--ac-shadow); }
.wp-block-buttons { display: flex; gap: .75rem; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }

.ac-home__content,
.ac-home__templates,
.ac-home__latest { margin-block: clamp(2rem, 5vw, 3.5rem); }
.ac-home__content { margin-inline: auto; }
.ac-home__templates > h2,
.ac-home__latest > h2 { text-align: center; margin-bottom: 1.5rem; }

.ac-card__title { margin: .5rem 0 .25rem; font-size: 1.05rem; }
.ac-card__title a { color: inherit; text-decoration: none; }
.ac-card__title a:hover { color: var(--ac-primary); }
.ac-card__more { font-size: .9rem; font-weight: 600; text-decoration: none; }

.ac-list__header { margin-bottom: 1.75rem; }
.ac-404 { text-align: center; padding-block: clamp(2rem, 6vw, 4rem); }
.ac-entry__thumb { margin: 0 0 1.5rem; }
.ac-entry__thumb img { width: 100%; border-radius: var(--ac-radius); }

/* ── Selector de idioma ───────────────────────────────────────────────────── */
.ac-sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.ac-lang { margin: 0; }
.ac-lang select {
  appearance: none;
  padding: .45rem 1.9rem .45rem .7rem;
  border: 1px solid var(--ac-border);
  border-radius: 999px;
  background: var(--ac-surface) no-repeat right .6rem center/12px auto;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%235a6678' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  color: var(--ac-text);
  font-size: .85rem;
  font-family: inherit;
  max-width: 11rem;
  cursor: pointer;
}
.ac-rtl .ac-lang select { padding: .45rem .7rem .45rem 1.9rem; background-position: left .6rem center; }

/* ── Ver más plantillas ───────────────────────────────────────────────────── */
.ac-showcase-card.is-hidden { display: none; }
.ac-loadmore-wrap { text-align: center; margin: 1.5rem 0 0; }
.ac-loadmore__count { opacity: .65; font-weight: 500; }

/* ── Drawer: menú + CTA por encima del catálogo ───────────────────────────── */
.ac-drawer__menu { margin: .5rem 0 1rem; }
.ac-drawer__menu-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.ac-drawer__menu-list a {
  display: block;
  padding: .65rem .5rem;
  color: var(--ac-text);
  text-decoration: none;
  font-weight: 600;
  border-bottom: 1px solid var(--ac-border);
}
.ac-drawer__cta { display: flex; width: 100%; margin-bottom: 1rem; }

/* ── Footer: nada debe desbordar en móvil ─────────────────────────────────── */
/* El nombre del sitio es una frase larga ("AI App Builder & No Code App
   Creator | Build Android, iOS & PWA") y sin estas reglas empujaba el ancho de
   la página en pantallas estrechas. `min-width:0` es imprescindible: un item de
   grid/flex NO se encoge por debajo de su contenido sin él, y `overflow-wrap`
   por sí solo no bastaba. */
.ac-footer__inner,
.ac-footer__brand,
.ac-footer__legal { min-width: 0; }
.ac-footer__brand .ac-brand__name {
  display: block;
  white-space: normal;
  overflow-wrap: anywhere;
  font-size: 1rem;
  line-height: 1.35;
}
.ac-footer__tagline,
.ac-footer__legal { overflow-wrap: anywhere; }

@media (max-width: 600px) {
  .ac-footer__inner { grid-template-columns: 1fr; }
  .ac-header__end { gap: .4rem; }
  .ac-lang select { max-width: 7.5rem; font-size: .8rem; }
}

/* ── Índice del artículo: compacto y moderno ──────────────────────────────── */
.ac-toc {
  margin: 1.5rem 0 2rem;
  padding: 0;
  border: 1px solid var(--ac-border);
  border-radius: var(--ac-radius);
  background: var(--ac-bg-soft);
  font-size: .9rem;
}
.ac-toc__details { margin: 0; }
.ac-toc__title {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .7rem 1rem;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ac-text-muted);
  cursor: pointer;
  list-style: none;
}
.ac-toc__title::-webkit-details-marker { display: none; }
.ac-toc__title::before {
  content: "";
  width: 7px; height: 7px;
  border-inline-end: 2px solid currentColor;
  border-block-end: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform .18s ease;
}
.ac-toc__details[open] > .ac-toc__title::before { transform: rotate(-135deg); }

/* Dos columnas en pantallas anchas: un índice de 23 entradas en una sola
   columna empujaba el artículo media pantalla hacia abajo. */
.ac-toc__list {
  margin: 0;
  padding: 0 1rem 1rem 2.1rem;
  max-height: 19rem;
  overflow-y: auto;
  overscroll-behavior: contain;
}
@media (min-width: 720px) {
  .ac-toc__list { columns: 2; column-gap: 1.75rem; }
}
.ac-toc__list li { margin: .18rem 0; break-inside: avoid; }
.ac-toc__list li.is-sub { list-style: none; padding-inline-start: .5rem; }
.ac-toc__list li.is-sub::before { content: "– "; color: var(--ac-text-muted); }
.ac-toc__list a {
  color: var(--ac-text);
  text-decoration: none;
  line-height: 1.4;
}
.ac-toc__list a:hover { color: var(--ac-primary); text-decoration: underline; }
.ac-toc__list a.is-active { color: var(--ac-primary); font-weight: 600; }