/*
 * Colmagis site-wide design layer.
 *
 * Loads after tokens.css and customizations.css. Same blocks, same order as
 * the live site: this file only changes rhythm, type, card treatment and
 * interaction states.
 *
 * Two blocks are not addressable from Salient's own markup. Give the rows an
 * "Extra class name" in WPBakery to opt them in:
 *   - logo strip  -> colmagis-logos
 *   - two banners -> colmagis-banners
 * Both degrade to the parent theme's default styling if the class is absent.
 */

/* --- Foundations -------------------------------------------------------- */

body,
body #ajax-content-wrap,
input,
select,
textarea {
    font-family: var(--cm-font-sans);
    color: var(--cm-text);
}

body h1,
body h2,
body h3,
body h4,
body .entry-title,
body .nectar-category-grid .cat-heading {
    font-family: var(--cm-font-serif);
    font-weight: 600;
    letter-spacing: -0.01em;
}

body a {
    color: var(--cm-link);
    transition: color var(--cm-transition);
}

body a:hover,
body a:focus {
    color: var(--cm-link-hover);
}

/* Section label: sans, uppercase, wide tracking. */
body .colmagis-section-label,
body.colmagis-page-inicio #accesos .wpb_text_column h4 {
    font-family: var(--cm-font-sans);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--cm-navy);
}

/* --- 01 · Header and navigation ---------------------------------------- */

#header-outer {
    background-color: var(--cm-surface) !important;
    border-bottom: 1px solid var(--cm-rule);
    transition: box-shadow var(--cm-transition);
}

/* Sticky header lifts off the top of the page with a shadow. */
#header-outer.detached,
#header-outer.scrolled-down {
    box-shadow: var(--cm-shadow-header);
}

@media (min-width: 1000px) {
    body.colmagis-page-inicio .main-content.container,
    #footer-outer #footer-widgets > .container,
    #footer-outer #copyright > .container {
        width: calc(100% - (2 * var(--cm-page-gutter)));
        max-width: var(--cm-content-max);
        padding-left: 0;
        padding-right: 0;
    }

    #header-outer #top .container > .row,
    #header-outer[data-header-resize="0"] #top > .container {
        min-height: 88px;
    }

    body.colmagis-page-inicio #header-outer #top .container > .row {
        display: flex;
        align-items: center;
        width: 100%;
    }

    body.colmagis-page-inicio #header-outer #top .row .col.span_3 {
        flex: 0 0 auto;
        padding-right: 0;
        margin-right: var(--cm-space-1);
    }

    body.colmagis-page-inicio #header-outer #top .row .col.span_9 {
        flex: 1 1 auto;
        justify-content: flex-end;
        width: auto !important;
        min-width: 0;
    }
}

#header-outer #top nav > ul > li > a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-family: var(--cm-font-sans);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--cm-navy) !important;
    padding-bottom: 0;
    border-bottom: 2px solid transparent;
    transition: border-color var(--cm-transition);
}

@media (min-width: 1280px) {
    #header-outer #top > .container {
        width: calc(100% - 40px);
        max-width: none;
    }

    /* Salient gives every top-level item 10px on each side. The smaller gap
     * keeps the full eight-item menu available without crowding the utility
     * icons at the right edge. */
    #header-outer[data-lhe="animated_underline"] #top nav > ul.sf-menu > li > a {
        margin-right: 3px;
        margin-left: 3px;
    }
}

/* The complete navigation needs more horizontal room than Salient's default
 * 1000px desktop breakpoint allows. Keep the utility controls visible and
 * move the menu into the slide-out panel before the logo and links collide. */
@media (min-width: 1000px) and (max-width: 1279px) {
    #header-outer #top nav > ul.sf-menu {
        display: none !important;
    }

    #header-outer #top nav > ul.buttons {
        display: flex !important;
        align-items: center;
        height: 44px;
        margin-left: 0;
    }

    #header-outer #top nav > ul.buttons > li {
        height: 44px;
    }
}

#header-outer #top nav > ul > li > a:hover,
#header-outer #top nav > ul > li.current-menu-item > a,
#header-outer #top nav > ul > li.current-menu-ancestor > a {
    border-bottom-color: var(--cm-accent);
}

/* Salient draws its own sliding underline; the border above replaces it. */
#header-outer #top nav .sf-menu .current_page_item > a .menu-title-text::after,
#header-outer #top nav .sf-menu li > a:hover .menu-title-text::after,
#header-outer #top nav > ul > li > a .menu-title-text::after {
    display: none !important;
}

/* The two menu items carrying the custom `ultimo` class are compact,
 * uniform CTAs regardless of the Salient button style selected in WP Admin. */
#header-outer #top nav > ul > li.button_solid_color > a,
#header-outer #top nav > ul > li.button_bordered > a,
#header-outer #top nav > ul > li.ultimo > a {
    background-color: var(--cm-navy) !important;
    border: 1px solid var(--cm-navy) !important;
    border-radius: var(--cm-radius-control);
    color: var(--cm-cream) !important;
    padding: 7px 9px !important;
    transition: background-color var(--cm-transition), border-color var(--cm-transition);
}

#header-outer #top nav > ul > li.button_solid_color > a:hover,
#header-outer #top nav > ul > li.button_bordered > a:hover,
#header-outer #top nav > ul > li.ultimo > a:hover {
    background-color: var(--cm-accent) !important;
    border-color: var(--cm-accent) !important;
    color: var(--cm-cream) !important;
}

#header-outer #top nav > ul > li.button_solid_color > a::before,
#header-outer #top nav > ul > li.button_bordered > a::before {
    display: none !important;
}

