/*
Theme Name: ARGIS LIVING V2 | 1.0
Theme URI: http://davidboyero.com
Description: Custom Theme
Version: 2.0
Author: David Boyero Serrano
Tags: custom, personalizado
*/


/*.wp-block-column {
  border:2px solid red;
}*/

/*.wp-block-cover {
  border:2px solid hotpink;
}
*/
 

.blogimg {
  position: absolute;
  inset: 0;
  object-fit: cover;
  height: 100%;
  width: 100%;
  z-index: 0;
}

.location-map {
  margin-inline: auto;
  position: relative;
  overflow: clip;
  z-index: 4;
} 

.maptext {
  position: absolute;
  padding: 8px;
  font-size: var(--wp--preset--font-size--xxs);
  pointer-events: none;
  z-index: 10;
}

.location-map.align {
  max-width: var(--normal);
  width: 100%;
}

#map {
/*  min-height: 500px;*/
  height: 100%;
  width:  100%;
  position: absolute;
  inset:0;
}

body.home .location-map {
  height: 700px;
}

.mapboxgl-popup-content .chip { padding:5px; font-style:normal; }
.mapboxgl-popup-content p     { line-height:1.2 }
.custom-marker                { cursor: pointer; }

.map-popup {
  font-family: var(--wp--preset--font-family--header);
}
.popup-title {
  font-weight: 500;
  color:var(--wp--preset--color--contrast);
  font-size: var(--wp--preset--font-size--p);
  text-transform: uppercase;
}

.mapboxgl-popup-close-button { padding:var(--wp--preset--spacing--xs) }


  .mapactive {
      --card:360px;
      position: relative;
      display: grid;
      grid-template-columns: var(--card) 1fr;
      gap:var(--wp--preset--spacing--m);
  }

  .mapactive .location-map {
      position: sticky;
      top: var(--mainTop);
      width: 100%;
      height: calc(100vh - (var(--mainTop) * 2) );
      border-radius:12px;
      border:2px solid var(--wp--preset--color--grey);
  }

  .mapactive .promotions-grid {
      --grid:1fr;
      gap:0;

  }

  .mapactive .building-cardimage:not(.active)        { 
      transform: scale(.9);
      filter: brightness(.75);
      opacity: .5;
      transition: all 500ms ease;
  }

    
 

.wideheader,
.singlewhite  {
  --height:    100vh;
  --secHeight: calc(var(--height) - (var(--mainTop)*2) );
  --back:var(--wp--preset--color--contrast);
  max-width: var(--wp--style--global--wide-size);
  margin-inline:auto;

  margin-top:var(--mainTop);
  overflow: clip;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: relative;
  height: var(--secHeight);
  border-radius:var(--radiusBase);
  background:var(--back)
}

.home .wideheader {
  --secHeight:auto;
/*  border:4px solid red;*/
}

.wideheader > *:not(video, img) {
  z-index: 2;
}

.singlewhite  {
  --height:    70vh;
  --secHeight: calc(var(--height) - (var(--mainTop)*2) );
  --back:var(--wp--preset--color--lightgrey);
  height: var(--secHeight);
  border-radius:var(--radiusBase);
 
}

 
.wideheader > img,
.wideheader > video {
  position: sticky;
  position: absolute;
  inset:0;
  object-fit: cover;
  height: 100%;
  width:  100%;
  filter: brightness(0.55);
  -webkit-mask: linear-gradient(180deg, rgb(0 0 0 / .85) 20%, rgb(0 0 0 / .55) 100%);
  pointer-events: none;
}  



/********************************/

.section-media  {
  --secHeight: auto;
  --secHeight: 75vh;
  --paddBottom:var(--wp--preset--spacing--xxl);
  --back:var(--wp--preset--color--contrast);
  overflow: clip;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: relative;
  height: var(--secHeight);
  background:var(--back)
/*  padding-bottom: var(--paddBottom);*/
}

.section-media > *:not(video, img) {
  z-index: 2;
}
 
.section-media img {
  position: sticky;
  position: absolute;
  inset:0;
  object-fit: cover;
  height: 100%;
  width:  100%;
  filter: brightness(0.55);
  -webkit-mask: linear-gradient(180deg, rgb(0 0 0 / .85) 20%, rgb(0 0 0 / .55) 100%);
}  


.page-legales {
  padding-top:var(--mainTop);
  margin-bottom: var(--wp--preset--spacing--l);
}


/* -------------------------------- 
----
---- HEADER
----
-------------------------------- */

 

.gridstack {
  display: grid;
  position: relative;
}

.gridstack > * {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
}
 




 
/* -------------------------------- 
----
---- IMAGENES MAIN
----
-------------------------------- */

 


/* -------------------------------- 
----
---- TARJETAS
----
-------------------------------- */

