.composer{ 
   width:100%; 
   box-sizing:border-box; 
   --composer-container: 1250px;
}
.composer img{ 
   max-width:100%; 
}

.composer * {
   box-sizing:border-box; 
   font-weight:var(--font-weight);	
   border-radius:var(--border-radius);
   font-size:calc(var(--font-size) * var(--font-base));
}

/* LINIA */
.composer .c_linia{
   position:relative;
   display:flex;
   flex-direction:column;
   background-size:cover;
   background-position:center center;
   background-repeat:no-repeat;
   align-items:center;
}
.composer .c_linia.valign_top    { justify-content:flex-start; }
.composer .c_linia.valign_center { justify-content:center; }
.composer .c_linia.valign_bottom { justify-content:flex-end; }
.composer .c_linia.valign_top    .column { align-self:flex-start; }
.composer .c_linia.valign_center .column { align-self:center; }
.composer .c_linia.valign_bottom .column { align-self:flex-end; }


/* BLOC */
.composer .blocs_container{
   display:grid;
   grid-template-columns:repeat(12, 1fr);
   width:100%;
   gap: var(--gapy) var(--gap);
   align-items:stretch;
}
.composer .c_linia.container_boxed > .blocs_container{ 
   max-width: var(--container-width, 1250px);
   width: 100%;
   margin-inline:auto; 
}
.composer .c_linia.container_full  > .blocs_container{ 
   max-width:100vw; 
}

.composer .c_linia { container-type: inline-size; }

.composer .c_linia.container_boxed .column.toright_1 {
    margin-right: calc(-1 * max(0px, (100cqw - var(--composer-container)) / 2));
}
.composer .c_linia.container_boxed .column.toleft_1 {
    margin-left: calc(-1 * max(0px, (100cqw - var(--composer-container)) / 2));
}

/* COLUMNA */
.composer .column{
   display:flex;
   flex-direction:column;
   min-width:0;    
   background-size:cover;
   background-position:center center;
   background-repeat:no-repeat;
}
.composer .column.halign_left    { align-items:flex-start; text-align:left; }
.composer .column.halign_center  { align-items:center;     text-align:center; }
.composer .column.halign_right   { align-items:flex-end;   text-align:right; }
.composer .column.valign_top     { justify-content:flex-start; }
.composer .column.valign_center  { justify-content:center; }
.composer .column.valign_bottom  { justify-content:flex-end; }

.composer .column-1{ grid-column:span 1; }
.composer .column-2{ grid-column:span 2; }
.composer .column-3{ grid-column:span 3; }
.composer .column-4{ grid-column:span 4; }
.composer .column-5{ grid-column:span 5; }
.composer .column-6{ grid-column:span 6; }
.composer .column-7{ grid-column:span 7; }
.composer .column-8{ grid-column:span 8; }
.composer .column-9{ grid-column:span 9; }
.composer .column-10{ grid-column:span 10; }
.composer .column-11{ grid-column:span 11; }
.composer .column-12{ grid-column:span 12; }

