/**
 * ConlineWeb — Shell global de ancho para landings del menú.
 * Evita que banner y contenido se estiren al 100% en pantallas anchas.
 * El home (.page-home) conserva su propio layout.
 */

:root {
    --cw-shell-wide: 1540px;
    --cw-shell-hero: 1320px;
    --cw-shell-max: 1280px;
    --cw-shell-pad-x: clamp(1rem, 4vw, 4%);
    --cw-shell-pad-y: clamp(0.4rem, 2vw, 2%);
    --cw-shell-extra-top: 2vh;
    --cw-nav-h: 6rem;
}

@media (max-width: 1366px) {
    :root {
        --cw-nav-h: 5.5rem;
    }
}

/* Respiro extra bajo la barra fija (~1% altura de pantalla) */
body:not(.shop-demo-standalone-page) {
    padding-top: calc(6rem + var(--cw-shell-extra-top)) !important;
}

body.page-home {
    padding-top: calc(5.25rem + var(--cw-shell-extra-top)) !important;
}

@media (max-width: 1366px) {
    body:not(.page-home):not(.shop-demo-standalone-page) {
        padding-top: calc(5.5rem + var(--cw-shell-extra-top)) !important;
    }

    body.page-home {
        padding-top: calc(5.35rem + var(--cw-shell-extra-top)) !important;
    }
}

@media (max-width: 767px) {
    :root {
        --cw-nav-h: 7rem;
    }

    body:not(.page-home):not(.shop-demo-standalone-page) {
        padding-top: calc(7rem + var(--cw-shell-extra-top)) !important;
    }

    body.page-home {
        --cw-shell-extra-top: 0.25vh;
        padding-top: calc(6.15rem + var(--cw-shell-extra-top)) !important;
    }
}

/* ── Excluir home (layout propio) y demos standalone ── */
body:not(.page-home):not(.shop-demo-standalone-page) .top-content-wrapper {
    width: 100%;
    max-width: var(--cw-shell-wide);
    margin-inline: auto;
    box-sizing: border-box;
}

body:not(.page-home):not(.shop-demo-standalone-page) .top-content-wrapper > .container,
body:not(.page-home):not(.shop-demo-standalone-page) .top-content-wrapper > .container.container--hero {
    width: 100% !important;
    max-width: var(--cw-shell-hero) !important;
    margin-inline: auto !important;
    padding-left: var(--cw-shell-pad-x) !important;
    padding-right: var(--cw-shell-pad-x) !important;
    box-sizing: border-box;
}

body:not(.page-home):not(.shop-demo-standalone-page) .full-width-section {
    width: 100%;
    max-width: var(--cw-shell-wide);
    margin-inline: auto;
    padding-left: var(--cw-shell-pad-x);
    padding-right: var(--cw-shell-pad-x);
    box-sizing: border-box;
}

body:not(.page-home):not(.shop-demo-standalone-page) .content-section {
    padding-top: var(--cw-shell-pad-y);
    padding-bottom: var(--cw-shell-pad-y);
    padding-left: var(--cw-shell-pad-x);
    padding-right: var(--cw-shell-pad-x);
}

body:not(.page-home):not(.shop-demo-standalone-page) .hero-section {
    padding-left: 0;
    padding-right: 0;
}

body:not(.page-home):not(.shop-demo-standalone-page) .hero-intro {
    max-width: 820px;
    margin-inline: auto;
}

body:not(.page-home):not(.shop-demo-standalone-page) .hero-subtitle {
    max-width: 72ch;
}

body:not(.page-home):not(.shop-demo-standalone-page) .full-width-section :is(
    .sw-section,
    .faq-section,
    .personal-consult-module,
    .cta-module
) {
    max-width: var(--cw-shell-max);
    margin-inline: auto;
}

/* Contacto */
body:not(.page-home) .contact-band {
    max-width: var(--cw-shell-wide);
    margin-inline: auto;
    padding-left: var(--cw-shell-pad-x);
    padding-right: var(--cw-shell-pad-x);
    box-sizing: border-box;
}

body:not(.page-home) .contact-band__inner {
    max-width: var(--cw-shell-max);
    margin-inline: auto;
}

/* Portafolio */
body:not(.page-home) .portfolio-container {
    max-width: var(--cw-shell-wide);
    margin-inline: auto;
    padding-left: var(--cw-shell-pad-x);
    padding-right: var(--cw-shell-pad-x);
    box-sizing: border-box;
}

/* Hub demos y precios */
body.demos-hub-page .demos-hub-hero__inner,
body.demos-hub-page .demos-hub-band__inner {
    max-width: min(var(--cw-shell-max, 1180px), var(--cw-shell-max));
    padding-left: var(--cw-shell-pad-x);
    padding-right: var(--cw-shell-pad-x);
}

body.demos-hub-page .demos-hub-band__inner--wide {
    max-width: min(var(--cw-shell-wide, 1360px), var(--cw-shell-wide));
}

/* Demos embebidas: sin min-height forzado por compactación global */
body.demos-hub-page .demos-panel__stage :is(
    .visual-section,
    .web-sim-section,
    .seo-sim-section,
    .shop-demo-section
) {
    min-height: 0 !important;
    margin-bottom: 0 !important;
    overflow: visible !important;
}

body.demos-hub-page .demos-panel__stage :is(
    .visual-section,
    .web-sim-section,
    .seo-sim-section,
    .shop-demo-section
)::before {
    display: none !important;
}

/* Evita desbordes horizontales por glows decorativos */
body:not(.page-home):not(.shop-demo-standalone-page):not(.demos-hub-page) :is(
    .top-content-wrapper,
    .full-width-section,
    .visual-section,
    .web-sim-section,
    .seo-sim-section,
    .shop-demo-section
) {
    overflow-x: clip;
}

@media (max-width: 968px) {
    body:not(.page-home):not(.shop-demo-standalone-page) .hero-subtitle {
        max-width: 100%;
    }
}

/* Migas de pan pegadas bajo la barra fija (sin respiro extra del body) */
body.mx-mexico,
body.blog-page {
    padding-top: var(--cw-nav-h) !important;
}

body.mx-mexico .mx-breadcrumbs,
body.blog-page .blog-breadcrumbs {
    position: sticky;
    top: var(--cw-nav-h);
    z-index: 999;
    margin: 0;
    padding-block: 0.45rem 0.55rem;
    padding-inline: 0;
    background: rgba(10, 10, 15, 0.95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

@media (max-width: 767px) {
    body.mx-mexico .mx-breadcrumbs,
    body.blog-page .blog-breadcrumbs {
        position: relative;
        top: auto;
        z-index: 25;
    }
}