/* -------------------------------- 
----
---- HOME STYLES
----
-------------------------------- */



 

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


}

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



/* -------------------------------- 
----
---- SECTION KPIs
----
-------------------------------- */



.section-kpi {
    --gridTemplate:1fr 1fr;
    --alignItems: start;
    --gridGap:200px;
    --kpiHeight: 170px;
    position: relative;
    overflow: clip;
    background-color:var(--wp--preset--color--light);
}


.section-kpi-img {
  position: absolute;
  inset:0 0 0 50%;
  background: var(--wp--preset--color--lightgrey);
  z-index: 1;
} 

.section-kpi-img img {
  filter: grayscale(1);
  mix-blend-mode: overlay;
}


.section-kpi :not(.section-kpi-img) {
  z-index: 2;
}

 

.kpis-wrapper {
  
  display: grid;
  grid-template-columns: var(--gridTemplate);
  gap: var(--gridGap);
}

.kpis-column {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--l);
 }

.kpis-column .line {
  width: 100%;
  border-top:2px solid var(--wp--preset--color--accent);
}

.kpis-column-lines,
.kpis-column-end {
/*  justify-content: space-around;*/
 }


.kpi-item {
  font-family: var(--wp--preset--font-family--body);
  display: flex;
  flex-direction: column;
  align-items: var(--alignItems);
  text-align:  var(--alignItems);
  justify-content: flex-end;
  min-height: var(--kpiHeight);
  position: relative;
}
 
.kpi-item-big      { 
  --alignItems: end;
} 
 

.kpi-item .reveal-type {
  display: flex;
  align-items: baseline;
  position: relative;
  z-index: 2;
}

.kpi-number {
  font-size: var(--wp--preset--font-size--large);
  color: var(--wp--preset--color--contrast);
  display: block;
  font-weight:200;
  letter-spacing:-2px 
}

.kpi-small {
  text-transform: uppercase;
  font-size: var(--wp--preset--font-size--s);
  padding-left: var(--wp--preset--spacing--xxs);
  color:var(--wp--preset--color--contrast);
  font-weight: 300;
}

.kpi-title {
  opacity: .85;
  color:var(--wp--preset--color--medium);
  text-transform: uppercase;
}
 

 
.kpi-item-big .kpi-number { font-size:var(--text-huge);  }
.kpi-item-big .kpi-small  { font-size:var(--wp--preset--font-size--h-3);}
.kpi-item-big .kpi-title  {  }


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

  .section-kpi       { 
    --gridGap:   120px;
    --kpiHeight: 150px;
     }

}

@media only screen and (max-width: 620px) {
 
  .section-kpi       { --gridTemplate:1fr; --gridGap:var(--wp--preset--spacing--l); --kpiHeight: auto; }
  .kpi-item          { --alignItems: center; }
  .kpis-column-lines { display:none; }
  .section-kpi-img   { inset: 0; top: calc(50% + var(--wp--preset--spacing--xl));}

} 




/* -------------------------------- 
----
---- HOME STYLES
----
-------------------------------- */
.section-manifiesto {
  position: relative;
}

.section-manifiesto > :not(img) {
  position: relative;
  z-index: 2;
}
.section-manifiesto > .move-element {
  --height:80%;
  height: var(--height);
  position: absolute;
  opacity: .05;
  inset:calc( (100% - var(--height)) / 2) 40px auto auto;
  pointer-events: none;
}

 

.video-modal {
  border-radius: 0;
  background: blue;
  overflow: hidden;
}

.video-modal {
  position:relative;
  background:var(--wp--preset--color--contrast);
  display: block;
  color:var(--wp--preset--color--contrast);
   
}


.magnetic {
    position: absolute;
    inset: 50px;
    display: grid;
    place-content: center;
    z-index: 10;
    pointer-events:none;
}




.video-modal .circle {
  --size:90px;
 
  width:  var(--size);
  height: var(--size);
  border-radius: 100vmin;
  background: white;
  display:grid;
  place-content:center;
}

 

.video-modal:hover .circle {
  box-shadow: 0 0 40px 0 rgb(255 255 255 / 1);
} 
 

html.is-open {
  overflow: hidden;
}

html.is-open .main {
  position:relative;
  z-index: 21;
}

/*.is-style-square {
  border-radius: var(--cardRadius);
  width:  100%;
  cursor: pointer;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  z-index: 9;
  position: relative;
  will-change: transform;
  display: grid;
  place-items: center;
}

.is-style-square.full-screen {
  border-radius: 0px;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  box-shadow:none;
  z-index: 80;
}

.is-style-square.full-screen:before {
  content: '';
  display: block;
  background:rgb(0 12 74 / .7);
  width: 100%;
  height: 100%;
  position: absolute;
}

.is-style-square video {
  object-fit: cover;
  width: 100%;
  aspect-ratio: 16/9;
  will-change: transform;
} 
.is-style-square.full-screen video {
  width: 85vw;
  position: relative;
  z-index: 22;
}*/


