/* === Página de proyectos - INICIO === */
@media only screen and (max-width: 768px) {
    
	.page-template-plantilla_proyectos .wpb_text_column.wpb_content_element.header-catalogos__subtitle{
		width: 100%;
	}

	.page-template-plantilla_proyectos .header-catalogos {
		padding-right: 0px
	}

	.page-template-plantilla_proyectos .header-catalogos__subtitle h6 {
        padding-left: 15px;
        padding-right: 15px;
    }	

}

/* === Carrusel de Proyectos - INICIO === */

/* === Alineación general de flechas del carrusel === */

@media (max-width: 1200px) {
	.carousel__proyectos {
	  padding-left: 20px;
	  padding-right: 20px;
	}
	/* Ajustar sombras para alinearse con el nuevo padding */
	.carousel__proyectos::before {
	  left: 20px; /* Alinear con el nuevo padding-left */
	}
	.carousel__proyectos::after {
	  right: 20px; /* Alinear con el nuevo padding-right */
	}
	.page-template-plantilla_proyectos #serie_filtro_acabados_decorados_v3.no_click{
		padding-left: 20px;
	}
}

@media (max-width: 900px) {
	.carousel__proyectos .item_proyecto {
	  min-width: 260px;
	}
	/* Ajustar sombras para pantallas medianas */
	.carousel__proyectos::before {
	  left: 15px;
	}
	.carousel__proyectos::after {
	  right: 15px;
	}
}

@media (max-width: 768px) {
	.carousel__proyectos {
	  padding-left: 15px;
	  padding-right: 15px;
	}
	/* Ajustar sombras para tablets */
	.carousel__proyectos::before {
	  left: 10px;
	}
	.carousel__proyectos::after {
	  right: 10px;
	}
	
}

@media (max-width: 600px) {
	.carousel__proyectos {
	  padding-left: 0;
	  padding-right: 0;
	}
	.carousel__proyectos .item_proyecto {
	  border-radius: 0;
	  margin: 0 4px !important;
	}
	.carousel__proyectos .info {
	  padding: 16px 10px 14px 10px;
	}
	/* Ajustar sombras para móviles - posicionarlas sobre el último elemento visible */
	.carousel__proyectos::before {
	  left: 5px;
	}
	.carousel__proyectos::after {
	  right: 5px;
	}
}

@media (max-width: 480px) {
	/* Ajustar sombras para móviles pequeños */
	.carousel__proyectos::before {
	  left: 2px;
	}
	.carousel__proyectos::after {
	  right: 2px;
	}
}

@media (max-width: 375px) {
	/* Ajustar sombras para móviles muy pequeños */
	.carousel__proyectos::before {
	  left: 0;
	}
	.carousel__proyectos::after {
	  right: 0;
	}
}

/* === Ajustes para flechas del carrusel === */
@media (max-width: 640px) {
	.carousel__proyectos-arrows {
		margin-bottom: 40px;
	}
}

/* === Ajustes para flechas indicadoras individuales === */
@media (max-width: 768px) {
	.carousel__proyectos .item-selector-arrow {
		bottom: -20px;
		width: 45px;
		height: 19px;
	}
}

@media (max-width: 600px) {
	.carousel__proyectos .item-selector-arrow {
		bottom: -18px;
		width: 40px;
		height: 17px;
	}
}

@media (max-width: 480px) {
	.carousel__proyectos .item-selector-arrow {
		bottom: -15px;
		width: 35px;
		height: 15px;
	}
}

/* === Ajustes para flechas del carrusel === */
@media (max-width: 1200px) {
	.carousel__proyectos-arrows {
		justify-content: flex-end;
	}
	
	/* Ajustar posiciones de las flechas para pantallas menores de 1200px */
	.carousel__proyectos-arrows .slick-prev {
		right: 76px; /* 20px padding + 56px gap */
	}
	
	.carousel__proyectos-arrows .slick-next {
		right: 20px; /* Alinear con el nuevo padding-right */
	}
}

@media (max-width: 768px) {
	.carousel__proyectos-arrows {
		justify-content: flex-end;
	}
	
	/* Ajustar posiciones de las flechas para tablets */
	.carousel__proyectos-arrows .slick-prev {
		right: 71px; /* 15px padding + 56px gap */
	}
	
	.carousel__proyectos-arrows .slick-next {
		right: 15px; /* Alinear con el nuevo padding-right */
	}
}

