/*
 Theme Name:   Aztec Child
 Template:     aztec-progression
*/

.progression-studios-elementor-login-element a.arm_form_popup_link {
  background:#D0A792!important;
}

.progression-studios-elementor-login-element a.arm_form_popup_link:hover {
  background:#E5CAB9!important;
}

#search-filters-aztec{
 background-color:#ec9f6f!important;
}

#search-filters-aztec:hover{
  background-color:#e5cab9!important;
}

.skrn-type-select2 {
  border-bottom-color:#e5af92!important;
}

.taxonomia-filtro{
  color:Black !important;
}

.error-sub-title {
  color:#5E5E5E!important;
}

.progression-studios-isotope-animation {
	opacity:4!important;
	transition: opacity 500ms; 
}


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

/* CSS DEL CALENDARIO */

/* Estilos para la primera columna de la cabecera */
.calendario-container .calendario-personalizado th:first-child {
    background-color: #e5cab9; /* Color de fondo para la primera columna */
    color: white; /* Color del texto en la primera columna */
    font-family: 'Montserrat', sans-serif; /* Tipografía Montserrat */
    font-size:18px;
    
}

/* Estilos para el resto de las columnas de la cabecera */
.calendario-container .calendario-personalizado th:not(:first-child) {
    background-color: #e5cab9; /* Color de fondo para el resto de las columnas */
    color: #FFFFFF; /* Color del texto en el resto de las columnas */
    font-family: 'Montserrat', sans-serif; /* Tipografía Montserrat */
    font-size:18px;
    text-transform: capitalize; /* Primera letra en mayúscula */
}

.calendario-container {
    display: flex;
    justify-content: center; /* Centrar la tabla */
    overflow-x: auto; /* Habilitar scroll horizontal */
    width: 100%; /* Ancho del 100% de la página */
    border: 3px solid #d0a792;
    border-radius: 30px;
    padding: 0;
    margin: 0;
    box-sizing: border-box; /* Asegurarse de que el borde se incluya en el ancho */
}

/* Estilos para la barra de scroll */
.calendario-container::-webkit-scrollbar {
    width: 12px; /* Ancho de la barra de desplazamiento */
    height: 12px; /* Altura de la barra de desplazamiento horizontal */
}

.calendario-container::-webkit-scrollbar-track {
    background: #f2f2f2; /* Color del fondo de la barra de desplazamiento */
    border-radius: 10px; /* Bordes redondeados de la pista de la barra de desplazamiento */
}

.calendario-container::-webkit-scrollbar-thumb {
    background-color: #e5cab9; /* Color del pulgar de la barra de desplazamiento */
    border-radius: 10px; /* Bordes redondeados del pulgar de la barra de desplazamiento */
    border: 2px solid #f2f2f2; /* Color del borde del pulgar */
}

/* Para navegadores como Firefox */
.calendario-container {
    scrollbar-width: thin; /* Define el ancho de la barra de desplazamiento */
    scrollbar-color: #e5cab9 #f2f2f2; /* Color del pulgar y del fondo de la barra de desplazamiento */
}

.calendario-wrapper {
    width: 100%; /* Asegurar que el contenedor interno también ocupe el ancho completo */
    box-sizing: border-box; /* Asegurarse de que el borde se incluya en el ancho */
}

.calendario-personalizado {
    font-family: 'Montserrat', sans-serif;
    font-size:18px;
    border-collapse: collapse;
    border: 3px;
    width: 100%; /* Ancho completo */
    min-width: 1400px; /* Ancho mínimo inicial */
    table-layout: fixed; /* Ancho fijo para las celdas */
    margin: 0;
}

/* CABECERA COLUMNAS DIAS DE LA SEMANA (LUNES, MARTES, ETC) */
.calendario-personalizado th, .calendario-personalizado td {
    background-color: #ec9f6f;
    color: white;
    text-align: center;
    margin: 0;
    padding: 5px; /* Espacio interno para las celdas */
}

/* Fondo del calendario */
.calendario-personalizado td {
    border-radius: 20px;
    text-align: left;
    padding: 0;
    background-color: #fff;
    color: #000;
}

