/*
Theme Name: Twenty Twenty Child
Theme URI: https://example.com/twentytwenty-child
Description: Tema hijo de Twenty Twenty. Ideal para personalizar sin modificar el tema original.
Author: Keino Estudio
Author URI: https://keinoestudio.com
Template: twentytwenty
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentytwenty-child
Tags: child-theme, custom-styles, twentytwenty
*/

body{
	background-color: #fff !important;
}
.single-recurso-audio{
	background-color: #fff;
}
.audio-resource-header{
	width: 100%;
	height: 150px;
	position: relative;
	overflow: hidden;
}

.audio-resource-video video{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 1;
}

.audio-resource-title{
	position: absolute; /* cambiamos a absolute para que coincida con el video */
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(88, 162, 76, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2;
}

.audio-resource-title-text{
	font-family: "Roboto", Sans-serif;
	font-weight: 300;
	font-size: 50px;
	color: #fff;
	margin: 0;
	text-align: center;
	line-height: normal; /* ahora la altura se controla con flex, no con line-height */
}
.audio-content-block{
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: start;
	align-items: center;
}
.audio-content-wrapper{
	width: 100%;
	max-width: 1150px;
}
.audio-resource-audio-text{
	color: #58A24C;
	font-family: "Roboto", Sans-serif;
	font-weight: 500;
	font-size: 50px;
	margin: 3.2rem 0 2rem;
}
.main-audio-wrapper{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 48px;
	padding: 32px 0;
}

.main-audio-wrapper-column{
	width:100%;
	position: relative;
}
.main-audio-wrapper-column.thumbnail{
	aspect-ratio: 5 / 3.33;
}
.main-audio-wrapper-column.thumbnail img{
	width: 100%;
	object-fit: cover;
	object-position: center;
	aspect-ratio: 5 / 3.33;
}
.audio-excerpt-text{
	color: #7c7c7c;
	font-size: 20px;
	font-family: "Roboto", Sans-serif;
}
.audio-excerpt-credits{
	color: #7c7c7c;
	font-size: 16px;
	font-family: "Roboto", Sans-serif;
}
.audio-excerpt-copy{
	color: #7c7c7c;
	font-size: 16px;
	font-family: "Roboto", Sans-serif;
}
.cambio-player{
	width: 100%;
	position: absolute;
	bottom: 0;
	left: 0;
}
.cambio-more-resources-info .cambio-player, .recursos-audio-bendiciones-loop .cambio-player{
	width: 100%;
	position: relative;
}
@media screen and (max-width: 1100px){
	.main-audio-wrapper{
	display: grid;
	grid-template-columns: repeat(1, 1fr);
	gap: 48px;
	padding: 32px 0;
}
.cambio-player{
	width: 100%;
	position: relative;
	bottom: auto;
	left: 0;
}
.audio-content-wrapper{
	padding: 0 24px;
	}	
}
@media screen and (max-width: 730px){
	.audio-resource-title-text{
	font-size: 30px;
	}
	
}

.cambio-more-resources{
	display:flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.cambio-more-resources-list{
	width: 100%;
	max-width: 1150px;
	display:flex;
	flex-direction: column;
}
.cambio-more-resources-item{
	margin-top: 3.8rem;
	display: grid;
	grid-template-columns: 0.3fr 0.7fr;
	gap: 48px;
}
.cambio-more-resources-thumb{
	width: 100%;
}
.cambio-more-resources-thumb img{
	width:100%;
	aspect-ratio: 5 / 3.3;
	object-fit: cover;
	object-position: center;
}
.cambio-more-resources-info{
	display: flex;
	width: 100%;
	flex-direction: column;
	align-items: start;
	justify-content: space-between;
}

.cambio-more-resources-title, .cambio-more-resources-main-title{
	color: #58A24C;
	font-family: "Roboto", Sans-serif;
	font-weight: 300;
	font-size: 30px;
	margin: 3.2rem 0 2rem;
}
.cambio-more-resources-title{

	margin: 0;
}
.cambio-more-resources-title a{

	color: #58A24C;
}
.cambio-more-resources-excerpt{
	display: inline-block;
	font-family: "Roboto", sans-serif;
	font-size: 16px;
	line-height: 20px;
	color: #7c7c7c;
}
.cambio-more-resources-copy{
	display: inline-block;
	font-family: "Roboto", sans-serif;
	font-size: 12px;
	line-height: 16px;
	color: #7c7c7c;
}
@media screen and (max-width: 1100px){
	.main-audio-wrapper{
	display: grid;
	grid-template-columns: repeat(1, 1fr);
	gap: 48px;
	padding: 32px 0;
	
}
.cambio-more-resources-item{

	grid-template-columns: repeat(1 ,1fr);
	margin-bottom: 64px;

}
.cambio-more-resources-list{
	padding: 0 24px;
}
.cambio-more-resources-info{
	display: flex;
	width: 100%;
	flex-direction: column;
	align-items: start;
	justify-content: start;
	gap: 24px;
}
}
/*ESTILOS DEL REPRODUCTOR*/

.rep-box{
    max-width: 1100px;
    width: 100%;
}
.recursos-audio-bendiciones-loop .rep-box{
	max-width: 100%;
}
.cambio-player{
    display: flex;
    padding: 8px 16px;
    border: 1px solid #58A24C;
    border-radius: 32px;
    width: 100%;
    color: #58A24C;
    align-items: center;
    gap: 12px;
}
.cambio-player-progress{
    width: 100%;
}
.cambio-player button{
    cursor: pointer;
    border: none;
    background-color: transparent;
    color: #58A24C;
	padding: 0;
}
.cambio-player input[type="range"] {
  flex: 1;
  appearance: none;
  height: 8px;
  background: #D9D9D9;
  outline: none;
  cursor: pointer;
}
.cambio-player input#volume[type="range"] {
  flex: 1;
  max-width: 80px;
  appearance: none;
  height: 8px;
  background: #D9D9D9;
  outline: none;
  cursor: pointer;
  margin-left: 4px;
}
.cambio-player input[type="range"]::-webkit-slider-thumb {
  visibility: hidden;
  appearance: none;
  width: 8px;
  height: 8px;
  background: #58A24C;
  cursor: pointer;
}
.cambio-player-volume-control{
    display: flex;
    align-items: center;
}
.volume-icon{
    transform: scale(1.4);
    padding-top: 2px;
    color: #58A24C
}
@media screen and (max-width: 1100px){
	#volume{
		display: none;
	}

}