@media (min-width: 1280px) {
    #header-outer #top nav > ul > li.ultimo > a {
        box-sizing: border-box;
        width: 122px;
        min-height: 36px;
        justify-content: center;
    }

    #header-outer #top nav > ul > li.ultimo > a .menu-title-text {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        white-space: nowrap;
    }

    #header-outer #top nav > ul > li.ultimo > a .menu-title-text::before {
        display: block;
        width: 13px;
        height: 13px;
        flex: 0 0 13px;
        background-color: currentColor;
        content: "";
        -webkit-mask-position: center;
        mask-position: center;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-size: contain;
        mask-size: contain;
    }

    /* Match by link purpose only. A positional fallback (:last-child etc.)
     * used to sit alongside these, but it silently won over the href match
     * whenever the menu order shifted (e.g. once the social icons item
     * landed after Podcast, making it match the Revista fallback's position
     * instead) because that fallback selector carried an extra .sf-menu
     * class, making it more specific regardless of which icon was correct.
     * The href match alone is stable and doesn't depend on menu order. */
    #header-outer #top nav > ul > li.ultimo > a[href*="revista"] .menu-title-text::before {
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 3h13a3 3 0 0 1 3 3v15H6a3 3 0 0 1-3-3V4a1 1 0 0 1 1-1Zm2 14a1 1 0 0 0 0 2h12V6a1 1 0 0 0-1-1H5v12.17c.31-.11.65-.17 1-.17Zm2-9h7v2H8V8Zm0 4h7v2H8v-2Z'/%3E%3C/svg%3E");
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 3h13a3 3 0 0 1 3 3v15H6a3 3 0 0 1-3-3V4a1 1 0 0 1 1-1Zm2 14a1 1 0 0 0 0 2h12V6a1 1 0 0 0-1-1H5v12.17c.31-.11.65-.17 1-.17Zm2-9h7v2H8V8Zm0 4h7v2H8v-2Z'/%3E%3C/svg%3E");
    }

    #header-outer #top nav > ul > li.ultimo > a[href*="podcast"] .menu-title-text::before {
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 14a4 4 0 0 0 4-4V6a4 4 0 1 0-8 0v4a4 4 0 0 0 4 4Zm7-4h-2a5 5 0 0 1-10 0H5a7 7 0 0 0 6 6.92V20H8v2h8v-2h-3v-3.08A7 7 0 0 0 19 10Z'/%3E%3C/svg%3E");
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 14a4 4 0 0 0 4-4V6a4 4 0 1 0-8 0v4a4 4 0 0 0 4 4Zm7-4h-2a5 5 0 0 1-10 0H5a7 7 0 0 0 6 6.92V20H8v2h8v-2h-3v-3.08A7 7 0 0 0 19 10Z'/%3E%3C/svg%3E");
    }
}

/* Once the compact desktop range is cleared, give the navigation back some
 * type size and rhythm without changing the proven 1280px fit. */
@media (min-width: 1400px) {
    #header-outer #top nav > ul > li > a {
        font-size: 12px;
        letter-spacing: 0.04em;
    }

    #header-outer[data-lhe="animated_underline"] #top nav > ul.sf-menu > li > a {
        margin-right: 5px;
        margin-left: 5px;
    }

    #header-outer #top nav > ul > li.ultimo > a {
        width: 130px;
        min-height: 38px;
        padding: 8px 10px !important;
    }

    #header-outer #top nav > ul > li.ultimo > a .menu-title-text {
        gap: 7px;
    }

    #header-outer #top nav > ul > li.ultimo > a .menu-title-text::before {
        width: 14px;
        height: 14px;
        flex-basis: 14px;
    }
}

/* On wide screens, add rhythm through link margins while leaving Salient's
 * native flex header and vertical centering untouched. */
@media (min-width: 1600px) {
    #header-outer[data-lhe="animated_underline"] #top nav > ul.sf-menu > li > a {
        margin-right: 8px;
        margin-left: 8px;
    }
}

/* Search and menu icons: one 1.5px stroke, one grey. */
#header-outer #top nav > ul > li#search-btn > a .icon-salient-search,
#header-outer .slide-out-widget-area-toggle a .lines-button,
#header-outer .slide-out-widget-area-toggle a .lines::before,
#header-outer .slide-out-widget-area-toggle a .lines::after,
#header-outer .slide-out-widget-area-toggle a .lines {
    color: var(--cm-text-soft) !important;
    background-color: currentColor;
}

#header-outer #top nav > ul > li#search-btn > a {
    color: var(--cm-text-soft) !important;
}

/* --- 02 · Hero: three featured cards ------------------------------------ */

body.colmagis-page-inicio .post-area.auto_meta_overlaid_spaced {
    padding: var(--cm-space-8) 0;
    background: transparent;
}

body.colmagis-page-inicio .post-area.auto_meta_overlaid_spaced .masonry-blog-item .inner-wrap {
    border-radius: var(--cm-radius-card);
    overflow: hidden;
    background: var(--cm-cream);
    box-shadow: var(--cm-shadow-card);
    transition: transform var(--cm-transition), box-shadow var(--cm-transition);
}

body.colmagis-page-inicio .post-area.auto_meta_overlaid_spaced .masonry-blog-item:hover .inner-wrap {
    transform: translateY(-4px);
    box-shadow: var(--cm-shadow-card-hover);
}

body.colmagis-page-inicio .post-area.auto_meta_overlaid_spaced .masonry-blog-item .post-header {
    border-left-width: var(--cm-accent-bar);
    border-left-color: var(--cm-accent);
    transition: border-left-width var(--cm-transition);
}

body.colmagis-page-inicio .post-area.auto_meta_overlaid_spaced .masonry-blog-item:hover .post-header {
    border-left-width: 5px;
}

