:root{

    /* CONTENT */
    --content-p-font-size: clamp(10px, 15.423px + 0.180vw, 18px);
    --content-p-font-weight: 400;
    --content-heading-color: #23272B;
    --content-heading-font-weight: 600;
    --content-p-color: #292524;
    --content-h1-font-size: clamp(33px, 26.930px + 1.054vw, 42px);
    --content-h2-font-size: clamp(32px, 26.604px + 0.937vw, 40px);
    --content-h3-font-size: clamp(28px, 23.953px + 0.703vw, 34px);
    --content-h4-font-size: clamp(22px, 19.302px + 0.468vw, 26px);
    --content-h5-font-size: clamp(18px, 15.302px + 0.468vw, 22px);
    --content-h6-font-size: clamp(18px, 16.651px + 0.234vw, 20px);
    --content-a-color: var(--main-color-2);
    --content-a-hover-color: var(--main-color-1);
    --content-strong-color: var(--main-color-2);
    --content-p-line-height: 140%;
    --content-heading-line-height: 140%;
    --content-li-line-height: 140%;
    --content-p-letter-spacing: 0.2px;
    --content-heading-letter-spacing: 0;
    --content-li-letter-spacing: 0;


    /* FOOTER */
    --footer-bg-color: #f3f3f3;
    --footer-logo-height: 100px;
    --footer-p-font-size: clamp(16px, 15.423px + 0.180vw, 18px);
    --footer-p-font-weight: 300;
    --footer-p-color: #ff3c41;
    --footer-li-font-size: clamp(16px, 15.423px + 0.180vw, 18px);
    --footer-li-font-weight: 300;
    --footer-li-color: var(--main-color-4);
    --footer-a-color: var(--main-color-1);
    --footer-a-hover-color: var(--main-color-2);

    /* FOOTER BUTTON */
    --footer-button-color: #000;
    --footer-button-color-hover: #fff;
    --footer-button-bg-color: #fff;
    --footer-button-bg-color-hover: #000;
    --footer-button-border-radius: 4;
    --footer-button-border-color: #000;
    --footer-button-border-color-hover: #000;
    --footer-button-font-size: clamp(16px, 15.423px + 0.180vw, 18px);
    --footer-button-padding-left: 20px;
    --footer-button-padding-right: 20px;
    --footer-button-padding-bottom: 10px;
    --footer-button-padding-top: 10px;

    /* HEADER */
    --header-p-color: #000000;
    --header-p-font-size: 16px;
    --header-p-font-weight: 300;
    --header-li-color: #000000;
    --header-li-font-size: 16px;
    --header-li-font-weight: 300;
    --header-a-color: var(--main-color-1);
    --header-a-hover-color: var(--main-color-2);
    --header-menu-font-size: 16px;
    --header-menu-color: #000000;
    --header-menu-color-hover: var(--main-color-2);
    --header-dropdown-color: #000000;
    --header-dropdown-font-size: 15px;
    --header-dropdown-bg-color: #f3f3f3;
    --header-navbar-logo-height: 80px;
    --header-shrink-navbar-logo-height: 60px;
    --header-bg-color: #ffffff;
    --header-shrink-bg-color: #ffffff;
    --main-top-spacing: 30px;

    --header-menu-item-margin-top: 10px;
    --header-menu-item-margin-bottom: 10px;
    --header-menu-item-margin-left: 10px;
    --header-menu-item-margin-right: 10px;
    --header-menu-item-padding-top: 0;
    --header-menu-item-padding-bottom: 0;
    --header-menu-item-padding-left: 0;
    --header-menu-item-padding-right: 0;
    --header-menu-item-font-weight: 400;
    --header-menu-item-letter-spacing: 0;
    --header-menu-item-line-height: normal;
    --header-menu-item-text-transform: uppercase;

    /* HEADER ACTIVE */
    --header-menu-active-bg-color: var(--main-color-2);

    /* HEADER BUTTON */
    --header-button-color: #000;
    --header-button-color-hover: #fff;
    --header-button-bg-color: #fff;
    --header-button-bg-color-hover: #000;
    --header-button-border-radius: 4px;
    --header-button-border-color: #000;
    --header-button-border-color-hover: #000;
    --header-button-font-size: clamp(16px, 15.423px + 0.180vw, 18px);
    --header-button-padding-left: 20px;
    --header-button-padding-right: 20px;
    --header-button-padding-bottom: 10px;
    --header-button-padding-top: 10px;

    /* CONTAINER */
    --container-margin-bottom: 50px;
    --container-margin-top: 0;
    --container-margin-left: auto;
    --container-margin-right: auto;
    --container-padding-bottom: 0;
    --container-padding-top: 0;
    --container-padding-left: 15px;
    --container-padding-right: 15px;
    --container-max-width: 1430px;

    /* FULLWIDTH CONTAINER */
    --fullwidth-container-margin-bottom: 50px;
    --fullwidth-container-margin-top: 50;
    --fullwidth-container-margin-left: auto;
    --fullwidth-container-margin-right: auto;
    --fullwidth-container-padding-bottom: 0;
    --fullwidth-container-padding-top: 0;
    --fullwidth-container-padding-left: 0;
    --fullwidth-container-padding-right: 0;

    /* BACKGROUND COLORS */
    --background1-bg-color: #F4F4F5;
    --background1-color: #23272B;
    --background2-bg-color: #0B3A49;
    --background2-color: #fff;
    --background3-bg-color: #fff;
    --background3-color: #000;
    --background4-bg-color: #fff;
    --background4-color: #000;
    --background5-bg-color: ;
    --background5-color: ;
    --background6-bg-color: ;
    --background6-color: ;
    --background7-bg-color: ;
    --background7-color: ;
    --background8-bg-color: ;
    --background8-color: ;
    --background9-bg-color: ;
    --background9-color: ;
    --background10-bg-color: ;
    --background10-color: ;

    /* BACKGROUND IMAGES */
    --background-image1-bg-image: url( );
    --background-image1-color: ;
    --background-image2-bg-image: url( );
    --background-image2-color: ;

    /* BODY */
    --body-bg-color: #E7E5E4;
    --body-bg-image: ;
    --body-bg-size: ;
    --body-bg-repeat: ;
    --body-bg-position: ;
    --body-bg-attachment: ;

    /* BUTTON ELEMENTS */
    --button-color: #ffffff;
    --button-color-hover: var(--main-color-2);
    --button-bg-color: var(--main-color-2);
    --button-bg-color-hover: #cccccc;
    --button-font-size: 16px;
    --button-border-type: solid;
    --button-border-color: #000;
    --button-border-color-hover: #000;
    --button-border-radius: 8px;
    --button-padding-left: 30px;
    --button-padding-right: 30px;
    --button-padding-top: 10px;
    --button-padding-bottom: 10px;
    --button-border-size: 0px;
    --button-font-weight: 400;
    --button-text-transform: uppercase;
    --button-letter-spacing: 0;
    --button-transition: all 0.3s ease;
    --button-shadow: none;
    --button-shadow-hover: none;

    /* BUTTON VARIANTS */
    --button-v2-bg-color: #fcd000;
    --button-v2-bg-color-hover: #c7a91c;
    --button-v2-color: var(--main-color-2);
    --button-v2-color-hover: #ffffff;
    --button-v2-border-size: 1px;
    --button-v2-border-type: solid;
    --button-v2-border-color: var(--main-color-2);
    --button-v2-border-color-hover: var(--main-color-2);
    --button-v2-border-radius: 100px;
    --button-v2-padding-top: 10px;
    --button-v2-padding-right: 30px;
    --button-v2-padding-bottom: 10px;
    --button-v2-padding-left: 30px;
    --button-v2-font-size: 16px;
    --button-v2-font-weight: 400;
    --button-v2-text-transform: uppercase;
    --button-v2-letter-spacing: 0;
    --button-v2-transition: all 0.3s ease;
    --button-v2-shadow: none;
    --button-v2-shadow-hover: none;

    --button-v3-bg-color: transparent;
    --button-v3-bg-color-hover: var(--main-color-1);
    --button-v3-color: var(--main-color-1);
    --button-v3-color-hover: #ffffff;
    --button-v3-border-size: 1px;
    --button-v3-border-type: solid;
    --button-v3-border-color: var(--main-color-1);
    --button-v3-border-color-hover: var(--main-color-1);
    --button-v3-border-radius: 100px;
    --button-v3-padding-top: 10px;
    --button-v3-padding-right: 30px;
    --button-v3-padding-bottom: 10px;
    --button-v3-padding-left: 30px;
    --button-v3-font-size: 16px;
    --button-v3-font-weight: 400;
    --button-v3-text-transform: uppercase;
    --button-v3-letter-spacing: 0;
    --button-v3-transition: all 0.3s ease;
    --button-v3-shadow: none;
    --button-v3-shadow-hover: none;

    --button-v4-bg-color: ;
    --button-v4-bg-color-hover: ;
    --button-v4-color: ;
    --button-v4-color-hover: ;
    --button-v4-border-size: 0px;
    --button-v4-border-type: solid;
    --button-v4-border-color: ;
    --button-v4-border-color-hover: ;
    --button-v4-border-radius: 0px;
    --button-v4-padding-top: 10px;
    --button-v4-padding-right: 20px;
    --button-v4-padding-bottom: 10px;
    --button-v4-padding-left: 20px;
    --button-v4-font-size: ;
    --button-v4-font-weight: ;
    --button-v4-text-transform: ;
    --button-v4-letter-spacing: ;
    --button-v4-transition: all 0.3s ease;
    --button-v4-shadow: none;
    --button-v4-shadow-hover: none;

    /* BUTTON SIZES */
    --button-sm-font-size: ;
    --button-sm-padding-top: 6px;
    --button-sm-padding-right: 12px;
    --button-sm-padding-bottom: 6px;
    --button-sm-padding-left: 12px;
    --button-lg-font-size: ;
    --button-lg-padding-top: 14px;
    --button-lg-padding-right: 28px;
    --button-lg-padding-bottom: 14px;
    --button-lg-padding-left: 28px;

    /* FORM ELEMENTS */
    --form-input-height: 48px;
    --form-textarea-height: 200px;
    --form-input-border-radius: 4px;
    --form-input-border-size: 1px;
    --form-input-border-color: #000;
    --form-input-border-type: solid;
    --form-input-bg: #fff;
    --form-input-font-size: clamp(16px, 15.423px + 0.180vw, 18px);
    --form-input-placeholder-font-size: clamp(16px, 15.423px + 0.180vw, 18px);
    --form-input-color: #000;
    --form-input-placeholder-color: #000;
    --form-input-margin-right: 0;
    --form-input-margin-left: 0;
    --form-input-margin-top: 0;
    --form-input-margin-bottom: 0;
    --form-input-padding-right: 0;
    --form-input-padding-left: 13px;
    --form-input-padding-top: 0;
    --form-input-padding-bottom: 0;
    --form-input-bg-focus: ;
    --form-input-border-color-focus: ;
    --form-label-font-size: ;
    --form-label-color: ;

    /* ICONS */
    --icon-font-size: 20px;
    --icon-color: var(--main-color-1);
    --icon-plus-font-size: 16;

    /* MENU FONT FAMILY */
    --heading-font-family: "montserrat", sans-serif;
    --general-text-font-family: "montserrat", sans-serif;
    --menu-font-family: "montserrat", sans-serif;

    /* COLOR PALETTE */
    --main-color-1: #0E7AB8;
    --main-color-2: #2EA86B;
    --main-color-3: #F5A623;
    --main-color-4: #1F2933;
    --main-color-5: #ff3c41;
    --main-color-6: #cccccc;
    --main-color-7: ;
    --main-color-8: ;
    --main-color-9: ;
    --main-color-10: ;

    /* PREDEFINED CLASES */
    --margin-top-s: clamp(15px, 4.883px + 1.756vw, 30px);
    --margin-top-m: clamp(30px, 19.883px + 1.756vw, 45px);
    --margin-top-l: clamp(45px, 34.883px + 1.756vw, 60px);
    --margin-bottom-s: clamp(15px, 4.883px + 1.756vw, 30px);
    --margin-bottom-m: clamp(30px, 19.883px + 1.756vw, 45px);
    --margin-bottom-l: clamp(45px, 34.883px + 1.756vw, 60px);
    --margin-left-s: clamp(15px, 4.883px + 1.756vw, 30px);
    --margin-left-m: clamp(30px, 19.883px + 1.756vw, 45px);
    --margin-left-l: clamp(45px, 34.883px + 1.756vw, 60px);
    --margin-right-s: clamp(15px, 4.883px + 1.756vw, 30px);
    --margin-right-m: clamp(30px, 19.883px + 1.756vw, 45px);
    --margin-right-l: clamp(45px, 34.883px + 1.756vw, 60px);

    --padding-top-s: clamp(15px, 4.883px + 1.756vw, 30px);
    --padding-top-m: clamp(30px, 19.883px + 1.756vw, 45px);
    --padding-top-l: clamp(45px, 34.883px + 1.756vw, 60px);
    --padding-bottom-s: clamp(15px, 4.883px + 1.756vw, 30px);
    --padding-bottom-m: clamp(30px, 19.883px + 1.756vw, 45px);
    --padding-bottom-l: clamp(45px, 34.883px + 1.756vw, 60px);
    --padding-left-s: clamp(15px, 4.883px + 1.756vw, 30px);
    --padding-left-m: clamp(30px, 19.883px + 1.756vw, 45px);
    --padding-left-l: clamp(45px, 34.883px + 1.756vw, 60px);
    --padding-right-s: clamp(15px, 4.883px + 1.756vw, 30px);
    --padding-right-m: clamp(30px, 19.883px + 1.756vw, 45px);
    --padding-right-l: clamp(45px, 34.883px + 1.756vw, 60px);

    /* POPUPS */
    --popup-max-width: ;
    --popup-box-shadow: ;
    --popup-border-radius: ;
    --popup-border-color: ;
    --popup-border-size: ;
    --popup-border-type: solid;
    --popup-padding-top: ;
    --popup-padding-right: ;
    --popup-padding-bottom: ;
    --popup-padding-left: ;
    --popup-bg: ;
    --popup-color: ;

    /* ESPACIADOS */

    /* LISTADOS */
    --content-li-color: var(--main-color-4);
    --content-li-font-size: clamp(16px, 15.423px + 0.180vw, 18px);
    --content-li-font-weight: 400;
    --content-li-margin-left: 0;
    --content-li-margin-right: 0;
    --content-li-margin-bottom: 10px;
    --content-li-margin-top: 10px;
    --content-li-padding-left: 0;
    --content-li-padding-right: 0;
    --content-li-padding-bottom: 0;
    --content-li-padding-top: 0;

    /* TITULOS */
    --content-title-margin-bottom: 15px;
    /* TEXTOS */
    --content-p-margin-bottom: 15px;
}

