/****************************
****
**** LAYOUT COMPLETAMENTE NUEVO
****
****************************/

body {
  --gap:var(--wp--preset--spacing--s);

  --fr01: 1;
  --fr02: 2;
  --fr03: 3;
  --fr04: 4;
  --fr05: 5;
  --fr06: 6;
  --fr07: 7;
  --fr08: 8;
  --fr09: 9;
  --fr10: 10;
  --fr11: 11;
  --fr12: 12;

  --col01: (100%/12) * var(--fr01);
  --col02: (100%/12) * var(--fr02);
  --col03: (100%/12) * var(--fr03);
  --col04: (100%/12) * var(--fr04);
  --col05: (100%/12) * var(--fr05);
  --col06: (100%/12) * var(--fr06);
  --col07: (100%/12) * var(--fr07);
  --col08: (100%/12) * var(--fr08);
  --col09: (100%/12) * var(--fr09);
  --col10: (100%/12) * var(--fr10);
  --col11: (100%/12) * var(--fr11);
  --col12: (100%/12) * var(--fr12);
}

.block,
.wp-block-group,
.wp-block-columns,
.content,
.contentgrid,
.contentflex {
  --width:        var(--wp--style--global--content-size);
  position:       relative;
  width:          var(--width);
  margin-inline:  auto;
 
} 

.wp-block-acf-layout > * {
  --width:100%;
 
}

.wp-admin .wp-block-acf-layout > * {
  --width: var(--wp--style--global--content-size);
}


:root :where(.is-layout-flow) > *        { width:100% }
:root :where(.is-layout-constrained) > * {  } 

.alignwide > * { --width: var(--wp--style--global--wide-size); }
[class*="wp-block-"].alignwide > * { width:100%; }
 

.wp-admin .alignwide .wp-block-acf-layout > *  {
  --width: var(--wp--style--global--wide-size);
}

.is-layout-flow > .wp-block-acf-layout {
  max-width:var(--wp--style--global--wide-size);
  margin-inline: auto;  
}

.alignfull .is-layout-flow > .wp-block-acf-layout { 
  max-width:var(--wp--style--global--content-size); 
}


.maincontent > *:not(.wp-block-group, .alignwide, .alignfull ) {
  --width:        var(--wp--style--global--content-size);
  position:       relative;
  width:          var(--width);
  margin-inline:  auto;
/*  border:1px solid red;*/
}

.wp-block-cover.alignwide .is-layout-constrained > .wp-block-acf-layout {
/*  border:2px solid red;*/
  max-width: var(--width);
}


.flex,
.contentgrid,
.contentflex {
  gap:            var(--gap);
  align-items:    flex-start;
}
 
[class*="item-"] > .contentgrid, 
[class*="item-"] > .contentflex,
[class*="item-"] > .block,
[class*="item-"] > div  { 
  --width: 100%; 
}

.wp-block-group > .wp-block-group {
  width: 100%;
} 


.contentgrid {
  --gridTemplate:repeat(12, 1fr);
  display: grid;
  grid-template-columns: var(--gridTemplate);
} 

.flex,
.contentflex {
  display: flex;
  flex-wrap: wrap;
} 

.alignfull { width: 100%; }
.alignwide { width: var(--wp--style--global--wide-size); margin-inline:auto; } 

.contentgrid .item-1  { grid-column:span var(--fr01); }
.contentgrid .item-2  { grid-column:span var(--fr02); }
.contentgrid .item-3  { grid-column:span var(--fr03); }
.contentgrid .item-4  { grid-column:span var(--fr04); }
.contentgrid .item-5  { grid-column:span var(--fr05); }
.contentgrid .item-6  { grid-column:span var(--fr06); }
.contentgrid .item-7  { grid-column:span var(--fr07); }
.contentgrid .item-8  { grid-column:span var(--fr08); }
.contentgrid .item-9  { grid-column:span var(--fr09); }
.contentgrid .item-10 { grid-column:span var(--fr10); }
.contentgrid .item-11 { grid-column:span var(--fr11); }
.contentgrid .item-12 { grid-column:span var(--fr12); }


.flex > [class*="item-"],
.contentflex > [class*="item-"] { flex: auto }

.contentflex .item-1  { max-width: calc(var(--col01) - (var(--gap)/2)) }
.contentflex .item-2  { max-width: calc(var(--col02) - (var(--gap)/2)) }
.contentflex .item-3  { max-width: calc(var(--col03) - (var(--gap)/2)) }
.contentflex .item-4  { max-width: calc(var(--col04) - (var(--gap)/2)) }
.contentflex .item-5  { max-width: calc(var(--col05) - (var(--gap)/2)) }
.contentflex .item-6  { max-width: calc(var(--col06) - (var(--gap)/2)) }
.contentflex .item-7  { max-width: calc(var(--col07) - (var(--gap)/2)) }
.contentflex .item-8  { max-width: calc(var(--col08) - (var(--gap)/2)) }
.contentflex .item-9  { max-width: calc(var(--col09) - (var(--gap)/2)) }
.contentflex .item-10 { max-width: calc(var(--col10) - (var(--gap)/2)) }
.contentflex .item-11 { max-width: calc(var(--col11) - (var(--gap)/2)) }
.contentflex .item-12 { max-width: var(--col12) }