body.colmagis-page-inicio .post-area.auto_meta_overlaid_spaced .masonry-blog-item h3.title,
body.colmagis-page-inicio .post-area.auto_meta_overlaid_spaced .masonry-blog-item h3.title a {
    font-family: var(--cm-font-serif);
    font-size: 19px;
    font-weight: 600;
    line-height: 1.32;
    color: var(--cm-navy) !important;
}

body.colmagis-page-inicio .post-area.auto_meta_overlaid_spaced .masonry-blog-item h3.title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

body.colmagis-page-inicio .post-area.auto_meta_overlaid_spaced .masonry-blog-item .colmagis-featured-post-date {
    font-family: var(--cm-font-sans);
    font-size: 13px;
    font-weight: 400;
    color: var(--cm-text-soft);
}

/* The parent layout is an image overlay. This theme uses a real card:
 * image region, followed by an independent bone content region. */
body.colmagis-page-inicio .post-area.auto_meta_overlaid_spaced .masonry-blog-item .content-inner {
    background: var(--cm-cream) !important;
}

body.colmagis-page-inicio .post-area.auto_meta_overlaid_spaced .masonry-blog-item .post-content {
    padding: 0 !important;
}

body.colmagis-page-inicio .post-area.auto_meta_overlaid_spaced .masonry-blog-item .post-featured-img::after {
    display: none !important;
    content: none !important;
}

body.colmagis-page-inicio .post-area.auto_meta_overlaid_spaced .masonry-blog-item .article-content-wrap {
    text-shadow: none !important;
    background: var(--cm-cream);
}

body.colmagis-page-inicio .post-area.auto_meta_overlaid_spaced .masonry-blog-item .post-header {
    width: 100%;
    max-width: 100% !important;
    margin: 0 !important;
}

@media (min-width: 1000px) {
    body.colmagis-page-inicio .post-area.auto_meta_overlaid_spaced .masonry-blog-item .post-content,
    body.colmagis-page-inicio .post-area.auto_meta_overlaid_spaced .masonry-blog-item .content-inner {
        height: 438px !important;
    }

    body.colmagis-page-inicio .post-area.auto_meta_overlaid_spaced .masonry-blog-item .content-inner {
        display: grid !important;
        grid-template-rows: 270px 168px;
        position: relative !important;
    }

    body.colmagis-page-inicio .post-area.auto_meta_overlaid_spaced .masonry-blog-item .post-featured-img {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        display: block !important;
        width: 100% !important;
        height: 270px !important;
        aspect-ratio: auto !important;
    }

    body.colmagis-page-inicio .post-area.auto_meta_overlaid_spaced .masonry-blog-item .post-featured-img img {
        width: 100% !important;
        height: 100% !important;
        opacity: 1 !important;
        object-fit: cover;
        border-radius: 0 !important;
    }

    body.colmagis-page-inicio .post-area.auto_meta_overlaid_spaced .masonry-blog-item .article-content-wrap {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        display: flex !important;
        align-items: center;
        width: 100% !important;
        height: 168px !important;
        padding: 22px 26px !important;
        transform: none !important;
    }
}

/* Below the stacked-card breakpoint the card turns horizontal: a square image
 * on the left, title and date on the right. */
@media (max-width: 999px) {
    body.colmagis-page-inicio .post-area.auto_meta_overlaid_spaced .masonry-blog-item .post-content,
    body.colmagis-page-inicio .post-area.auto_meta_overlaid_spaced .masonry-blog-item .content-inner {
        height: var(--cm-featured-row-height) !important;
    }

    body.colmagis-page-inicio .post-area.auto_meta_overlaid_spaced .masonry-blog-item .content-inner {
        display: flex !important;
        position: relative !important;
        align-items: stretch;
    }

    body.colmagis-page-inicio .post-area.auto_meta_overlaid_spaced .masonry-blog-item .post-featured-img {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        display: block !important;
        flex: 0 0 var(--cm-featured-row-height) !important;
        width: var(--cm-featured-row-height) !important;
        height: var(--cm-featured-row-height) !important;
        aspect-ratio: auto !important;
    }

    body.colmagis-page-inicio .post-area.auto_meta_overlaid_spaced .masonry-blog-item .post-featured-img img {
        width: 100% !important;
        height: 100% !important;
        opacity: 1 !important;
        object-fit: cover;
        border-radius: 0 !important;
    }

    body.colmagis-page-inicio .post-area.auto_meta_overlaid_spaced .masonry-blog-item .article-content-wrap {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        display: flex !important;
        flex: 1 1 auto;
        align-items: center;
        width: auto !important;
        min-width: 0;
        height: 100% !important;
        transform: none !important;
    }
}

@media (min-width: 691px) and (max-width: 999px) {
    body.colmagis-page-inicio .post-area.auto_meta_overlaid_spaced .masonry-blog-item {
        --cm-featured-row-height: 120px;
    }

    body.colmagis-page-inicio .post-area.auto_meta_overlaid_spaced .masonry-blog-item .article-content-wrap {
        padding: 17px 22px !important;
    }
}

@media (max-width: 690px) {
    body.colmagis-page-inicio .post-area.auto_meta_overlaid_spaced .masonry-blog-item {
        --cm-featured-row-height: 104px;
    }

    body.colmagis-page-inicio .post-area.auto_meta_overlaid_spaced .masonry-blog-item .article-content-wrap {
        padding: 14px 18px !important;
    }
}

/* --- 03 · Lists: Actividades / Capacitaciones / Comunicados ------------- */

body.colmagis-page-inicio #accesos {
    padding: var(--cm-space-6) 0 !important;
    background: var(--cm-surface-2) !important;
}

/* Keep the three columns aligned without making them fill artificial height. */
body.colmagis-page-inicio #accesos .row_col_wrap_12 {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}