@media (max-width: 425px) {
	.carousel__proyectos-arrows {
		justify-content: flex-end;
	}
	
	/* Ajustar posiciones de las flechas para móviles pequeños */
	.carousel__proyectos-arrows .slick-prev {
		right: 66px; /* 10px padding + 56px gap */
	}
	
	.carousel__proyectos-arrows .slick-next {
		right: 10px; /* Alinear con el nuevo padding-right */
	}
}

/* === Carrusel de Proyectos - FIN === */

/* === Ficha de proyecto - INICIO === */
@media (max-width: 1200px) {
	.ficha-proyecto-datos {
	  gap: 0; /* Eliminar gap */
	}
	.ficha-proyecto-datos-imagen {
	  margin-right: 120px; /* Añadir espacio manualmente */
	}
}
@media (max-width: 1024px) {
	.ficha-proyecto-datos {
	  gap: 0; /* Eliminar gap para usar margin manual */
	}
	.ficha-proyecto-datos-imagen {
	  flex: 0 0 480px; /* Reducir ligeramente el tamaño de la imagen */
	  /*max-width: 480px;*/
	  min-width: 350px;
	  margin-right: 80px; /* Espacio manual para pantallas medianas */
	  max-width: 50%;	  
	}
	.ficha-proyecto-datos-info {
	  min-width: 240px;
	  /*max-width: 380px;*/
	  max-width: 50%;
	}
}
@media (max-width: 768px) {
	.ficha-proyecto-datos {
	  gap: 0; /* Eliminar gap */
	  justify-content: flex-start; /* Alinear a la izquierda */
	}
	.ficha-proyecto-datos-imagen {
	  flex: 0 0 350px; /* Reducir el tamaño fijo de la imagen */
	  max-width: 350px; /* Reducir el ancho máximo */
	  min-width: 280px; /* Reducir el ancho mínimo */
	  margin-right: 40px; /* Espacio mínimo entre imagen y texto */
	}
	.ficha-proyecto-datos-info {
	  flex: 1; /* Que ocupe el espacio restante */
	  min-width: 200px; /* Asegurar espacio mínimo para el texto */
	}
}
@media (max-width: 600px) {
	.ficha-proyecto-datos {
	  flex-direction: column;
	  gap: 32px;
	  align-items: center;
	}
	.ficha-proyecto-datos-imagen,
	.ficha-proyecto-datos-info {
	  max-width: 100%;
	  width: 100%;
	}
 }
/* === Ficha de proyecto - FIN === */

/* === Galería de imágenes - INICIO === */
/* Media queries para cambiar entre rejillas */
@media (max-width: 768px) {
	.ficha-proyecto-galeria-desktop {
	  display: none !important;
	}	
	.ficha-proyecto-galeria-mobile {
	  display: grid !important;
	}	
	/* Indicador de hotspots en móvil */
	.ficha-proyecto-galeria-item-wrapper .hotspot-indicator {
	  width: 24px;
	  height: 36px;
	  top: 6px;
	  right: 6px;
	  padding: 1px 0 1px 0;
	}	
	.ficha-proyecto-galeria-item-wrapper .hotspot-indicator .hotspot-indicator-number {
	  font-size: 10px;
	  margin-top: 8px;
	}	
	.ficha-proyecto-galeria-item-wrapper .hotspot-indicator .hotspot-indicator-icon {
	  width: 12px;
	  height: 12px;
	}
}
 /* Forzar recálculo en cambios de viewport móvil */
 @media (max-width: 768px) {
	.ficha-proyecto-galeria-mobile .ficha-proyecto-galeria-item-wrapper {
	  /* Permitir que el JavaScript controle la altura */
	  min-height: 0;
	  height: auto;
	}	
	.ficha-proyecto-galeria-mobile .ficha-proyecto-galeria-item {
	  /* Asegurar que las imágenes se ajusten correctamente */
	  min-height: 100px;
	}	
	/* Ajustar elementos que se salen de la rejilla de 3 columnas */
	.ficha-proyecto-galeria-mobile .ficha-proyecto-galeria-item-wrapper[style*="span 3"] {
	  grid-column: span 3 !important;
	}	
	.ficha-proyecto-galeria-mobile .ficha-proyecto-galeria-item-wrapper[style*="span 4"] {
	  grid-column: span 3 !important; /* Limitar a 3 columnas máximo */
	}	
	/* Asegurar que la rejilla móvil tenga filas automáticas pero permita altura personalizada */
	.ficha-proyecto-galeria-mobile {
	  grid-auto-rows: minmax(100px, auto);
	  grid-auto-flow: row dense; /* Llenar espacios vacíos */
	}
	/* Permitir que el JavaScript controle la altura específica */
	.ficha-proyecto-galeria-mobile .ficha-proyecto-galeria-item-wrapper[style*="height"] {
	  height: var(--calculated-height, auto) !important;
	}
  }