.flex .item-1  { max-width: calc(var(--col01) - (var(--gap)/2)) }
.flex .item-2  { max-width: calc(var(--col02) - (var(--gap)/2)) }
.flex .item-3  { max-width: calc(var(--col03) - (var(--gap)/2)) }
.flex .item-4  { max-width: calc(var(--col04) - (var(--gap)/2)) }
.flex .item-5  { max-width: calc(var(--col05) - (var(--gap)/2)) }
.flex .item-6  { max-width: calc(var(--col06) - (var(--gap)/2)) }
.flex .item-7  { max-width: calc(var(--col07) - (var(--gap)/2)) }
.flex .item-8  { max-width: calc(var(--col08) - (var(--gap)/2)) }
.flex .item-9  { max-width: calc(var(--col09) - (var(--gap)/2)) }
.flex .item-10 { max-width: calc(var(--col10) - (var(--gap)/2)) }
.flex .item-11 { max-width: calc(var(--col11) - (var(--gap)/2)) }

.contentgrid > [class*="item-"] { max-width:unset }

.contentgrid .item-end { grid-column-end:-1;}
.contentflex .item-end { margin-left:auto;}

.gridrow-1       { grid-row:var(--fr01) }
.gridrow-2       { grid-row:var(--fr02) }
.gridrow-3       { grid-row:var(--fr03) }
.gridrow-4       { grid-row:var(--fr04) }
.gridrow-5       { grid-row:var(--fr05) }

.align-start     { align-items: start; }
.align-end       { align-items: end; }
.align-center    { align-items: center; }
.align-strech    { align-items: stretch; }

.justify-start   { justify-content: flex-start; }
.justify-end     { justify-content: flex-end; }
.justify-center  { justify-content: center; }
.justify-between { justify-content: space-between; }

.grid            { display: grid }

.gap-none        { gap:0; }
.gap-xs          { gap:var(--space-xs); }
.gap-s           { gap:var(--space-s); }
.gap-m           { gap:var(--space-m); }
.gap-l           { gap:var(--space-l); }
.gap-xl          { gap:var(--space-xl); }

.flexcol      { flex-direction:column; }
.flexcol-rev  { flex-direction:column-reverse; }  
.flexrow      { flex-direction:row; }
.flexrow-rev  { flex-direction:row-reverse; }  

 
@media only screen and (max-width: 820px) {
 
  .contentgrid { --gridTemplate:repeat(1, 1fr); } 

  .contentgrid > [class*="item-"] { grid-column: var(--fr01); }
  .contentflex > [class*="item-"] { max-width:100%; width:100% }
  .flex > [class*="item-"]        { max-width:100%; width:100% }
  .flex,
  .contentflex                           { flex-wrap: wrap;}

}
 
/* Hacer que el contenido funcione bien con el bloque cover por defecto */
.wp-block-cover { padding-inline:0; }
 
.block { 
  display: grid;
  --number:4;
  grid-template-columns: repeat(var(--number), 1fr)
} 

.block-l-6 { --number:var(--fr06); }
.block-l-5 { --number:var(--fr05); }
.block-l-4 { --number:var(--fr04); }
.block-l-3 { --number:var(--fr03); }
.block-l-2 { --number:var(--fr02); }

@media only screen and (max-width: 980px) {
.block-m-6 { --number:var(--fr06); }
.block-m-5 { --number:var(--fr05); }
.block-m-4 { --number:var(--fr04); }
.block-m-3 { --number:var(--fr03); }
.block-m-2 { --number:var(--fr02); }
.block-m-1 { --number:var(--fr01); }
}
@media only screen and (max-width: 690px) {
.block-s-6 { --number:var(--fr06); }
.block-s-5 { --number:var(--fr05); }
.block-s-4 { --number:var(--fr04); }
.block-s-3 { --number:var(--fr03); }
.block-s-2 { --number:var(--fr02); }
.block-s-1 { --number:var(--fr01); }
}

.sticky-desktop {
  --header:100px;
  --top:calc(var(--header) * 2);
  position: sticky;
  top:var(--top);
}

.reverse-desktop { flex-direction: row-reverse; justify-content: space-between; }

/*.row-normal,   
.row-reverse  { justify-content: space-between; }*/
.row-reverse  { flex-direction: row-reverse; }

@media only screen and (max-width:820px) {

.sticky-desktop  { --top:0!important; position: relative; }
.row-reverse,
.reverse-desktop { flex-direction: row; }

}



/** HACER EL CAMBIO A UNA COLUMNA A 820 PX **/

@media (max-width: 820px) {
    .wp-block-columns:not(.is-not-stacked-on-mobile) {
      flex-wrap: wrap!important;
    }
    .wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column {
        flex-basis: 100% !important;
    }
}

@media only screen and (max-width:680px) {
  .mobile-full {
    grid-template-columns: 1fr!important;
  }
  .mobile-full .wp-block-group {
    text-align: center;
    align-items: center;
    justify-content: center;
    min-height: auto !important;
  }
}