/* Variables */
:root {
    --button-background-color: #6C4C99;    	/* Violeta */
    --button-hover-background-color: #393279;   /* Azul */
    
    --button-border-radius: 4px;
    --border-radius: 4px;
    --piece-border-radius: 2px;
    --border-folder-radius: 3px;

    --folder-piece-color: #6C4C99; /* Violeta */
    --folder-piece-hover-color: #393279; /* Azul */

    --title-piece-color: #6C4C99; /* Violeta */
    --title-piece-hover-color: #393279; /* Negro */

    --body-font-color: #1E1E1E; /* Negro */
    
    --summary-piece-color: #1e1e1eb5; /* Negro */
    --summary-piece-hover-color: #1E1E1E; /* Negro */

    --link-color: #6C4C99;    /* Violeta */
    --link-hover-color: #393279;   /* Azul */
    --link-active-color: #393279;   /* Azul */

    --background-page-color: #F7F7F7; /* Blanco */

    --background-main-color: #6C4C99;     /* Violeta */
    --background-second-color: #393279;   /* Azul */
    --background-third-color: #4A9CBC;    /* Celeste */
    --background-fourth-color: #D5B93D;   /* Amarillo */
    --background-fifth-color: #9B3467;   /* Fucsia */
    --background-sixth-color: #F7F7F7; /* Blanco */
    --background-seventh-color: #1E1E1E; /* Negro */

    --title-font: "Exo", "Anton", sans-serif;
    --default-font: "Exo", "Figtree", sans-serif;
    --date-font: "Exo", "Figtree", sans-serif;
    --summary-font: "Exo 2", "Figtree", sans-serif;
    --body-font: "Exo", "Figtree", sans-serif;
    --botton-font: "Exo", "Figtree", sans-serif;
    --menu-font: "Exo", "Figtree", sans-serif;
    
    --page-width: 1262px;
    --extended-page-width: 1600px;

    --margin-spacer: 40px;
    --min-zone-width: 300px;

    --border-piece-color: #6C4C99;    /* Violeta */

    --header-height: 130px;
    --header-collapsed-height: 90px;

    --separator-line-color: #e8e3e3;
}

