.advanced-page-content { min-height: 45vh; overflow: clip; text-align: left; }
.advanced-page-shell { padding: 0; }
.advanced-page-content > .advanced-page-shell {
  width: 100%;
  margin-inline: 0;
  padding-inline: max(28px, calc((100vw - 1500px) / 2));
  text-align: left;
}
.advanced-page-content > .advanced-page-shell > .advanced-source-component {
  width: min(1500px, calc(100vw - 56px));
  margin-inline: auto;
}
.advanced-page-content > .advanced-source-component { left: auto; transform: none; }
/* Texto suelto (parrafos, titulos o spans) fuera de un contenedor: sin esto se
   pegaba al borde de la ventana en vez de seguir la columna de la pagina. */
.advanced-page-content > :not(.advanced-page-shell):not(.advanced-source-component) {
  padding-inline: max(28px, calc((100vw - 1500px) / 2));
}
/* El hero ocupa la misma columna que el resto de bloques: con 920px
   centrados, alinear a la izquierda seguia dejando el texto a media pagina. */
.advanced-hero { width: auto; max-width: none; margin: 0 0 32px; padding-top: 42px; text-align: center; }
.advanced-hero h1 { margin: 8px 0 12px; font-size: clamp(2rem, 5vw, 4rem); line-height: 1.05; }
.advanced-hero p { color: var(--muted, #607086); font-size: 1.08rem; }
.advanced-source-component { position: relative; left: 50%; transform: translateX(-50%); padding-bottom: 0 !important; }
.advanced-component-error { margin: 24px auto; max-width: 980px; padding: 18px 22px; border: 1px solid #f0b55f; border-radius: 12px; background: #fff8e8; color: #7b4a00; display: grid; gap: 4px; }

@media (max-width: 760px) {
  .advanced-page-content > .advanced-page-shell,
  .advanced-page-content > :not(.advanced-page-shell):not(.advanced-source-component) { padding-inline: 14px; }
  .advanced-page-content > .advanced-page-shell > .advanced-source-component {
    width: min(calc(100vw - 28px), 680px);
  }
}