.chip {
    --catColor:  var(--wp--preset--color--contrast);
    --backColor: var(--wp--preset--color--white);
    display: inline-flex;
    align-items: center;
    gap:var(--wp--preset--spacing--3-xs);
    padding: 8px;
    line-height: .8;
    border-radius: 4px;
    border:2px solid  var(--backColor);
/*    background-color: var(--backColor);*/
    color: var(--backColor);
    font-size: var(--wp--preset--font-size--xxs);
    text-transform: uppercase;
    font-weight: 800;
}

.chip-white {
  background-color: var(--backColor);
  color: var(--catColor);
}
  
.chip-circle::before {
  content: '';
  display: block;
  height: 10px;
  width: 10px;
  position: relative;
  background-color: var(--wp--preset--color--vivid-green-cyan);
  border-radius: 50%;
  animation: blink 2s linear infinite;
} 

@keyframes blink{
  0%{opacity: 0.35;filter: saturate(1);}
  50%{opacity: 1;filter: saturate(1.5);}
  100%{opacity: 0.35;filter: saturate(1);}
}

.chip-contrast {
  --catColor: var(--wp--preset--color--contrast);
  --backColor: var(--wp--preset--color--contrast);
}

.promotions-grid {
  --gridSize: 360px;
  --grid:     repeat(auto-fill, minmax(min(var(--gridSize), 100%), 1fr));
  display: grid;
  grid-template-columns: var(--grid);
  gap:var(--wp--preset--spacing--m);
}

 


.flex-icon { display:flex; align-items:center; gap:var(--wp--preset--spacing--3-xs) } 
/*.flex-icon > * { border:1px solid red; }*/

.building-cardimage  {
  --cardColor:var(--wp--preset--color--contrast);
  --cardShadow:none;
  --cardRadius:12px;
  --cardHeight: 500px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  
  overflow: clip;
  padding: var(--wp--preset--spacing--s) var(--wp--preset--spacing--s) var(--wp--preset--spacing--m);
  background-color: var(--cardColor);
  height: var(--cardHeight);
  box-shadow: var(--cardShadow);
  border-radius: var(--cardRadius);
  text-decoration: none;
}

@media only screen and (max-width:650px) {
  .building-cardimage  {
    --cardHeight: 400px;
  }

}
 

.building-cardimage img {
  position: absolute;
  object-fit: cover;
  object-position: top center;
  inset:0;
  height: 100%;
  width:  100%;
  z-index: 0;
  filter:saturate(1.2);

  -webkit-mask: linear-gradient(180deg, rgb(0 0 0 / .95) 40%, rgb(0 0 0 / 0) 100%);

/*  -webkit-mask: linear-gradient(180deg, rgb(0 0 0 / .55) 60%, rgb(0 0 0 / .55) 100%);*/
  transition: all 350ms ease;
}

.building-cardimage :not(img) {
  position: relative;
  z-index: 2;
}
 
.building-cardimage .building-data {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  height: 100%;
} 

.building-chips {
  display: flex;
  align-items: stretch;
  gap:4px;
}

.building-cardimage:hover {
  --cardShadow:var(--shadow-4);
  --cardRadius:0px;
}

.building-cardimage:hover img {
  transform: scale(1.05);
  filter:brightness(.45) saturate(1.2);
} 

/*/////////////*/

.building-cardplain {
  --cardColor:var(--wp--preset--color--contrast);
  --cardShadow:none;
  --cardRadius:0px;
  --cardBack:var(--wp--preset--color--light);
  position: relative;
  display: grid;
  height: 500px;
  box-shadow: var(--cardShadow);
  border-radius: var(--cardRadius);
  text-decoration: none;
}

.building-cardplain img {
  position: absolute;
  object-fit: cover;
  object-position: top center;
  inset:0;
  height: 100%;
  width:  100%;
  z-index: 1;
  filter:saturate(1.2);
  background-color: black;
}

.building-cardplain :not(img) {
  position: relative;
  z-index: 2;
}

.building-cardplain img,
.building-cardplain .building-data {
  transform: translate(0px, 0px);
  transform-origin: 100% 100%;
  transition: all 350ms ease;
}

.building-cardplain .building-data {
  background-color: var(--cardBack);
  display: flex;
    flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  padding: var(--wp--preset--spacing--s) var(--wp--preset--spacing--s) var(--wp--preset--spacing--m);
  z-index: 7;
}

.building-cardplain:hover .building-data {
  --cardBack:var(--wp--preset--color--lightgrey);

  transform: translate(0%, -5%) rotate(5deg);
  z-index: 8;
}

.building-cardplain:hover img {
  transform: translate(0%, -25%) rotate(-2.5deg);
  z-index: 8;
}