.main-wrapper{max-width:var(--page-max-limit);margin:0 auto;background-color:#fff}

/* Colores */
.block.bgcolor{padding: calc(var(--margin-spacer) * 1.5) 0}

.bglight{color: rgba(0,0,0,0.8)}

.bgmaincolor{background-color: var(--background-main-color)}        /* Violeta */
.bgsecondcolor{background-color: var(--background-second-color)}    /* Azul */
.bgthirdcolor{background-color: var(--background-third-color)}      /* Celeste */
.bgfourthcolor{background-color: var(--background-fourth-color)}    /* Amarillo */
.bgfifthcolor{background-color: var(--background-fifth-color)}      /* Fucsia */
.bgsixthcolor{background-color: var(--background-sixth-color)}      /* Blanco */
.bgseventhcolor{background-color: var(--background-seventh-color)}      /* Negro */

/* Piezas y backgrounds */
.piece.bgmaincolor .title a:hover{color:#fff}
.piece.bgmaincolor .item:hover .title a{color:#fff}

/* Anchos de elementos */
.page-width     {width:calc(100% - 2em);max-width:var(--page-width);margin-left:auto;margin-right:auto;} /* Ancho de página predeterminado */
.extended-width {width:calc(100% - 2em);max-width:var(--extended-page-width);margin-left:auto;margin-right:auto;} /* Ancho extendido */
.full-width     {width:calc(100% - 2em);max-width:none;  margin-left:auto;margin-right:auto;} /* Ancho completo */

.media #vsmimgbutton{right: 0}

#page{position: relative}

/*Fuentes*/
body{font-family: var(--default-font);color: var(--body-font-color)}
main{padding:0}

.clear{clear:both;font-size:0;height:0}
/*Sin Separadores*/
.separator{display:none;clear: both;height: 1px;margin:var(--margin-spacer) auto;position: relative;width: 100%;max-width: var(--page-width)}
.piece .separator{margin: calc(var(--margin-spacer) / 4) auto}
.z100 .separator{display: none;}


.z75{width: calc(75% - (var(--margin-spacer) / 4))}
.z100{width:100%}
/*Sin Separadores*/

/*.block:not(.block0)>.z100{margin-bottom:calc(var(--margin-spacer) * 2)}*/

.zfull{clear:both}
.zleft,
.zmiddleleft,
.zmiddleright,
.zmiddle{float: left;margin-right: var(--margin-spacer);position: relative}
.zright{float: right}

path,
rect{opacity: 1;transition: opacity 0.3s}

.bgdark#page-footer .piecetitle:after{background-color: rgba(255,255,255,0.8)}

/* BreadCrumb */
.breadcrumb ol{display:flex;list-style:none;padding:0;margin:0;flex-wrap:wrap;justify-content: center}
.breadcrumb li{position:relative;font-size:1.4em;text-transform:uppercase;font-weight:bold}
.breadcrumb li:before{content:"\00B7";padding:0 0.5em}
.breadcrumb li:first-child:before{display:none}
.breadcrumb li a{line-height:2em;display:inline-block}
.breadcrumb li a:hover{text-decoration:underline}

/* SVG icons */
#footer-follow-us .svg-icon img, #footer-follow-us .svg-icon svg{opacity:1}
.svg-icon:hover path,
.svg-icon:hover rect{opacity:1;transition: opacity 0.3s}

/* Piecetitle */
.piecetitle{font-family:var(--title-font);font-weight:normal;font-size:3em;line-height:1.1em;width:100%;display:block;position:relative;text-align:center;color:#3d4042;margin:0 auto var(--margin-spacer) auto}
section.section-title{font-family:var(--title-font);font-weight:normal;font-size:5em;line-height:1.1em;width:100%;display:block;position:relative;text-align:center;color:#3d4042;margin:0 auto var(--margin-spacer) auto}
.piecetitle>div:not(.piecetitle-container){display:inline;z-index:1;position:relative}
.piecetitle a{color:inherit}

/* Author interior */
article .author{color: var(--background-blue-color)}
article .author .authorimage{display:inline-block;vertical-align: middle;margin-right:5px}
article .author .authorinfo{display:inline-block;vertical-align: middle;font-weight: bold}
article .author .authorinfo .authorjobtitle{font-weight: normal;margin-top:0.5em;font-size:90%}
article .author.noimage.nojobtitle .authorinfo:before{content:"Por ";margin-right:5px}
article .author .authorinfo:empty:before{content:""}
article .author .authortitle{display: inline;color: inherit}

/* Separador interior */
article .separatorLine{border-bottom: 1px dotted #E9E9E9;margin-bottom: 1.7em}

.interior article .headerContentHtml .kicker{width:100%;font-size:1.4em;letter-spacing:0.01em;line-height:1.5em;text-transform: uppercase;color:transparent;background:var(--bgdegfont);-webkit-background-clip:text;background-clip:text;max-width:100%;width:fit-content;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin-bottom:1em;font-weight:800}


/* diseño de blockes */
main .block>#vsmcontextmenu{left: 50%;transform: translate(-50%,0)}

#page{position: relative}



.bgdark{color: rgba(255,255,255,0.85);transition: color 0.3s}
.bgdark.piece .title{color: rgba(255,255,255,0.85);transition: color 0.3s}
.bgdark.bkg-b .piecetitle{color: rgba(255,255,255,0.85);transition: color 0.3s}
.bgdark .piece .folder,
.bgdark .piece .kicker,
.piece .bgdark .folder,
.piece .bgdark .kicker,
.piece.bgdark .folder,
.piece.bgdark .kicker,
.bgdark .piece .title,
.piece .bgdark .title,
.piece.bgdark .title,
.bgdark .piece .summary,
.piece .bgdark .summary,
.piece.bgdark .summary{color: inherit}
.bgdark .piece .item:hover .title a,
.piece .bgdark .item:hover .title a,
.bgdark.piece .title a:hover,
.piece.bgdark .item:hover .title a{color: #fff}
.bgdark .piecetitle{color: #fff}
/*
.bgdark path, 
.bgdark rect{fill: rgba(255,255,255,0.8);stroke: rgba(255,255,255,0.8)}
*/
.bgdark ul.boxy:empty{background-color: rgba(255,255,255,0.1)}
.bgdark .piece .kicker{border-bottom: 2px solid var(--folder-piece-color)}

.z25 .piece .summary{font-size: 1.3em}


/* Breakpoints de zonas */
@media (max-width: 1024px){
    
    :root { 
        --margin-spacer:  40px;
    }

    .z75{width:calc(70% - var(--margin-spacer))}
    .z70{width:calc(50% - var(--margin-spacer))}

    .separator{margin: var(--margin-spacer) auto}
}

@media (max-width: 768px){

    :root{
        --header-height: 90px;
        --margin-spacer: 20px;
    }
    
    .page .zleft,
    .page .zright{float: unset}
    .z75,
    .z75 .z70,
    .z75 .z30{width: 100%;margin-right: 0}
    
    .z100.zleft{margin-right:0}

    .z70{width:100%;margin-right:0}
    .z70.zleft{margin-bottom:var(--margin-spacer)}
    .z70.zright{margin-bottom:0;margin-top:var(--margin-spacer)}
    
    article.main-article .article-toolbar .share UL LI.whatsapp{display:inline-block}

    .piecetitle{font-size:2em;letter-spacing:0.05em}
    section.section-title{font-size:3.5em}

}

@media (max-width: 580px){
    .page-width {width: calc(100% - 2.5em)}

    .zleft:after{display:none}

    .z70.zright{margin-top:var(--margin-spacer)}
}


/* MODO OSCURO */
html.dark-mode body{background-color: #1c1b1f}
html.dark-mode #page-header.bglight{background-color: transparent}
html.dark-mode A.logo .dark{opacity: 1;visibility: visible}
html.dark-mode A.logo .light{opacity: 0;visibility: hidden}
html.dark-mode .search-box path.circle, 
html.dark-mode .search-box path.line{stroke: #e8eaed}
html.dark-mode #page-header path, 
html.dark-mode #page-header rect{fill: #e8eaed;stroke: #e8eaed}
html.dark-mode #page-header img{filter: invert(0) contrast(0)}
html.dark-mode #page-header>.menu-wrapper{background-color: transparent}
html.dark-mode .page .piece{background-color: transparent;color: #e8eaed}
html.dark-mode .page .separator,
html.dark-mode .page .zleft.z25:after, 
html.dark-mode .page .z75_30:after, 
html.dark-mode .page .zleft.z33:after, 
html.dark-mode .page .zleft.z50:after, 
html.dark-mode .page .zleft.z75:after, 
html.dark-mode .page .z75_z70:after{background-color:#ffffff4d}


UL.u{
    font-size:3em
}

UL.u LI.t{    
    visibility: visible;
    backdrop-filter: blur(30px);
    transform: skewX(-10deg);
    border-radius: 10px;
    border-top-right-radius: 5px;
    border-bottom-left-radius: 5px;
    color: #fff;
    padding: 2em;
    background: rgba(0, 0, 0, 0.3);
    margin: 3em;
    opacity:1;
    animation: showthis linear forwards;
    animation-timeline: view();
    animation-range-start: entry 0%;
    animation-range-end: entry 300%;
}


    
@keyframes showthis{
    70%{opacity:0.5;background-color: rgba(0, 0, 0, 0.3);;}
    100%{opacity:1;background-color: var(--background-blue-color);}
}