/* Hide focus styles if they're not needed, for example, when an element receives focus via the mouse. */
:focus:not(:focus-visible) {
    outline: 0;
 }

/* Show focus styles on keyboard focus. */
:focus-visible,
input[type="radio"]:checked:active + span::before,
input[type="checkbox"]:checked:active + span::before,
input[type="radio"]:focus + span::before,
input[type="checkbox"]:focus + span::before {
  outline: 3px solid var(--wp--preset--color--accent-60);
 
}
 
 
/* -------------------------------- 
BUTTONS
-------------------------------- */
a,
a > strong        { text-decoration:none; outline:0; color: hsl(var(--brand-second)); }



.body-legales a         { text-decoration:underline;}
.body-legales a:hover   { opacity: .75 }

.link-underline       { text-decoration:underline; } 
.link-underline:hover { color:var(--wp--preset--color--verde) }

body {
  --mainColor:var(--wp--preset--color--verde); 
}

/*.is-layout-grid {
    overflow: hidden;
}*/

 

.button, 
.is-icon,
[type=submit],
button:not(.mapboxgl-popup-close-button, .map-button, .slider-prev, .slider-next, .pswp__button)
{
    padding: var(--wp--preset--spacing--s) var(--wp--preset--spacing--m);
    border:none;
    font-size: var(--wp--preset--font-size--s);
    color:var(--mainColor);
    text-align: center;
    font-weight: 600;

    text-transform: uppercase;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
 

    position: relative;
    text-decoration: none;
    line-height: 1;

    overflow: hidden;
    background-color: transparent;
    cursor: pointer;

    transition: all 350ms ease;
} 

.wp-element-button {
  transition: all 350ms ease;
}

:root :where(.is-style-fill > .wp-element-button:hover, .is-style-fill > .wp-block-button__link:hover) {
  filter: grayscale(.5);
}
 
.button:hover,
[type=button]:hover,
[type=reset]:hover,
[type=submit]:hover,
button:hover {
/*    opacity: 0.8;*/
}
 
input[disabled],
button[disabled],
input[disabled]:hover,
button[disabled]:hover {
    opacity: 0.2;
    cursor: not-allowed;
}
 
 
.is-fill,
.is-outline,
.primary {
  --hoverColor:color-mix(in srgb, var(--mainColor) 75%, black);
}

.is-fill,
.primary     
{ color:var(--wp--preset--color--light); background:var(--mainColor); }
.is-fill:hover,
.primary:hover   
{ color:var(--wp--preset--color--light); background:var(--hoverColor); box-shadow:var(--shadow-4);  }

.is-outline        
{ color:var(--mainColor); background:transparent; border:2px solid var(--mainColor); }
.is-outline:hover   
{ color:var(--wp--preset--color--light); background:var(--hoverColor); border-color:var(--hoverColor)  }

.is-small { 
  font-size: var(--wp--preset--font-size--xs);
  padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--s);
}

/*.linkhover,
.linkhover svg {
  transition: all 250ms ease;
}

.linkhover {
  --rotate:0deg;
  border: 2px solid var(--wp--preset--color--verde);
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap:var(--wp--preset--spacing--xs);
  padding: var(--wp--preset--spacing--xs);
  color:var(--wp--preset--color--verde);

  text-transform: uppercase;
  font-size: var(--wp--preset--font-size--s);
}

.linkhover svg {
  transform: rotate(var(--rotate));
}

.linkhover:hover {
  color:var(--wp--preset--color--verde);
  --rotate:-45deg;
}*/

 


/* -------------------------------- 
FORMS & INPUTS
-------------------------------- */
 
/*label {
  font-family: var(--wp--preset--font-family--body);
  color:var(--wp--preset--color--verde);
  font-weight: 500;
  font-family: var(--font-data);
  font-size: var(--wp--preset--font-size--s);
  display: block;
  margin-bottom: var(--wp--preset--spacing--xxs);
}


input:not([type=submit]),
textarea {
  font-family: var(--wp--preset--font-family--body);
  color: var(--wp--preset--color--verde);
  padding:var(--wp--preset--spacing--s); 
  font-size: var(--wp--preset--font-size--p); 
  background-color: var(--wp--preset--color--light); 
  border:3px solid var(--wp--preset--color--verde);
  font-weight: 500

  transition: all 350ms linear;
  display: block;
  width: 100%;
}

textarea::placeholder,
input:not([type=submit])::placeholder {
  font-weight: 500;
 
}

 
input:focus,
textarea:focus {
  border-color:   var(--wp--preset--color--verde);
  border-radius:  var(--radius-4);
  box-shadow:     var(--shadow-m);
}*/