.composer .gap_0 	{ --gap:0px; }
.composer .gap_5 	{ --gap:calc( 5 * var(--gap-base) ); }
.composer .gap_10 { --gap:calc( 10 * var(--gap-base) ); }
.composer .gap_15 { --gap:calc( 15 * var(--gap-base) ); }
.composer .gap_20 { --gap:calc( 20 * var(--gap-base) ); }
.composer .gap_25 { --gap:calc( 25 * var(--gap-base) ); }
.composer .gap_30 { --gap:calc( 30 * var(--gap-base) ); }
.composer .gap_35 { --gap:calc( 35 * var(--gap-base) ); }
.composer .gap_40 { --gap:calc( 40 * var(--gap-base) ); }
.composer .gap_45 { --gap:calc( 45 * var(--gap-base) ); }
.composer .gap_50 { --gap:calc( 50 * var(--gap-base) ); }
.composer .gap_55 { --gap:calc( 55 * var(--gap-base) ); }
.composer .gap_60 { --gap:calc( 60 * var(--gap-base) ); }
.composer .gap_65 { --gap:calc( 65 * var(--gap-base) ); }
.composer .gap_70 { --gap:calc( 70 * var(--gap-base) ); }
.composer .gap_75 { --gap:calc( 75 * var(--gap-base) ); }
.composer .gap_80 { --gap:calc( 80 * var(--gap-base) ); }
.composer .gap_85 { --gap:calc( 85 * var(--gap-base) ); }
.composer .gap_90 { --gap:calc( 90 * var(--gap-base) ); }
.composer .gap_95 { --gap:calc( 95 * var(--gap-base) ); }
.composer .gap_100 {--gap:calc( 100 * var(--gap-base) ); }
.composer .gapy_0  { --gapy:0px; }
.composer .gapy_5  { --gapy:calc( 5 * var(--gap-base) ); }
.composer .gapy_10 { --gapy:calc( 10 * var(--gap-base) ); }
.composer .gapy_15 { --gapy:calc( 15 * var(--gap-base) ); }
.composer .gapy_20 { --gapy:calc( 20 * var(--gap-base) ); }
.composer .gapy_25 { --gapy:calc( 25 * var(--gap-base) ); }
.composer .gapy_30 { --gapy:calc( 30 * var(--gap-base) ); }
.composer .gapy_35 { --gapy:calc( 35 * var(--gap-base) ); }
.composer .gapy_40 { --gapy:calc( 40 * var(--gap-base) ); }
.composer .gapy_45 { --gapy:calc( 45 * var(--gap-base) ); }
.composer .gapy_50 { --gapy:calc( 50 * var(--gap-base) ); }
.composer .gapy_55 { --gapy:calc( 55 * var(--gap-base) ); }
.composer .gapy_60 { --gapy:calc( 60 * var(--gap-base) ); }
.composer .gapy_65 { --gapy:calc( 65 * var(--gap-base) ); }
.composer .gapy_70 { --gapy:calc( 70 * var(--gap-base) ); }
.composer .gapy_75 { --gapy:calc( 75 * var(--gap-base) ); }
.composer .gapy_80 { --gapy:calc( 80 * var(--gap-base) ); }
.composer .gapy_85 { --gapy:calc( 85 * var(--gap-base) ); }
.composer .gapy_90 { --gapy:calc( 90 * var(--gap-base) ); }
.composer .gapy_95 { --gapy:calc( 95 * var(--gap-base) ); }
.composer .gapy_100 {--gapy:calc( 100 * var(--gap-base) ); }


/* ---- TITOL ---- */
.composer .titol{
   width:100%;   
   margin:0;
   font-size:calc(var(--font-size, 24) * 1px);
   font-weight:var(--font-weight, 600);
   line-height: clamp(1.1, calc(1.6 - ((var(--font-size) - 12) / 116)), 1.6);
}
.composer .titol.sub_1{ font-weight:var(--font-weight, 400); opacity:.75; }
.composer .titol.h_align_left{   text-align:left; }
.composer .titol.h_align_center{ text-align:center; }
.composer .titol.h_align_right{  text-align:right; }

/* ---- TEXT ---- */
.composer .text{
   width:100%;
   font-size:calc(var(--font-size, 14) * 1px);
   line-height:1.6;
}
.composer .text > :first-child{ margin-top:0; }
.composer .text > :last-child{ margin-bottom:0; }
.composer .text.cols_1{ column-count:1; }
.composer .text.cols_2{ column-count:2; column-gap:2rem; }
.composer .text.cols_3{ column-count:3; column-gap:2rem; }
.composer .text.cols_4{ column-count:4; column-gap:2rem; }
.composer .text.cols_5{ column-count:5; column-gap:2rem; }
.composer .text.cols_6{ column-count:6; column-gap:2rem; }

/* ---- FOTO ---- */
.composer .foto{
   display:block;
   overflow:hidden;
   width:100%;
   line-height:0;
   border-radius:var(--border-radius, 0);
}
.composer .foto span{   
   display:block; 
   line-height:1.4; 
   font-size:.85rem; 
   text-align:right;
   opacity:.75; 
   margin-top:.5rem;
}
.composer a:has(> .foto){ display:block; }

