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

body {
  --container: min(var(--wp--style--global--content-size), calc( 100% - var(--gap)) );
  --maingap: 12vw;
  --gap:var(--wp--preset--spacing--xs);

  --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-cover,
.wp-block-group,
.wp-block-columns,
.content,
.contentgrid,
.contentflex {
 

/*  border:2px solid green;*/
} 
.content,
.contentgrid,
.contentflex {
/*  border:2px solid green;*/
  width: var(--normal);
  margin-inline:auto;
}  

.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%;
} 

.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) 
{ 
  --wp--style--global--content-size: 100%; 
}
*/
.contentgrid {
  --gridTemplate:repeat(12, 1fr);
  display: grid;
  grid-template-columns: var(--gridTemplate);
} 

.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); }


.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-xxs         { gap:var(--wp--preset--spacing--xxs); }
.gap-xs          { gap:var(--wp--preset--spacing--xs); }
.gap-s           { gap:var(--wp--preset--spacing--s); }
.gap-m           { gap:var(--wp--preset--spacing--m); }
.gap-l           { gap:var(--wp--preset--spacing--l); }
.gap-xl          { gap:var(--wp--preset--spacing--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); } 

  :not(.boda-single) > .contentgrid > [class*="item-"] { grid-column: var(--fr01); }
  :not(.boda-single) > .contentflex > [class*="item-"] { max-width:100% }
  .flex > [class*="item-"] { max-width:100% }
  .flex {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); }
}


.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) {

.row-reverse,
.reverse-desktop { flex-direction: row; }

}

/*.wp-block-image .aligncenter, 
.wp-block-image .alignleft, 
.wp-block-image .alignright, 
.wp-block-image.aligncenter, 
.wp-block-image.alignleft, 
.wp-block-image.alignright {
    display: inherit; 
}
.wp-block-image.alignright { text-align: right; }*/


 

/*figcaption {
    background:none; 
    color: hsl(var(--dark)); 
    font-family: var(--font-body);
    font-size: var(--text-xs);
    margin-top: var(--space-xxxs);
    margin-bottom: 0; 
    overflow: unset; 
    padding: 0; 
    position: relative; 
    text-align: left; 
}

.is-style-contentfull .wp-block-image figcaption,
.is-style-contentfull .wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
  padding-inline:var(--space-xs);
}

.is-shadow-s > * {
  box-shadow: var(--shadow-s)
}*/
 