/* ICONOS */
.icon{color: var(--icon-color); font-size: var(--icon-font-size);}

/* CONTENEDORES */
main > div {padding-top: var(--main-top-spacing);}
main .container{ margin-top: var(--container-margin-top); margin-bottom: var(--container-margin-bottom); margin-left: var(--container-margin-left); margin-right: var(--container-margin-right); padding-top: var(--container-padding-top); padding-bottom: var(--container-padding-bottom); padding-left: var(--container-padding-left); padding-right: var(--container-padding-right); }

.lock-container, .container, .container-lg, .container-md, .container-sm, .container-xl{max-width: var(--container-max-width);}

/* CONTENEDORES ANCHO ENTERO */
main .fullwidth{ margin-top: var(--fullwidth-container-margin-top); margin-bottom: var(--fullwidth-container-margin-bottom); margin-left: var(--fullwidth-container-margin-left); margin-right: var(--fullwidth-container-margin-right); padding-top: var(--fullwidth-container-padding-top); padding-bottom: var(--fullwidth-container-padding-bottom); padding-left: var(--fullwidth-container-padding-left); padding-right: var(--fullwidth-container-padding-right); }

/* ELEMENTOS */
/* BOTON */
.btn:not(.no-style-btn *):not(.no-style-btn){ background: var(--button-bg-color); color: var(--button-color); font-size: var(--button-font-size); border-radius: var(--button-border-radius); border: var(--button-border-size) var(--button-border-type) var(--button-border-color); padding-top: var(--button-padding-top); padding-bottom: var(--button-padding-bottom); padding-left: var(--button-padding-left); padding-right: var(--button-padding-right);}
.btn:not(.no-style-btn *):not(.no-style-btn).active,
.btn:not(.no-style-btn *):not(.no-style-btn):hover{ background: var(--button-bg-color-hover); color: var(--button-color-hover); border-color: var(--button-border-color-hover); }
.btn-invert .btn:not(.no-style-btn *):not(.no-style-btn),
.btn-invert.btn:not(.no-style-btn *):not(.no-style-btn){ background: var(--button-bg-color-hover); color: var(--button-color-hover); font-size: var(--button-font-size); border-radius: var(--button-border-radius); border: var(--button-border-size) var(--button-border-type) var(--button-border-color-hover); padding-top: var(--button-padding-top); padding-bottom: var(--button-padding-bottom); padding-left: var(--button-padding-left); padding-right: var(--button-padding-right);}
.btn-invert .btn:not(.no-style-btn *):not(.no-style-btn).active,
.btn-invert.btn:not(.no-style-btn *):not(.no-style-btn).active,
.btn-invert .btn:not(.no-style-btn *):not(.no-style-btn):hover,
.btn-invert.btn:not(.no-style-btn *):not(.no-style-btn):hover{  border-color: var(--button-border-color);  background: var(--button-bg-color); color: var(--button-color); }