body.colmagis-page-inicio #accesos .wpb_column > .vc_column-inner,
body.colmagis-page-inicio #accesos .wpb_column > .vc_column-inner > .wpb_wrapper {
    display: flex;
    flex-direction: column;
    height: auto;
}

body.colmagis-page-inicio #accesos .wpb_column > .vc_column-inner > .wpb_wrapper {
    gap: 0 !important;
}

/* Lists are five fixed-height rows, so their natural ends already align. */
body.colmagis-page-inicio #accesos .nectar_widget {
    flex: 0 0 auto;
    margin-bottom: 0 !important;
}

body.colmagis-page-inicio #accesos .wpb_wrapper > *:last-child {
    margin-top: 0;
    padding-top: 0;
}

/* Column heading: label + hairline running to the right edge.
 * Salient stacks its own margins on the text column and the widget; both are
 * zeroed so the heading sits a fixed 16px above the first row. */
body.colmagis-page-inicio #accesos .wpb_text_column,
body.colmagis-page-inicio #accesos .wpb_text_column .wpb_wrapper {
    margin-bottom: 0 !important;
}

/* Intentionally overrides the shared .colmagis-section-label font-size (13px)
 * above for this heading. */
body.colmagis-page-inicio #accesos .wpb_text_column h4 {
    gap: 14px;
    margin: 0 0 var(--cm-space-2) !important;
    font-size: 15px;
    line-height: 1.2;
}

body.colmagis-page-inicio #accesos .wpb_text_column h4::after {
    flex: 1;
    width: auto;
    background: var(--cm-border);
}

body.colmagis-page-inicio #accesos .nectar_widget {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

body.colmagis-page-inicio #accesos .nectar_widget > li:first-child {
    margin-top: 0 !important;
}

/* Rows ------------------------------------------------------------------
 * The accent bar is drawn as a pseudo-element, not a left border: a border
 * on a box with a radius follows the corner curve, which is what produced
 * the "curly" bars. This keeps it a straight 3px rule at any row height.
 * Applies to both widget styles so Actividades gets a bar too.
 */
/* Top-aligned, so the first line of every title sits on the same baseline
 * across all three columns. Equal min-height keeps later rows in step. */
body.colmagis-page-inicio #accesos .nectar_widget > li {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    height: 88px;
    min-height: 88px;
    padding: 12px 14px 12px 17px !important;
    margin: 0 0 6px !important;
    border: 0 !important;
    border-radius: var(--cm-radius-row);
    transition: background-color var(--cm-transition);
}

body.colmagis-page-inicio #accesos .nectar_widget[data-style="minimal-counter"] > li::after {
    content: "";
    position: absolute;
    top: 14px;
    bottom: 14px;
    left: 0;
    width: var(--cm-accent-bar);
    background: var(--cm-accent);
    border-radius: 0;
}

body.colmagis-page-inicio #accesos .nectar_widget[data-style="featured-image-left"] > li {
    padding-left: 0 !important;
}

body.colmagis-page-inicio #accesos .nectar_widget > li:hover {
    background: var(--cm-surface);
}

body.colmagis-page-inicio #accesos .nectar_widget > li:hover > a {
    transform: none;
}

body.colmagis-page-inicio #accesos .nectar_widget > li > a {
    flex: 1;
    width: auto;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.35;
    color: var(--cm-text);
    text-transform: none;
}

body.colmagis-page-inicio #accesos .nectar_widget[data-style="minimal-counter"] > li > a {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    height: 100%;
}

body.colmagis-page-inicio #accesos .nectar_widget[data-style="featured-image-left"] > li > a {
    display: grid !important;
    grid-template-columns: 64px minmax(0, 1fr);
    column-gap: 14px;
    align-items: center;
    height: 100%;
}

body.colmagis-page-inicio #accesos .nectar_widget[data-style="featured-image-left"] > li > a .meta-wrap {
    display: block !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}

body.colmagis-page-inicio #accesos .nectar_widget[data-style="featured-image-left"] > li:not(.has-img) > a::before {
    content: "";
    width: 64px;
    height: 64px;
    border-radius: var(--cm-radius-control);
    background: var(--cm-border);
}

body.colmagis-page-inicio #accesos .nectar_widget .post-title {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

body.colmagis-page-inicio #accesos .post-date {
    margin-top: 4px;
    font-size: 13px;
    color: var(--cm-text-soft);
}

/* Square thumbnail when the entry has one. */
body.colmagis-page-inicio #accesos .nectar_widget li .popular-featured-img {
    width: 64px;
    height: 64px;
    border-radius: var(--cm-radius-control);
    overflow: hidden;
    background: var(--cm-border);
    flex: 0 0 64px;
    margin: 0;
}

body.colmagis-page-inicio #accesos .nectar_widget li .popular-featured-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
}

/* "Ver todas" — the bordó bar grows on hover. */
.colmagis-see-all,
body.colmagis-page-inicio #accesos .nectar-button.see-all {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: var(--cm-space-2);
    color: var(--cm-link);
    font-size: 14.5px;
    font-weight: 600;
    background: none;
    border: 0;
    padding: 0;
}

.colmagis-see-all::before,
body.colmagis-page-inicio #accesos .nectar-button.see-all::before {
    content: "";
    width: 22px;
    height: 2px;
    background: var(--cm-accent);
    transition: width var(--cm-transition);
}

.colmagis-see-all:hover::before,
body.colmagis-page-inicio #accesos .nectar-button.see-all:hover::before {
    width: 34px;
}

/* --- 04 · Institutional logo strip -------------------------------------- */

.colmagis-logos {
    padding: var(--cm-space-8) 0 !important;
    background: var(--cm-surface) !important;
}