.newsletter-form input:not([type=submit]) {
  border:none;
  border-bottom:2px solid var(--wp--preset--color--lightgrey);
}

.newsletter-form [type=submit] {
  position: absolute;
  inset: 5px 0 7px auto;
  background-color: var(--back);
  color: var(--main);
}

.newsletter-form input:focus {
  box-shadow: none;
  border-radius: 0px;
  border-color:   var(--wp--preset--color--verde);
}


form {
  --size:             16px;
  --legalGap:          6px;
  --formGap:          var(--wp--preset--font-size--xs);
  --label:            var(--wp--preset--color--verde);
  --inputBack:        white;
  --inputBorder:      color-mix(in oklab, var(--wp--preset--color--verde) 50%, white);
  --inputBorderFocus: var(--wp--preset--color--verde);
}

.main-form,
.hs-form-private {
  margin-top: var(--wp--preset--spacing--l);
  position: relative;
  z-index: 4;
}

.main-form input[type=submit],
.hs-form-private input[type=submit] {
  min-width: 210px;
} 

.hs-form-private fieldset {
  width: 100%;
  max-width: unset!important;
}

fieldset + fieldset {
  margin-top: var(--formGap)!important;
}

.form-group {
  --size:100%;
  flex:1 0 calc(var(--size) - var(--formGap)); 
}
.form-group-2,
.form-columns-2 { --size:50%; }
.form-group-3,
.form-columns-3 { --size:33.333%; }

.form-group strong,
.form-check strong span,
.hs-form-required { color:red; font-weight:600 }

.form-columns-1,
.form-columns-2,
.form-columns-3 {
  display: flex;
  gap:var(--formGap);
}

.hs-form-field {
  float: none!important;
  width: auto!important;
  flex:1 0 calc(var(--size) - var(--formGap))!important; 
}

.hs-input  { width: 100%!important; }
.input     { margin-right:0!important; }

.inputs-list,
.hs-error-msgs {
  list-style: none;
}

.hs-error-msgs {
  --label:red;
}

.hs-error-msgs label {
  text-transform: unset;
  color: var(--label);
  font-size: var(--wp--preset--font-size--xs);
  padding-top: var(--wp--preset--spacing--xxs)
}

.legal-consent-container .hs-form-booleancheckbox-display>span {
    margin: 0 !important;
    display: inline-flex !important;
    gap: var(--legalGap);
    align-items: flex-start;
    text-transform: none;
    font-size: var(--wp--preset--font-size--xs);
    font-weight: 600;
    cursor: pointer;
}

.hs-richtext {
  font-size: var(--wp--preset--font-size--xs);
  padding-left: calc(var(--size) + var(--legalGap));
  margin-top: calc( (var(--size) - var(--legalGap)) * -1 );
}

.legal-consent-container .hs-richtext:not(:last-of-type) {
  margin-bottom: var(--formGap);
}

.hs-form-booleancheckbox-display input[type="checkbox"] {
  position: absolute;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 0;
  z-index:-1;
  cursor: pointer;
}

input.error:not([type=submit])  {
  border-color:red;
  background-color: pink;
}

.legal-consent-container .hs-error-msgs {
  padding-left: calc(var(--size) + var(--legalGap));
  margin-top: calc((var(--size) - var(--legalGap)) * -1.5);
}

.hs-form-private fieldset:last-of-type {
  padding-bottom: var(--wp--preset--spacing--xs);
}

.hs-form-private .hs_submit {
  float: right;
  width: 40%;
}

.hs-form-private input[type=submit] {
  width: 100%;
  height: 60px;
} 

.hs_recaptcha {
    display: flex;
    max-width: 300px;
    float: left !important;
}


@media only screen and (max-width:620px) {
  .hs-form-private {
    display: flex;
    flex-direction: column;
  }
  .hs-form-private fieldset:last-of-type,
  .hs-form-private .hs_submit {
    float: none;
    width: 100%;
  }
  .hs_recaptcha {
    margin-top:var(--wp--preset--spacing--s);
    order:12;
  }
 

.main-form input[type=submit],
.hs-form-private input[type=submit] {flex:1; width: 100%} 
.form-group-2,
.form-columns-2 { --size:50%; }
.form-group-3,
.form-columns-3 { --size:100%; display: flex; flex-direction: column;}

}


label {
  color:var(--label);
  font-size: var(--wp--preset--font-size--xxs);
  text-transform: uppercase;
  display: block;
  margin-bottom:4px;
}