/* Estilo para los días del mes */
.calendario-personalizado th .dia {
    display: inline-block;
    width: 40px;
    height: 40px;
    line-height: 40px;
    border-radius: 50%;
    background-color: #fff;
    color: #d0a792;
    text-align: center;
    margin: 10px 0 0 0;
}

.no-calendario {
    font-family: 'Montserrat', sans-serif;
    background-color: #ec9f6f;
    color: white;
    border-radius: 5px;
}

.clase {
    width: 100%;
    background-color: #f7e9e1;
    border: 1px solid white;
    color: black;
    padding: 10px;
    margin: 0;
}

/* Media query para pantallas menores a 1400px */
@media screen and (max-width: 1400px) {
    .calendario-container {
        overflow-x: auto; /* Asegurar scroll horizontal */
    }

    .calendario-personalizado {
        width: auto; /* Permitir ancho variable */
        min-width: calc(200px * 7); /* Mínimo ancho calculado por el número de columnas */
        table-layout: fixed; /* Fijar el layout de la tabla */
    }

    .calendario-personalizado th, .calendario-personalizado td {
        width: 200px; /* Ancho fijo de 200px para cada columna */
    }
}

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

/* Estilo para los botones de navegación */
.navegacion-semanal {
    text-align: center;
    margin-top: 20px;
    display: flex;
    flex-direction: row; /* Por defecto, los elementos están en una fila */
    justify-content: center;
    align-items: center;
}

.navegacion-semanal a {
    display: inline-block;
    text-decoration: none;
    font-size: 16px; /* Tamaño de texto por defecto */
    font-family: 'Montserrat', sans-serif;
    color: white; /* Texto en blanco */
    background-color: #d0a792; /* Color de fondo de los botones por defecto */
    padding: 10px 30px; /* Padding ajustado */
    border-radius: 50px; /* Bordes redondeados */
    margin: 0 10px; /* Separación entre los botones */
    position: relative;
    padding-left: 15px; /* Espacio extra para flecha */
    padding-right: 15px; /* Espacio extra para flecha */
}

.navegacion-semanal a:hover {
    background-color: #e5cab9; /* Color de fondo al hacer hover */
    color: white; /* Mantener el texto en blanco */
}

/* Estilo del rango de fechas entre los botones */
.rango-fechas {
    font-size: 16px;
    font-family: 'Montserrat', sans-serif;
    margin: 0 20px;
    color: #333;
}

/* Estilo para los días normales */
.calendario-personalizado th.dia-normal {
    background-color: #e5cab9;
    color: black;
}

/* Estilo para resaltar el día actual en la cabecera */
.calendario-personalizado th.dia-actual {
    background-color: #d0a792;
    color: white;
}

/* Estilo para dispositivos móviles */
@media (max-width: 600px) {
    .navegacion-semanal {
        flex-direction: column; /* Cambiar a columna en móviles */
        align-items: center; /* Centrar los elementos horizontalmente */
        margin-top: 10px; /* Ajustar el margen superior en móviles */
    }

    .navegacion-semanal a {
        font-size: 12px; /* Reducir el tamaño de texto en móviles */
        padding: 8px 20px; /* Reducir el padding en móviles */
        margin: 5px 0; /* Separar los botones verticalmente en móviles */
    }

    .rango-fechas {
        font-size: 12px; /* Reducir el tamaño del texto en móviles */
        margin: 5px 0; /* Separar el rango de fechas verticalmente en móviles */
    }
}


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

/* CSS DEL GRID DE CLASES */
.progression-studios-video-index-list {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important; /* Mínimo de 200px y se adapta al espacio disponible */
    gap: 20px !important; /* Espacio entre las clases */
}

.progression-studios-video-index-list .progression-masonry-item {
    width: 100% !important; /* Asegurar que cada elemento ocupe todo el ancho disponible */
}

/* Media query para tablets */
@media screen and (max-width: 768px) {
    .progression-studios-video-index-list .progression-masonry-item {
        width: calc(50% - 20px) !important; /* Dos elementos por fila en tablets */
    }
}

/* Media query para dispositivos móviles */
@media screen and (max-width: 576px) {
    .progression-studios-video-index-list .progression-masonry-item {
        width: 100% !important; /* Un elemento por fila en dispositivos móviles */
    }
}