@media (min-width: 1000px) {
    .colmagis-logos > .row_col_wrap_12 {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 50px;
        width: 100%;
        margin-right: 0 !important;
        margin-left: 0 !important;
    }

    .colmagis-logos > .row_col_wrap_12 > .wpb_column {
        width: 100% !important;
    }
}

.colmagis-logos .wpb_column {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 96px;
    padding: 0 var(--cm-space-4);
    border-right: 1px solid var(--cm-border);
}

.colmagis-logos .wpb_column:last-child {
    border-right: 0;
}

.colmagis-logos img {
    max-width: 88%;
    width: auto !important;
    object-fit: contain;
    border-radius: 0 !important;
    filter: grayscale(1);
    opacity: 0.75;
    transition: filter var(--cm-transition), opacity var(--cm-transition);
}

/* Equalise optical weight across compact and wide institutional lockups. */
.colmagis-logos .wpb_column:nth-child(1) img {
    height: 84px !important;
}

.colmagis-logos .wpb_column:nth-child(2) img {
    height: 70px !important;
}

.colmagis-logos .wpb_column:nth-child(3) img {
    height: 60px !important;
}

.colmagis-logos img:hover {
    filter: grayscale(0);
    opacity: 1;
}

@media (max-width: 690px) {
    .colmagis-logos .wpb_column {
        padding: var(--cm-space-3) 0;
        border-right: 0;
        border-bottom: 1px solid var(--cm-border);
    }

    .colmagis-logos .wpb_column:last-child {
        border-bottom: 0;
    }
}

/* --- 05 · Two featured banners (Prensa / Estatuto) ---------------------- */

.colmagis-banners {
    padding: var(--cm-space-8) 0 !important;
    background: var(--cm-surface-2) !important;
}

@media (min-width: 1000px) {
    .colmagis-banners .inner_row {
        width: 100% !important;
    }

    .colmagis-banners > .row_col_wrap_12 > .wpb_column > .vc_column-inner {
        padding-right: 0;
        padding-left: 0;
    }

    .colmagis-banners > .row_col_wrap_12 > .wpb_column > .vc_column-inner > .wpb_wrapper {
        width: calc(100% - (2 * var(--cm-page-gutter)));
        max-width: var(--cm-content-max);
        margin-right: auto;
        margin-left: auto;
    }

    .colmagis-banners .row_col_wrap_12_inner {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--cm-space-3);
    }

    .colmagis-banners .row_col_wrap_12_inner > .wpb_column {
        width: 100% !important;
    }

    .colmagis-banners .row_col_wrap_12_inner > .wpb_column > .vc_column-inner {
        padding-right: 0;
        padding-left: 0;
    }
}

.colmagis-banners .nectar-fancy-box {
    position: relative;
    min-height: 280px;
    border-radius: var(--cm-radius-card);
    overflow: hidden;
    background-size: cover;
    background-position: center;
}

/* Navy gradient keeps the white title legible over any photo. */
.colmagis-banners .nectar-fancy-box::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(22, 35, 58, 0.78), rgba(22, 35, 58, 0.15) 60%);
    z-index: 1;
    pointer-events: none;
}

.colmagis-banners .nectar-fancy-box .inner,
.colmagis-banners .nectar-fancy-box .link-text {
    position: relative;
    z-index: 2;
}

/* Restore the full-card click target that Salient provides. */
.colmagis-banners .nectar-fancy-box .box-link {
    position: absolute !important;
    inset: 0 !important;
    z-index: 3;
    width: 100% !important;
    height: 100% !important;
}

.colmagis-banners h2,
.colmagis-banners h3,
.colmagis-banners h4 {
    font-family: var(--cm-font-serif);
    font-size: 24px;
    font-weight: 500;
    color: var(--cm-surface);
    margin-bottom: 14px;
}

.colmagis-banners .nectar-button,
.colmagis-banners a.button,
.colmagis-banners .link-text {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 0 !important;
    background: none !important;
    border: 0 !important;
    color: var(--cm-cream) !important;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.colmagis-banners .nectar-button::after,
.colmagis-banners a.button::after,
.colmagis-banners .link-text::after {
    content: "→";
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: 1.4px solid var(--cm-cream);
    border-radius: var(--cm-radius-pill);
    font-size: 11px;
    transition: background-color var(--cm-transition), color var(--cm-transition);
}

.colmagis-banners .nectar-button:hover::after,
.colmagis-banners a.button:hover::after,
.colmagis-banners .nectar-fancy-box:hover .link-text::after {
    background: var(--cm-cream);
    color: var(--cm-navy);
}

/* Subtle zoom inside the 10px crop. */
.colmagis-banners .nectar-fancy-box .box-bg {
    transition: background-size var(--cm-transition);
}

.colmagis-banners .nectar-fancy-box:hover .box-bg {
    background-size: 104%;
}

/* --- 06 · Footer -------------------------------------------------------- */

#footer-outer,
#footer-outer #footer-widgets {
    background-color: var(--cm-navy) !important;
    color: var(--cm-text-invert);
}

#footer-outer #footer-widgets {
    padding: var(--cm-space-8) 0 var(--cm-space-6);
    border-top: 0;
}

#footer-outer #footer-widgets,
#footer-outer #footer-widgets p,
#footer-outer #footer-widgets li {
    font-size: 14.5px;
    line-height: 1.8;
    color: var(--cm-text-invert);
}

#footer-outer #footer-widgets a {
    color: #8fb4d6;
}

#footer-outer #footer-widgets a:hover {
    color: var(--cm-surface);
    text-decoration: underline;
}

#footer-outer #copyright {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    background-color: var(--cm-navy) !important;
    padding: var(--cm-space-3) 0;
}

