/* Pieza Newsletter */
/* General */
.piece.newsletter .n-itm{background-color: var(--background-fourth-color);transition: background 0.3s;    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    border-radius: 4px;
}
.piece.newsletter:hover .n-itm{background-color: #d6dfe7}
.piece.newsletter .n-itm .image{width: 50%}
.piece.newsletter .n-itm .image img{width: 100%;height: auto}
.piece.newsletter .n-itm .tsf{display: flex;flex-direction: column;gap: calc(var(--margin-spacer) / 3);padding: calc(var(--margin-spacer) / 2);width: 50%}
.piece.newsletter .n-itm .tsf .description{font-size: 1.8em;font-family: var(--title-font);line-height: 1.2em;position: relative}
.piece.newsletter .n-itm .tsf .description:first-letter{font-size: 2em;initial-letter: 2;margin-right: 0.1em}
/* Btn de ver ejemplo */
.piece.newsletter .example-link{display: block;text-align: center;margin: 0 calc(var(--margin-spacer) / 2) calc(var(--margin-spacer) / 2) calc(var(--margin-spacer) / 2)}
.piece.newsletter .example-link:before{content: "Ver ejemplo";font-weight: 600;color: var(--background-member-color);font-size: 1.4em;line-height: 1.2em;text-decoration: underline}
/* Btn suscripcción */
.piece.newsletter .btn-newsletter{position: relative;padding: calc(var(--margin-spacer) / 3) calc(var(--margin-spacer) / 2) 0 calc(var(--margin-spacer) / 2);margin: 0 auto calc(var(--margin-spacer) / 2) auto}
.piece.newsletter .btn-newsletter .svg-icon{min-width: 14px;min-height: 14px;width: 25px;height: 25px;border-radius: 50%;display: flex;align-items: center;justify-content: center;background: #0e1a0f;margin-right:left 0.3em}
.piece.newsletter .btn-newsletter .svg-icon svg{width: 15px;height: 15px;vertical-align: top}
.piece.newsletter .btn-suscribe{border-radius: var(--button-border-radius);width: 100%;font-weight: 600;font-size: 1.4em;font-family: var(--botton-font);display: flex;justify-content: center;align-items: center;padding: 0 1em}
.piece.newsletter .btn-suscribe a{color: inherit;display: flex;justify-content: center;align-items: center;gap: 5px;line-height: 35px}
.piece.newsletter.u-suscribed .btn-suscribe{display: none}
.piece.newsletter .btn-suscribed{background-color: #e2e2e2;border-radius: var(--button-border-radius);width: 100%;line-height: 30px;display: flex;justify-content: center;align-items: center;gap: 5px;font-weight: 600;font-size: 1.4em;font-family: var(--botton-font);color: #707070;display: none}
.piece.newsletter.u-suscribed .btn-suscribed{display: flex}
.piece.newsletter.u-suscribed .btn-suscribe{display: none}
.piece.newsletter .btn-unsuscribe{background-color: transparent;border-radius: var(--button-border-radius);width: 100%;line-height: 30px;justify-content: center;align-items: center;gap: 5px;font-weight: 600;font-size: 1.4em;font-family: var(--botton-font);color: var(--background-member-color);display: none;border: 1px solid var(--background-member-color)}
.piece.newsletter .btn-unsuscribe a{color: inherit;display: flex;justify-content: center;align-items: center;gap: 5px}
.piece.newsletter.u-suscribed .btn-unsuscribe{display: flex}


/*
.piece.newsletter FORM{padding: 0px;margin: 0px;text-align: center;display: flex;justify-content: center;flex-wrap: wrap;gap: 5px}
.page .main-container .zone .piece.newsletter .piecetitle{font-size: 2.4em;line-height: 1em;margin-bottom: 1rem;padding: 0;font-weight: 500;background: unset;display:flex;align-items:center;min-height:48px;}
.piece.newsletter .email{display:none}

#page .piece.newsletter input.vsmform,
#page .piece.newsletter input.vsmformerror{width:calc(100% - 100px);background: transparent;border: 1px solid #ECE2DA;border-radius: 4px;font-size: 1.4em;color: #ABA9A6;font-family: var(--botton-font);font-weight: 600;height: 40px;letter-spacing: 0.02em;min-width: 127px}
#page .piece.newsletter input:focus::-webkit-input-placeholder{color:transparent}
#page .piece.newsletter input::-webkit-input-placeholder{color:#8c8c8c}

.piece.newsletter .tsf{padding: calc(var(--margin-spacer) / 2)}
.piece.newsletter .image img{vertical-align: middle;width: 100%;height: auto;border: 1px solid #E7E4E1}
.piece.newsletter .distribution{font-weight: 700;color: #5B5A59;font-size: 1.5em;line-height: 1.34em;margin-bottom: 1rem;text-transform:unset;}
.piece.newsletter .title{font-size:2.6em;font-weight:bolder;line-height:0.84em;margin-bottom:0.35em}
.piece.newsletter .summary{line-height: 1.25em;margin-bottom: 1rem;color: #5B5A59;display: -webkit-box;overflow: hidden;-webkit-box-orient: vertical;-webkit-line-clamp: 4;height: 5em}

#page .piece.newsletter .result{opacity: 0;pointer-events: none;color: var(--background-main-color);font-size: 1.4em;;text-align: center;height: 0;padding: 0}

#page .piece.newsletter .form{height:auto}

#page .piece.newsletter.result .form{transition: opacity 0.1s, visibility 0.1s 0.1s;opacity:0;visibility:hidden}
#page .piece.newsletter.result .result{transition: opacity 0.2s 0.2s;opacity: 1;margin: 0;height: auto;font-size: 1.6em;color: #333;padding: calc(var(--margin-spacer) / 2);position:absolute;top: 50%;transform: translate(-50%,-50%);left: 50%;width: 100%;box-sizing: border-box}
.piece.newsletter.result article.main-article{margin:0}

.piece.newsletter .error{max-height:0;overflow:hidden}
.piece.newsletter.error .error{transition: max-height 0.5s,margin 0.2s;max-height:500px;background:red;color: #fff;padding:5px 10px;font-size:1.2em}

#page .piece.newsletter .submit{position: relative;display: inline-block;vertical-align: top;width: 92px;min-height: 35px}
.piece.newsletter .submit button{border-radius: 4px;height: 40px;line-height: 40px;padding: 0 0.5em;color: var(--background-main-color);border-color: var(--background-main-color);font-size: 1.4em;min-height: 40px;font-weight: 600;letter-spacing: 0}
.piece.newsletter .submit button:hover{color: #fff}

#page .piece.newsletter.suscribed .submit{width:100%;text-align:center}



@media (max-width:480px){
    DIV.newsletter .piecetitle{font-size: 2.8em}
    .piece.newsletter .result{font-size: 1.7em}
}

.piece.newsletter .example-link{display: block;text-align: center;margin: 0 calc(var(--margin-spacer) / 2) calc(var(--margin-spacer) / 2) calc(var(--margin-spacer) / 2)}
.piece.newsletter .example-link:before{content: "Ver ejemplo";font-weight: 600;color: var(--background-member-color);font-size: 1.4em;line-height: 1.2em;text-decoration: underline}
.piece.newsletter .btn-newsletter{padding: 0 calc(var(--margin-spacer) / 2);margin-bottom: calc(var(--margin-spacer) / 2)}
.piece.newsletter .btn-newsletter .svg-icon{min-width: 14px;min-height: 14px;width: 14px;height: 14px}
.piece.newsletter .btn-newsletter .svg-icon svg{width: 100%;height: 100%;vertical-align: top}
.piece.newsletter .btn-suscribe{background-color: var(--background-member-color);border-radius: var(--button-border-radius);width: 100%;line-height: 30px;font-weight: 600;font-size: 1.4em;font-family: var(--botton-font);display: block}
.piece.newsletter .btn-suscribe a{color: inherit;display: flex;justify-content: center;align-items: center;gap: 5px}
.piece.newsletter.u-suscribed .btn-suscribe{display: none}
.piece.newsletter .btn-suscribed{background-color: #e2e2e2;border-radius: var(--button-border-radius);width: 100%;line-height: 30px;display: flex;justify-content: center;align-items: center;gap: 5px;font-weight: 600;font-size: 1.4em;font-family: var(--botton-font);color: #707070;display: none}
.piece.newsletter.u-suscribed .btn-suscribed{display: flex}
.piece.newsletter.u-suscribed .btn-suscribe{display: none}
.piece.newsletter .btn-unsuscribe{background-color: transparent;border-radius: var(--button-border-radius);width: 100%;line-height: 30px;justify-content: center;align-items: center;gap: 5px;font-weight: 600;font-size: 1.4em;font-family: var(--botton-font);color: var(--background-member-color);display: none;border: 1px solid var(--background-member-color)}
.piece.newsletter .btn-unsuscribe a{color: inherit;display: flex;justify-content: center;align-items: center;gap: 5px}
.piece.newsletter.u-suscribed .btn-unsuscribe{display: flex}