/* BUTTON VARIANTS */
.btn-variant-1:not(.no-style-btn *):not(.no-style-btn){ background: var(--button-bg-color); color: var(--button-color); font-size: var(--button-font-size); font-weight: var(--button-font-weight); text-transform: var(--button-text-transform); letter-spacing: var(--button-letter-spacing); border-radius: var(--button-border-radius); border: var(--button-border-size) var(--button-border-type) var(--button-border-color); padding-top: var(--button-padding-top); padding-bottom: var(--button-padding-bottom); padding-left: var(--button-padding-left); padding-right: var(--button-padding-right); box-shadow: var(--button-shadow); transition: var(--button-transition); }
.btn-variant-1:not(.no-style-btn *):not(.no-style-btn):hover,.btn-variant-1:not(.no-style-btn *):not(.no-style-btn).active{ background: var(--button-bg-color-hover); color: var(--button-color-hover); border-color: var(--button-border-color-hover); box-shadow: var(--button-shadow-hover); }
.btn-variant-2:not(.no-style-btn *):not(.no-style-btn){ background: var(--button-v2-bg-color); color: var(--button-v2-color); font-size: var(--button-v2-font-size); font-weight: var(--button-v2-font-weight); text-transform: var(--button-v2-text-transform); letter-spacing: var(--button-v2-letter-spacing); border-radius: var(--button-v2-border-radius); border: var(--button-v2-border-size) var(--button-v2-border-type) var(--button-v2-border-color); padding-top: var(--button-v2-padding-top); padding-bottom: var(--button-v2-padding-bottom); padding-left: var(--button-v2-padding-left); padding-right: var(--button-v2-padding-right); box-shadow: var(--button-v2-shadow); transition: var(--button-v2-transition); }
.btn-variant-2:not(.no-style-btn *):not(.no-style-btn):hover,.btn-variant-2:not(.no-style-btn *):not(.no-style-btn).active{ background: var(--button-v2-bg-color-hover); color: var(--button-v2-color-hover); border-color: var(--button-v2-border-color-hover); box-shadow: var(--button-v2-shadow-hover); }
.btn-variant-3:not(.no-style-btn *):not(.no-style-btn){ background: var(--button-v3-bg-color); color: var(--button-v3-color); font-size: var(--button-v3-font-size); font-weight: var(--button-v3-font-weight); text-transform: var(--button-v3-text-transform); letter-spacing: var(--button-v3-letter-spacing); border-radius: var(--button-v3-border-radius); border: var(--button-v3-border-size) var(--button-v3-border-type) var(--button-v3-border-color); padding-top: var(--button-v3-padding-top); padding-bottom: var(--button-v3-padding-bottom); padding-left: var(--button-v3-padding-left); padding-right: var(--button-v3-padding-right); box-shadow: var(--button-v3-shadow); transition: var(--button-v3-transition); }
.btn-variant-3:not(.no-style-btn *):not(.no-style-btn):hover,.btn-variant-3:not(.no-style-btn *):not(.no-style-btn).active{ background: var(--button-v3-bg-color-hover); color: var(--button-v3-color-hover); border-color: var(--button-v3-border-color-hover); box-shadow: var(--button-v3-shadow-hover); }
.btn-variant-4:not(.no-style-btn *):not(.no-style-btn){ background: var(--button-v4-bg-color); color: var(--button-v4-color); font-size: var(--button-v4-font-size); font-weight: var(--button-v4-font-weight); text-transform: var(--button-v4-text-transform); letter-spacing: var(--button-v4-letter-spacing); border-radius: var(--button-v4-border-radius); border: var(--button-v4-border-size) var(--button-v4-border-type) var(--button-v4-border-color); padding-top: var(--button-v4-padding-top); padding-bottom: var(--button-v4-padding-bottom); padding-left: var(--button-v4-padding-left); padding-right: var(--button-v4-padding-right); box-shadow: var(--button-v4-shadow); transition: var(--button-v4-transition); }
.btn-variant-4:not(.no-style-btn *):not(.no-style-btn):hover,.btn-variant-4:not(.no-style-btn *):not(.no-style-btn).active{ background: var(--button-v4-bg-color-hover); color: var(--button-v4-color-hover); border-color: var(--button-v4-border-color-hover); box-shadow: var(--button-v4-shadow-hover); }
/* BUTTON SIZES */
.btn-sm:not(.no-style-btn *):not(.no-style-btn){ font-size: var(--button-sm-font-size) !important; padding-top: var(--button-sm-padding-top) !important; padding-bottom: var(--button-sm-padding-bottom) !important; padding-left: var(--button-sm-padding-left) !important; padding-right: var(--button-sm-padding-right) !important; }
.btn-lg:not(.no-style-btn *):not(.no-style-btn){ font-size: var(--button-lg-font-size) !important; padding-top: var(--button-lg-padding-top) !important; padding-bottom: var(--button-lg-padding-bottom) !important; padding-left: var(--button-lg-padding-left) !important; padding-right: var(--button-lg-padding-right) !important; }
/* BUTTON WIDTH */
.btn-fluid:not(.no-style-btn *):not(.no-style-btn){ width: 100%; display: block; }
/* BUTTON ALIGNMENT WRAPPER */
.btn-wrapper{ display: flex; }
.btn-wrapper.align-left{ justify-content: flex-start; }
.btn-wrapper.align-center{ justify-content: center; }
.btn-wrapper.align-right{ justify-content: flex-end; }