/* ---- BOTÓ ---- */
.composer .boto{

   text-decoration:none;
   --font-weight:500;
   --font-size:14;
   width:auto;
   width: fit-content;
   display:grid;
   flex-direction:center;
   align-items:center;
   gap:5px;
   padding:0 20px;
   height:42px;
   align-items:center;
   justify-content:center;
   background-color: var(--button-bgcolor);
   border:0px solid #000;
   margin-top:5px;
}
.composer .boto:hover {
   background-color: color-mix(in srgb, var(--button-bgcolor) 90%, black);
}
.composer .boto.size_xs {
   --font-size:12;
   padding:0 12px;
   height:32px;
}
.composer .boto.size_s {
   --font-size:13;
   padding:0 15px;
   height:36px;
}
.composer .boto.size_l {
   --font-size:15;
   padding:0 22px;
   height:45px;	
}
.composer .boto.size_xl {
   --font-size:16;
   padding:0 26px;
   height:52px;
}

.composer .boto.width_full{ display:flex; width:100%; }


.composer .boto.border_0{ border-width:0; }
.composer .boto.border_1{ border-style:solid; border-width:1px; }
.composer .boto.border_2{ border-style:solid; border-width:2px; }
.composer .boto.border_3{ border-style:solid; border-width:3px; }
.composer .boto.border_4{ border-style:solid; border-width:4px; }
.composer .boto.border_5{ border-style:solid; border-width:5px; }
.composer .boto.border_6{ border-style:solid; border-width:6px; }
.composer .boto.border_7{ border-style:solid; border-width:7px; }
.composer .boto.border_8{ border-style:solid; border-width:8px; }
.composer .boto.border_9{ border-style:solid; border-width:9px; }
.composer .boto.border_10{ border-style:solid; border-width:10px; }

/* ---- VÍDEO (youtube) ---- */
.composer .ytb_wrap{ width:100%; }
.composer .ytb_wrap figure{ margin:0; }
.composer .ytb{
   display:block;
   width:100%;
   aspect-ratio:16 / 9;
   border:0;
   border-radius:var(--border-radius, 0);
}

.composer .ytb_wrap.ratio_1 .ytb{   aspect-ratio:1 / 1; }
.composer .ytb_wrap.ratio_43 .ytb{  aspect-ratio:4 / 3; }
.composer .ytb_wrap.ratio_32 .ytb{  aspect-ratio:3 / 2; }
.composer .ytb_wrap.ratio_169 .ytb{ aspect-ratio:16 / 9; }
.composer .ytb_wrap[style*="height:"] .ytb{ height:100%; aspect-ratio:auto; }

/* ---- CODI / SHORTCODE ---- */
.composer .precontent.code{
   display:block; width:100%; overflow:auto;
   background:#f5f5f5; border-radius:6px; padding:1rem; margin:0;
}
.composer .precontent.code code{
   font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
   white-space:pre-wrap; word-break:break-word;
}

/* ---- FORMULARI ---- */
.composer .form_preview_container{ width:100%; }
.composer .form_preview_container .form-group{ margin-bottom:1rem; }
.composer .form_preview_container input,
.composer .form_preview_container select,
.composer .form_preview_container textarea{ width:100%; }

/* ---- SLIDER (Swiper) ---- */
.composer .slider_wrap{ width:100%; }
.composer .slider_wrap .swiper{ width:100%; }
.composer .swiper-slide.photo picture,
.composer .swiper-slide.photo img{ display:block; width:100%; height:100%; object-fit:cover; }


@media (max-width:991px){
   .composer .column{ grid-column:span 12; }
   .composer .column-m-1{ grid-column:span 1; }
   .composer .column-m-2{ grid-column:span 2; }
   .composer .column-m-3{ grid-column:span 3; }
   .composer .column-m-4{ grid-column:span 4; }
   .composer .column-m-5{ grid-column:span 5; }
   .composer .column-m-6{ grid-column:span 6; }
   .composer .column-m-7{ grid-column:span 7; }
   .composer .column-m-8{ grid-column:span 8; }
   .composer .column-m-9{ grid-column:span 9; }
   .composer .column-m-10{ grid-column:span 10; }
   .composer .column-m-11{ grid-column:span 11; }
   .composer .column-m-12{ grid-column:span 12; }
   .composer .c_linia.container_boxed > .blocs_container{ padding-inline:16px; }
   .composer .hide_mobile_1{ display:none !important; }
   .composer .c_linia {
      padding:30px 0;
   }
}

@media (min-width:992px){
   .composer .hide_desktop_1{ display:none !important; }
}