/*  FILTROS */

.search-field-progression, search_keyword{
  color: black !important;
  
}


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


/* BOTON FAVORITOS */

.simplefavorite-button, .my-custom-favorite-button {
    margin: 30px !important;
    padding: 5px 20px !important;
    border: none;
    border-radius: 25px;
    background-color: #ffcccb;
    color: #333;
    font-size: 16px;
    font-family: 'Montserrat', sans-serif;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s, transform 0.3s;
    position: relative;
    text-align: center; /* Alinea el contenido al centro */
    display: inline-flex; /* Hace que el botón se ajuste al contenido */
    align-items: center; /* Centra verticalmente el texto y el icono */
    left: -30px; /* Mueve el botón 30px a la izquierda */
}

.simplefavorite-button:hover, .my-custom-favorite-button:hover {
    background-color: #ff6666;
    color: #fff;
    transform: scale(1.05);
}

.simplefavorite-button::after, .my-custom-favorite-button::after {
    content: '\2665'; /* Corazón Unicode */
    font-size: 18px;
    color: transparent;
    -webkit-text-stroke: 1px #333; /* Solo el contorno del corazón */
    margin-left: 15px; /* Aumenta la separación entre el texto y el corazón */
    transition: color 0.3s, -webkit-text-stroke 0.3s;
}

.simplefavorite-button.active::after, 
.my-custom-favorite-button.active::after {
    color: red;
    -webkit-text-stroke: 0; /* Elimina el contorno al hacer clic */
}


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


/* ESTILOS PARA LOS ELEMENTOS DE FAVORITOS */

/* Contenedor principal */
.favorites-list {
    flex-wrap: wrap;
    display: flex !important;
    justify-content: space-between;
    margin: 0;
    padding: 0;
    list-style-type: none;
    width: 100%; /* Ajusta el ancho del contenedor principal */
}

/* Elemento de cada columna */
.favorites-image-column {
    flex: 1 0 calc(33.33% - 20px); /* Ancho para ordenadores (3 columnas) */
    margin-bottom: 20px;
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.3s, box-shadow 0.3s;
    max-width: calc(33.33% - 20px); /* Máximo ancho por columna */
    margin-right: auto; /* Centrado si está solo */
    margin-left: auto; /* Centrado si está solo */
}

/* Contenedor individual */
.favorites-image-index {
    width: 100% !important;
    text-align: center !important;
    max-width: 100% !important;
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.3s ease-in-out;
}

.favorites-image-index:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}

/* Contenedor de la imagen con relación 16:9 */
.image-wrapper {
    position: relative; /* Mantiene el contenedor en relación para posicionar elementos dentro */
    overflow: hidden;
    height: 0;
    padding-top: 56.25%; /* Relación de aspecto 16:9 */
    transition: transform 0.3s;
}

/* Imagen dentro del contenedor */
.image-wrapper img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease-in-out;
}

/* Título posicionado dentro de la imagen */
.favorites-image-title {
    position: absolute; /* El título se posiciona de forma absoluta */
    bottom: 10px;       /* Ubicado en la parte inferior de la imagen */
    color: white;       /* Texto en blanco */
    font-size: 24px;   
    font-weight: 700;
    line-height: 1.3;
    z-index: 2;         /* Se asegura que esté encima de la imagen */
    padding: 10%;  /* Espacio interno del texto */
    background: none;   /* Eliminamos el fondo negro */
    text-align: center;  /* Justifica el texto al centro */
}

/* Efecto hover para la imagen */
.image-wrapper:hover img {
    transform: scale(1.05); /* Efecto hover en la imagen */
}

/* Overlay de hover */
.hover-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.3s;
    border-radius: 8px;
}



/* Degradado en la parte inferior para mejorar la legibilidad del texto */
.gradient-overlay {
    position: absolute;
    top: 0; /* Mantiene el degradado desde la parte superior */
    left: 0;
    width: 100%;
    height: 100%; /* Llenar todo el contenedor */
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8)100%); /* Degradado más transparente en la parte superior */
    z-index: 1; /* Colocado detrás del título */
}