/* FORMULARIOS */
.form-control{height: var(--form-input-height); border-radius: var(--form-input-border-radius); border: var(--form-input-border-size) var(--form-input-border-type) var(--form-input-border-color); background: var(--form-input-bg); color: var(--form-input-color); font-size: var(--form-input-font-size); margin-top: var(--form-input-margin-top); margin-bottom: var(--form-input-margin-bottom); margin-left: var(--form-input-margin-left); margin-right: var(--form-input-margin-right); padding-top: var(--form-input-padding-top); padding-bottom: var(--form-input-padding-bottom); padding-left: var(--form-input-padding-left); padding-right: var(--form-input-padding-right); }

.form-control::placeholder{ color: var(--form-input-placeholder-color); font-size: var(--form-input-placeholder-font-size);}
.form-control:focus{ background: var(--form-input-bg-focus); border-color: var(--form-input-border-color-focus); }
label:not(.no-style-btn *):not(.form-check-label){ color: var(--form-label-color); font-size: var(--form-label-font-size); }

textarea{height: var(--form-textarea-height) !important;}

/* HEADER */
header p{font-size: var(--header-p-font-size); color: var(--header-p-color); font-weight: var(--header-p-font-weight);}

header li p,
header li{font-size: var(--header-li-font-size); color: var(--header-li-color); font-weight: var(--header-li-font-weight);}

header a{color: var(--header-a-color);}
header a:hover{ color: var(--header-a-hover-color);}

header .btn:not(.no-style-btn *):not(.no-style-btn){ background: var(--header-button-bg-color); color: var(--header-button-color); font-size: var(--header-button-font-size); border-radius: var(--header-button-border-radius); padding-top: var(--header-button-padding-top); padding-bottom: var(--header-button-padding-bottom); padding-left: var(--header-button-padding-left); padding-right: var(--header-button-padding-right);  border-color: var(--header-button-border-color);}
header .btn:not(.no-style-btn *):not(.no-style-btn).active,
header .btn:not(.no-style-btn *):not(.no-style-btn):hover{ background: var(--header-button-bg-color-hover); color: var(--header-button-color-hover); border-color: var(--header-button-border-color-hover); }
header .btn-invert .btn:not(.no-style-btn *):not(.no-style-btn),
header .btn-invert.btn:not(.no-style-btn *):not(.no-style-btn){ background: var(--header-button-bg-color-hover); color: var(--header-button-color-hover); font-size: var(--header-button-font-size); border-radius: var(--header-button-border-radius); padding-top: var(--header-button-padding-top); padding-bottom: var(--header-button-padding-bottom); padding-left: var(--header-button-padding-left); padding-right: var(--header-button-padding-right);  border-color: var(--header-button-border-color-hover);}
header .btn-invert .btn:not(.no-style-btn *):not(.no-style-btn).active,
header .btn-invert.btn:not(.no-style-btn *):not(.no-style-btn).active,
header .btn-invert .btn:not(.no-style-btn *):not(.no-style-btn):hover,
header .btn-invert.btn:not(.no-style-btn *):not(.no-style-btn):hover{ background: var(--header-button-bg-color); color: var(--header-button-color); border-color: var(--header-button-border-color); }

header .navbar-brand{height: var(--header-navbar-logo-height);}
header .cbp-af-header.header-transparent.cbp-af-header-shrink .navbar-brand{height: var(--header-shrink-navbar-logo-height);}

header .cbp-af-header.header-transparent{background: var(--header-bg-color);}
header .cbp-af-header.header-transparent.cbp-af-header-shrink{background: var(--header-shrink-bg-color);}

header .dropdown-menu{background: var(--header-dropdown-bg-color); color: var(--header-dropdown-color); font-size: var(--header-dropdown-font-size);}
header .dropdown-menu *{color: var(--header-dropdown-color); font-size: var(--header-dropdown-font-size);}

header .nav-item {
    margin-top: var(--header-menu-item-margin-top);
    margin-bottom: var(--header-menu-item-margin-bottom);
    margin-left: var(--header-menu-item-margin-left);
    margin-right: var(--header-menu-item-margin-right);
    padding-top: var(--header-menu-item-padding-top);
    padding-bottom: var(--header-menu-item-padding-bottom);
    padding-left: var(--header-menu-item-padding-left);
    padding-right: var(--header-menu-item-padding-right);
    font-weight: var(--header-menu-item-font-weight);
    letter-spacing: var(--header-menu-item-letter-spacing);
    line-height: var(--header-menu-item-line-height);
    text-transform: var(--header-menu-item-text-transform);
}
header .nav-item:hover {color: var(--header-menu-color-hover);}