/* Forzar recálculo en cambios de viewport */
@media (min-width: 769px) {
	.ficha-proyecto-galeria-desktop {
	  display: grid !important;
	}
	
	.ficha-proyecto-galeria-mobile {
	  display: none !important;
	}
}
/* === Galería de imágenes - FIN === */  
 
/* === Galería de imágenes - MODAL- INICIO === */  
/* Responsive para pantallas más pequeñas */
@media (max-width: 1200px) {
    /*.ficha-proyecto-galeria-modal .modal-image-preview {
      opacity: 1.0;
    }
    
    .ficha-proyecto-galeria-modal .modal-image-preview.modal-image-prev {
      left: -120px;
    }
    
    .ficha-proyecto-galeria-modal .modal-image-preview.modal-image-next {
      right: -120px;
    }*/

	.ficha-proyecto-galeria-modal .modal-image-preview {
		display: none !important; /* Ocultar vistas previas en móviles */
	  }  
	  .ficha-proyecto-galeria-modal .modal-images-container{
		  overflow: visible;
	  }  


	  .ficha-proyecto-galeria-modal .modal-image-main .modal-image {
		max-width: 85vw;
		max-height: calc(60vh - 40px);
	  }
	  .ficha-proyecto-galeria-modal .modal-images-container {
		height: calc(60vh + 40px);
	  }

	.ficha-proyecto-galeria-modal .modal-image-wrapper {
		max-width:90vw;
	}
	  
  }
  
/*@media (max-width: 640px) {
    .ficha-proyecto-galeria-modal .modal-image-preview {
      display: none !important; Ocultar imágenes laterales en móviles pequeños 
    }
}*/
  
@media (max-width: 768px) {
    
    .ficha-proyecto-galeria-modal .modal-controls {
      bottom: 20px;
      right: 20px;
    }    
     
    .ficha-proyecto-galeria-modal .modal-nav {
        width: 32px;
        height: 32px;
    }      
    .ficha-proyecto-galeria-modal .modal-close {
        width: 32px;
        height: 32px;
    }      
    .page-template-plantilla_proyectos .modal-hotspot,
	.page-template-plantilla_productos .modal-hotspot {
        width: 28px;
        height: 28px;
    }      
    .page-template-plantilla_proyectos .modal-hotspot::before,
	.page-template-plantilla_productos .modal-hotspot::before {
        width: 22px;
        height: 22px;
    }     
    .page-template-plantilla_proyectos .hotspot-modal,
	.page-template-plantilla_productos .hotspot-modal {
        width: 280px;
        padding: 10px;
        /* Asegurar que la modal no se salga de pantalla */
        max-width: calc(100vw - 40px);
        left: 50% !important;
        transform: translateX(-50%) !important;
        /* Ajustar posición vertical si es necesario */
        top: auto !important;
        bottom: auto !important;
    }     
    .page-template-plantilla_proyectos .hotspot-modal-image,
	.page-template-plantilla_productos .hotspot-modal-image {
        flex: 0 0 70px;
    }     
    .page-template-plantilla_proyectos .hotspot-modal img,
	.page-template-plantilla_productos .hotspot-modal img {
        width: 70px;
        height: 70px;
    }     
    .page-template-plantilla_proyectos .hotspot-modal-content,
	.page-template-plantilla_productos .hotspot-modal-content {
        gap: 10px;
    }     
    .page-template-plantilla_proyectos .hotspot-modal h3,
	.page-template-plantilla_productos .hotspot-modal h3 {
        font-size: 13px;
    }      
    .page-template-plantilla_proyectos .hotspot-modal p,
	.page-template-plantilla_productos .hotspot-modal p {
        font-size: 11px;
    }      
    .page-template-plantilla_proyectos .hotspot-modal-ean,
	.page-template-plantilla_productos .hotspot-modal-ean {
        font-size: 11px;
        margin-bottom: 6px;
    }
}