/* -------------------------------- 
----
---- SECTION PLATFORMS
----
-------------------------------- */

.card-platform {
  --backColor:  var(--wp--preset--color--contrast);
  --backAfter:  var(--wp--preset--color--medium);
  --translate:  10px;
  --translateN: calc(var(--translate) * -1);

  --backColor:  var(--wp--preset--color--lightgrey);
  --backAfter:  var(--wp--preset--color--lightgrey);
  --translate:  0;

  border-radius: var(--cardRadius);
  display: grid;
  place-content: center;
  height: 400px;
  position: relative;
  overflow: clip;

/*border:4px solid black;*/

} 

.card-platform::after {
  content:'';
  position: absolute;
  border-radius: var(--cardRadius);
  inset:0;
  background-color: var(--backAfter);
/*  z-index: -1;*/
  transition: all 350ms;
}

.card-logo { position:relative; z-index:2; display:block; }

.card-fondo {
  transition: all 350ms;
  position: absolute;
  inset:0;
  border-radius: var(--cardRadius);
  background-color: var(--backColor);
  z-index: 1;
}

.card-fondo img {
  object-fit: cover;
  height: 100%;
  width: 100%;
  mix-blend-mode: multiply;
  filter: saturate(1.2) brightness(.75);
  opacity: 1;
  border-radius: var(--cardRadius);
  transition: all 350ms;
}

.card-platform:hover {
  box-shadow: var(--shadow-5);
}

.card-platform:hover .card-fondo img {
  transform: scale(1.1);
/*  filter: grayscale(0);*/
filter: saturate(1.2) brightness(.45);
}

.card-flipco { 
/*  --backColor:#ECAFC5; */
/*  --backAfter:#1C5940;*/
}

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


/* -------------------------------- 
----
---- SECTION ESG
----
-------------------------------- */


.section-esg,
.section-soste {
  position: relative; 
/*  min-height: 150vh; */
  display: flex; 
  flex-direction: column; 
  justify-content: space-between;
  overflow: hidden;
  position: relative;

  background: var(--wp--preset--color--contrast);
}

.section-soste {
  padding-block: var(--wp--preset--spacing--xl);
  margin-block:  var(--wp--preset--spacing--large);
  border-radius: var(--cardRadius);
} 

.section-soste img {
  mask-image: linear-gradient(-90deg, rgb(0 0 0 / 100%), transparent);
}

.section-sostelight {
  padding-block: var(--wp--preset--spacing--large);
  background: var(--wp--preset--color--light);
  border:1px solid var(--wp--preset--color--lightgrey);
  border-radius: 0;
}

.section-sostelight img {
  mask-image: linear-gradient(-90deg, rgb(0 0 0 / 100%) 0%, rgb(0 0 0 / .4) 20%, transparent 70%);
/*  mix-blend-mode: multiply;*/
  filter: saturate(1.5);
/*  opacity: .35;*/
}

/*.section-sostelight::after {
  content: '';
  position: absolute;
  inset: 0 0 50% 0;
  background: linear-gradient(180deg, white, transparent);
  z-index: 1;
}*/

.section-esg::before,
.section-esg::after {
  content: '';
  position: absolute;
  inset: 0 0 50% 0;
  background: linear-gradient(-90deg, white, transparent);
  z-index: 1;
}

 

.section-esg img,
.section-soste img {
    position: absolute;
    inset: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
/*    mix-blend-mode: multiply;*/
/*    filter: grayscale(1);*/
    z-index: 0;
/*    mask-image: linear-gradient(0deg, rgb(0 0 0 / 100%), transparent);*/
}

.section-esg :not(img),
.section-soste :not(img) {
    position: relative;
    z-index: 3;
}


.move-image {
  position: relative;
  display: grid;
  overflow: hidden;
}



.move-image > * {
  grid-column: 1/-1;
  grid-row:1/-1;
}

.move-image > *:last-child {
transform: translateY(160px);
}

/* BASE PARA ESG01 */
/*.move-image {
  position: absolute !important;
    z-index: 12;
    inset: 0;
    border: 4px solid red;
    z-index: 0 !important;
    mix-blend-mode: multiply;
}

.move-image > *:last-child {
  transform: translateY(200px);
}
*/

.section-esg img {
    mix-blend-mode: normal;
    filter: brightness(.5);
 
 }

.section-esg .imagemove {
  transform: translateY(160px);
  mix-blend-mode: unset; 
  filter: grayscale(0); 
  pointer-events: none;
  z-index: 3;
}