header .nav-link {color: var(--header-menu-color); font-size: var(--header-menu-font-size); font-family: var(--menu-font-family);}
header .nav-link.active, 
header .nav-link:hover {color: var(--header-menu-color-hover);}

header .nav-link:not(.dropdown-item):hover::before,
header .nav-link.active:not(.dropdown-item)::before { background-color: var(--header-menu-active-bg-color); }

/* [IRIDIAN AI LAYER 2026-06-11] MENU v2 (.hv2-*): el header gaia_v2 usa el markup
   nou .hv2-header/.hv2-link/.hv2-dropdown (no .nav-link). Apliquem la config del
   menú (style_options) als selectors nous. Additiu — es mantenen els .nav-* per al
   header antic (child_gaia). NOMÉS tipografia/color/dropdown: s'ometen logo-height
   i marges/paddings d'ítem perquè el layout flex del v2 els gestiona (els trencarien). */
header .hv2-link {
    color: var(--header-menu-color);
    font-size: var(--header-menu-font-size);
    font-family: var(--menu-font-family);
    font-weight: var(--header-menu-item-font-weight);
    letter-spacing: var(--header-menu-item-letter-spacing);
    text-transform: var(--header-menu-item-text-transform);
}
header .hv2-link.is-active,
header .hv2-link:hover { color: var(--header-menu-color-hover); }
header .hv2-dropdown { background: var(--header-dropdown-bg-color); }
header .hv2-dropdown-link { color: var(--header-dropdown-color); font-size: var(--header-dropdown-font-size); }

/* CONTENT */

.title, h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { color: var(--content-heading-color); font-family: var(--heading-font-family); font-weight: var(--content-heading-font-weight); margin-bottom: var(--content-title-margin-bottom); line-height: var(--content-heading-line-height); letter-spacing: var(--content-heading-letter-spacing); }
h1, .h1{ font-size: var(--content-h1-font-size); }
h2, .h2{ font-size: var(--content-h2-font-size); }
h3, .h3{ font-size: var(--content-h3-font-size); }
h4, .h4{ font-size: var(--content-h4-font-size); }
h5, .h5{ font-size: var(--content-h5-font-size); }
h6, .h6{ font-size: var(--content-h6-font-size); }

body { font-size: var(--content-p-font-size); font-family: var(--general-text-font-family); color: var(--content-p-color); line-height: var(--content-p-line-height); letter-spacing: var(--content-p-letter-spacing); background-color: var(--body-bg-color); background-image: var(--body-bg-image); background-size: var(--body-bg-size); background-repeat: var(--body-bg-repeat); background-position: var(--body-bg-position); background-attachment: var(--body-bg-attachment);}
.p, main p{font-size: var(--content-p-font-size); color: var(--content-p-color); font-family: var(--general-text-font-family); font-weight: var(--content-p-font-weight); margin-bottom: var(--content-p-margin-bottom); line-height: var(--content-p-line-height); letter-spacing: var(--content-p-letter-spacing);}

main a{ color: var(--content-a-color);}
main a:hover{ color: var(--content-a-hover-color);}

main li,
main li p{color: var(--content-li-color); font-size: var(--content-li-font-size); font-weight: var(--content-li-font-weight); margin-top: var(--content-li-margin-top); margin-bottom: var(--content-li-margin-bottom); margin-left: var(--content-li-margin-left); margin-right: var(--content-li-margin-right); padding-top: var(--content-li-padding-top); padding-bottom: var(--content-li-padding-bottom); padding-left: var(--content-li-padding-left); padding-right: var(--content-li-padding-right);  line-height: var(--content-li-line-height); letter-spacing: var(--content-li-letter-spacing); }

strong{color: var(--content-strong-color);}

/* FOOTER */
footer{background: var(--footer-bg-color);}

footer .footer-logo img{height: var(--footer-logo-height);}

footer, footer p{font-size: var(--footer-p-font-size); color: var(--footer-p-color); font-weight: var(--footer-p-font-weight);}

footer a{ color: var(--footer-a-color);}
footer a:hover{ color: var(--footer-a-hover-color);}

footer li p,
footer li{color: var(--footer-li-color); font-size: var(--footer-li-font-size); font-weight: var(--footer-li-font-weight);}

footer .btn:not(.no-style-btn *):not(.no-style-btn){ background: var(--footer-button-bg-color); color: var(--footer-button-color); font-size: var(--footer-button-font-size); border-radius: var(--footer-button-border-radius); padding-top: var(--footer-button-padding-top); padding-bottom: var(--footer-button-padding-bottom); padding-left: var(--footer-button-padding-left); padding-right: var(--footer-button-padding-right); border-color: var(--footer-button-border-color);}
footer .btn:not(.no-style-btn *):not(.no-style-btn).active,
footer .btn:not(.no-style-btn *):not(.no-style-btn):hover{ background: var(--footer-button-bg-color-hover); color: var(--footer-button-color-hover); border-color: var(--footer-button-border-color-hover); }
footer .btn-invert .btn:not(.no-style-btn *):not(.no-style-btn),
footer .btn-invert.btn:not(.no-style-btn *):not(.no-style-btn){ background: var(--footer-button-bg-color-hover); color: var(--footer-button-color-hover); font-size: var(--footer-button-font-size); border-radius: var(--footer-button-border-radius); padding-top: var(--footer-button-padding-top); padding-bottom: var(--footer-button-padding-bottom); padding-left: var(--footer-button-padding-left); padding-right: var(--footer-button-padding-right); border-color: var(--footer-button-border-color-hover);}
footer .btn-invert .btn:not(.no-style-btn *):not(.no-style-btn).active,
footer .btn-invert.btn:not(.no-style-btn *):not(.no-style-btn).active,
footer .btn-invert .btn:not(.no-style-btn *):not(.no-style-btn):hover,
footer .btn-invert.btn:not(.no-style-btn *):not(.no-style-btn):hover{ background: var(--footer-button-bg-color); color: var(--footer-button-color); border-color: var(--footer-button-border-color); }

body .mt-l.mt-l { margin-top: var(--margin-top-l); }
body .mt-m.mt-m { margin-top: var(--margin-top-m); }
body .mt-s.mt-s { margin-top: var(--margin-top-s); }

body .mb-l.mb-l { margin-bottom: var(--margin-bottom-l); }
body .mb-m.mb-m { margin-bottom: var(--margin-bottom-m); }
body .mb-s.mb-s { margin-bottom: var(--margin-bottom-s); }