@media (max-width: 600px) {
	.ficha-proyecto-datos {
	  flex-direction: column;
	  gap: 32px;
	  align-items: center;
	}
	.ficha-proyecto-datos-imagen,
	.ficha-proyecto-datos-info {
	  max-width: 100%;
	  width: 100%;
	}
	/* Indicador de hotspots en móviles muy pequeños */
	.ficha-proyecto-galeria-item-wrapper .hotspot-indicator {
	  width: 20px;
	  height: 30px;
	  top: 4px;
	  right: 4px;
	  padding: 1px 0 0 0;
	}	
	.ficha-proyecto-galeria-item-wrapper .hotspot-indicator .hotspot-indicator-number {
	  font-size: 9px;
	  margin-top: 6px;
	}	
	.ficha-proyecto-galeria-item-wrapper .hotspot-indicator .hotspot-indicator-icon {
	  width: 10px;
	  height: 10px;
	}
	
	/* Modal de hotspot para pantallas muy pequeñas */
	.page-template-plantilla_proyectos .hotspot-modal,
	.page-template-plantilla_productos .hotspot-modal {
		width: calc(100vw - 20px);
		max-width: 300px;
		padding: 8px;
		/* Centrar horizontalmente y posicionar verticalmente de forma segura */
		left: 50% !important;
		transform: translateX(-50%) !important;
		top: 50% !important;
		transform: translateX(-50%) translateY(-50%) !important;
		/* Asegurar que esté dentro de los límites de la pantalla */
		max-height: calc(100vh - 40px);
		overflow-y: auto;
	}
	
	.page-template-plantilla_proyectos .hotspot-modal-image,
	.page-template-plantilla_productos .hotspot-modal-image {
		flex: 0 0 60px;
	}
	
	.page-template-plantilla_proyectos .hotspot-modal img,
	.page-template-plantilla_productos .hotspot-modal img {
		width: 60px;
		height: 60px;
	}
	
	.page-template-plantilla_proyectos .hotspot-modal-content,
	.page-template-plantilla_productos .hotspot-modal-content {
		gap: 8px;
	}
	
	.page-template-plantilla_proyectos .hotspot-modal h3,
	.page-template-plantilla_productos .hotspot-modal h3 {
		font-size: 12px;
	}
	
	.page-template-plantilla_proyectos .hotspot-modal p,
	.page-template-plantilla_productos .hotspot-modal p {
		font-size: 10px;
	}
	
	.page-template-plantilla_proyectos .hotspot-modal-ean,
	.page-template-plantilla_productos .hotspot-modal-ean {
		font-size: 10px;
		margin-bottom: 4px;
	}
}

/* === Media Queries específicas para modal de hotspot en pantallas pequeñas === */
@media (max-width: 480px) {
	.page-template-plantilla_proyectos .hotspot-modal,
	.page-template-plantilla_productos .hotspot-modal {
		width: calc(100vw - 16px);
		max-width: 280px;
		padding: 6px;
		/* Posicionamiento seguro para pantallas muy pequeñas */
		left: 50% !important;
		transform: translateX(-50%) !important;
		top: 50% !important;
		transform: translateX(-50%) translateY(-50%) !important;
		/* Asegurar que no se salga de la pantalla */
		max-height: calc(100vh - 32px);
		overflow-y: auto;
		/* Añadir scroll si el contenido es muy largo */
		word-wrap: break-word;
	}
	
	.page-template-plantilla_proyectos .hotspot-modal-image,
	.page-template-plantilla_productos .hotspot-modal-image {
		flex: 0 0 50px;
	}
	
	.page-template-plantilla_proyectos .hotspot-modal img,
	.page-template-plantilla_productos .hotspot-modal img {
		width: 50px;
		height: 50px;
	}
	
	.page-template-plantilla_proyectos .hotspot-modal-content,
	.page-template-plantilla_productos .hotspot-modal-content {
		gap: 6px;
	}
	
	.page-template-plantilla_proyectos .hotspot-modal h3,
	.page-template-plantilla_productos .hotspot-modal h3 {
		font-size: 11px;
		line-height: 1.2;
	}
	
	.page-template-plantilla_proyectos .hotspot-modal p,
	.page-template-plantilla_productos .hotspot-modal p {
		font-size: 9px;
		line-height: 1.3;
	}
	
	.page-template-plantilla_proyectos .hotspot-modal-ean,
	.page-template-plantilla_productos .hotspot-modal-ean {
		font-size: 9px;
		margin-bottom: 3px;
	}
}