#footer-outer #copyright,
#footer-outer #copyright p,
#footer-outer #copyright li a {
    font-size: 13px;
    color: var(--cm-text-mute) !important;
}

@media (min-width: 600px) {
    #footer-outer #copyright > .container {
        width: calc(100% - 40px) !important;
        max-width: var(--cm-content-max) !important;
    }

    #footer-outer #copyright .row {
        display: flex;
        align-items: center;
    }

    #footer-outer #copyright .row > .col:first-child {
        flex: 1 1 auto;
        width: auto !important;
        margin: 0 !important;
    }

    #footer-outer #copyright p {
        margin: 0 !important;
        font-size: clamp(11px, 1.3vw, 13px);
        white-space: nowrap;
    }

    #footer-outer #copyright .row > .col:last-child:not(:first-child) {
        flex: 0 0 auto;
        width: auto !important;
        margin-left: auto !important;
    }
}

/* --- Global image treatment --------------------------------------------- */

body.colmagis-page-inicio .wpb_row img,
body.colmagis-page-inicio .post-featured-img img {
    border-radius: var(--cm-radius-card);
}

/* Fixed aspect ratios so assets can be swapped without breaking layout. */
body.colmagis-page-inicio .post-area.auto_meta_overlaid_spaced .post-featured-img {
    aspect-ratio: 16 / 10;
    object-fit: cover;
}

/* --- Buttons and controls elsewhere on the site ------------------------- */

body .nectar-button.regular,
body input[type="submit"],
body button[type="submit"] {
    border-radius: var(--cm-radius-control) !important;
    background-color: var(--cm-navy) !important;
    border-color: var(--cm-navy) !important;
    color: var(--cm-cream) !important;
    font-family: var(--cm-font-sans);
    font-weight: 600;
    transition: background-color var(--cm-transition), border-color var(--cm-transition);
}

body .nectar-button.regular:hover,
body input[type="submit"]:hover,
body button[type="submit"]:hover {
    background-color: var(--cm-accent) !important;
    border-color: var(--cm-accent) !important;
}

@media (max-width: 999px) {
    body.colmagis-page-inicio .post-area.auto_meta_overlaid_spaced,
    body.colmagis-page-inicio #accesos,
    .colmagis-logos,
    .colmagis-banners {
        padding: var(--cm-space-6) 0 !important;
    }
}

/* --- 07 · Popup Maker Global Theme Overrides ----------------------------- */

/* Dark, softly blurred backdrop with a genuinely centred dialog. */
body .pum-overlay {
    padding: 24px !important;
    background: var(--cm-popup-overlay) !important;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    overscroll-behavior: contain;
}