body .mr-l.mr-l { margin-right: var(--margin-right-l); }
body .mr-m.mr-m { margin-right: var(--margin-right-m); }
body .mr-s.mr-s { margin-right: var(--margin-right-s); }

body .ml-l.ml-l { margin-left: var(--margin-left-l); }
body .ml-m.ml-m { margin-left: var(--margin-left-m); }
body .ml-s.ml-s { margin-left: var(--margin-left-s); }

body .pt-l.pt-l { padding-top: var(--padding-top-l); }
body .pt-m.pt-m { padding-top: var(--padding-top-m); }
body .pt-s.pt-s { padding-top: var(--padding-top-s); }

body .pb-l.pb-l { padding-bottom: var(--padding-bottom-l); }
body .pb-m.pb-m { padding-bottom: var(--padding-bottom-m); }
body .pb-s.pb-s { padding-bottom: var(--padding-bottom-s); }

body .pr-l.pr-l { padding-right: var(--padding-right-l); }
body .pr-m.pr-m { padding-right: var(--padding-right-m); }
body .pr-s.pr-s { padding-right: var(--padding-right-s); }

body .pl-l.pl-l { padding-left: var(--padding-left-l); }
body .pl-m.pl-m { padding-left: var(--padding-left-m); }
body .pl-s.pl-s { padding-left: var(--padding-left-s); }

@media only screen and (max-width: 991px){
    body .tablet-mt-l.tablet-mt-l { margin-top: var(--margin-top-l); }
    body .tablet-mt-m.tablet-mt-m { margin-top: var(--margin-top-m); }
    body .tablet-mt-s.tablet-mt-s { margin-top: var(--margin-top-s); }
    body .tablet-mt-0.tablet-mt-0 { margin-top: 0; }

    body .tablet-mb-l.tablet-mb-l { margin-bottom: var(--margin-bottom-l); }
    body .tablet-mb-m.tablet-mb-m { margin-bottom: var(--margin-bottom-m); }
    body .tablet-mb-s.tablet-mb-s { margin-bottom: var(--margin-bottom-s); }
    body .tablet-mb-0.tablet-mb-0 { margin-bottom: 0; }

    body .tablet-mr-l.tablet-mr-l { margin-right: var(--margin-right-l); }
    body .tablet-mr-m.tablet-mr-m { margin-right: var(--margin-right-m); }
    body .tablet-mr-s.tablet-mr-s { margin-right: var(--margin-right-s); }
    body .tablet-mr-0.tablet-mr-0 { margin-right: 0; }

    body .tablet-ml-l.tablet-ml-l { margin-left: var(--margin-left-l); }
    body .tablet-ml-m.tablet-ml-m { margin-left: var(--margin-left-m); }
    body .tablet-ml-s.tablet-ml-s { margin-left: var(--margin-left-s); }
    body .tablet-ml-0.tablet-ml-0 { margin-left: 0; }

    body .tablet-pt-l.tablet-pt-l { padding-top: var(--padding-top-l); }
    body .tablet-pt-m.tablet-pt-m { padding-top: var(--padding-top-m); }
    body .tablet-pt-s.tablet-pt-s { padding-top: var(--padding-top-s); }
    body .tablet-pt-0.tablet-pt-0 { padding-top: 0; }

    body .tablet-pb-l.tablet-pb-l { padding-bottom: var(--padding-bottom-l); }
    body .tablet-pb-m.tablet-pb-m { padding-bottom: var(--padding-bottom-m); }
    body .tablet-pb-s.tablet-pb-s { padding-bottom: var(--padding-bottom-s); }
    body .tablet-pb-0.tablet-pb-0 { padding-bottom: 0; }

    body .tablet-pr-l.tablet-pr-l { padding-right: var(--padding-right-l); }
    body .tablet-pr-m.tablet-pr-m { padding-right: var(--padding-right-m); }
    body .tablet-pr-s.tablet-pr-s { padding-right: var(--padding-right-s); }
    body .tablet-pr-0.tablet-pr-0 { padding-right: 0; }

    body .tablet-pl-l.tablet-pl-l { padding-left: var(--padding-left-l); }
    body .tablet-pl-m.tablet-pl-m { padding-left: var(--padding-left-m); }
    body .tablet-pl-s.tablet-pl-s { padding-left: var(--padding-left-s); }
    body .tablet-pl-0.tablet-pl-0 { padding-left: 0; }
}
@media only screen and (max-width: 576px){
    body .mobile-mt-l.mobile-mt-l { margin-top: var(--margin-top-l); }
    body .mobile-mt-m.mobile-mt-m { margin-top: var(--margin-top-m); }
    body .mobile-mt-s.mobile-mt-s { margin-top: var(--margin-top-s); }
    body .mobile-mt-0.mobile-mt-0 { margin-top: 0; }

    body .mobile-mb-l.mobile-mb-l { margin-bottom: var(--margin-bottom-l); }
    body .mobile-mb-m.mobile-mb-m { margin-bottom: var(--margin-bottom-m); }
    body .mobile-mb-s.mobile-mb-s { margin-bottom: var(--margin-bottom-s); }
    body .mobile-mb-0.mobile-mb-0 { margin-bottom: 0; }

    body .mobile-mr-l.mobile-mr-l { margin-right: var(--margin-right-l); }
    body .mobile-mr-m.mobile-mr-m { margin-right: var(--margin-right-m); }
    body .mobile-mr-s.mobile-mr-s { margin-right: var(--margin-right-s); }
    body .mobile-mr-0.mobile-mr-0 { margin-right: 0; }

    body .mobile-ml-l.mobile-ml-l { margin-left: var(--margin-left-l); }
    body .mobile-ml-m.mobile-ml-m { margin-left: var(--margin-left-m); }
    body .mobile-ml-s.mobile-ml-s { margin-left: var(--margin-left-s); }
    body .mobile-ml-0.mobile-ml-0 { margin-left: 0; }

    body .mobile-pt-l.mobile-pt-l { padding-top: var(--padding-top-l); }
    body .mobile-pt-m.mobile-pt-m { padding-top: var(--padding-top-m); }
    body .mobile-pt-s.mobile-pt-s { padding-top: var(--padding-top-s); }
    body .mobile-pt-0.mobile-pt-0 { padding-top: 0; }

    body .mobile-pb-l.mobile-pb-l { padding-bottom: var(--padding-bottom-l); }
    body .mobile-pb-m.mobile-pb-m { padding-bottom: var(--padding-bottom-m); }
    body .mobile-pb-s.mobile-pb-s { padding-bottom: var(--padding-bottom-s); }
    body .mobile-pb-0.mobile-pb-0 { padding-bottom: 0; }

    body .mobile-pr-l.mobile-pr-l { padding-right: var(--padding-right-l); }
    body .mobile-pr-m.mobile-pr-m { padding-right: var(--padding-right-m); }
    body .mobile-pr-s.mobile-pr-s { padding-right: var(--padding-right-s); }
    body .mobile-pr-0.mobile-pr-0 { padding-right: 0; }

    body .mobile-pl-l.mobile-pl-l { padding-left: var(--padding-left-l); }
    body .mobile-pl-m.mobile-pl-m { padding-left: var(--padding-left-m); }
    body .mobile-pl-s.mobile-pl-s { padding-left: var(--padding-left-s); }
    body .mobile-pl-0.mobile-pl-0 { padding-left: 0; }
}