/*ESTILOS DEL SHORTCODE GENERAL*/

.recursos-audio-general-loop{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
}

.recurso-audio-general-item{
	border: 1px solid #58A24C;
	border-radius: 8px;
	padding: 20px 16px 0;
	display: flex;
	flex-direction: column;
	align-items: start;
	justify-content: space-between;
}
.recurso-audio-general-sup{
	width: 100%;
	display: flex;
	flex-direction: column;
}
.recurso-audio-general-title {
	font-family: "Roboto", Sans-serif;
	font-weight: bold;
	color: #58A24C !important;
	font-size: 16px;
	margin: 0;
	height: 60px;
}

.recurso-audio-general-title a{

	color: #58A24C !important;

}
.recurso-audio-general-thumb{
	width: 100%;
}
.recurso-audio-general-thumb-link{
	width: 100%;
	overflow: hidden;
	border-radius: 4px;
	aspect-ratio: 5 / 2.8;
	margin: .8rem 0 2.2rem;
	display: block;
}
.recurso-audio-general-thumb-link img{
	width: 100%;
	aspect-ratio: 5 / 2.8;
	object-fit: cover;
	object-position: center;
}

.recurso-audio-general-excerpt{
	color: #7c7c7c;
	font-size: 12px;
	font-family: "Roboto", Sans-serif;
}
@media screen and (max-width: 1100px){
.recursos-audio-general-loop{
		grid-template-columns: repeat(2, 1fr);
		gap: 24px;
	}
	.recurso-audio-general-title{
	font-size: 24px;
	margin: 0 0 2.2rem;
}
.recurso-audio-general-excerpt{
	color: #7c7c7c;
	font-size: 16px;
	font-family: "Roboto", Sans-serif;
}
}
@media screen and (max-width: 730px){
.recursos-audio-general-loop{
		grid-template-columns: repeat(1, 1fr);
		gap: 32px;
	}
	.recurso-audio-general-title{
	font-size: 24px;
	margin: 0 0 2.2rem;
	height: max-content;
}
.recurso-audio-general-excerpt{
	color: #7c7c7c;
	font-size: 16px;
	font-family: "Roboto", Sans-serif;
}
}
.recurso-audio-general-footer{
	display: flex;
	flex-direction: column;
	gap: 1.2rem;
	padding: 1.2rem 0 1rem;
	width: 100%;
}
.recurso-audio-general-footer-row{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	width: 100%;
}
.listen-audio-general-link{
	display: flex;
	align-items: center;
	font-family: "Roboto", sans-serif;
	font-size: 16px;
	padding: 8px 16px;
	color: #fff;
	background-color: #58A24C;
	border-radius: 2px;
	transition: all 200ms ease-in-out;
	gap: 8px;
}
.listen-audio-general-link:hover{

	background-color: #7ed172;

}
.recurso-audio-general-item .shareBtn{
	padding: 4px;
	background-color: transparent;
	color: #58A24C;
	
}
.listen-audio-general-copy{
	color: #7c7c7c;
	font-size: 12px;
	font-family: "Roboto", Sans-serif;
}

/* Estilos bendiciones */
.recursos-audio-bendiciones-loop{
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 48px;
}

.recurso-audio-bendiciones-item{
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.recursos-audio-bendiciones-title, .recursos-audio-bendiciones-title a{
	font-family: "Roboto", Sans-serif;
	color: #58A24C;
	font-weight: bold;
	font-size: 16px;
	margin: 0;
}
.recursos-audio-bendiciones-copy{
	font-family: "Roboto", Sans-serif;
	color: #7c7c7c;
	font-size: 12px;
}