body .pum-overlay.pum-active,
body .pum-overlay.pum-preview {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

html.pum-open,
html.pum-open body {
    overflow: hidden !important;
    overscroll-behavior: none;
}

body .pum-container,
body .pum-container.pum-responsive,
body .pum-container.custom-position {
    position: relative !important;
    inset: auto !important;
    display: flex !important;
    flex-direction: column !important;
    width: min(620px, calc(100vw - 48px)) !important;
    min-width: 0 !important;
    max-width: 620px !important;
    max-height: 86vh !important;
    max-height: 86dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: var(--cm-surface) !important;
    box-shadow: var(--cm-shadow-popup) !important;
    box-sizing: border-box !important;
    font-family: var(--cm-font-sans) !important;
}

/* Fixed header: context, title, and close affordance. */
body .cm-popup-header {
    position: relative;
    flex: 0 0 auto;
    padding: 32px 84px 24px 36px;
    border-bottom: 1px solid var(--cm-rule);
    background: var(--cm-surface);
}

body .cm-popup-kicker {
    margin: 0 0 10px !important;
    color: var(--cm-accent) !important;
    font-family: var(--cm-font-sans) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

body .pum-title {
    margin: 0 !important;
    padding: 0 0 0 16px !important;
    border: 0 !important;
    border-left: 3px solid var(--cm-accent) !important;
    color: var(--cm-navy) !important;
    font-family: var(--cm-font-serif) !important;
    font-size: 26px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    letter-spacing: -0.01em;
}

body .pum-close {
    position: absolute !important;
    top: 26px !important;
    right: 30px !important;
    z-index: 2 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    border: 1px solid var(--cm-border) !important;
    border-radius: var(--cm-radius-control) !important;
    background: var(--cm-surface) !important;
    box-shadow: none !important;
    color: var(--cm-text-soft) !important;
    font-family: var(--cm-font-sans) !important;
    font-size: 22px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    cursor: pointer !important;
    transition: all var(--cm-transition) !important;
}

body .pum-close:hover,
body .pum-close:focus-visible {
    border-color: var(--cm-accent) !important;
    background: var(--cm-accent) !important;
    color: var(--cm-surface) !important;
    transform: none !important;
}

body .pum-close:focus-visible {
    outline: 3px solid rgba(138, 46, 59, 0.22) !important;
    outline-offset: 2px;
}

/* Scrollable reading area; header and footer stay visible. */
body .pum-content {
    flex: 1 1 auto;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    padding: 28px 36px !important;
    color: var(--cm-popup-text) !important;
    background: var(--cm-surface) !important;
    font-family: var(--cm-font-sans) !important;
    font-size: 15.5px !important;
    line-height: 1.7 !important;
    scrollbar-gutter: stable;
}

/* Neutralise WPBakery/Salient structural paint at every nesting depth. */
body .pum-content .vc_row,
body .pum-content .wpb_column,
body .pum-content .vc_column-inner,
body .pum-content .wpb_wrapper,
body .pum-content .wpb_text_column,
body .pum-content .wpb-content-wrapper {
    margin-right: 0 !important;
    margin-left: 0 !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
    border: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

body .pum-content .row-bg-wrap,
body .pum-content .row-bg {
    display: none !important;
}

body .pum-content p {
    margin: 0 0 1.1em !important;
    color: var(--cm-popup-text) !important;
}

body .pum-content strong,
body .pum-content b {
    color: var(--cm-navy) !important;
    font-weight: 700;
}

body .pum-content .wpb_text_column span {
    color: inherit !important;
}

body .pum-content h1,
body .pum-content h2,
body .pum-content h3,
body .pum-content h4 {
    color: var(--cm-navy) !important;
    font-family: var(--cm-font-serif) !important;
    line-height: 1.25 !important;
}

body .pum-content a {
    color: var(--cm-link) !important;
    font-weight: 600;
    text-decoration: none;
    transition: color var(--cm-transition), text-decoration-color var(--cm-transition);
}

body .pum-content a:hover,
body .pum-content a:focus {
    color: var(--cm-link-hover) !important;
    text-decoration: underline;
    text-underline-offset: 0.16em;
}

/* Benefit rows use a quiet chevron marker and hairline separators. */
body .pum-content ul {
    margin: 20px 0 24px !important;
    padding: 0 !important;
    list-style: none !important;
}

body .pum-content li {
    position: relative;
    margin: 0 !important;
    padding: 11px 0 11px 20px !important;
    border-bottom: 1px solid var(--cm-surface-2);
    color: var(--cm-popup-text) !important;
    list-style: none !important;
}

body .pum-content li::before {
    position: absolute;
    top: 10px;
    left: 2px;
    color: var(--cm-accent);
    content: "›";
    font-weight: 700;
}

body .pum-content li:first-child {
    border-top: 1px solid var(--cm-surface-2);
}

body .cm-popup-contact {
    margin-top: 24px;
    padding: 18px 20px;
    border-radius: var(--cm-radius-row);
    background: var(--cm-cream);
}

body .cm-popup-contact p:last-child {
    margin-bottom: 0 !important;
}

/* Podcast page populated from the Anatomia del Caso YouTube feed. */
body.colmagis-page-podcast .container-wrap {
    background: var(--cm-surface);
}

body.colmagis-page-podcast .main-content.container {
    padding-top: clamp(54px, 7vw, 92px);
    padding-bottom: clamp(66px, 8vw, 110px);
}

body .cm-podcast {
    width: 100%;
    color: var(--cm-text);
}

body .cm-podcast__header {
    margin-bottom: clamp(28px, 4vw, 44px);
}

body .cm-podcast__title {
    position: relative;
    margin: 0 0 24px;
    padding-bottom: 12px;
    color: var(--cm-navy);
    font-family: var(--cm-font-serif);
    font-size: clamp(30px, 4vw, 42px);
    font-weight: 600;
    line-height: 1.15;
}

body .cm-podcast__title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 190px;
    height: 1px;
    background: var(--cm-accent);
}

body .cm-podcast__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(24px, 3vw, 38px) 28px;
}

body .cm-podcast-card {
    overflow: hidden;
    min-width: 0;
    margin: 0;
    border-radius: var(--cm-radius-card);
    background: var(--cm-cream);
    box-shadow: var(--cm-shadow-card);
    transition: transform var(--cm-transition), box-shadow var(--cm-transition);
}

body .cm-podcast-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--cm-shadow-card-hover);
}

body .cm-podcast-card__image {
    display: block;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: var(--cm-navy);
}

body .cm-podcast-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 500ms ease, opacity 300ms ease;
}

body .cm-podcast-card__image:hover img,
body .cm-podcast-card__image:focus-visible img {
    transform: scale(1.025);
}

body .cm-podcast-card__body {
    display: flex;
    align-items: center;
    min-height: 270px;
    padding: 22px 26px;
}

body .cm-podcast-card__content {
    width: 100%;
    padding-left: 12px;
    border-left: var(--cm-accent-bar) solid var(--cm-accent);
    transition: border-left-width var(--cm-transition);
}

body .cm-podcast-card:hover .cm-podcast-card__content {
    border-left-width: 5px;
}

body .cm-podcast-card h2 {
    display: -webkit-box;
    overflow: hidden;
    margin: 0;
    font-family: var(--cm-font-serif);
    font-size: 19px;
    font-weight: 600;
    line-height: 1.32;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

body .cm-podcast-card h2 a {
    color: var(--cm-navy) !important;
    text-decoration: none !important;
}

body .cm-podcast-card h2 a:hover,
body .cm-podcast-card h2 a:focus-visible {
    color: var(--cm-accent) !important;
}

body .cm-podcast-card__excerpt {
    display: -webkit-box;
    overflow: hidden;
    margin: 14px 0 0;
    color: var(--cm-text-soft);
    font-family: var(--cm-font-sans);
    font-size: 14px;
    line-height: 1.55;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
}

body .cm-podcast-card time {
    display: block;
    margin-top: 14px;
    color: var(--cm-text-soft);
    font-family: var(--cm-font-sans);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.3;
    text-transform: lowercase;
}

body .cm-podcast__description {
    margin-top: clamp(38px, 5vw, 62px);
    padding: clamp(28px, 4vw, 46px);
    border: 1px solid var(--cm-rule);
    border-radius: var(--cm-radius-card);
    background: var(--cm-surface);
    box-shadow: var(--cm-shadow-header);
    text-align: center;
}

body .cm-podcast__description p {
    max-width: 920px;
    margin: 0 auto;
    color: var(--cm-text);
    font-size: clamp(17px, 1.7vw, 20px);
    line-height: 1.65;
}

body .cm-podcast__description p + p {
    margin-top: 12px;
    color: var(--cm-navy);
    font-weight: 600;
}

body .cm-podcast__platforms {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 28px;
    padding: 28px clamp(24px, 5vw, 70px);
    border-radius: var(--cm-radius-card);
    background: var(--cm-surface-2);
}

body .cm-podcast__platforms a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    min-height: 58px;
    color: var(--cm-navy) !important;
    font-family: var(--cm-font-sans);
    font-size: 17px;
    text-decoration: none !important;
}