/* === Media Queries específicas para 425px y pantallas muy pequeñas === */
@media (max-width: 425px) {
	/* Forzar posicionamiento de la modal del hotspot */
	.page-template-plantilla_proyectos .hotspot-modal,
	.page-template-plantilla_productos .hotspot-modal,
	.page-template-plantilla_proyectos .hotspot-modal.active,
	.page-template-plantilla_productos .hotspot-modal.active,
	.page-template-plantilla_proyectos .hotspot-modal[style*="left"],
	.page-template-plantilla_productos .hotspot-modal[style*="left"],
	.page-template-plantilla_proyectos .hotspot-modal[style*="top"],	
	.page-template-plantilla_productos .hotspot-modal[style*="top"]{
		/* Forzar posicionamiento centrado y evitar que se salga de pantalla */
		left: 50% !important;
		top: 50% !important;
		transform: translateX(-50%) translateY(-50%) !important;
		/* Asegurar que esté dentro de los límites de la pantalla */
		width: calc(100vw - 12px) !important;
		max-width: 260px !important;
		max-height: calc(100vh - 24px) !important;
		/* Posicionamiento fijo en el centro de la pantalla */
		position: fixed !important;
		z-index: 10001 !important;
		/* Asegurar que no se salga de los bordes */
		margin: 0 !important;
		padding: 8px !important;
		overflow-y: auto !important;
		word-wrap: break-word !important;
		/* Resetear cualquier estilo inline problemático */
		right: auto !important;
		bottom: auto !important;
	}
	
	.page-template-plantilla_proyectos .hotspot-modal-image,
	.page-template-plantilla_productos .hotspot-modal-image {
		flex: 0 0 45px !important;
	}
	
	.page-template-plantilla_proyectos .hotspot-modal img,
	.page-template-plantilla_productos .hotspot-modal img {
		width: 45px !important;
		height: 45px !important;
	}
	
	.page-template-plantilla_proyectos .hotspot-modal-content,
	.page-template-plantilla_productos .hotspot-modal-content {
		gap: 6px !important;
	}
	
	.page-template-plantilla_proyectos .hotspot-modal h3,
	.page-template-plantilla_productos .hotspot-modal h3 {
		font-size: 10px !important;
		line-height: 1.2 !important;
		margin: 0 0 4px 0 !important;
	}
	
	.page-template-plantilla_proyectos .hotspot-modal p,
	.page-template-plantilla_productos .hotspot-modal p {
		font-size: 8px !important;
		line-height: 1.3 !important;
		margin: 0 !important;
	}
	
	.page-template-plantilla_proyectos .hotspot-modal-ean,
	.page-template-plantilla_productos .hotspot-modal-ean {
		font-size: 8px !important;
		margin-bottom: 3px !important;
	}
}

/* === Media Queries para pantallas extremadamente pequeñas === */
@media (max-width: 375px) {
	/* Forzar posicionamiento de la modal del hotspot */
	.page-template-plantilla_proyectos .hotspot-modal,
	.page-template-plantilla_productos .hotspot-modal,
	.page-template-plantilla_proyectos .hotspot-modal.active,
	.page-template-plantilla_productos .hotspot-modal.active,
	.page-template-plantilla_proyectos .hotspot-modal[style*="left"],
	.page-template-plantilla_productos .hotspot-modal[style*="left"],
	.page-template-plantilla_proyectos .hotspot-modal[style*="top"],
	.page-template-plantilla_productos .hotspot-modal[style*="top"]{
		width: calc(100vw - 8px) !important;
		max-width: 240px !important;
		padding: 6px !important;
		/* Asegurar posicionamiento centrado absoluto */
		left: 50% !important;
		top: 50% !important;
		transform: translateX(-50%) translateY(-50%) !important;
		position: fixed !important;
		z-index: 10001 !important;
		/* Resetear cualquier estilo inline problemático */
		right: auto !important;
		bottom: auto !important;
	}
	
	.page-template-plantilla_productos .hotspot-modal-image,
	.page-template-plantilla_proyectos .hotspot-modal-image {
		flex: 0 0 40px !important;
	}
	
	.page-template-plantilla_productos .hotspot-modal img,
	.page-template-plantilla_proyectos .hotspot-modal img {
		width: 40px !important;
		height: 40px !important;
	}
	
	.page-template-plantilla_productos .hotspot-modal h3,
	.page-template-plantilla_proyectos .hotspot-modal h3{
		font-size: 9px !important;
	}
	
	.page-template-plantilla_proyectos .hotspot-modal p,
	.page-template-plantilla_productos .hotspot-modal p {
		font-size: 7px !important;
	}
	
	.page-template-plantilla_proyectos .hotspot-modal-ean,
	.page-template-plantilla_productos .hotspot-modal-ean {
		font-size: 7px !important;
	}
}