input:not([type=submit]),
textarea,
select {
  font-family: var(--wp--preset--font-family--header);
  font-size:   var(--wp--preset--font-size--p);
  color:       var(--wp--preset--color--verde);
  padding:     var(--wp--preset--spacing--xs) var(--wp--preset--spacing--xxs); 
  background-color:var(--inputBack); 
  border:2px solid var(--inputBorder);
  border-radius: 6px;
  transition: all 350ms linear;
  display: block;
  width: 100%;
}

input:not([type=submit]):focus,
textarea:focus,
select:focus,
input:not([type=submit]):valid,
textarea:valid,
select:valid {
  --inputBorder: var(--wp--preset--color--verde);
}

textarea::placeholder {
  font-weight: 500
}



.form-group input:valid + label, 
.form-group input:focus + label,
.form-group input:not(:valid):not(:placeholder-shown) + label  {
 
}

.form-group input:not(:focus):not(:valid):not(:placeholder-shown)  {
  border-color:red;
  background-color: pink;
}

.form-group input ~ span { display: none;}
.form-group input:not(:focus):not(:valid):not(:placeholder-shown) ~ span {
  /*background-color: red;*/
  color:white;
  color:red;
  display: block;
}

 
 
/* -------------------------------- 

CHECKBOXES & RADIOS

-------------------------------- */

.inputs-list.multi-container {
/*  border:2px solid red;*/
  display: flex;
  gap:var(--wp--preset--spacing--xs);
}

.inputs-list.multi-container label {
  font-size: var(--wp--preset--font-size--s);
  text-transform: none;
  cursor: pointer;
  margin:0;
}

.inputs-list.multi-container label span {
  display: flex;
  padding: var(--wp--preset--spacing--xxs);
  align-items: center;
  gap:6px;
  border:2px solid var(--inputBorder);
  border-radius: 6px;
}

.form-check {
  display: flex;
  align-items: flex-start;
  position: relative;
  gap:calc(var(--size)/2);
}

.form-check + .form-check {
  margin-top: var(--formGap);
}

.form-check label {
    color: var(--label);
    font-size: var(--wp--preset--font-size--xs);
    cursor: pointer;
    margin:0;
    text-transform: unset;
}

 
.form-check input[type="checkbox"],
.hs-form-radio input[type="radio"]  {
  position: absolute;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 0;
  z-index:-1;
  cursor: pointer;
}
 
input[type="radio"] + span::before,
input[type="checkbox"] + span::before { 
  content: '';
  display: block;
  width:  var(--size);
  height: var(--size);
  border:2px solid var(--inputBorder);
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
}

input[type="radio"] + span::before {
  border-radius: 100%;
}
input[type="radio"]:checked + span{
  --inputBorder:var(--wp--preset--color--verde);
  background-color: var(--wp--preset--color--lightgrey);
  background-color: color-mix(in srgb, var(--wp--preset--color--verde) 15%, white);
}
 

input[type="radio"]:checked + span::before, 
input[type="checkbox"]:checked + span::before {
  border-color: var(--wp--preset--color--verde);
  box-shadow: var(--shadow-s);
  transition: transform .2s;
}

input[type="radio"]:checked ~ label,
input[type="checkbox"]:checked ~ label {
  color: var(--label); 
 }
 
input[type="radio"]:checked + span::before,
input[type="checkbox"]:checked + span::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpolyline points='1 6.5 4 9.5 11 2.5' fill='none' stroke='%2315402d' stroke-linecap='round' stroke-linejoin='round' stroke-width='3'/%3E%3C/svg%3E");
  background-size: 8px;
}
 
 
 
 
 
/* -------------------------------- 
DETAILS
-------------------------------- */

details summary::-webkit-details-marker {
  display: none;
}
      
details {
/*  border:1px solid red;*/
  --icon: 16px;
  --paddingSummary: var(--wp--preset--spacing--s);
  --colorSummary: var(--wp--preset--color--contrast);
  --paddingInner: 0 0 var(--wp--preset--spacing--s);
  --colorInner:   var(--wp--preset--color--verde);
  --backOpen:  white;
  --back:    var(--wp--preset--color--lightgrey);
  --backHover: var(--wp--preset--color--darkgrey);
  --events: none;
  width: 100%;
  transition: all 350ms linear;
}

details summary {
  color:          var(--newsletterMain);
  padding:        var(--paddingSummary);
 
  font-weight: 900;
  display: flex;
  justify-content: space-between;
  align-items: center;
  
  cursor:pointer;
  transition: all 350ms linear;
}