.popup-modal .modal-content{ border-radius: var(--popup-border-radius); border: var(--popup-border-size) var(--popup-border-type) var(--popup-border-color); box-shadow: var(--popup-box-shadow) }
.popup-modal .modal-content, .popup-modal .modal-dialog{ max-width: var(--popup-max-width); }
.popup-modal .popup-content{ background: var(--popup-bg); color: var(--popup-color); }
.popup-modal .popup-content *{ color: var(--popup-color); }
.popup-modal .popup-content .container, .popup-modal .popup-content .fullwidth{ padding-top: var(--popup-padding-top); padding-right: var(--popup-padding-right); padding-bottom: var(--popup-padding-bottom); padding-left: var(--popup-padding-left); }

/* FONDOS */
.background-type1{background: var(--background1-bg-color); color: var(--background1-color);}
.background-type1 *{ color: var(--background1-color); }

.background-type2{background: var(--background2-bg-color); color: var(--background2-color);}
.background-type2 *{ color: var(--background2-color); }

.background-type3{background: var(--background3-bg-color); color: var(--background3-color);}
.background-type3 *{ color: var(--background3-color); }

.background-type4{background: var(--background4-bg-color); color: var(--background4-color);}
.background-type4 *{ color: var(--background4-color); }
.background-type5{background: var(--background5-bg-color); color: var(--background5-color);}
.background-type5 *{ color: var(--background5-color); }
.background-type6{background: var(--background6-bg-color); color: var(--background6-color);}
.background-type6 *{ color: var(--background6-color); }
.background-type7{background: var(--background7-bg-color); color: var(--background7-color);}
.background-type7 *{ color: var(--background7-color); }
.background-type8{background: var(--background8-bg-color); color: var(--background8-color);}
.background-type8 *{ color: var(--background8-color); }
.background-type9{background: var(--background9-bg-color); color: var(--background9-color);}
.background-type9 *{ color: var(--background9-color); }
.background-type10{background: var(--background10-bg-color); color: var(--background10-color);}
.background-type10 *{ color: var(--background10-color); }

/* FONDOS */
*[class*="background-image"]{background-size: cover; background-repeat: no-repeat;}
.background-image1{background-image: var(--background-image1-bg-image); color: var(--background-image1-color);}
.background-image1 *{ color: var(--background-image1-color); }

.background-image2{background-image: var(--background-image2-bg-image); color: var(--background-image2-color);}
.background-image2 *{ color: var(--background-image2-color); }
/* ===================================================================
   [IRIDIAN AI LAYER 2026-06-12 — P0.3 Builder] CAPA D'ÀLIES --ia-*
   Interfície ÚNICA de tokens per als mòduls IA (vegeu docs/design/
   iridian_ia_builder_macro_restructure.md §9.3 — regla de no-duplicació).
   GENERADA des de style_options (theme_color); cap token inventat:
   - colors: paleta canònica via iailayer_theme_palette (criteri COMPARTIT
     amb design_palette.php: dc_* override si hex vàlid, sentinella #000000)
   - resta: àlies var() de tokens ja emesos amunt en aquest mateix fitxer.
   Regla: els mòduls IA nous consumeixen NOMÉS --ia-* (mai --main-color-*,
   --bs-*, --ial-c-* ni propietats directes).
   =================================================================== */
:root{
    /* Color */
    --ia-color-primary: #2EA86B;
    --ia-color-dark: #1F2933;
    --ia-color-surface: #F4F4F5;
    --ia-color-surface-soft: #E7E5E4;
    --ia-color-accent: #0E7AB8;
    --ia-color-success: #F5A623;
    /* [P7B.4 2026-07-14] Escala canònica de mòdul completada (rols que faltaven). Derivats a la
       mateixa palette (font única). Buit → fallback = valor d'avui → baseline idèntic sense preset. */
    --ia-color-page: #E7E5E4;
    --ia-color-section: #E7E5E4;
    --ia-color-text: #23272B;
    --ia-color-text-soft: #57534E;
    --ia-color-text-inverted: #F4F4F5;
    --ia-color-border: #D6D3D1;

    /* Tipografia */
    --ia-font-heading: var(--heading-font-family);
    --ia-font-body: var(--general-text-font-family);

    /* Forma */
    --ia-radius-button: var(--button-border-radius);

    /* Espaiat de secció (escala S/M/L d'style_options, la mateixa que les classes pt-s/m/l i pb-s/m/l) */
    --ia-space-s: var(--padding-top-s);
    --ia-space-m: var(--padding-top-m);
    --ia-space-l: var(--padding-top-l);
}

/* =====================================================================
   [IRIDIAN AI LAYER 2026-06-12 — P1.2 Builder] PRESET LAYER v1
   Combinacions amb nom propi sobre els tokens --ia-* (capa per SOTA dels
   overrides del Live Editor: sense !important). Registre canònic =
   iailayer_preset_registry() (panel/ajax/_iridian_ai_layer_helpers.php),
   exposat a ajax/ia_presets.php; el test CLI verifica la sincronia
   classe↔registre. Regla: els presets només consumeixen tokens --ia-*;
   els valors geomètrics propis (radius, ombra) són disseny del preset.
   Els botons mantenen la classe base btn (regla de la casa).
   ===================================================================== */

/* --- Seccions (aplicar a rows/containers) --- */
.ia-section--soft { background-color: var(--ia-color-surface-soft); padding-top: var(--ia-space-m); padding-bottom: var(--ia-space-m); }
.ia-section--contrast {
    background-color: var(--ia-color-primary);
    padding-top: var(--ia-space-m); padding-bottom: var(--ia-space-m);
    /* [F5-FU1 2026-07-14] Redefinició LOCAL de l'escala semàntica dins la banda de contrast: els
       mòduls token-driven segueixen consumint els mateixos tokens i és la SECCIÓ qui en canvia el
       context. Literals derivats en PHP (iailayer_palette_cssvars) amb pol per luminància WCAG del
       primary — evita autoreferències de var() i cobreix presets amb primary clar (dark/cian). */
    --ia-color-text: #1F2933;
    --ia-color-text-soft: #1f2a34;
    --ia-color-accent: #1F2933;
    --ia-color-border: rgba(31,41,51,0.32);
    --ia-color-surface: #5cbb8c;
}
.ia-section--contrast .title, .ia-section--contrast h1, .ia-section--contrast h2, .ia-section--contrast h3,
.ia-section--contrast h4, .ia-section--contrast h5, .ia-section--contrast h6,
.ia-section--contrast p, .ia-section--contrast li { color: var(--ia-color-text); }