/* Responsive design */
/* Estilos para tablet: 2 elementos por fila */
@media (max-width: 1023px) {
    .favorites-image-column {
        flex: 1 0 calc(50% - 20px); /* 2 columnas en tablet */
        max-width: calc(50% - 20px); /* Máximo ancho por columna en tablet */
    }
}

/* Estilos para móvil: 1 elemento por fila */
@media (max-width: 767px) {
    .favorites-image-column {
        flex: 1 0 calc(100% - 20px); /* 1 columna en móvil */
        max-width: calc(100% - 20px); /* Máximo ancho por columna en móvil */
    }
}






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


/* Estilos para los elementos de clases de hoy */
/* Contenedor principal */
.progression-studios-video-index-list {
    flex-wrap: wrap;
    display: flex !important;
    justify-content: space-between;
}

/* Elemento de cada video */
.progression-masonry-item{
    flex-basis: calc(33.33% - 20px); /* Ancho para ordenadores (3 columnas) */
    margin-bottom: 20px;
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.3s, box-shadow 0.3s;
}

.progression-studios-video-index {
    width: 100% !important;
    text-align: center !important;
    max-width: 100% !important;
    background: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.3s ease-in-out;
}

.progression-studios-video-index:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}

/* Contenedor de la imagen con relación 16:9 */
.progression-video-feaured-image{
    position: relative;
    overflow: hidden;
    height: 0;
    padding-top: 56.25%; /* Proporción de aspecto 16:9 */
    transition: transform 0.3s;
}

.progression-video-feaured-image img{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease-in-out;
}

/* Efecto hover */
.progression-studios-video-index:hover .progression-video-feaured-image img {
    transform: scale(1.05);
}

.progression-video-index-content {
    padding: 20px;
}

.progression-video-title {
    margin-top: 10px;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
}

.aztec-video-index-meta-taxonomy {
    margin-top: 10px;
    list-style-type: none;
    padding: 0;
}

.aztec-video-index-meta-taxonomy li {
    display: inline-block;
    margin-right: 10px;
    font-size: 14px;
    font-weight: 600;
    color: #555;
}

.clearfix-pro {
    clear: both;
}

/* Efecto hover overlay */
.hover-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.6) 70%); /* Degradado más transparente en la parte superior */
    opacity: 0;
    transition: opacity 0.3s;
    border-radius: 8px;
}

.progression-masonry-item:hover .hover-overlay {
    opacity: 1;
}

/* Estilos para tablet: 2 elementos por fila */
@media (max-width: 1023px) {
    .progression-masonry-item {
        flex-basis: calc(50% - 20px); /* 2 columnas en tablet */
    }
}

/* Estilos para móvil: 1 elemento por fila */
@media (max-width: 767px) {
    .progression-masonry-item {
        flex-basis: calc(100% - 20px); /* 1 columna en móvil */
    }
}

.woocommerce-button .button .view {
    opacity: 0 !important;
    display:none !important;
    
}


.view {
    opacity: 0!important;
    display:none !important;
    
}





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



/* ESTILO CLASES CLASSLAND */

/* Estilos generales para la clase classland_formato_clases */
.classland_formato_clases {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -10px; /* Ajuste del margen negativo para compensar el padding de las columnas */
    padding: 0;
    list-style-type: none;
    width: 100%;
    box-sizing: border-box;
}

/* Estilo para cada columna de post */
.classland_formato_clases .post-column {
    width: calc(33.33% - 20px); /* 3 columnas en ordenadores */
    margin: 10px;
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    box-sizing: border-box;
    transition: transform 0.3s, box-shadow 0.3s;
}

/* Estilo para el enlace de cada post */
.classland_formato_clases .post-column a {
    display: block;
    text-decoration: none;
    color: inherit;
    position: relative;
}

/* Contenedor de la imagen apaisada */
.classland_formato_clases .image-wrapper {
    position: relative;
    overflow: hidden;
    padding-top: 56.25%; /* Proporción 16:9 para formato apaisado */
    border-radius: 8px;
}

/* Estilo para la imagen destacada */
.classland_formato_clases .image-wrapper img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease-in-out;
}

