/* ===========================================================
   SoulfulSync — FULL CANVAS SYSTEM 3.6.0
   Tokens + containers compartidos en todo el theme marketing
=========================================================== */

:root {
  --ss-canvas-max: 1280px;
  --ss-header-max: 1520px;
  --ss-desktop-header-height: 68px;
  --ss-canvas-pad: clamp(18px, 3.2vw, 40px);
  --ss-canvas-gap: clamp(28px, 4vw, 56px);
  --ss-canvas-section-y: clamp(56px, 8vw, 100px);
  --ss-canvas-art: clamp(280px, 34vw, 480px);
  --ss-max: 1280px;
  /* Responsive tokens (header / appbar / home / pages) */
  --ss-bp-mobile: 700px;
  --ss-bp-tablet: 900px;
  --ss-bp-desk: 1024px;
  --ss-theme-bottom-nav-height: 0px;
  --ss-theme-header-offset: 0px;
}

/* Sitewide containers share the canvas width.
 * EXCEPCIÓN: chat/feed/app hubs — no forzar .container aquí vía body class. */
body:not(.soulfulsync-web-chat-page):not(.soulfulsync-web-feed-page) .container,
body:not(.soulfulsync-web-chat-page):not(.soulfulsync-web-feed-page) .sse-container,
.ss-home--app .ss-wrap,
.ss-footer--v2 .container,
.ss-container,
.ss-blog-container,
.mentor-container,
.aboutss__container,
.ss-contact__inner,
.ss-social .ss-wrap,
.ss-social__inner,
.ss-single .ss-hero,
.ss-single .ss-content,
.ss-archive .ss-wrap,
.ss-archive .ss-container,
.ss-search .ss-wrap,
.ss-404 .ss-wrap {
  width: min(100%, var(--ss-canvas-max)) !important;
  max-width: var(--ss-canvas-max) !important;
  margin-inline: auto;
  padding-inline: var(--ss-canvas-pad);
  box-sizing: border-box;
}

/* App surfaces (chat shortcode, etc.): full width, no marketing card */
.ss-app-surface {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body.soulfulsync-web-chat-page .ssx-main,
body.soulfulsync-web-chat-page #content,
body.soulfulsync-web-feed-page .ssx-main,
body.soulfulsync-web-feed-page #content {
  max-width: none !important;
  width: 100% !important;
  padding: 0 !important;
}

body.soulfulsync-web-chat-page .sse-container,
body.soulfulsync-web-chat-page .sse-article,
body.soulfulsync-web-chat-page .sse-section,
body.soulfulsync-web-feed-page .sse-container,
body.soulfulsync-web-feed-page .sse-article,
body.soulfulsync-web-feed-page .sse-section {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

body.soulfulsync-web-feed-page .ss-page-brand,
body.soulfulsync-web-feed-page .sse-title,
body.soulfulsync-web-chat-page .ss-page-brand,
body.soulfulsync-web-chat-page .sse-title {
  display: none !important;
}

.ssx-main {
  min-height: calc(100svh - 68px);
}

/* Interior pages: full-bleed bands */
.sse-section {
  width: 100%;
  padding: var(--ss-canvas-section-y) 0;
  background:
    radial-gradient(1000px 480px at 10% 0%, rgba(110, 92, 230, 0.09), transparent 58%),
    var(--ss-bg);
}

.sse-article {
  width: 100%;
  max-width: 920px;
  margin-inline: auto;
}

.sse-article.sse-article--hub {
  max-width: min(1100px, 100%);
}

/* Content surfaces (single / archive / search / 404 / social): full-bleed shell */
.ss-single,
.ss-archive,
.ss-search,
.ss-404,
.ss-social,
.ss-main-wrapper,
.mentor-page,
.ss-blog-page,
.ss-contact--full {
  width: 100%;
  overflow-x: clip;
}

.ss-single .ss-hero,
.ss-archive .ss-hero,
.ss-social .ss-hero,
.ss-courses-hero,
.mentor-hero,
.ss-blog-hero,
.ss-contact-hero {
  padding-block: clamp(36px, 6vw, 72px);
}

@media (max-width: 980px) {
  :root {
    --ss-canvas-art: min(100%, 340px);
    --ss-canvas-section-y: clamp(40px, 8vw, 64px);
  }
}