/* === Reglas adicionales para forzar el posicionamiento en todas las pantallas pequeñas === */
@media (max-width: 600px) {
	/* Forzar posicionamiento centrado para todas las modales de hotspot */
	.page-template-plantilla_proyectos .hotspot-modal,
	.page-template-plantilla_productos .hotspot-modal,
	.page-template-plantilla_proyectos .hotspot-modal.active,
	.page-template-plantilla_productos .hotspot-modal.active,
	.page-template-plantilla_proyectos .hotspot-modal[style*="left"],
	.page-template-plantilla_productos .hotspot-modal[style*="left"],
	.page-template-plantilla_proyectos .hotspot-modal[style*="top"],
	.page-template-plantilla_productos .hotspot-modal[style*="top"]{
		/* Asegurar que siempre esté centrada */
		left: 50% !important;
		top: 50% !important;
		transform: translateX(-50%) translateY(-50%) !important;
		position: fixed !important;
		z-index: 10001 !important;
		/* Resetear estilos problemáticos */
		right: auto !important;
		bottom: auto !important;
	}
}

/* === Reglas extremadamente específicas para sobrescribir estilos inline === */
@media (max-width: 425px) {
	/* Usar selectores de máxima especificidad para sobrescribir estilos inline */
	.page-template-plantilla_proyectos .hotspot-modal[style*="left"],
	.page-template-plantilla_productos .hotspot-modal[style*="left"],
	.page-template-plantilla_proyectos .hotspot-modal[style*="top"],	
	.page-template-plantilla_productos .hotspot-modal[style*="top"],
	.page-template-plantilla_proyectos .hotspot-modal.active[style*="left"],
	.page-template-plantilla_productos .hotspot-modal.active[style*="left"],
	.page-template-plantilla_proyectos .hotspot-modal.active[style*="top"],		
	.page-template-plantilla_productos .hotspot-modal.active[style*="top"],
	.page-template-plantilla_proyectos .hotspot-modal[style*="cursor"],
	.page-template-plantilla_proyectos .hotspot-modal.active[style*="cursor"],
	.page-template-plantilla_proyectos .hotspot-modal.active[style*="cursor"],
	.page-template-plantilla_productos .hotspot-modal.active[style*="cursor"]{
		/* Forzar posicionamiento centrado absoluto */
		left: 50% !important;
		top: 50% !important;
		transform: translateX(-50%) translateY(-50%) !important;
		position: fixed !important;
		z-index: 10001 !important;
		/* Resetear completamente cualquier estilo inline */
		right: auto !important;
		bottom: auto !important;
		margin: 0 !important;
		/* Asegurar dimensiones apropiadas */
		width: calc(100vw - 12px) !important;
		max-width: 260px !important;
		max-height: calc(100vh - 24px) !important;
		padding: 8px !important;
		overflow-y: auto !important;
		word-wrap: break-word !important;
	}
}