body .cm-podcast__platforms a + a {
    position: relative;
}

body .cm-podcast__platforms a + a::before {
    position: absolute;
    top: 50%;
    left: 0;
    width: 1px;
    height: 42px;
    background: var(--cm-border);
    content: "";
    transform: translateY(-50%);
}

body .cm-podcast__platforms a:hover,
body .cm-podcast__platforms a:focus-visible {
    color: var(--cm-accent) !important;
}

body .cm-podcast__platform-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 50px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--cm-navy);
    color: var(--cm-surface);
    font-size: 22px;
    transition: background-color var(--cm-transition);
}

body .cm-podcast__platforms a:hover .cm-podcast__platform-icon,
body .cm-podcast__platforms a:focus-visible .cm-podcast__platform-icon {
    background: var(--cm-accent);
}

body .cm-podcast__notice {
    padding: 30px;
    border-radius: var(--cm-radius-card);
    background: var(--cm-surface-2);
    text-align: center;
}

body .cm-podcast__notice p {
    max-width: 680px;
    margin: 0 auto;
}

@media (max-width: 999px) {
    body .cm-podcast__grid {
        grid-template-columns: 1fr;
    }

    body .cm-podcast-card {
        display: grid;
        grid-template-columns: 170px minmax(0, 1fr);
    }

    body .cm-podcast-card__image {
        height: 100%;
        min-height: 170px;
        aspect-ratio: auto;
    }

    body .cm-podcast-card__body {
        min-height: 170px;
        padding: 18px 22px;
    }

    body .cm-podcast-card__excerpt {
        font-size: 13px;
        -webkit-line-clamp: 3;
    }
}

@media (max-width: 600px) {
    body.colmagis-page-podcast .main-content.container {
        padding-top: 38px;
        padding-bottom: 64px;
    }

    body .cm-podcast-card {
        grid-template-columns: 128px minmax(0, 1fr);
    }

    body .cm-podcast-card__image,
    body .cm-podcast-card__body {
        min-height: 160px;
    }

    body .cm-podcast-card__body {
        padding: 14px 18px;
    }

    body .cm-podcast-card h2 {
        font-size: 14px;
        line-height: 1.2;
        -webkit-line-clamp: 2;
    }

    body .cm-podcast-card time {
        margin-top: 6px;
        font-size: 11px;
    }

    body .cm-podcast-card__excerpt {
        margin-top: 8px;
        font-size: 12px;
        line-height: 1.4;
        -webkit-line-clamp: 2;
    }

    body .cm-podcast__description {
        text-align: left;
    }

    body .cm-podcast__platforms {
        grid-template-columns: 1fr;
        padding: 16px 22px;
    }

    body .cm-podcast__platforms a {
        justify-content: flex-start;
        font-size: 15px;
    }

    body .cm-podcast__platforms a + a {
        border: 0;
    }

    body .cm-podcast__platforms a + a::before {
        top: 0;
        left: 0;
        width: 100%;
        height: 1px;
        transform: none;
    }
}

/* Fixed footer actions. */
body .cm-popup-footer {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    padding: 22px 36px;
    border-top: 1px solid var(--cm-rule);
    background: var(--cm-surface);
}

body .cm-popup-dismiss,
body .cm-popup-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    margin: 0;
    border-radius: var(--cm-radius-control);
    font-family: var(--cm-font-sans);
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none !important;
    cursor: pointer;
    transition: all var(--cm-transition);
}

body .cm-popup-dismiss {
    padding: 0 10px;
    border: 0;
    background: transparent;
    color: var(--cm-text-soft);
}

body .cm-popup-dismiss:hover,
body .cm-popup-dismiss:focus-visible {
    color: var(--cm-navy);
}

body .cm-popup-primary {
    padding: 0 18px;
    border: 1px solid var(--cm-navy);
    background: var(--cm-navy);
    color: var(--cm-cream) !important;
}

body .cm-popup-primary:hover,
body .cm-popup-primary:focus-visible {
    border-color: var(--cm-accent);
    background: var(--cm-accent);
    color: var(--cm-surface) !important;
}

body .cm-popup-dismiss:focus-visible,
body .cm-popup-primary:focus-visible {
    outline: 3px solid rgba(35, 81, 122, 0.2);
    outline-offset: 2px;
}

@media (max-width: 600px) {
    body .pum-overlay {
        padding: 12px !important;
    }

    body .pum-container,
    body .pum-container.pum-responsive,
    body .pum-container.custom-position {
        width: calc(100vw - 24px) !important;
        max-height: calc(100vh - 24px) !important;
        max-height: calc(100dvh - 24px) !important;
    }

    body .cm-popup-header {
        padding: 24px 68px 18px 20px;
    }

    body .pum-title {
        padding-left: 12px !important;
        font-size: 24px !important;
    }

    body .pum-close {
        top: 18px !important;
        right: 16px !important;
    }

    body .pum-content {
        padding: 22px 20px !important;
        font-size: 15px !important;
        line-height: 1.65 !important;
        scrollbar-gutter: auto;
    }

    body .cm-popup-footer {
        gap: 8px;
        padding: 16px 20px;
    }

    body .cm-popup-primary {
        padding-right: 14px;
        padding-left: 14px;
    }
}