/* -------------------------------- 
----
---- BLOG STYLES
----
-------------------------------- */
 
 


.blog-grid {
  --padding:var(--wp--preset--spacing--s); 
  display: grid;
  width: 100%;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap:var(--wp--preset--spacing--s);
}

.blog-grid-slide {
  --padding:var(--wp--preset--spacing--s); 
  list-style: none;
  display: flex; 
  flex-wrap: nowrap!important;
  gap:var(--wp--preset--spacing--s);

  overflow-x: auto;
  padding-inline: calc((100% - var(--wp--style--global--content-size)) / 2 );
  padding-bottom:var(--wp--preset--spacing--xl) ;
  -webkit-overflow-scrolling: touch;
  -ms-scroll-snap-type: x mandatory;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
}

.blog-grid-slide > *  { flex: 0 1 33%;  }

@media only screen and (max-width:1024px) {
 
.blog-grid-slide > *  { flex: 0 0 320px;  }

}

 

/* -------------------------------- 
----
---- FOOTER
----
-------------------------------- */

footer a {
  text-decoration: none!important;
} 

footer {
position: relative;
overflow:hidden;
    /* height: 100%; */
    /* border-top: 2px solid black; */
    background: var(--wp--preset--color--contrast);
 
    /* margin-top: var(--wp--preset--spacing--xl); */
    padding-top: var(--wp--preset--spacing--large);
    padding-bottom: var(--wp--preset--spacing--xl);
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: flex-end;
}

.footer-img {

  position: absolute;
  inset:0;
  height:120%;
  width: 100%;
  object-fit: cover;
  object-position:top center;
  filter:saturate(1.2);

  -webkit-mask: linear-gradient(180deg, rgb(0 0 0 / .65) 20%, rgb(0 0 0 / .15) 100%);
/*  mix-blend-mode: plus-lighter;
  filter:contrast(.25);
  opacity: .25;*/
}

.footer-inner-img {

  position: absolute;
  inset:0;
  height:100%;
  width: 100%;
  object-fit: cover;
  object-position:top center;
 
  filter:contrast(.25);
  opacity: .07;
}

.footer-inner { 
  width: calc(100vw - var(--wide-gap));
  margin-inline: auto;
  margin-top: var(--wp--preset--spacing--m-xxl);
  position:relative;
  z-index: 2;
  border:2px solid var(--wp--preset--color--lightgrey);
  border-radius: 12px;
  box-shadow: var(--shadow-5);
  padding-top: var(--wp--preset--spacing--xl);
  padding-inline: var(--wp--preset--spacing--m-xl);
  background: var(--wp--preset--color--light);
/*  background-color: rgb(255 255 255 / .85);*/
/*  backdrop-filter: blur(6px);*/
}


.copyright {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--wp--preset--color--lightgrey);
  padding-block: var(--wp--preset--spacing--m);
  margin-top: var(--wp--preset--spacing--xl);
}

.footer-logo {
    display: flex;
    flex-direction: column;
    gap: var(--wp--preset--spacing--s);
}

.gap-footer { 
  gap:var(--wp--preset--spacing--m);
}
 
@media only screen and (max-width:620px) {

  .footer-logo {
    text-align: center;
    justify-content: center;
    align-items: center;
  }
  .footer-inner { 
    --wide-gap:8vw;
  }
  .gap-footer { gap:0; }
  .copyright { 
    justify-content:center; 
    text-align: center;
    flex-direction: column;
    gap: var(--wp--preset--spacing--s); 
  }

}

.footer-menu a {
  font-size: var(--wp--preset--font-size--s);
}
 

.underline-link  {
  display: flex;
  flex-direction: column;
  gap:var(--wp--preset--spacing--3-xs);
}



.underline-link a {
  display:inline-block;
  font-weight: 500;
  color: var(--wp--preset--color--contrast);
  opacity: .65;
 }

.underline-link a::after {
     content: "";
    display: block;
    width: 100%;
    height: 2px;
    background-color: currentColor;
    transform-origin: right top;
    transform: scaleX(0);
    transition: transform 0.7s;
 } 

.underline-link a:hover        { opacity:1 }
.underline-link a:hover::after { transform:scaleX(1);transform-origin: left top; }



/* -------------------------------- 
----
---- ARCHIVE BLOG
----
-------------------------------- */

.section-index { background:var(--wp--preset--color--light) }

.section-indexca {
  position: relative;
  background:var(--wp--preset--color--contrast)
}
.section-indexca > img {
  position: sticky;
  position: absolute;
  inset:0;
  object-fit: cover;
  height: 100%;
  width:  100%;
  filter: brightness(0.55);
  -webkit-mask: linear-gradient(180deg, rgb(0 0 0 / .85) 20%, rgb(0 0 0 / .55) 100%);
  pointer-events: none;
}  