/* === Reglas para pantallas muy pequeñas con máxima especificidad === */
@media (max-width: 375px) {
	/* Selectores extremadamente específicos para sobrescribir JavaScript */
	.page-template-plantilla_proyectos .hotspot-modal[style*="left"],
	.page-template-plantilla_productos .hotspot-modal[style*="left"],
	.page-template-plantilla_proyectos .hotspot-modal[style*="top"],
	.page-template-plantilla_productos .hotspot-modal[style*="top"],
	.page-template-plantilla_proyectos .hotspot-modal.active[style*="left"],
	.page-template-plantilla_productos .hotspot-modal.active[style*="left"],
	.page-template-plantilla_proyectos .hotspot-modal.active[style*="top"],	
	.page-template-plantilla_productos .hotspot-modal.active[style*="top"],
	.page-template-plantilla_proyectos .hotspot-modal[style*="cursor"],
	.page-template-plantilla_proyectos .hotspot-modal.active[style*="cursor"],
	.page-template-plantilla_proyectos .hotspot-modal.active[style*="cursor"],
	.page-template-plantilla_productos .hotspot-modal.active[style*="cursor"] {
		/* Forzar posicionamiento centrado */
		left: 50% !important;
		top: 50% !important;
		transform: translateX(-50%) translateY(-50%) !important;
		position: fixed !important;
		z-index: 10001 !important;
		/* Resetear estilos inline */
		right: auto !important;
		bottom: auto !important;
		margin: 0 !important;
		/* Dimensiones para pantallas muy pequeñas */
		width: calc(100vw - 8px) !important;
		max-width: 240px !important;
		padding: 6px !important;
		overflow-y: auto !important;
		word-wrap: break-word !important;
	}
}

/* === Regla de emergencia para cualquier pantalla pequeña === */
@media (max-width: 600px) {
	/* Regla de emergencia que se aplica a cualquier modal con estilos inline */
	div.hotspot-modal[style*="left"],
	div.hotspot-modal[style*="top"],
	div.hotspot-modal.active[style*="left"],
	div.hotspot-modal.active[style*="top"],
	.page-template-plantilla_productos div.hotspot-modal[style*="left"],
	.page-template-plantilla_productos div.hotspot-modal[style*="top"],
	.page-template-plantilla_productos div.hotspot-modal.active[style*="left"],
	.page-template-plantilla_productos div.hotspot-modal.active[style*="top"] {
		/* Forzar posicionamiento centrado sin importar qué */
		left: 50% !important;
		top: 50% !important;
		transform: translateX(-50%) translateY(-50%) !important;
		position: fixed !important;
		z-index: 10001 !important;
		/* Resetear todo */
		right: auto !important;
		bottom: auto !important;
		margin: 0 !important;
		/* Asegurar que no se salga de pantalla */
		max-width: calc(100vw - 16px) !important;
		max-height: calc(100vh - 32px) !important;
		overflow-y: auto !important;
	}
}

/* === Pestañas de Proyectos Responsive - INICIO === */
/* Ocultar la lista original de pestañas de proyectos */



@media (max-width: 768px) {
	#superpestanya_PROYECTOS .proyectos-tabs-container .slick-prev,
	#superpestanya_PROYECTOS .proyectos-tabs-container .slick-next {
		width: 28px;
		height: 28px;
	}
	
	#superpestanya_PROYECTOS .proyectos-tabs-container .slick-prev {
		left: -30px;
	}
	
	#superpestanya_PROYECTOS .proyectos-tabs-container .slick-next {
		right: -30px;
	}
}

@media (max-width: 600px) {
	#superpestanya_PROYECTOS .proyectos-tabs-container .slick-prev,
	#superpestanya_PROYECTOS .proyectos-tabs-container .slick-next {
		width: 24px;
		height: 24px;
	}
	
	#superpestanya_PROYECTOS .proyectos-tabs-container .slick-prev {
		left: -25px;
	}
	
	#superpestanya_PROYECTOS .proyectos-tabs-container .slick-next {
		right: -25px;
	}
}

@media (max-width: 640px) {
	/* Cambiar layout a vertical para pestañas de proyectos */
	#superpestanya_PROYECTOS .proyectos-tabs-slick .slick-track {
		display: flex;
		flex-direction: column;
		gap: 10px;
	}
	
	#superpestanya_PROYECTOS .proyectos-tabs-slick .slick-slide {
		flex: none;
		padding: 0;
		width: 100% !important;
	}
	
	#superpestanya_PROYECTOS .proyecto-tab {
		width: 100% !important;
		margin: 0;
		padding: 15px;
	}
	
	/* Ocultar flechas en layout vertical */
	#superpestanya_PROYECTOS .proyectos-tabs-container .slick-prev,
	#superpestanya_PROYECTOS .proyectos-tabs-container .slick-next {
		display: none !important;
	}
}

