/* fuentes - estático */
@font-face { font-family: 'Encode Sans'; src: url("/fuentes/EncodeSansEMAR.woff2") format("woff2"); font-display: swap;}
body {font-family: 'Encode Sans', Tahoma, "sans-serif"; background-color: #333; text-rendering: optimizeLegibility; margin: 0 .2em; font-synthesis: style, weight !important;}
html {-webkit-text-size-adjust: 100%;}
h1 { color: #FFF; text-transform: uppercase; line-height: 0.9em; font-weight: 600; margin: .1em; }
h2 { color: #CCC; text-transform: uppercase; line-height: 0.6em; font-weight: 200; margin: .1em; }
h3 { text-transform: uppercase; font-weight: 400;  margin: .1em; }
h4 {  text-transform: uppercase; margin: .1em .2em; font-weight: 400;}
h5 { font-variant-caps: small-caps ; border-bottom: 1px black solid ; margin: 0.25em; font-weight: 400;}
/*section p, li, footer p { font-family: 'Telex', sans-serif;}*/
ul li a { color: #0000a2}
a:visited {color: #2c2d2e;}
section p {margin: .5em 0 /*.4em*/; line-height: 1.2em; }
#facebook-f, #twitter, #instagram, #youtube, #googlenews, #threads, #bluesky { transition: .2s all ease; height: 24px; margin: .1em .4em; vertical-align: middle; /*font-size: 1.8em;  line-height: 1em; padding-right: 7px;*/}

/* TITULOS y CUERPO - variable */
@media print,screen and (max-width: 40em) {
	header { background: url('/imagenes/bg_encabezadotwenty_mobile.png') center left no-repeat  #464646; } 
	h1 { font-size: 8.5vw; text-align: right; padding: 1.2em 0 .1em 0; font-variation-settings: 'wght' 650, 'wdth' 80;}
	h2 { font-size: 5.87vw; text-align: right; font-variation-settings: 'wght' 400, 'wdth' 92.5;} 
	h3 { font-size: 5vw ; font-variation-settings: 'wght' 500, 'wdth' 80; padding-top: .5em}
	h4 { font-size: 4.35vw ; font-variation-settings: 'wght' 450, 'wdth' 95;}
	h5 { font-size: 3.75vw; font-variant-caps: all-small-caps}
	main {background-color: #6699CC; padding: 0 .5em}
	footer { column-count: 1;}
	.small-only {font-size: 4vw; line-height: 1.1em; margin: .2em .2em 1em; grid-row-start: 2;}
	article { margin-left: 0px;}
	ul.dropdown.menu a:link, ul.dropdown.menu a:visited { font-size:1em; }}
@media print, screen and (min-width: 40em) {
	footer { column-count: 2;}
	footer p {margin: 0}
	/*body {padding: 0 .5em} */
	header { background: url('/imagenes/bg_encabezadotwenty.png') center left no-repeat #464646;} 
	main { background-color: #6699CC }
	h1 { padding: .8em 0 .1em 0; }
	h2 {padding: 0 0 .5em 0;}
	ul.dropdown.menu a:link, ul.dropdown.menu a:visited { font-size:0.85em; }}
@media print, screen and (min-width: 40em) and (max-width: 63.9em) {
	h1 { font-size: 3.6rem ; text-align: right; font-variation-settings: 'wght' 650,'wdth' 80;}
	h2 { font-size: 2.4rem; text-align: right; font-variation-settings: 'wght' 400, 'wdth' 99.5; } 
	h3 { font-size: 1.65em ; font-variation-settings: 'wght' 500, 'wdth' 80;}
	h4 { font-size: 1.35em ; font-variation-settings: 'wght' 400, 'wdth' 90;} 
	h5 { font-size: 1.2em ; font-variation-settings: 'wght' 500, 'wdth' 100; font-variant-caps: all-small-caps}
	#notas p { font-size: 1em; text-indent: .5em; font-variation-settings: 'wght' 400, 'wdth' 85; -webkit-text-size-adjust: 100%}
	article p {font-size: 1em; font-variation-settings: 'wght' 400, 'wdth' 100;line-height: 1.5em; margin: .5em; }}
@media print, screen and (min-width: 64em) { 
	h1 { font-size: 4em; text-align: right; font-variation-settings: 'wght' 700, 'wdth' 91; }
	h2 { font-size: 2.8em; text-align: right; font-variation-settings: 'wght' 500, 'wdth' 100; }
	h3 { font-size: 1.7em ; margin-left: 5px; padding: .1em 0; font-variation-settings: 'wght' 500,'wdth' 90;}
	h4 { font-size: 1.5em; font-variation-settings: 'wght' 400, 'wdth' 80} 
	h5 { font-size: 1.3em ; font-variation-settings: 'wght' 500, 'wdth' 100; font-variant-caps: all-small-caps; padding-left: 1em}
	ul.dropdown.menu a:link, ul.dropdown.menu a:visited { font-size:1em; }}

/* GENERAL */
/* ADSENSE */
@media (max-width:40em) { .adHeader { width: 300px; max-height: 100px; padding-bottom: 0.2em; text-align: center;}
.adDiscogs { display: none; padding-top: 0.5em;} .adSide { max-width: 120px; height: auto;  } }
@media (min-width:40em) { .adHeader { width: 275px; max-height: 150px; float: right; } .adDiscogs { max-width: 300px; max-height: 250px; } .adSide { width: 120px; height: auto; } }
@media (min-width:64em) { .adHeader { width: 400px; max-height: 200px; float: right; } .adDiscogs { max-width: 350px; max-height: 290px; } .adSide { width: 120px; height: auto; } }

/*GENERAL*/
#cuerpo a {color: #021498;}
.social a { color: white ; font-size: 1.8em;  line-height: 1em; padding-right: 7px;}
.tagline { color: white ; font-size: 0.85em;   margin-top: 0.3em;} 
/*BIOGRAFIAS*/
.tabs { border:  none !important; background: none !important; margin-top: .7em !important;}
li.tabs-title { border: black solid 1px;  margin: 0 .15em;}
.tabs-panel { display: none; padding: 0 0.5rem !important; }
footer { color: darkgray; font-size: 0.85em; margin-top: 0.3em;}


/*----------------------- Preloader -----------------------*/
body.preloader-site { overflow: hidden;	}
.preloader-wrapper { height: 100%; width: 100%;	background: #FFF; position: fixed; top: 0; left: 0; z-index: 9999999; opacity: 0.75;}
.preloader { position: absolute; top: 45%; left: 45%; width: 70px; height: 70px; border: 10px solid #eee; border-top: 10px solid #666; border-radius: 50%; animation-name: girar; animation-duration: 2s; animation-iteration-count: infinite;	animation-timing-function: linear; }
@keyframes girar { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.tabs-content { border: none !important; background: none !important; }
.tabs-title > a { padding: .25rem .5rem !important; }

/* NUEVO MENU */
nav{ position: relative; z-index: 99; width: 100%; }
nav .wrapper{ position: relative; max-width: 1300px; padding: 0px; height: 40px; line-height: 40px; display: flex; align-items: center; justify-content: space-between;}
.wrapper .logo a { color: #f2f2f2; font-size: 30px; font-weight: 600; text-decoration: none; }
.wrapper .nav-links { display: inline-flex; }
.nav-links li{ list-style: none; }
.nav-links li a { color: #f2f2f2; text-decoration: none; font-size: .85em; font-weight: 500; padding: 9px 15px; border-radius: 5px; transition: all 0.3s ease; }
.nav-links li a:hover { background: #3A3B3C; }
.nav-links .mobile-item { display: none;}
ul.nav-links { margin-left: 0;}
.nav-links .drop-menu { position: absolute; background: #242526; width: 180px; line-height: 1.9em; /*top: 85px;*/ opacity: 0; visibility: hidden; box-shadow: 0 6px 10px rgba(0,0,0,0.15);}
.nav-links li:hover .drop-menu, .nav-links li:hover .mega-box { transition: all 0.3s ease; top: 40px; opacity: 1; visibility: visible; }
.drop-menu li a { /*width: 100%;*/ display: block; padding: 0 0 0 15px; font-weight: 400; border-radius: 0px;}
.mega-box{ position: absolute; left: 0; width: 100%; padding: 0; /*top: 5px;*/ opacity: 0; visibility: hidden;}
.mega-box .content { background: #242526; padding: 25px 0; display: flex; width: 100%; justify-content: start; box-shadow: 0 6px 10px rgba(0,0,0,0.15); }
.mega-box .content .row { width: calc(34% - 30px); line-height: 30px;}
.content .row img { width: 100%; height: 100%; object-fit: cover; }
.content .row header{ color: #f2f2f2; font-size: 1em; font-weight: 500;}
.content .row .mega-links { margin-left: -40px; border-left: 1px solid rgba(255,255,255,0.09);}
.row .mega-links li { padding: 0 5px 0 20px; width: fit-content; display: inline-flex; line-height: 1.9em; }
.row .mega-links li a { padding: 0px; padding: 0 5px 0 20px; color: #d9d9d9; font-size: .9em; display: block;}
.row .mega-links li a:hover { color: #f2f2f2; }
.wrapper .btn { color: #fff; font-size: 20px; cursor: pointer; display: none; }
.wrapper .btn.close-btn { position: absolute; right: 30px; top: 10px; }
@media screen and (max-width: 976px) { 
	/*nav .wrapper { height: 70px;} */
	.wrapper .btn { display: block; }
	.wrapper .nav-links { position: fixed; height: 100vh; width: 100%; max-width: 350px; top: 0; left: -110%; background: #242526; display: block; padding: 50px 10px; /*line-height: 50px;*/ overflow-y: auto; box-shadow: 0px 15px 15px rgba(0,0,0,0.18); transition: all 0.3s ease; opacity: 0.95; margin-top: .2em;}
	/* custom scroll bar */
	::-webkit-scrollbar { width: 10px; }
	::-webkit-scrollbar-track { background: #242526;}
	::-webkit-scrollbar-thumb { background: #3A3B3C; }
	#menu-btn:checked ~ .nav-links{ left: 0%;}
	#menu-btn:checked ~ .btn.menu-btn{ display: none;}
	#close-btn:checked ~ .btn.menu-btn{ display: block; }
	.nav-links li { margin: 15px 10px;}
	.nav-links li a { padding: 0 5px 0 20px;display: block;font-size: 1em;}
	.nav-links .drop-menu { position: static; opacity: 1; top: 65px; visibility: visible; padding: 0 5px ; width: 100%; max-height: 0px; overflow: hidden; box-shadow: none; transition: all 0.3s ease; }
	#showDrop:checked ~ .drop-menu,#showDrop2:checked ~ .drop-menu,#showDrop3:checked ~ .drop-menu, #showDrop4:checked ~ .drop-menu, #showMega:checked ~ .mega-box, #showMega2:checked ~ .mega-box { max-height: 100%; }
	#showDrop:checked ~ .mobile-item, #showMega:checked ~ .mobile-item { background: #3A3B3C; }
	.nav-links .desktop-item { display: none; }
	.nav-links .mobile-item { display: block; color: #f2f2f2; font-size: 1em; font-weight: 500; padding: 0 5px; cursor: pointer; border-radius: 5px; transition: all 0.3s ease; }
	/*.nav-links .mobile-item:hover{ background: #3A3B3C; }*/
	.drop-menu li { margin: 5px 0; }
	.drop-menu li a { border-radius: 5px; font-size: .9em;}
	.mega-box { position: static; top: 65px; opacity: 1; visibility: visible; padding: 0 15px 0 0; max-height: 0px; overflow: hidden; transition: all 0.3s ease;text-align: justify;}
	.mega-box .content{ box-shadow: none; flex-direction: column; padding: 0 10px;}
	.mega-box .content .row{ width: 100%; margin-bottom: 15px; border-top: 1px solid rgba(255,255,255,0.08); }
	.mega-box .content .row:nth-child(1), .mega-box .content .row:nth-child(2) { border-top: 0px;}
	.content .row .mega-links{ border-left: 0px; padding-left: 15px; }
	.row .mega-links li{ margin: 0;}
	.content .row header{ font-size: .9em; text-transform: uppercase;}}
nav input {display: none;}
.body-text{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; text-align: center; padding: 0 30px;}
.body-text div{ font-size: 45px; font-weight: 600;}
.row header { background: none; text-align: center}
ul.drop-menu {padding: .2em;}
label.btn.menu-btn { margin-left: .2em;}

#facebook-f, #twitter, #instagram, #youtube, #googlenews, #mastodon { transition: .2s all ease; height: 20px; margin: 5px; }
#facebook-f:hover path, #twitter:hover path, #instagram:hover path, #youtube:hover path, #googlenews:hover path, #threads:hover path, #bluesky:hover path   { fill: #FFFFFF !important;}
input[type="checkbox"]:checked ~ label svg path { transform: rotate(180deg); transform-origin: center; transition: all .5s linear ; -webkit-transform: rotate(180deg); -webkit-transform-origin-x: center; -webkit-transition: all .5s linear ; -moz-transform: rotate(180deg); -moz-transform-origin-x: center; -moz-transition: all .2s linear ;}
input[type="checkbox"]:not(:checked) ~ label svg path {transform: rotate(0deg); transform-origin: center; transition: all .2s linear ; }
.mobile-item svg { fill: darkgray; float: right;  overflow: visible; margin-top: .5em;}
.drop-menu svg { float: left; fill: rgb(186, 186, 186);}
#streaming::before {content: url("/discografia/streaming.svg"); vertical-align: middle; margin-right: .25em}