details summary:after {
  content: '';
  mask-image: var(--arrow-down);
  mask-repeat: no-repeat;
  mask-size: var(--icon);
  min-width: var(--icon);
  aspect-ratio: 1 / 1;
  display: block;
  transition: all 350ms linear;
  background-color: currentColor;
}
 
details[open] summary:after { transform: rotate(180deg);  }


details.details-footer {
  --colorSummary: var(--wp--preset--color--light);
  --icon:0px;
  --paddingSummary: 0 0 var(--wp--preset--spacing--s);
}  

details.details-footer summary {

  pointer-events: var(--events);
}


@media only screen and (max-width: 820px)  {  
  details.details-footer summary:after {
/*    filter: invert(1);*/
  } 
  details.details-footer {
    --events:all;
    --icon:16px;
    --paddingSummary: var(--wp--preset--spacing--s) 0;
    
   }  
  
} 


:not(.ig, .fb, .lk) > a[target="_blank"]:after {
    content:'';
    mask-image: var(--blank);
    mask-size: 18px;
    height: 18px;
    width: 18px;
    display: inline-flex;
    vertical-align: middle;    
    background: currentColor;
} 

a.clean-a[target="_blank"]:after,
a.card-review[target="_blank"]:after,
a.mapboxgl-ctrl-logo[target="_blank"]:after {
content:unset;
}

.is-style-dots > span::before,
.is-style-dotsright > span::before {  
  content: '';
  mask-image: url(../images/dots/sinergy-medium.svg);
  mask-size: contain;
  mask-repeat: no-repeat;
  background-color: var(--wp--preset--color--ocre);
  background-color: color-mix(in oklab, var(--wp--preset--color--ocre) 20%, transparent);
  height: 100%;
  display: block;
  opacity: 1;
}

.is-style-dotsright > span::before {
  transform: scaleX(-1);
  background-color: color-mix(in oklab, var(--wp--preset--color--ocre) 20%, transparent);
}

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

.is-style-dots > span::before,
.is-style-dotsright > span::before {  
    mask-repeat: repeat-x;
    width: 100%;
    height: 220px;
}


}
 
/* -------------------------------- 

MODAL NEWSLETTER & VIDEO

-------------------------------- */

.modal-body {
  --modalSpace: var(--wp--preset--spacing--l);
  --modalWidth: 1000px;
  --inset:0;
  visibility: hidden;
  opacity: 0;
  position: fixed;
  inset: var(--inset);
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  z-index: 100;
  transition: all 350ms ease-in-out;
}

.modal-content {
  background-color: white;
  width: min(var(--modalWidth), calc(100% - (var(--modalSpace) * 2)));
  padding-inline: calc(var(--modalSpace) * 1.5);
  padding-block:  calc(var(--modalSpace) * 3);
  border-radius: 12px;
  overflow: clip;
  transform: translateY(200px);
  z-index: 5;
  transition: all 450ms ease-in-out 200ms;
}

.modal-content[class*="is-style-dots-"]::after,
.modal-content[class*="is-style-dots-"]::before {
  z-index: -1;
}
 
.modal-body.is-open                 { visibility: visible; opacity: 1; overflow-y: auto; }
.modal-body.is-open .modal-content  { 
  transform: translateY(var(--modalSpace));
}   

.no-padding { 
  --modalSpace:var(--wp--preset--spacing--xs);
  --modalWidth:800px;
}
 
.no-padding iframe {
  max-height: 690px !important;
} 
 
.close-modal {
  --closeColor:black;
  color:var(--closeColor);
  position: absolute;
  right: 0;
  top:0;
  cursor: pointer;
  padding: var(--wp--preset--spacing--xs);
  z-index: 4;
}

.close-modal > svg { 
  display: block;
  pointer-events: none;
}

.modal-overlay {
  position: fixed;
  inset:0;
  background:rgba(25 25 25 / 0);
  pointer-events: none;
  z-index: -1;
  transition: all 350ms ease-in-out;
}

.modal-body.is-open .modal-overlay { background:rgba(25 25 25 / .85); pointer-events: all;}

@media only screen and (max-width:768px) {
.modal-body {
  --modalWidth: 500px;
}

@media only screen and (max-width:620px) {
.modal-body {
  --modalSpace: var(--wp--preset--spacing--s);
  --inset:0;
}

.modal-body.is-open .modal-content  { 
  transform: translateY(0px);
  margin-block: var(--modalSpace);
}   

.no-padding { 
  --modalSpace:var(--wp--preset--spacing--xxs);
  --modalWidth:800px;
}

}