@media only screen and (max-width: 1024px) {
	.serie_filtro_familias > .wpb_column > .vc_column-inner > .wpb_wrapper > div div#li_PROYECTOS a {
		padding-left: 0;
		background-position: top center;
		padding-top: 46px;
		display: flex;
		align-items: flex-start;
	}
}

/* === Pestañas de Proyectos Responsive - FIN === */

/* === Media Queries específicas para 768px - Ficha de proyecto === */
@media (max-width: 768px) {
	/* Ajustes para la ficha de proyecto en 768px */
	.ficha-proyecto-wrap {
		padding: 0 16px;
		margin-top: 20px;
	}
	
	.ficha-proyecto-nombre {
		font-size: 2rem;
		margin: 0 0 16px 0;
	}
	
	.ficha-proyecto-descripcion {
		font-size: 1rem;
		margin: 0 0 32px 0;
	}
	
	/* Cambiar layout a columna: imagen centrada arriba, información abajo */
	.ficha-proyecto-datos {
		flex-direction: column;
		align-items: center;
		gap: 32px;
		margin-bottom: 40px;
	}
	
	/* Imagen centrada con ancho máximo */
	.ficha-proyecto-datos-imagen {
		flex: none;
		max-width: 100%;
		min-width: auto;
		width: 100%;
		max-width: 500px;
		margin-right: 0; /* Eliminar margin-right ya que ahora está en columna */
	}
	
	/* Información del proyecto en segunda línea */
	.ficha-proyecto-datos-info {
		flex: none;
		width: 100%;
		max-width: 500px;
		min-width: auto;
		gap: 24px;
		align-items: center;
	}
	
	/* Ajustes de texto para móvil */
	.ficha-proyecto-info-row {
		margin-bottom: 6px;
	}
	
	.ficha-proyecto-info-label {
		font-size: 1rem;
	}
	
	.ficha-proyecto-info-value {
		font-size: 1.05rem;
	}
	
	.ficha-proyecto-materiales-lista li {
		font-size: 1.05rem;
	}
	
	/* Ajustes para la galería en 768px */
	.ficha-proyecto-galeria {
		margin: 40px 0 0 0;
		gap: 12px;
	}
	
	/* Ajustes para botones en 768px */
	.ficha-proyecto-botones {
		margin-top: 32px;
	}
	
	/* Ajustes para compartir en 768px */
	.ficha-proyecto-compartir {
		margin: 40px 0 80px 0;
	}
	
	.ficha-proyecto-compartir p {
		font-size: 16px;
		margin-bottom: 16px;
	}
}

@media (max-width: 640px) {
	.ficha-proyecto-galeria-modal .modal-download-center{
		bottom: 80px;
	}
	.ficha-proyecto-galeria-modal .modal-image-main .modal-image-title{
		font-size: 12px;
	}

	.ficha-proyecto-galeria-modal .modal-image-main .modal-image-title {
		  margin-top: 15px;
	}
	
	/* Aumentar tamaño de la imagen principal */
	.ficha-proyecto-galeria-modal .modal-image-main .modal-image {
		max-width: 90vw;
		max-height: calc(70vh - 40px);
	}
	
	.ficha-proyecto-galeria-modal .modal-image-wrapper {
		max-width: 90vw;
		max-height: calc(70vh - 40px);
	}
}


@media (min-width: 600px) and (max-width: 800px) {

		.carousel__proyectos .slick-list .slick-slide {
			min-width: 250px; 
		}
		
		.carousel__proyectos .slick-track {
			display: flex !important;
		}
		

		.carousel__proyectos .slick-slide {
			flex: 0 0 auto;
		}

  }

  @media only screen and (max-width: 801px) {

	.carousel__proyectos {
		padding-right: 70px;
	}

	.carousel__proyectos::before {
		left: 20px;
	}

	.carousel__proyectos::after {
		right: 20px;
	}

    .carousel__proyectos .slick-slide:nth-child(1) {
        margin-left: 55px !important;
    }

}

@media (max-width: 767px) {
	.carousel__proyectos .slick-slide:nth-child(1){
		margin-left:0px !important;
	}

	.carousel__proyectos {
		padding-right: 0px;
		padding-left: 50px;
	}	
}

@media only screen and (max-width: 460px) {
	.carousel__proyectos .slick-list {
		margin-right: 0px !important;
	}	

	.carousel__proyectos {
		padding-right: 50px;
		padding-left: 50px;
	}
}