.section-indexca > :not(img) { position:relative; } 

.categorias-index {
 
  display: flex; 
  flex-wrap: wrap;
  gap:var(--wp--preset--spacing--3-xs); 
  position: relative;
  z-index: 2;

}

.cat-item {
  --catBack:    var(--wp--preset--color--contrast);
  --catText:    var(--wp--preset--color--light);
  --catBorder:  var(--wp--preset--color--contrast);
    
    display: inline-flex;
    align-items: center;
    gap:10px;
    padding: 6px 8px;
/*    border-radius: 4px;*/
    border:2px solid var(--catBorder);
    background-color: var(--catBack);
    color:     var(--catText);
    font-size: var(--wp--preset--font-size--xs);
    font-weight: 900;
    /**/
    font-size: var(--wp--preset--font-size--xxs);
    text-transform: uppercase;
}



.cat-item:hover {
  --catBack:   var(--wp--preset--color--contrast);
  --catBorder: var(--wp--preset--color--contrast);
  color:var(--catText);
}

/*.cat-card {
  --catBack:    transparent;
  --catText:    var(--wp--preset--color--light);
  --catBorder:  var(--wp--preset--color--light);
}*/

/*.cat-card:hover {
  --catBack:    var(--wp--preset--color--contrast);
  --catText:    var(--wp--preset--color--light);
  --catBorder:  var(--wp--preset--color--contrast);
}*/





.cat-index {
  --catBack:    transparent;
  --catText:    var(--wp--preset--color--contrast);
  --catBorder:  var(--wp--preset--color--contrast);
  padding: var(--wp--preset--spacing--xxs);
  justify-content: space-between;
  min-width: 100px;
}

.section-indexca .cat-index {
  --catText:    var(--wp--preset--color--light);
  --catBorder:  var(--wp--preset--color--light);
}



.cat-index span {
  --size:20px;
  display: grid;
  place-content: center;
  background-color: var(--wp--preset--color--lightgrey);
  font-weight: 900;
  border-radius: 100vmin;
  height:    var(--size);
  min-width: var(--size);
  padding-inline: 7px;
  color:var(--wp--preset--color--medium)
}

.cat-index:hover span,
.cat-index.current span  {
  background-color: var(--catText);
}


.cat-index:hover,
.cat-index.current {
  --catBack:    var(--wp--preset--color--contrast);
  --catText:    var(--wp--preset--color--light);
  --catBorder:  var(--wp--preset--color--contrast);
}

.section-indexca .cat-index:hover,
.section-indexca .cat-index.current {
  --catBack:    var(--wp--preset--color--light);
  --catText:    var(--wp--preset--color--contrast);
  --catBorder:  var(--wp--preset--color--light);
}

.section-indexca .cat-index:hover span,
.section-indexca .cat-index.current span  {
  background-color:var(--wp--preset--color--grey);
  color:var(--catText);
}


.blog-navigation { 
  --size:40px;
  --color:  var(--wp--preset--color--darkgrey);
  --back:   var(--wp--preset--color--lightgrey); 
  --border: var(--wp--preset--color--darkgrey);
  display: flex; 
  align-items:center;
  justify-content: start;
  gap:var(--wp--preset--spacing--3-xs); 
  position: relative;
  list-style: none;
  padding: 0;
}
 

.blog-navigation li a, 
.blog-navigation li.ellipsis { 
  font-size: var(--wp--preset--font-size--xs);
  font-weight: 700; 
  color:  var(--color); 
  width:  var(--size);
  height: var(--size);
  display: grid;
  place-content:center;
  border:2px solid var(--border)
}
 
.blog-navigation li a.current, 
.blog-navigation li a.current:hover, 
.blog-navigation li a:hover, 
.blog-navigation li a:focus {
  font-weight:900;
  --border:var(--wp--preset--color--contrast);
  --color: var(--wp--preset--color--contrast);
}


.blog-navigation li a.blog-navigation__prev,
.blog-navigation li a.blog-navigation__next,
.blog-navigation li a.blog-navigation__prev:hover,
.blog-navigation li a.blog-navigation__next:hover {
  border: none;
}

.blog-navigation li a svg {
  transition: all 350ms ease;
}
/*.blog-navigation li a.blog-navigation__prev svg { --translate:-10px; }
.blog-navigation li a.blog-navigation__next svg { --translate:10px; }
.blog-navigation li a.blog-navigation__prev:hover svg,
.blog-navigation li a.blog-navigation__next:hover svg {
 transform: translateX(var(--translate));
}
 */
@media only screen and (max-width: 540px) { 
 
.blog-navigation { 
   --size:40px;  
   flex-wrap:wrap;
}
.categorias-index { margin-bottom:var(--wp--preset--spacing--l); }

}