/* --- Cards (aplicar a wrappers de targeta) --- */
.ia-card--flat { background-color: var(--ia-color-surface); border: 1px solid var(--ia-color-surface-soft); border-radius: 14px; padding: var(--ia-space-s); }
.ia-card--elevated { background-color: var(--ia-color-surface); border-radius: 14px; box-shadow: 0 10px 28px rgba(0,0,0,.09); padding: var(--ia-space-s); }

/* --- Botons (sempre amb .btn base) --- */
.btn.ia-btn--ghost { background-color: transparent; border: 1px solid var(--ia-color-primary); color: var(--ia-color-primary); }
.btn.ia-btn--ghost:hover { background-color: var(--ia-color-primary); color: var(--ia-color-surface); }
.btn.ia-btn--link { background-color: transparent; border: 0; padding-left: 0; padding-right: 0; color: var(--ia-color-primary); text-decoration: underline; text-underline-offset: 3px; box-shadow: none; }
.btn.ia-btn--link:hover { opacity: .75; }

/* --- [Peça 4 · 2026-06-25] Presets de botó: cascada COLORS-ONLY cap als CTA del bloc (.content-button) ---
   El preset s'escriu al wrapper (blocs.classeElement); aquí arriba al CTA fill marcat .content-button.
   Pilot colors-only: NOMÉS background/color/-webkit-text-fill-color/border + hover. MAI padding/radius/font/geometria.
   Especificitat (0,5,0) [+ :not(.btn) de marge] > Bootstrap a:not(...) (0,3,1) → guanya SENSE !important.
   Exclou .no-style-btn i .btn (els .btn ja entren al sistema de botons del tema). */
.btn-variant-2 .content-button:not(.no-style-btn *):not(.no-style-btn):not(.btn){ background:var(--button-v2-bg-color); color:var(--button-v2-color); -webkit-text-fill-color:var(--button-v2-color); border:var(--button-v2-border-size) var(--button-v2-border-type) var(--button-v2-border-color); }
.btn-variant-2 .content-button:not(.no-style-btn *):not(.no-style-btn):not(.btn):hover,.btn-variant-2 .content-button:not(.no-style-btn *):not(.no-style-btn):not(.btn).active{ background:var(--button-v2-bg-color-hover); color:var(--button-v2-color-hover); -webkit-text-fill-color:var(--button-v2-color-hover); border-color:var(--button-v2-border-color-hover); }
.btn-variant-3 .content-button:not(.no-style-btn *):not(.no-style-btn):not(.btn){ background:var(--button-v3-bg-color); color:var(--button-v3-color); -webkit-text-fill-color:var(--button-v3-color); border:var(--button-v3-border-size) var(--button-v3-border-type) var(--button-v3-border-color); }
.btn-variant-3 .content-button:not(.no-style-btn *):not(.no-style-btn):not(.btn):hover,.btn-variant-3 .content-button:not(.no-style-btn *):not(.no-style-btn):not(.btn).active{ background:var(--button-v3-bg-color-hover); color:var(--button-v3-color-hover); -webkit-text-fill-color:var(--button-v3-color-hover); border-color:var(--button-v3-border-color-hover); }
.btn-variant-4 .content-button:not(.no-style-btn *):not(.no-style-btn):not(.btn){ background:var(--button-v4-bg-color); color:var(--button-v4-color); -webkit-text-fill-color:var(--button-v4-color); border:var(--button-v4-border-size) var(--button-v4-border-type) var(--button-v4-border-color); }
.btn-variant-4 .content-button:not(.no-style-btn *):not(.no-style-btn):not(.btn):hover,.btn-variant-4 .content-button:not(.no-style-btn *):not(.no-style-btn):not(.btn).active{ background:var(--button-v4-bg-color-hover); color:var(--button-v4-color-hover); -webkit-text-fill-color:var(--button-v4-color-hover); border-color:var(--button-v4-border-color-hover); }
.ia-btn--ghost .content-button:not(.no-style-btn *):not(.no-style-btn):not(.btn){ background:transparent; border:1px solid var(--ia-color-primary); color:var(--ia-color-primary); -webkit-text-fill-color:var(--ia-color-primary); }
.ia-btn--ghost .content-button:not(.no-style-btn *):not(.no-style-btn):not(.btn):hover{ background:var(--ia-color-primary); color:var(--ia-color-surface); -webkit-text-fill-color:var(--ia-color-surface); }
.ia-btn--link .content-button:not(.no-style-btn *):not(.no-style-btn):not(.btn){ background:transparent; border:0; color:var(--ia-color-primary); -webkit-text-fill-color:var(--ia-color-primary); text-decoration:underline; text-underline-offset:3px; }
.ia-btn--link .content-button:not(.no-style-btn *):not(.no-style-btn):not(.btn):hover{ opacity:.75; }

/* --- Cards adicionals --- */
.ia-card--strong { background-color: var(--ia-color-surface); border-radius: 14px; box-shadow: 0 20px 50px rgba(0,0,0,.18); padding: var(--ia-space-s); }

/* --- Forma — radius cascada limitada a botons i cards fills del wrapper --- */
.ia-radius--pill .btn, .ia-radius--pill button:not(.no-style-btn):not(.no-style-btn *),
.ia-radius--pill .ia-card--flat, .ia-radius--pill .ia-card--elevated, .ia-radius--pill .ia-card--strong { border-radius: 999px; }
.ia-radius--sharp .btn, .ia-radius--sharp button:not(.no-style-btn):not(.no-style-btn *),
.ia-radius--sharp .ia-card--flat, .ia-radius--sharp .ia-card--elevated, .ia-radius--sharp .ia-card--strong { border-radius: 0; }

/* --- Band colors (fons de secció — sobreescriu preset bg via source order) --- */
.cgv2-band-surface { background-color: var(--ia-color-surface); }
.cgv2-band-soft { background-color: var(--ia-color-surface-soft); }
.cgv2-band-primary { background-color: var(--ia-color-primary); color: var(--ia-color-surface); }
.cgv2-band-accent { background-color: var(--ia-color-accent); }
.cgv2-band-success { background-color: var(--ia-color-success); color: var(--ia-color-surface); }
.cgv2-band-dark { background-color: var(--ia-color-dark); color: var(--ia-color-surface); }
.cgv2-grad-primary { background: linear-gradient(135deg, var(--ia-color-primary), var(--ia-color-dark)); color: var(--ia-color-surface); }
.cgv2-grad-subtle { background: linear-gradient(135deg, var(--ia-color-surface), var(--ia-color-surface-soft)); }
.cgv2-grad-dark { background: linear-gradient(135deg, var(--ia-color-dark), #000); color: var(--ia-color-surface); }
.cgv2-text-light { color: var(--ia-color-surface) !important; }
.cgv2-text-dark { color: var(--ia-color-dark) !important; }