/* ==========================================================================
   BASE NODE & CONTAINER INFRASTRUCTURE (GENERAL)
   ========================================================================== */

.node {
    position: relative;
    box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   NODE LAYOUT & ALIGNMENT WIDTHS (.cms-node--root & .cms-node--nested)
   -------------------------------------------------------------------------- */

/* Sin width: 100%: como bloque ya ocupa todo el ancho, y con 100% el margin que se le ponga
   a un widget desde el drawer se sumaba al ancho y la página quedaba más ancha que la pantalla */
.cms-node--root {
    margin-inline: auto;
    transition: max-width 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), padding 0.25s ease;
}

/* Nodos Anidados (dentro de Box, Columna, etc.) */
.cms-node--nested {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    transition: max-width 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* --------------------------------------------------------------------------
   NODE ALIGNMENT WIDTHS (CMS_NODE_ROOT)
   -------------------------------------------------------------------------- */

.cms-node--root.align--narrow {
    max-width: var(--width-narrow);
}

.cms-node--root.align--normal {
    max-width: var(--width-content);
}

.cms-node--root.align--wide {
    max-width: var(--width-wide);
}

.cms-node--root.align--full {
    max-width: 100%;
    padding-inline: 0;
}

/* --------------------------------------------------------------------------
   NODE ALIGNMENT WIDTHS (CMS_NODE_NESTED)
   -------------------------------------------------------------------------- */

.cms-node--nested.align--narrow {
    max-width: var(--width-narrow);
    margin-inline: auto;
}

.cms-node--nested.align--normal {
    max-width: var(--width-content);
    margin-inline: auto;
}

.cms-node--nested.align--wide {
    max-width: 100%;
}

.cms-node--nested.align--full {
    width: 100%;
    max-width: 100%;
}