/* Superposición del degradado */
.classland_formato_clases .image-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.6) 70%); /* Degradado más transparente en la parte superior */
    border-radius: 8px; /* Asegúrate de que el degradado siga el borde redondeado */
    pointer-events: none; /* Asegura que el degradado no interfiera con la interacción del mouse */
    z-index: 1; /* Asegúrate de que el degradado esté encima de la imagen */
}

/* Título del post sobre la imagen */
.classland_formato_clases .post-title {
    position: absolute;
    bottom: 20px;
    left: 0;
    width: 100%;
    padding: 10px;
    color: white;
    text-align: center;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    box-sizing: border-box;
    margin-top: 10px;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.3;
    z-index: 2; /* Asegúrate de que el título esté encima del degradado */
}

/* Efecto hover sobre la imagen */
.classland_formato_clases .post-column:hover .image-wrapper img {
    transform: scale(1.05); /* Ligera ampliación */
}

/* Estilos para tablet: 2 elementos por fila */
@media (max-width: 1023px) {
    .classland_formato_clases .post-column {
        width: calc(50% - 20px); /* 2 columnas en tablet */
    }
}

/* Estilos para móvil: 1 elemento por fila */
@media (max-width: 767px) {
    .classland_formato_clases .post-column {
        width: calc(100% - 20px); /* 1 columna en móvil */
    }
}


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

/* PAGINA PROTEGIDA CON CONTRASEÑA */

/* Aumentar la especificidad para asegurar que el estilo se aplique */
#content-pro .width-container-pro .post-password-form {
  margin: 5% auto; /* 5% arriba/abajo, centrado horizontalmente */
  max-width: 400px; /* Limita el ancho del formulario */
  padding: 20px;
  border: 1px solid #ccc; /* Opcional: añade un borde para mayor visibilidad */
  border-radius: 15px; /* Bordes redondeados */
  background-color: #f9f9f9; /* Opcional: color de fondo */
  font-family: 'Montserrat', sans-serif; /* Aplica la fuente Montserrat a todo el formulario */
  text-align: center; /* Asegura que todo el contenido esté centrado dentro del formulario */
}

/* Asegurar que el botón esté centrado y aplicar colores personalizados */
#content-pro .width-container-pro .post-password-form input[type="submit"] {
  display: block; /* Cambiar a block para que pueda ser centrado */
  margin: 20px auto; /* Centrar horizontalmente con margin auto */
  padding: 10px 20px; /* Aumenta el padding para un botón más grande */
  background-color: #d0a792; /* Color de fondo del botón */
  color: #fff; /* Color del texto blanco */
  border: none; /* Sin borde */
  border-radius: 5px; /* Bordes redondeados */
  font-family: 'Montserrat', sans-serif; /* Aplicar la tipografía Montserrat */
  cursor: pointer; /* Cambiar el cursor al pasar por encima */
  transition: background-color 0.3s ease; /* Transición suave para el hover */
}

/* Cambiar color en hover */
#content-pro .width-container-pro .post-password-form input[type="submit"]:hover {
  background-color: #e5cab9; /* Color de fondo del botón en hover */
}

#content-pro .width-container-pro .post-password-form label, 
#content-pro .width-container-pro .post-password-form p {
  font-family: 'Montserrat', sans-serif; /* Asegura que toda la tipografía sea Montserrat */
}

/*---------------------------------------------------------------------------------------*/
/* ESTILO PARA EMBEBIDO CLICKMEETING */


/* Estilos generales */
html, body {
    margin: 0; 
    padding: 0; 
    height: 100%; 
    overflow: auto; /* Permitir scroll en la página */
}

.clickmeeting-embed-container {
    position: relative;
    width: 90%;
    height: 0;
    padding-bottom: 56.25%; /* Relación de aspecto 16:9 */
    margin: 0 auto; /* Centra el contenedor */
    margin-top: -100px;
}

.clickmeeting-embed-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Estilos para pantallas móviles */
@media only screen and (max-width: 768px) {
    .clickmeeting-embed-container {
        width: 90vw; /* Usar todo el ancho */
        height: 100vh; /* Usar toda la altura */
        padding-bottom: 0;
        overflow: hidden; /* Ocultar scroll */
    }
}

/* Botón */
.fullscreen-button {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 10000;
    background-color: #ec9f6f;
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
}